在多视图单页面web应用中，angularjs使用路由‘#+标记’来区别不同的逻辑页面并将不同的页面绑定到对应的控制器上。通过一个简单的实例来深入理解：

1.index.html

 主页面中插入代码：

该div内的html内容会根据路由的变化而变化。

(Tips:除了基本框架需要引入外，需要引入实现路由的js文件： ../angular-route.min.js)

1  2  3    4     
      5      6     
      7     14   15   16       17     
     
18     19     20     21       22       23       24   25 

 

2.ctrl1.html

  第一个html模板文件

1 
     
      I am ctrl1.html
     
 2 
     
      {
   {Ctrl1Var}}
     
3 
     

 

3.ctrl2.html

  第二个html模板文件

1 
     
      I am ctrl2.html
     
 2 
     
      {
   {Ctrl2Var}}
     
3 
     

 

4.ctrl3.html

  第三个html模板文件

1 
     
      I am ctrl3.html
     
 2 
     
      {
   {Ctrl3Var}}
     
3 
     

 

5.links.html

  默认的html模板文件

1 
     
      2     
      
ctrl1
3     
      
ctrl2
4     
      
ctrl3
5     
      
nonsense
6 
     

 

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
     
      });
     

参数说明

•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 }]);

 

  相关实例演示链接：