写在前面
关于angularjs的路由的概念基本上这篇就要结束了,通过学习,以及在实际项目中的实践,还是比较容易上手的。自己也通过angularjs做了一个在app上的一个模块,效果还是可以的。
系列文章
[Angularjs]ng-select和ng-options
路由模式
不同的路由模式在浏览器的地址栏中会以不同的URL格式呈现。$location服务默认会使用标签模式来进行路由。路由模式决定你的站点的URL长成什么样子。
标签模式
标签(hashbang)是angularjs用来同你的应用内部进行链接的技巧。标签模式是HTML5模式的降级方案,URL路径会以#符号开头。标签模式不需要重写<a href=''></a>标签,也不需要任何服务器端的支持。如果没有进行额外的指定,AngularJS将默认使用标签模式。
使用标签模式的URL看起来是这样的:
http://yoursite.com/#!/inbox/all
如果要显示指定配置并使用标签模式,需要在应用模块的config函数中进行配置:
angular.module('app',['ngRoute'])
.config(['$locationProvider',function($locationProvider){
$locationProvider.html5Mode(false);
}]);
我们还可以配置hashPrefix,也就是标签模式下标签默认的前缀!符号。这个前缀也是angularjs在比较老的浏览器中降级机制的一部分。这个符号是可以配置的:
angular.module('app',['ngRoute'])
.config(['$locationProvider',function($locationProvider){
$locationProvider.html5Mode(false);
$locationProvider.hashPrefix('!');
}]);
Html5模式
angularjs支持的另外一种路由模式是html5模式。在这个模式中,URL看起来和普通的URL一样(在老式浏览器中看起来还是使用标签的url)。例如,同意的路由在HTML5模式中看起来是这样的:
http://yoursite.com/inbox/all
在angularjs内部,$location服务通过html5历史api让应用能够使用普通的URL路径来路由。当浏览器不支持HTML5历史api时,$location服务会自动使用标签模式的URL作为替代方案。
$location服务还有一个有趣的功能,当一个支持html5历史api的现代浏览器加载了一个带标签的URL时,它会为用户重写这个URL。
在HTML5模式中,angularjs会负责重写<a href=''></a>中的链接。也就是说angularjs会根据浏览器能力在编译时决定是否重写href=''中的链接。
例如<a href='/person/42?all=true'>Person</a>这个标签,在老式浏览器中会被重写成标签模式的URL:/index.html#!/person/42?all=true。但在现代浏览器中会保持本来的样子。
后端服务器也需要支持URL重写,服务器需要确保所有请求都返回index.html。以支持html5模式。这样才能确保由angularjs应用来处理路由。
当html5模式的angularjs中写链接时,永远都不要使用相对路径。如果你的应用是在根路径中加载的,这不会有什么问题,但在其他路径中,angularjs应用就无法正确处理路由了。另一个选择是在HTML文档的head中用<base>标签来指定应用的基础URL:
<base href='/base/url'/>
路由事件
$route服务在路由过程中的每个阶段都会触发不同的事件,可以为这些不同的路由事件设置监听器并做出响应。
这个功能对于控制不同的路由时间,以及探测用户的登录和授权状态等场景是非常有用的。
我们需要给路由设置事件监听器,用$rootScope来监听这些事件。
$routeChangeStart
angularjs在路由变化之前会广播$routeChangeStart事件。在这一步中,路由服务会开始加载路由变化所需要的所有依赖,并且模板和resolve键中的promise也会被resolve。
angular.module('myapp',[])
.run(['$rootScope','$location',function($rootScope,$location){
$rootScope.$on('$routeChangeStart',fucntion(evt,next,current){
});
}]);
$routeChangeStart事件带有两个参数:
将要导航到的下一个URL.
路由变化前的URL。
$routeChangeSuccess
angularjs会在路由的依赖被加载后广播$routeChangeSuccess事件。
angular.module('myapp',[])
.run(['$rootScope','$location',function($rootScope,$location){
$rootScope.$on('$routeChangeSuccess',fucntion(evt,next,current){
});
}]);
$routeChangeSuccess有三个参数
原始的Angularjs evt对象。
用户当前所处的路由。
上一个路由(如果当前是第一个路由,则为undefined)。
$routeChangeError
angularjs会在任何一个promise被拒绝或者失败时广播$routeChangeError事件。
angular.module('myapp',[])
.run(['$rootScope','$location',function($rootScope,$location){
$rootScope.$on('$routeChangeError',fucntion(current,previous,rejection){
});
}]);
$routeChangeError事件有三个参数
当前路由信息。
上一个路由信息。
被拒绝的promise的错误信息。
$routeUpdate
angularjs在reloadOnSearch属性被设置为false的情况下,重新使用某个控制器的示例时,会广播$routeUpdate事件。
总结
在实际项目中,还没有用过,现将理论放在这里,用到了再总结吧。
本文来自
Angularjs权威教程