angular.module('Module.red', ['ngRoute']) .config([ '$routeProvider', function ($routeProvider) { $routeProvider.when('/red', { templateUrl: 'red.html', controller: 'redController' }); } ]) .controller('redController', [ '$scope', function ($scope) { $scope.color='red'; $scope.message = 'This is red page'; } ]);
路由的参数
那么路由怎么将参数传入到模板页呢？我们把上面的例子改造一下，通过例子来讲解：
main.js
angular.module('Module.main', ['ngRoute']) .config([ '$routeProvider', function ($routeProvider) { $routeProvider .when('https://www.jb51.net/', { templateUrl: 'main.html', controller: 'mainController' }); } ]) .controller('mainController', [ '$scope', function ($scope) { $scope.message = 'This is main page'; $scope.colors=['blue','yellow','pink']; } ]);
这里初始化了一个colors的数组，作为要传递的数据。
main.html
{{message}} <br> <ul> <li ng-repeat="color in colors"> <a href="#/color/{{color}}" >{{color}}</a> </li> </ul>
通过ng-repeat循环创建a链接，数组的元素通过链接传入。
colorId.js
angular.module('Module.colorId', ['ngRoute']) .config([ '$routeProvider', function ($routeProvider) { $routeProvider .when('/color/:colorId', { templateUrl: 'colorId.html', controller: 'colorIdController' }); } ]) .controller('colorIdController', [ '$scope','$routeParams', function ($scope,$routeParams) { $scope.color = $routeParams.colorId; $scope.message = 'This is ' +$routeParams.colorId +' page'; } ]);
这里定义了一个colorId的模块，通过:colorId来匹配传入的参数，这里匹配到的是数组中的元素。例如/color/blue，那么匹配到的就是blue。
colorId.html
<div> {{message}} </div>
最后在colorId上呈现出来。
如果是多个参数可以直接一一接到后面比如/color/:colorId/:year/:month/:day,和后面的参数也一一匹配，如/color/pink/2017/3/13。
支持*号：/color/:color/largecode/:largecode*/edit匹配/color/brown/largecode/code/with/slashes/edit的话，color将会匹配到brown，largecode将匹配到code/with/slashes。
支持?号：/color/:color/largecode/:largecode?/edit可以匹配匹配/color/brown/largecode/code/edit，largecode将会匹配到code。
/color/:color/largecode/:largecode?/edit可以匹配匹配/color/brown/largecode/edit，largecode将会匹配到空值。
路由中的resolve
一个最常见的情景，页面跳转时要加载一些数据。有两种方式可以做到：
页面跳转后加载，通过controller去控制数据的加载，如果时间较长则显示一个loading的界面，数据请求成功后再替换成数据界面
页面跳转前加载，通过路由的resolve去配置。
个人更喜欢跳转后加载的方式，因为更为友好，所以对resolve不太感冒，但我们还是讲下resolve。
resolve是一个map对象:
map的key是可以注入到controller的可选的依赖项，如果resolve其中依赖项的返回值是promise，那么在controller初始化之前，路由会一直等待直到所有的promise都已经resolved或者其中的一个被rejected。如果所有的promise都成功resolved，这些依赖项将可以注入到controller中并同时触发$routeChangeSuccess事件，如果其中的一个promise是rejected，那么将会触发$routeChangeError事件,并中止路由切换。
map的value如果是个字符串，那么它会是一个service的别名。如果是一个函数，他的返回值可以被当做依赖注入 到controller中，如果返回值是一个promise，在注入之前必须是resolved的。注意这时候ngRoute.$routeParams还不可用，如果需要使用参数则需要使用$route.current.params。
看下例子：
news.html
<html> <head> <meta charset="uft-8"/> <title></title> </head> <script src="https://www.jb51.net/script/angular.min.js"></script> <script src="https://www.jb51.net/script/angular-route.min.js"></script> <body ng-app="ngst-news"> <div ng-controller="MainController"> <ul> <li ng-repeat="news in newsAarry"> <a href="#/newsDetail/{{news.id}}" >{{news.title}}</a> </li> </ul> <div ng-view></div> </div> </body> <script src="https://www.jb51.net/news.js" charset="UTF-8"></script> <script src="https://www.jb51.net/newsDetail.js" charset="UTF-8"></script> </html>
news.js
var news = angular.module("ngst-news", ["ngst-newsDetail"]); news.controller("MainController", ["$scope", function ($scope) { $scope.newsAarry = [{"id": "1", "title": "辽宁人大副主任王阳 浙江宁波市长卢子跃被免职"}, {"id": "2", "title": "今冬小雨缤纷，荔枝园地湿润壮旺荔枝果树，下刀环剥最狠"}, {"id": "3", "title": "百度任原搜索渠道总经理顾国栋为市场执行总监"}]; }]);
news页面是一个新闻列表，在列表下面有个ng-view，点击新闻列表链接下面的ng-view进行路由切换。
newsDetails.html
{{message}}
newsDetails.js