一般来说，我们认为AngularJS是一套前端的MVC框架。那么，为了实现视图的中转，肯定会涉及到路由的概念。这里我们就来说说有关AngularJS的路由——ngRoute。
序
个人了解到AngularJS，是由于在寻找可以动态利用Ajax从服务器端取得部分页面这一功能而找到EmberJS，而后又根据EmberJS找到的AngularJS。而在AngularJS中，实现这一功能的，就是ngRoute。
所以，个人与AngularJS的结缘，是由于ngRoute一点也不为过。
理解
AngularJS的基础是其模块机制。在模块的基础上，我们可以利用JavaScript的一些特性来做我们想做的任何的事情。
ngRoute是一个AngularJS的模块。其不是在AngularJS的核心库当中。
在使用ngRoute的时候，实际上，我们是在应用的主模块中引入ngRoute模块并添加$routeProvider服务到主模块的config方法中来达到我们的目标。这与其他一些库的使用方式是类似的，如ng-grid。
在ngRoute中，主要有$route、$routeProvider、$routeParams三个服务项目。
$routeProvider用于在主应用主模块的配置方法中。$route与$routeParams一般常见于控制器中。
安装
- 使用Google CDN
1 | http://ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js |
- 使用Bower
由于国内网络环境的和谐，个人强烈建议使用此种方式！
1 | bower install angular-route@X.Y.Z |
- 使用官方CDN
1 | http://code.angularjs.org/X.Y.Z/angular-route.js |
使用
ngRoute并没有在AngularJS的核心包里面，所以在使用的时候，需要引入一个独立的库。
- 在HTML中引入ngRoute
1234 |
- 在应用主模块中，引入ngRoute
123 | myApp = angular.module(, []); |
- 在模块的config中绑定URL路径与控制器
12345678910111213141516 | configFn = $routeProvider. when(, { templateUrl: , controller: }). when(, { templateUrl: , controller: }). otherwise({ redirectTo: });};myApp.config(configFn); |
$routeProvider是一个用于配置路由的内置服务。由于它是一个服务，根据service的使用建议，我们主要将其当做为工具来使用，所以我们一般直接使用$routeProvider.XXX来调用它的成员方法来实现一定的功能，而不是实例化一个$routeProvider的实例。它主要有以下两个成员函数：
- otherwise(params)：设定映射信息到$route.current，一般用于指定没有标明的路由如何处理。
- when(path, route)：向$route服务添加新的路由。path是指定的URL路径，route标明路由的处理。
$routeProvider.when(path, route)中的路由处理参数对象，常用的有如下的属性：
- controller：用于指向用于路由处理的控制器。
- template：用于指向用于路由的视图模板。
- redirectTo：重定向。（使用$location）
不常用属性：
- controllerAs：控制器别名，一旦设定，在视图中的scope就得使用这个别名来调用控制器。
- templateUrl
- resolve
$route用于将控制器与视图相连。它观察$location.url()，并且尝试映射路径到一个已经存在的路由定义中。它依赖$location、$routeParams。它主要有如下成员函数：
- reload() 用于重新加载当前的路由，哪怕$location没有改变。调用后，ngView将创建新的Scope等。
它主要有如下事件：
- $routeChangeStart：路由改变之前触发；
- $routeChangeSuccess：路由改变之后触发；
- $routeChangeError：路由改变出错触发；
$routeParams允许你检索当前路由的参数。主要使用$location的search()与path()方法。