AngularJS的ng-route模块为控制器和视图提供了[Deep-Linking]URL。 通俗来讲,ng-route模块中的$route
Service监测$location.url()
的变化,并将它映射到预先定义的控制器。也就是在客户端进行URL的路由。 下面首先给出$route
的使用示例,然后引入一个更加强大的客户端路由框架ui-router。
Angular 路由
在APP中定义多个页面的控制器,并给出对应的模板。然后$routeProvider
进行配置,即可将URL映射到这些控制器和视图。 首先定义一个基本的Angular APP,并引入ngRoute
:
Angular
$route
Service在ngRoute
模块里。需要引入它对应的javascript文件,并在我们的APP里ngRoute
添加为模块依赖(如何添加模块依赖?)。
var app = angular.module('ngRouteExample', ['ngRoute'])
controller'MainController'function($scope) {
})
config($routeProvider$locationProvider{
$routeProvider
when'/users'{
templateUrl: 'user-list.html''UserListCtrl'
})
'/users/:username''user.html''UserCtrl'
});
// configure html5
html5Mode(true);
});
上述代码中,$routeProvider
定义了两个URL的映射:/users
使用user-list.html
作为模板,UserListCtrl
作为控制器;/users/:username
则会匹配类似/users/alice
之类的URL,稍后你会看到如何获得:username
匹配到的值。先看首页的模板:
HTML5Mode: 服务器端路由和客户端路由的URL以
#
分隔。例如/foo/bar#/users/alice
,Angular通过操作锚点来进行路由。 然而html5Mode(true)
将会去除#
,URL变成/foo/bar/users/alice
(这需要浏览器支持HTML5的,因为此时Angular通过pushState
来进行路由)。 此时服务器对所有的客户端路由的URL都需要返回首页(/foo/bar
)视图,再交给Angular路由到/foo/bar/users/alice
对应的视图。
注意到模板文件中有一个div[ng-view]
,子页面将会载入到这里。
路由参数
接着我们定义上述路由配置的子页面控制器和视图模板。用户列表页面: