在多视图单页面web应用中，angularjs使用路由‘#+标记’来区别不同的逻辑页面并将不同的页面绑定到对应的控制器上。通过一个简单的实例来深入理解：
1.index.html
主页面中插入代码：
<div ng-view></div>
该div内的html内容会根据路由的变化而变化。
(Tips:除了基本框架需要引入外，需要引入实现路由的js文件： ../angular-route.min.js)
1 <!DOCTYPE html> 2 <html lang="zh-CN" ng-app="webapp"> 3 <head> 4 <meta charset="utf-8"> 5 <title>Demo</title> 6 <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css"/> 7 <style> 8 body {font-size:20px;} 9 .ng-scope { 10 margin: 10px; 11 padding:10px; 12 } 13 </style> 14 </head> 15 <body> 16 17 <div ng-view></div> 18 19 20 <script src="../bower_components/angular/angular.min.js"></script> 21 <script src="../bower_components/angular-route/angular-route.min.js"></script> 22 <script src="scripts/demo.js"></script> 23 24 </body> 25 </html>
2.ctrl1.html
第一个html模板文件
1 <div>I am ctrl1.html</div> 2 <div>{{Ctrl1Var}}</div> 3 <div ng-include="'views/links.html'"></div>
3.ctrl2.html
第二个html模板文件
1 <div>I am ctrl2.html</div> 2 <div>{{Ctrl2Var}}</div> 3 <div ng-include="'views/links.html'"></div>
4.ctrl3.html
第三个html模板文件
1 <div>I am ctrl3.html</div> 2 <div>{{Ctrl3Var}}</div> 3 <div ng-include="'views/links.html'"></div>
5.links.html
默认的html模板文件
1 <ul class="list-unstyled"> 2 <li><a href="#/ctrl1">ctrl1</a></li> 3 <li><a href="#/ctrl2">ctrl2</a></li> 4 <li><a href="#/ctrl3">ctrl3</a></li> 5 <li><a href="#/nonsense">nonsense</a></li> 6 </ul>
6.index.js
1） 引入ngRoute作为主应用模块的依赖模块;
2） angularjs的config模块用来配置路由规则，通过configAPI，请求把$routeProvider注入到我们的配置函数，然后使用$routeProvider.whenAPI来定义路由规则，when（path,object)&otherwise(object)按顺序定义我们的所有路由，其中函数的两个参数：path为URL或者URL正则规则，object则为路由配置对象，查阅资料，完整的object如下：
$routeProvider.when(url, {
template: string,
templateUrl: string,
controller: string, function 或 array,
controllerAs: string,
redirectTo: string, function,
resolve: object<key, function>
});
参数说明
•template:若ng-view中插入的只是简单的HTML代码，则使用
.when('/computers',{template:'这是ctrl1页面'})
•templateUrl:若在ng-view中插入HTML模板文件，则使用
$routeProvider.when('/computers', {
templateUrl: 'views/strl1.html',
});
•controller:可以是function,string或者数组类型，这表示在当前模板上执行的controller函数，生成新的scope.
•controllerAs:string类型，为controller指定别名。
•redirectTo:重定向的地址。
•resolve:指定当前controller所依赖的其他模块。
1 angular.module("webapp",[ 2 "ngRoute" 3 ]); 4 angular.module("webapp").config(['$routeProvider',function ($routeProvider) { 5 $routeProvider.when('/ctrl1', { 6 templateUrl: 'views/ctrl1.html', 7 controller: 'Ctrl1' 8 }) 9 .when('/ctrl2', { 10 templateUrl: 'views/ctrl2.html', 11 controller: 'Ctrl2' 12 }) 13 .when('/ctrl3', { 14 templateUrl: 'views/ctrl3.html', 15 controller: 'Ctrl3' 16 }) 17 .otherwise({ 18 redirectTo: '/ctrl1' 19 }); 20 }]); 21 22 angular.module('webapp').controller('Ctrl1' , ['$scope',function($scope) { 23 $scope.Ctrl1Var = 'Ctrl1Var'; 24 }]); 25 angular.module('webapp').controller('Ctrl2' , ['$scope',function($scope) { 26 $scope.Ctrl2Var = 'Ctrl2Var'; 27 }]); 28 angular.module('webapp').controller('Ctrl3' , ['$scope',function($scope) { 29 $scope.Ctrl3Var = 'Ctrl3Var'; 30 }]);
相关实例演示链接：http://dreammaker-8-16-qboooogle.c9users.io:8080/
