AngularJS学习笔记四 路由机制

1.路由机制就是在每个视图和URL之间建立映射关系，当通过AngularJS路由API访问URL时，页面中能够加载对应的视图内容。

2.使用$toorProvide对象创建路由映射，该对象有以下两个方法：

方法一：when(path,route)

     path:string类型，路由路径，和$location.path相对应；

    route：Object类型，用于配置映射信息。有几个属性如下：controller用于指定控制器名称或者控制器构造方法；templateUrl：用于指定视图模板文件路径；resolve：用于指定注入控制器中的内容。

方法二：otherwise（params）：用于匹配路由中未定义的URL；

3.AngularJS的路由模块作为一个单独的模块，模块名称为ngRoute。如果在自定义的模块中使用它，需要添加ngRoute模块依赖。该模块定义在angular-route.js文件中，使用时需要引入该文件。

4.ng-view是AngularJS的一个内置指令，用于定义一个视口，提供也页面模板的挂载点。

5.通过URL向控制器传递参数

    在路由定义时，我们可以在URL中增加一个参数，用冒号隔开。例如/showHTML/:参数；

    为了获取URL中传递的参数，需要在控制器中注入$routeParams服务，通过$routeParams.参数访问传递的参数。

6.ng-template指令的使用

    通过script标签和ng-template指令定义视图模板，并且设置id属性。在路由的定义中，将templateUrl设置为script标签的id属性值即可。<script type="text/ng-template" id="idvalue">something</scritp>

7.$location服务

    $location服务是AngularJS和浏览器地址栏URL相关的一个内置服务。始终和浏览器地址栏URL保持同步状态。浏览器地址栏发生变化时，$location服务会实时更新。

    $location.search（）：获取URL请求参数，只需调用无参数的search（）方法。可以向该方法传递一个JavaScript对象来设置URL请求参数。

    $location.hash（）：用于获取或设置URL的hash部分。无参数时用来获取参数，有参数时用于设置相应的参数。

    $location.path（）：改变浏览器地址栏的URL。无参数时，用于获取URL；有参数时用于设置URL。

    注意：当带参数时，以上三个方法都会返回$location。

8.路由事件

    与$location相关的事件：$locationChangeStart; $locationChangeSuccess;

    与$route相关的事件：$routeChangeStart; $route.ChangeSuccess; $routeChangeError;

9.ng-include指令

    <div ng-include="'./test.html'"><div>

    <ng-include src="'./test.html'"></ng-include>

    注意：在HTML规范中，目前还不支持HTML包含文件功能。

10.AngularJS路由是开发单页面应用（SPA）必须掌握的知识。

11.UI Router框架的使用

    ngRoute模块有一些局限性，多个视图之间不能进行嵌套；

    UI Route是一个基于AngularJS的、用于编写单页面应用的路由框架，支持多视图嵌套和多个命名视图。