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的、用于编写单页面应用的路由框架,支持多视图嵌套和多个命名视图。