路由
实例:
<body ng-app="routeDemoApp">
<h1>AngularJS的路由</h1>
<ul>
<li><a href="#/">index</a></li>
<li><a href="#/firstPage">firstPage</a></li>
<li><a href="#/secondPage">secondPage</a></li>
<li><a href="#/footer">footer</a></li>
</ul>
<!--3.使用了ng-view,会使得该部分的内容随路由的转变而转变-->
<div ng-view></div>
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<!--1.实现载入路由的js文件-->
<script src="//apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
<script>
//2.ngRoute作为依赖模块
//4.routeProvider用来提供路由规则
//5.congfig提供了配置路由的功能
//6.when(path,object(路由设置对象))
angular.module('routeDemoApp',['ngRoute']).config(['$routeProvider',function($routeProvider){
$routeProvider
.when('/',{template:"这是首页"})
.when('/firstPage',{template:"这是第一页"})
.when('/secondPage',{template:"这是第二页"})
.when('/footer',{template:"这是尾页"})
}
]);
</script>
路由设置对象
$routeProvider.when(url,{路由配置对象});
路由配置对象:
tamplate:在ng-view中插入简单的HTML内容
.tamplateUrl:在ng-view中插入HTML模版(该模版会从tamplate指定的url的服务器上获取)
- controller:获取当前的controller
- controllerAs:为controller指定别名
- redirectTo:重定向地址
- resolve:指定controller依赖模块