理解AngularJS ngRoute

一般来说，我们认为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一般常见于控制器中。

安装

1. 使用Google CDN

1

http://ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js

1. 使用Bower

由于国内网络环境的和谐，个人强烈建议使用此种方式！

1

bower install [email protected]

1. 使用官方CDN

1

http://code.angularjs.org/X.Y.Z/angular-route.js

使用

ngRoute并没有在AngularJS的核心包里面，所以在使用的时候，需要引入一个独立的库。

1. 在HTML中引入ngRoute

1
2
3
4

<!-- index.html --><script src="angular.js" /><script src="angular-route.js" />

1. 在应用主模块中，引入ngRoute

1
2
3

 myApp = angular.module(, []);

1. 在模块的config中绑定URL路径与控制器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

 configFn = 
    $routeProvider.
      when(, {
        templateUrl: ,
        controller: 
      }).
      when(, {
        templateUrl: ,
        controller: 
      }).
      otherwise({
        redirectTo: 
      });
};

myApp.config(configFn);

$routeProvider

$routeProvider是一个用于配置路由的内置服务。由于它是一个服务，根据service的使用建议，我们主要将其当做为工具来使用，所以我们一般直接使用$routeProvider.XXX来调用它的成员方法来实现一定的功能，而不是实例化一个$routeProvider的实例。它主要有以下两个成员函数：

1. otherwise(params)：设定映射信息到$route.current，一般用于指定没有标明的路由如何处理。
2. when(path, route)：向$route服务添加新的路由。path是指定的URL路径，route标明路由的处理。

$routeProvider.when(path, route)中的路由处理参数对象，常用的有如下的属性：

• controller：用于指向用于路由处理的控制器。
• template：用于指向用于路由的视图模板。
• redirectTo：重定向。（使用$location）

不常用属性：

• controllerAs：控制器别名，一旦设定，在视图中的scope就得使用这个别名来调用控制器。
• templateUrl
• resolve

$route

$route用于将控制器与视图相连。它观察$location.url()，并且尝试映射路径到一个已经存在的路由定义中。它依赖$location、$routeParams。它主要有如下成员函数：

• reload() 用于重新加载当前的路由，哪怕$location没有改变。调用后，ngView将创建新的Scope等。

它主要有如下事件：

• $routeChangeStart：路由改变之前触发；
• $routeChangeSuccess：路由改变之后触发；
• $routeChangeError：路由改变出错触发；

$routeParams

$routeParams允许你检索当前路由的参数。主要使用$location的search()与path()方法。

参考

• http://docs.angularjs.org/tutorial/step_07
• http://docs.angularjs.org/api/ngRoute
• http://docs.angularjs.org/api/ngRoute.$route
• http://docs.angularjs.org/api/ngRoute.$routeParams
• http://docs.angularjs.org/api/ngRoute.$routeProvider