当前位置:/AngularJS API/ngRoute/

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这三者的关系