1. controller
controller:
‘MyController‘
// 或者
controller: function($scope)
{}
如果配置对象中设置了controller属性,那么这个指定的控制器会与路由所创建的新作用
域关联在一起。如果参数值是字符型,会在模块中所有注册过的控制器中查找对应的内容,然后
与路由关联在一起。如果参数值是函数型,这个函数会作为模板中DOM元素的控制器并与模板
进行关联。
2. template
template:
‘<div><h2>Route</h2></div>‘
AngularJS会将配置对象中的HTML模板渲染到对应的具有ng-view指令的DOM元素中。
3. templateUrl
templateUrl:
‘views/template_name.html‘
应用会根据templateUrl
属性所指定的路径通过XHR读取视图(或者从$templateCache中读
取)。如果能够找到并读取这个模板,
AngularJS会将模板的内容渲染到具有ng-view指令的DOM
元素中。
4. resolve
resolve: {
‘data‘: [‘$http‘, function($http)
{
return
$http.get(‘/api‘).then(
function success(resp) { return
response.data; },
function error(reason) { return
false; }
);
}];
}
如果设置了resolve属性,
AngularJS会将列表中的元素都注入到控制器中。如果这些依赖是
promise对象,它们在控制器加载以及$routeChangeSuccess被触发之前,会被resolve并设置成一
个值。
列表对象可以是:
? 键,键值是会被注入到控制器中的依赖的名字;
?
工厂,即可以是一个服务的名字,也可以是一个返回值,它是会被注入到控制器中的函
数或可以被resolve的promise对象。
在上面的例子中,
resolve会发送一个$http请求,并将data的值替换为返回结果的值。列
表中的键data会被注入到控制器中,所以在控制器中可以使用它。
5. redirectTo
redirectTo: ‘/home‘
// 或者
redirectTo:
function(route,path,search)
如果redirectTo属性的值是一个字符串,那么路径会被替换成这个值,并根据这个目标路
径触发路由变化。
如果redirectTo属性的值是一个函数,那么路径会被替换成函数的返回值,并根据这个目
标路径触发路由变化。
如果redirectTo属性的值是一个函数,
AngularJS会在调用它时传入下面三个参数中:
(1) 从当前路径中提取出的路由参数;
(2) 当前路径;
(3) 当前URL中的查询串。
6. reloadOnSearch
如果reloadOnSearch选项被设置为true(默认),当$location.search() 发生变化时会重新
加载路由。如果设置为false,那么当URL中的查询串部分发生变化时就不会重新加载路由。这
个小窍门对路由嵌套和原地分页等需求非常有用。
现在介绍用when函数来设置路由。
下面的例子中设置了两个路由:一个首页路由和一个收件箱路由,同时首页路由被设置成默
认路由。
angular.module(‘MyApp‘,
[]).
config([‘$routeProvider‘,
function($routeProvider) {
$routeProvider
.when(‘/‘, {
controller:
‘HomeController‘,
templateUrl:
‘views/home.html‘
})
.when(‘/inbox/:name‘, {
controller:
‘InboxController‘,
templateUrl:
‘views/inbox.html‘
})
.otherwise({redirectTo:
‘/‘});
}]);
如上,我们已经用when方法设置了两个路由。
otherwise方法会在没有任何路由匹配时被调
用,我们用它设置了一个默认跳转到‘/‘路径的路由。
当浏览器加载AngularJS应用时,会将URL设置成默认路由所指向的路径。除非我们在浏览
器中加载不同的URL,否则默认会使用/路由。