你学习一个新的框架都会有一个理由,我学习angular的理由就是因为angular的路由功能,只能说,开发angular的大神太溜了~~~
下面,开始介绍我对ngRoute的使用心得
ngRoute不属于angular的核心库,需要将ngRoute模块额外的引入
<script src="angular-route.js" ></script>
然后用ng-view指定范围
<div ng-view></div>
路由将会更新此区域
然后在主模块中引入ngRoute模块
var myModule = angular.module("myModule",["ngRoute"]);
准备工作已经完成,使用config模块中的$routeProvider内置服务调用路由
例子:
myModule.config(function($routeProvider){
$.when("/index",{
templateUrl:"tpls/index.html",
controller:"indexCtrl"
}).when("/list",{
templateUrl:"tpls/list.html",
controller:"listCtrl"
}).otherwise({
redirectTo:"/index"
});
});
$routeProvider$routeProvider是一个用于配置路由的内置服务。由于它是一个服务,根据service的使用建议,我们主要将其当做为工具来使用,所以我们一般直接使用$routeProvider.XXX来调用它的成员方法来实现一定的功能,而不是实例化一个$routeProvider的实例。它主要有以下两个成员函数:
otherwise(params):设定映射信息到$route.current,一般用于指定没有标明的路由如何处理。
when(path, route):向$route服务添加新的路由。path是指定的URL路径,route标明路由的处理。
$routeProvider.when(path, route)中的路由处理参数对象,常用的有如下的属性:
controller:用于指向用于路由处理的控制器。
template:用于指向用于路由的视图模板。
redirectTo:重定向。(使用$location)
不常用属性:
controllerAs:控制器别名,一旦设定,在视图中的scope就得使用这个别名来调用控制器。
templateUrl
resolve
$route用于将控制器与视图相连。它观察$location.url(),并且尝试映射路径到一个已经存在的路由定义中。它依赖$location、$routeParams。它主要有如下成员函数:
reload() 用于重新加载当前的路由,哪怕$location没有改变。调用后,ngView将创建新的Scope等。
它主要有如下事件:
$routeChangeStart:路由改变之前触发;
$routeChangeSuccess:路由改变之后触发;
$routeChangeError:路由改变出错触发;
$routeParams
$routeParams允许你检索当前路由的参数。主要使用$location的search()与path()方法。
本文参考至:https://my.oschina.net/u/1582119/blog/307083