angularjs路由

来源：互联网发布：微信商城源码java 编辑：程序博客网时间：2024/05/01 00:44

我们为什么要用路由：

AJAX 请求不会留下 History 记录；
用户无法直接通过 URL 进入应用中的指定页面(保存书签、链接分享给朋友)；
AJAX 对 SEO 是个灾难；

前端路由的基本原理

哈希 #；（#号的意思是为了防止向后台提交数据.）
HTML5 中新的 history API
路由的核心是给应用定义 "状态"
使用路由机制会影响到应用的整体编码方式(需预先定义好状态)
考虑兼容性问题与 "优雅降级"

AngularJS 路由允许我们通过不同的 URL 访问不同的内容。

通过 AngularJS 可以实现多视图的单页Web应用（single page web application，SPA）。

通常我们的URL形式为 http://runoob.com/first/page，但在单页Web应用中 AngularJS 通过 # + 标记 实现，例如：

http://runoob.com/#/firsthttp://runoob.com/#/secondhttp://runoob.com/#/third

<html>    <head>    <meta charset="utf-8">        <title>AngularJS 路由实例 - 菜鸟教程</title>    </head>    <body ng-app='routingDemoApp'>             <h2>AngularJS 路由应用</h2>        <ul>            <li><a href="#/">首页</a></li>            <li><a href="#/computers">电脑</a></li>            <li><a href="#/printers">打印机</a></li>            <li><a href="#/blabla">其他</a></li>        </ul>                 <div ng-view></div>        <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>        <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>        <script>            angular.module('routingDemoApp',['ngRoute'])            .config(['$routeProvider', function($routeProvider){                $routeProvider                .when('/',{template:'这是首页页面'})                .when('/computers',{template:'这是电脑分类页面'})                .when('/printers',{template:'这是打印机页面'})                .otherwise({redirectTo:'/'});            }]);        </script>              </body></html>

实例解析：

1、载入了实现路由的 js 文件：angular-route.js。
2、包含了 ngRoute 模块作为主应用模块的依赖模块。
```
angular.module('routingDemoApp',['ngRoute'])
```
3、使用 ngView 指令。
```
<div ng-view></div>
```
该 div 内的 HTML 内容会根据路由的变化而变化。

4、配置 $routeProvider，AngularJS $routeProvider 用来定义路由规则。

module.config(['$routeProvider', function($routeProvider){    $routeProvider        .when('/',{template:'这是首页页面'})        .when('/computers',{template:'这是电脑分类页面'})        .when('/printers',{template:'这是打印机页面'})        .otherwise({redirectTo:'/'});}]);

路由设置对象:

参数说明：

template:
如果我们只需要在 ng-view 中插入简单的 HTML 内容，则使用该参数：
```
.when('/computers',{template:'这是电脑分类页面'})
```
templateUrl:
如果我们只需要在 ng-view 中插入 HTML 模板文件，则使用该参数：
```
$routeProvider.when('/computers', {    templateUrl: 'views/computers.html',});
```
以上代码会从服务端获取 views/computers.html 文件内容插入到 ng-view 中。
controller:
function、string或数组类型，在当前模板上执行的controller函数，生成新的scope。
controllerAs:
string类型，为controller指定别名。
redirectTo:
重定向的地址。
resolve:
指定当前controller所依赖的其他模块。

AngularJS 嵌套路由：（ui-router：为angualr扩展的第三方库，可以实现复杂的路由嵌套）
基于我们的业务需求，需要有不同类型的导航, 一般像那种从一个页面到另外一个页面的导航非常的普通。
但请想象一下在某些情况下，你需要在一个主页中有tab页或者菜单可以点击打开相应的页面.
（1）设置触发器：如果在标签中添加了 ui-sref="xxx"，未激活状态时，它是看不到的。
ui-sref 指令链接到特定状态

<a ui-sref="home">Home</a><a ui-sref="about">About</a><a ui-sref="contacts.list">Contacts</a>

ui-sref-active 查看当前激活状态并设置 `Class`

<li ui-sref-active="active"><a ui-sref="about">About</a></li>

（2）配置路由

首先是 $urlRouterProvider，它通常用来配置非 $state 的额外的路由.例如：
$urlRouterProvider.when("","/home"); 将默认页设置成了/home，而非$state.

当然也可以写一个任何额外页面的定向：$urlRouterProvider.otherwise("/home");

然后是 $stateProvider

触发点是按层级来的，它遵守的路由规则可以从官网的，这个页面中找到。通过 $state.Go 函数可以将状态位置强行切换，

$state.go('home.state1');

你也可以在$stateProvider 中对应的state里面配置controller，当这种state被激活，就会调用对应的函数了

controller: function($scope, $state) {
$scope.backToPrevious = function() {
window.history.back();
}}

ui-view
==没有名称的ui-view
<div ui-view></div>
$stateProvider.state("home",{
template: "<h1>hi</h1>"
})
$stateProvider.state("home"{
views: {
"": {
template: "<h1>hi</h1>"
}
}
})
==有名称的ui-view
<div ui-view="main"></div>
$stateProvider.state("home",{
views: {
"main" : {
template: "<h1>hi</h1>"
}
}
})
==多个ui-view
<div ui-view></div>
<div ui-view="data"></div>
$stateProvider.state("home",{
views: {
"":{template: "<h1>hi</h1>"},
"data": {template: "<div>data</div>"}
}
})

0 0

angularjs路由

前端路由的基本原理

路由设置对象:

（1）设置触发器：如果在标签中添加了 ui-sref="xxx"，未激活状态时，它是看不到的。

ui-sref-active 查看当前激活状态并设置 Class

首先是 $urlRouterProvider， 它通常用来配置非 $state 的额外的路由.例如：

$urlRouterProvider.when("","/home"); 将默认页设置成了/home，而非$state.

然后是 $stateProvider

（1）设置触发器：如果在标签中添加了 `ui-sref="xxx"`，未激活状态时，它是看不到的。

ui-sref-active 查看当前激活状态并设置 `Class`

首先是 $urlRouterProvider，它通常用来配置非 $state 的额外的路由.例如：