標籤：地址 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標籤，只有當 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控制器
angularJS的路由！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
