路由是AngularJS很重要的一环，它可以把你项目的页面串联起来，构成一个项目，常用的路由有ngRoute和ui-route，我这里先讲ngRoute。ngRoute是一个Module，提供路由和深层链接所需的服务和指令。
注意一点，和之前的文章不一样，使用ngRoute之前你需要引入另外一个js文件angular-route.js：
<script src="https://www.jb51.net/script/angular.min.js"></script> <script src="https://www.jb51.net/script/angular-route.min.js"></script>
ngRoute包含内容如下：
名称
类型
作用
ngView
Directive
路由的不同模板其实都是插入这个元素里
$routeProvider
Provider
路由配置
$route
Service
各个路由的url，view，controller
$routeParams
Service
路由参数
使用ngRoute的基本流程如下：
在需要路由的地方使用ngView来定义视图模板。
在module中注入ngRoute模块
在config中用$routeProvider来对路由进行配置templateUrl，controller，resolve。
在每个controller中写业务逻辑
在controller中可以通过注入$routeParams来获得url上的参数
可以看下下面这个例子
color.html
<!DOCTYPE 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="color"> <p><a href="#/" >Main</a></p> <a href="#red" >Red</a> <a href="#green" >Green</a> <div ng-view></div> </body> <script> var app = angular.module("color", ["ngRoute"]); app.config(function ($routeProvider) { $routeProvider .when("https://www.jb51.net/", { templateUrl: "main.html", controller: 'mainController' }) .when("/red", { templateUrl: "red.html", controller: 'redController' }) .when("/green", { templateUrl: "green.html", controller: 'greenController' }) .otherwise('https://www.jb51.net/'); }); app.controller('mainController',['$scope',function mainController($scope){ $scope.message='this is main page'; }]); app.controller('redController',['$scope',function mainController($scope){ $scope.message='this is red page'; }]); app.controller('greenController',['$scope',function mainController($scope){ $scope.message='this is green page'; }]); </script> </html>
red.html (其他页面类似，就不重复了)
<div> {{message}} </div>
例子很简单，我们就只讲下路由的配置：
使用$routeProvider.when来配置路由的关系，方法接受两个参数，第一个参数是url的路径，第二个参数是配置url对应的templateUrl和controller。
$routeProvider.otherwise方法相当于default。
路由模块化
可能你已经注意到了上面的都写在一起，如果项目越来越大，会不会很头疼，那么是不是可以把它模块化，每个模块都有直接的module，controller，config等。模块依赖的技术我们之前的module那篇文章已经讲过，那么就来看下带有路由的情况下，怎么模块化。
color.html:
<!DOCTYPE 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> <script src="https://www.jb51.net/article/red.js"></script> <script src="https://www.jb51.net/green.js"></script> <script src="https://www.jb51.net/main.js"></script> <body ng-app="color"> <p><a href="#/" >Main</a></p> <a href="#red" >Red</a> <a href="#green" >Green</a> <div ng-view></div> </body> <script> var app = angular.module("color", ["ngRoute","Module.red","Module.main","Module.green"]); app.config(function ($routeProvider) { $routeProvider.otherwise('https://www.jb51.net/'); }); </script> </html>
可以看到我们的color.html文件是不是很简洁，config的路由配置里只有一行$routeProvider.otherwise方法,但是module却注入了除ngRoute外的三个module：”Module.red”,”Module.main”,”Module.green”，这其实是把path对应的路由提取成模块，使用了专门的js来处理它们，看起来和他们对应的模板相对应，我们来看下red.html对应的模块js：
red.js