angularJS 路由：（分发需求）
angularJS 中路由是单独提供的功能模块，ngRoute 也是一个单独发行的文件
可以通过 npm 去安装这个包：angular-route
<script type='text/javascript' src='bower_components/angular/angular.js'></script> <script type='text/javascript' src='bower_components/angular-route/angular-route.js'></script> <script type="text/javascript"> // 创建一个模块 var myApp = angular.module('myApp',['ngRoute']); //配置路由 myApp.config(['$routeProvider',function($routeProvider){ }]); </script>
做路由的配置：
配置路由的规则就是：什么样的请求，就找到什么样的控制器；
when就是"当"的意思，”当“这个的时候，请求这个控制器：
<script type='text/javascript' src='bower_components/angular/angular.js'></script> <script type='text/javascript' src='bower_components/angular-route/angular-route.js'></script> <body ng-app="myApp"> <ul> <li><a href="#/a">a</a></li> <li><a href="#/b">b</a></li> <li><a href="#/c">c</a></li> </ul> <div ng-view></div> </body> <script type="text/javascript"> // 创建一个模块 var myApp = angular.module('myApp',['ngRoute']); //配置路由 myApp.config(['$routeProvider',function($routeProvider){ $routeProvider .when('/students/:name?',{ controller:'AController', templateUrl:'./view/a.html' }) .when('/a',{ controller:'AController', templateUrl:'./view/a.html' }) .when('/b',{ controller:'BController', templateUrl:'./view/b.html' }) .when('/c',{ controller:'CController', templateUrl:'./view/c.html' }) .otherwise({ //重定向，做跳转 redirectTo:'/c' }); }]); myApp.controller('AController',['$scope','$routeParams',function($scope,$routeParams){ $scope.title = '你好'+$routeParams+'这里是A控制器'; }]); myApp.controller('BController',['$scope',function($scope){ $scope.title = '这里是B控制器'; }]); myApp.controller('CController',['$scope',function($scope){ $scope.title = '这里是C控制器'; }]); </script>
在页面请求这个路由的时候，会发现多加载了一个View模板文件：
解决方法：使用 script 标签
另外的一种写视图的方法：（写到这个里面）
<script type="text/ng-template"></script>
注意：script标签，只有当 type='text/javascript' 才会被当作JavaScript脚本执行；
script 就算不能执行，也不能在页面上显示；所以很多时候，会把模板写到script 里面：
<script id="a_tmpl" type="text/ng-template"> <h1>{{title}}</h1> </script>
修改模板文件：
.when('/a',{
controller:'AController',
templateUrl:'a_tmpl'
})
这里是：找是否存在一个 a_tmpl 的script ， 如果有就把他作为模板去使用
还有这样的一种需求：例如这种需求：
http://127.0.0.1/angularjs/domo/22.ng-route01.html#/student/zhangsan
难道我们还要写很多的when吗？
这个是麻烦也解决不了的，不可能为每一个学生，例如“张三”都去写一个控制器和模板：
所有的学生都应该：都应该放到一个控制器使用一个模板
#/a 这用的地址是属于特定的地址；
#/student/zhangsan 这种是属于特定一类的地址；
例如请求：
http://127.0.0.1/angularjs/domo/22.ng-route01.html#/students/zhangsan
我们可以使用 “ : name”去匹配任意的字符串：
//.when('/students/:name?',{
.when('/students/:name',{
controller:'AController',
templateUrl:'./view/a.html'
})
这里的 “：”号是一个占位符，“？”说明这个位置可以省略：
例如：请求这个地址，也是跳转到a控制器，就是后面的？表示后面的可以省略
http://127.0.0.1/angularjs/domo/22.ng-route01.html#/students/
如何去拿这个传入的名字：
方法：重新传入一个新的对象：
myApp.controller('AController',['$scope','$routeParams',function($scope,$routeParams){
$scope.title = '你好'+$routeParams+'这里是A控制器';
}]);
$routeParams：是拿路由传递过来的参数；
例如：
我们请求的是 /students/zhangsan 这个地址
拿/students/:name这个规则去匹配
它能提取出来一个 键值：{name:zhangsan}
复杂一点的：
例如请求的是 /students/zhangsan
用/:role/:name去匹配：
提取出来的键值：{role:students,name:zhangsan}
.when('/students/:name',{
controller:'AController',
templateUrl:'./view/a.html'
})
myApp.controller('AController',['$scope','$routeParams',function($scope,$routeParams){
$scope.title = '你好'+$routeParams+'这里是A控制器';
}]);
例如请求这个：
http://127.0.0.1/angularjs/domo/22.ng-route01.html#/student/zhangsan
看到的结果就是：你好zhangsan这里是A控制器