[Angularjs]视图和路由（四）

写在前面

关于angularjs的路由的概念基本上这篇就要结束了，通过学习，以及在实际项目中的实践，还是比较容易上手的。自己也通过angularjs做了一个在app上的一个模块，效果还是可以的。

系列文章

[Angularjs]ng-select和ng-options

[Angularjs]ng-show和ng-hide

[Angularjs]视图和路由（一）

[Angularjs]视图和路由（二）

[Angularjs]视图和路由（三）

路由模式

不同的路由模式在浏览器的地址栏中会以不同的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权威教程