Ⅲ.AngularJS的点点滴滴-- 路由
路由ngRoute (需要依赖ngRoute模块)
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular-route.js"></script>
<div ng-view></div>
<script type="text/ng-template" id="scripttemplae">
scripttemplae value:{{value}}
</script>
<script>
angular.module('app.ui', []).run(["$templateCache",
function($templateCache) {
$templateCache.put("template/index.html",
'<div><input type="text" ng-model="id">\
<a href="/TEST/{{id}}.html">TEST/{{id}}.html</a>\
<a href="/test/{{id}}.xml">test/{{id}}.xml</a>\
<a href="/test/{{id}}.json?a=test">test/{{id}}.json?a=test</a>\
<a href="/test/{{id}}.css">test/{{id}}.css</a>\
</div>');
}]);
angular.module('app.route', ['ngRoute'])
.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.when('/test/:id.xml', {
templateUrl: 'scripttemplae',
controllerAs:'a',
controller: 'detail',
}).when('/test/:id.html', {
template: 'id:{{value}}',
controller: 'detail',
resolve: {
idfilter: function($q, $route) {
if ($route.current.params.id.length < 2) {
document.write('请输入长度大于2的字符串\
<a href="/a.html">返回</a>');
return $q.reject('sds');
}
$route.current.params.id+="add";
}
},
caseInsensitiveMatch: true,
reloadOnSearch: true
}).when('/test/:id.css', {
template: function(obj) {
return "id:" + obj.id;
},
controller: 'a',
}).when('/test/:id.json', {
redirectTo: function(obj, path, search) {
alert(search.a);
return '/test/' + obj.id + '.html';
}
}).otherwise({
templateUrl: 'template/index.html',
controller: function($scope) {
$scope.id = 2;
}
});
$locationProvider.html5Mode(true);
}]);
angular.module('app', ['app.route', 'app.ui'])
.controller('detail',
function($scope, $route, $routeParams) {
if ($routeParams.id == $route.current.params.id) {
$scope.value = $routeParams.id;
}
});
angular.bootstrap(document, ['app']);
</script>
</html>上面基本上已经包含设置路由的全部写法，页面上面必须有个ng-view指令,否则失效
- $locationProvider.html5Mode(true)是用来开启html5模式因为只有在html5的情况下 才支持js改url地址,否则只能在后面加上#/test/a却不能改变地址
- templateUrl可以是url的地址,或者是$templateCache的key,或者是script标签的id, 如果是方法返回的也是地址字符串
- controller可以是一个控制器名称或者一个方法
- controllerAs设置控制器的别名
- template可以是是模板字符串,或者一个方法返回模板字符串,方法的参数为$routeParams
- redirectTo这个参数是跳转到其他的路由
- resolve可以在进入控制器前对参数进行修改或者判断(当调用$q.reject时就不会进入控制器)
- caseInsensitiveMatch设置路由的是否大小写不敏感，默认为敏感
- reloadOnSearch 判断当前location.hash和location.search改变是否重新更新路由,即地址栏上面是否有#test或者?a=test的改变，默认是重新更新路由
- 在控制器中可以或者$route和$routeParams,其中$route.current.params和$routeParams一样,$route还包含很多当前路由的信息
- otherwise是当没有匹配的路由时候成立
其中路由的地址的匹配有三种/:id,/:id**,/:id?规则?和也就是正则的规范
- 下一篇：Ⅳ.AngularJS的点点滴滴-- 服务
- 上一篇：Ⅱ.AngularJS的点点滴滴--缓存
- 本文链接地址：Ⅲ.AngularJS的点点滴滴-- 路由