标签：
ngRoute 模块中包含以下内容，
| 名称 | 所属 | 作用 |
|---|---|---|
ngView |
DIRECTIVE | 提供不同路由模板插入的视图层 |
$routeProvider |
PROVIDER | 提供路由配置 |
$route |
SERVICE | 用于构建各个路由的url、view、controller这三者的关系 |
$routeParams |
SERVICE | 解析返回路由中带有的参数 |
ngView 定义一个路由模板的视图层。不同路由对应的模板将会插入到这个 ngView 所在的dom元素下。$routeProvider 进行路由配置，包括每一个路由对应的url，template以及controller。除了这些基本的配置之外，还会有一些额外的配置，比如 resolve 配置等。$routeParams 服务来获取路由url上的参数；还可以通过 $rootScope 来监控 $routeChangeStart 和 $routeChangeSuccess 事件。<body ng-app="demo001" ng-controller="Demo"> <h1>Angular Route Demo</h1> <hr> <div> <a href="#/home">home</a> <a href="#/post">post</a> <a href="#/about">about</a> </div> <hr> <div ng-view></div> </body>
angular.module(‘demo001‘, [‘ngRoute‘]) .config([ ‘$routeProvider‘, function ($routeProvider) { $routeProvider .when(‘/home‘, { templateUrl: ‘home.html‘, controller: ‘HomeController‘ }) .when(‘/post‘, { templateUrl: ‘post.html‘, controller: ‘PostController‘ }) .when(‘/about‘, { templateUrl: ‘about.html‘, controller: ‘AboutController‘ }) .otherwise(‘/home‘) } ])
调用 $routeProvider.when 来配置不同路由的具体信息。 $routeProvider.when 方法接受2个参数，第一个是路由的url。第二个路由的具体配置，包括对应的模板地址，控制器名称等.$routeProvider.otherwise 可以用于设置默认路由地址。简单来说就是将未设置的url自动重定向到此url。
路由参数
angular.module(‘Module.Post‘, [‘ngRoute‘]) .config([ ‘$routeProvider‘, function ($routerProvider) { $routerProvider .when(‘/post‘, { templateUrl: ‘post.html‘, controller: ‘PostController‘ }) .when(‘/post/:postId‘, { templateUrl: ‘post-id.html‘, controller: ‘PostIdController‘ }) } ]) .controller(‘PostController‘, [ ‘$scope‘, function ($scope) { $scope.posts = [ { name: ‘post1‘, id: ‘post-001‘ }, { name: ‘post2‘, id: ‘post-002‘ } ] } ]) .controller(‘PostIdController‘, [ ‘$scope‘, ‘$routeParams‘, function ($scope, $routeParams) { $scope.msg = ‘post id: ‘ + $routeParams.postId; } ]);
路由中的 /:postId 其实是一个参数，它将匹配类似 /post/001 这种url，其中001 就是这个 :postId 的值。
我们在路由对应的控制器中，可以通过 $routeParams 参数来获取这个url参数。依次类推，我们可以为路由的url设置多个参数，比如 /post/:year/:month/:day/:postName 这样的路由，它将匹配 /post/2015/12/15/angular-router-demo 这样的路径。控制器中注入的 $routeParams 服务将会得到类似下面的对象，
{ "year": 2015, "month": 12, "day": 15, "postName": "angular-router-demo" }
http://www.tuicool.com/articles/jqMveaB
标签：
原文地址：http://www.cnblogs.com/YangqinCao/p/5792455.html
