ngRoute

• 指令(Directive)
• ngView
• 供应者(Provider)
• $routeProvider
• 服务(service)
• $routeParams
• $route

AngularJS是一套前端的MVC框架。那么，为了实现视图的中转，肯定会涉及到路由的概念。ngRoute即是AngularJS的路由模块。

ngRoute是一个AngularJS的模块。其不是在AngularJS的核心库当中。

在使用ngRoute的时候，实际上，我们是在应用的主模块中引入ngRoute模块并添加$routeProvider服务到主模块的config方法中来达到我们的目标。这与其他一些库的使用方式是类似的，如ng-grid。

在ngRoute中，主要有$route、$routeProvider、$routeParams三个服务项目。

$routeProvider用于在主应用主模块的配置方法中。$route与$routeParams一般常见于控制器中。

---

安装

使用Google CDN

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

使用Bower

bower install angular-route@X.Y.Z

使用官方CDN

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

---

使用

在HTML中引入ngRoute

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

在应用主模块中，引入ngRoute

myApp = angular.module('app', ['ngRoute']);

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

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

myApp.config(configFn);

---

模块组件

指令

名称	描述
ngView	提供不同路由模板插入的视图层

供应者

名称	描述
$routeProvider	提供路由配置

服务

名称	描述
$routeParams	解析返回路由中带有的参数
$route	用于构建各个路由的url、view、controller这三者的关系