标签：地址 code angular blog pre 脚本 script route body
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 id="a_tmpl" type="text/ng-template"> <h1>{{title}}</h1> </script>
修改模板文件：
.when(‘/a‘,{
controller:‘AController‘,
templateUrl:‘a_tmpl‘
})
这里是：找是否存在一个 a_tmpl 的script ， 如果有就把他作为模板去使用
我们可以使用 “ : 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控制器‘;
}]);
.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控制器
标签：地址 code angular blog pre 脚本 script route body
原文地址：http://www.cnblogs.com/e0yu/p/7223392.html
