Angular入门 05: 路由系统

一、路由系统

路由：允许我们通过不同的 URL 访问不同的内容。简单理解：根据不同的url展示不同的页面。

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

1.1 ng-router路由模块

准备： angular.js angular-router.js
1、加入实现路由的 js 文件：angular-route.min.js。

    <script src="libs/angular.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="libs/angular-route.min.js" type="text/javascript" charset="utf-8"></script>

2、包含了 ngRoute 模块作为主应用模块的“依赖模块”。

var app = angular.module("app",["ngRoute"]);

3、使用 ngView 指令。
ng-view指令和路由组合到一起，指定当前路由所对应的模板在DOM中的渲染位置。

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

var app = angular.module("app",["ngRoute"]);
     //这里就是依赖注入的写法。优点：优化参数项对应，防止压缩代码时混淆导致的参数不一致。
        app.config(["$routeProvider",function($routeProvider){   
        //链式操作。
            $routeProvider
                .when("/",{template : document.getElementById("loginTemplate").innerHTML})
                .when("/reg",{template : document.getElementById("regTemplate").innerHTML})
                                        .otherwise({redirectTo:"/"})  //如果地址不存在就重定向到首页
//otherwise：缺省配置，如果地址找不到，那么就执行（）内的代码。这里是重定向到根目录
            }]);

1.2 路由配置对象

AngularJS 路由也可以通过不同的模板来实现。
$routeProvider.when 函数的第一个参数是 URL 或者 URL 正则规则，第二个参数为路由配置对象。

$routeProvider.when(url, {
            template: string,
            templateUrl: string,         //外部模板地址
            controller: string, function 或 array, //对应当前页面或当前页面引入的js文件的控制器。
            controllerAs: string,
            redirectTo: string, function,
            resolve: object<key, function>
    });

参数说明：
1）、template:如果我们只需要在 ng-view 中插入简单的 HTML 内容，则使用该参数：

.when('/computers',{template:'<h1>文本内容</h1>'});

2）、templateUrl:如果我们只需要在 ng-view 中插入 HTML 模板文件，则使用该参数：

$routeProvider.when('/computers', {
            templateUrl: 'views/computers.html',
        });

以上代码会从服务端获取 views/computers.html 文件内容插入到 ng-view 中。

3）、controller: function、string或数组类型，在当前模板上执行的controller函数，生成新的scope。  

4）、controllerAs:string类型，为controller指定别名。

5）、redirectTo:重定向的地址。

6）、resolve:指定当前controller所依赖的其他模块。

1.3 路由参数

 路由参数的前面加上:paramName或者通过?param=value,AngularJS就会把它解析出来并传递给$routeParams。
：paramName  ——req.params
？param=value——req.query        联想node的路由。
app.controller('Controller', function($scope,$routeParams) {
    //访问$routeParams

});

二、ui-router路由模块

AngularUI库提供的最有用的库之一便是ui-router。它是一个路由框架，允许你通过状态机组织接口，而不是简单的URL路由。 （状态机：就像哈希地址一样，它是基于状态的
ui-router的作用：可以实现深层路由嵌套

2.1、简单使用

1）、定义地址
ui-sref: 为a标签，添加一个“ui-sref”属性，用来查找；
ui-view：路由对应页面显示的位置

<div class="container" ng-controller="myCtrl">
        <a ui-sref=".home">world</a>
        <a ui-sref=".one">hello</a>
    </div>

2）、指定显示位置 ui-view ——对应上面的ng-view
3）、配置路由

这里的.state 就类似于之前的.when ，里面两个参数：1、状态名称，和ui-sref：对应的名字 sref——state，ref:refference 映射，引用； 2、一个｛｝对象，里面的url对应真正访问的地址；template：

$urlRouterProvider.otherwise(“/”) ：定义一个当请求的路径无效时跳转的路径。定义缺省配置，类似于上一个方法中的 .otherwise()