标签:
野兽的ng api学习 -- ngRoute
ngRoute
$routeProvider
配置路由的时候使用。
方法:
when(path,route);
在$route服务里添加一个新的路由。
path:该路由的路径。
route:路由映射信息。
controller:字符串或函数,指定控制器。
controllerAs:一个用于控制器的标识符名称。。
template:字符串或函数,html模板。
templateUrl:字符串或函数,html模板的地址。
resolve:对象,一个可选的映射的依赖关系,应注入控制器。
redirecTo:字符串或者函数,URL重定向。
otherwise(params);
设置在没有其他路由定义被匹配时,将使用的默认路由。
ngView
路由配置的页面在HTML的view里的显示的视图区域。
$route
用于在js里对路由的操作。
依赖:$location $routeProvider
方法:
reload();
使路由服务重新加载当前路由,即使路由没有改变。
updateParams(newParams);
操作路由服务更新当前的URL,使用newParams里指定的路由参数指定当前路由参数。
newParams:将URL参数名称映射到value。
事件:
$routeChangeStart
URL路由开始变化(未跳转成功)的时候触发的事件。
$routeChangeSuccess
URL路由变化成功的时候触发的事件。
$routeChangeError
URL路由变化失败的时候触发的事件。
$routeUpdate
当承诺被拒绝时广播。
$routeParams
$routeParams服务运行检索当前路由的参数集。
ngRoute使用代码:
<div ng-app="Demo">
<a href="#/index/page1">page1</a> - <a href="#/index/page2">page2</a>
<div ng-view></div>
<script type="text/ng-template" id="page1.tpl">
this is page1.{{value}}
</script>
<script type="text/ng-template" id="page2.tpl">
this is page2.{{value}}
</script>
</div>
<script>
angular.module(‘Demo‘, [‘ngRoute‘])
.config(["$routeProvider",function($routeProvider){
$routeProvider.otherwise("/index/page1");
$routeProvider
.when("/index/page1",{
templateUrl:"page1.tpl",
controller:"demoCtrl1"
})
.when("/index/page2",{
templateUrl:"page2.tpl",
controller:"demoCtrl2"
});
}])
.controller("demoCtrl1",["$scope",function($scope){
$scope.value = "hello world";
}])
.controller("demoCtrl2",["$scope",function($scope){
$scope.value = "Hello World";
}])
</script>
这里直接使用了ng-template把两个模板写在一个页面,在实际使用中,可以把两个模板分开分别放到两个不同的html文件中,并且放到一个规定的文件中,这样可方便于管理。
野兽的Angular Api 学习、翻译及理解 - - ngRoute Angular自带的路由
标签:
原文地址:http://www.cnblogs.com/ys-ys/p/5017610.html