多重视图和路由
1. 布局模板
要创建一个布局模板,需要修改HTML以告诉AngularJs将模板渲染到何处,通过将ng-view 指令和路由组合到一起,我们可以精确的指定当前路由所对应的模板在DOM中的渲染位置。
<header>
<h1>header</h1>
</header>
<div class="content">
<div ng-view></div>
</div>
<footer>
<h5>footer</h5>
</footer>
ng-view 是由ngRoute模块提供的一个特殊指令,它的独特作用是在HTML中给$route对应的视图内容更占位。
ng-view指令遵循以下规则:
每次触发$routeChangeSuccess事件,视图都会更新。
如果某个模板同当前路由相关联,则:
A. 创建一个新的作用域
B. 移除上一个视图,同时移除上一个作用域
C. 将新的作用域同当前模板关联在一起
D. 如果路由中有相关的定义,则把对应的控制器同当前作用域关联起来
E. 触发$viewContentLoad事件
F. 如果提供了onLoad属性,则调用该属性所指定的函数。
2. 路由
用when和otherwise两个方法来定义应用的路由。
angular.module("myApp",[]). config(['$routeProvider',function($routeProvider){ //在这里定义路由 $routeProvider.when('/',{ templateUrl:'views/home.html', controller:'HomeController' }) }]);
// 接受两个参数:第一个参数为路径(这个路径会与$location.path进行匹配)
第二个参数为配置对象(决定了当第一个参数中的路由能够匹配时具体做什么)
//配置对象中可进行设置的属性包括controller、template、templateURL、resolve、redirectTo和reloadOnSearch
一个复杂的路由方案:
angular.module("myApp",[]). config(['$routeProvider',function($routeProvider){ $routeProvider.when('/',{ templateUrl:'views/home.html', controller:'HomeController' }).when('/login',{ templateUrl:'views/login.html', controller:'LoginController' }).when('/dashboard',{ templateUrl:'views/dashboard.html', controller:'DashboardController', resolve:{ user:function(SessionService){ return SessionService.getCurrentUser(); } } }).otherwise( redirectTo: '/' ); }]);
3. $location服务
$location服务没有刷新整个页面的能力,若需刷新整个页面,则需使用$window.location对象。
location.path() //返回当前路径
location.path(“/home”).replace() //跳转之后不能返回
4. 路由模式
不同的路由模式在浏览器的地址栏中会以不同的URL格式呈现。
标签模式:
标签(hashbang)是AngularJs用来同你的应用内部进行链接的技巧。(若没有进行额外的指定, Angular将默认使用标签模式)
使用标签模式的URL看起来是这个样子的:
http://yoursite.com/#!/inbox/all
angular.module("myApp",[]). config(['$locationProvider',function($locationProvider){ //显示指定配置并使用标签模式 $locationProvider.html5Mode(false); $locationProvider.hashPrefix('!'); }]);
HTML5模式:
使用HTML5模式的URL看起来是这个样子的:
注意:当在HTML5模式下的angulaJS中写链接时,永远都不要使用相对路径。
5. 路由事件:
$route服务在路由过程中的每个阶段都会触发不同的事件,可以为这些不同的路由事件设置监听器并作出响应。
A. $routeChangeStart
angularJS在路由变化之前都会传播$routeChangeStart事件(在这一步中,路由服务会开始加载路由变化 所需要的所有依赖)
B. $routeChangeSuccess
C. AngularJS会在路由的依赖被加载后传播$routeChangeSuccess
angular.module('myApp',[]).run(['$rootScope','$location',function($rootScope,$location){ $rootScope.$on('$routeChangeSuccess',function(evt,next,previous){ //接收三个参数:原始的angularJS的evt对象;用户当前所处的路由;上一个路由 }); }]);