AngularJs ng-route路由詳解

時間 2019-11-12

原文原文鏈接

本篇基於ng-route來說下路由的使用...其實主要是 $routeProvider 搭配 ng-view 實現。javascript

ng-view的實現原理，基本就是根據路由的切換，動態編譯html模板。html

更多內容參考：Angularjs總結java

前提

首先須要在頁面引入angular和angular-route，注意要在angular-route以前引入angularpromise

<script src="../../bower_components/angular/angular.js"></script>
<script src="../../bower_components/angular-route/angular-route.js"></script>

這主要是由於angular-route.js須要傳入window.angular這個參數，而這個參數只有在加載完angular纔會出現。app

1 (function(window, angular, undefined) {
2 'use strict';
3 ...
4 ngRouteModule.directive('ngView', ngViewFactory);
5 ...
6 })(window, window.angular);

下載能夠去官網下載，或者使用bower進行安裝。ide

講解

　　首先須要明白，route 和 ng-view 要搭配使用。ng-view至關於提供了頁面模板的掛載點，當切換URL進行跳轉時，不一樣的頁面模板會放在ng-view所在的位置。而後經過 routeProvider 配置路由的映射。函數

通常主要經過兩個方法：ui

when()：配置路徑和參數;url

otherwise：配置其餘的路徑跳轉，能夠想成default。spa

着重說下when的第二個參數：

controller：對應路徑的控制器函數，或者名稱

controllerAs：給控制器起個別名

template：對應路徑的頁面模板，會出如今ng-view處,好比"<div>xxxx</div>"

templateUrl：對應模板的路徑，好比"src/xxx.html"

resolve：這個參數着重說下，他會給路由相關的控制器綁定服務或者值，一般時鍵值對的方式。而後把執行的結果或者對應的服務引用，注入到控制器中。若是resolve中時一個promise對象，那麼會等它執行成功後，才注入到控制器中，此時控制器會等待resolve中的執行結果。詳細的例子，能夠參考下面的樣例。

redirectTo：重定向地址

reloadOnSearch：設置是否在只有地址改變時，才加載對應的模板;search和params改變都不會加載模板

caseInsensitiveMatch：路徑區分大小寫

路由有幾個經常使用的事件：

$routeChangeStart：這個事件會在路由跳轉前觸發

$routeChangeSuccess：這個事件在路由跳轉成功後觸發

$routeChangeError：這個事件在路由跳轉失敗後觸發

使用

在頁面中，寫入URL跳轉的按鈕連接以及 ng-view標籤

1  <div ng-controller="myCtrl">
2         <ul>
3             <li><a href="#/a">click a</a></li>
4             <li><a href="#/b">click b</a></li>
5         </ul>
6 
7         <ng-view></ng-view>
8         <!-- <div ng-view ></div> -->
9  </div>

其中，ng-view能夠看成元素或者標籤等。

javascript中須要定義跳轉的相關配置

 1 <script type="text/javascript">
 2     angular.module("myApp",["ngRoute"])
 3     .controller("aController",function($scope,$route){
 4         $scope.hello = "hello,a!";
 5     })
 6     .controller("bController",function($scope){
 7         $scope.hello = "hello,b!";
 8     })
 9     .controller("myCtrl",function($scope,$location){
10 
11         $scope.$on("$viewContentLoaded",function(){
12             console.log("ng-view content loaded!");
13         });
14 
15         $scope.$on("$routeChangeStart",function(event,next,current){
16             //event.preventDefault(); //cancel url change
17             console.log("route change start!");
18         });
19     })
20     .config(function($routeProvider, $locationProvider) {
21           $routeProvider
22            .when('/a', {
23             templateUrl: 'a.html',
24             controller: 'aController'
25           })
26         .when('/b', {
27             templateUrl: 'b.html',
28             controller: 'bController',
29             resolve: {
30                   // I will cause a 3 second delay
31                   delay: function($q, $timeout) {
32                     var delay = $q.defer();
33                     $timeout(delay.resolve, 3000);
34                     return delay.promise;
35                   }
36             }
37         })
38         .otherwise({
39             redirectTo: '/a'
40           });
41     });
42     </script>

上面的代碼中，/b路徑中的resolve關聯來一個延遲方法，這個方法返回的時Promise對象，並且3秒鐘後纔會返回結果。所以b頁面，在3秒後纔會加載成功。

額外還須要提供兩個html，a.html：

1 <div ng-controller="aController" style="height:500px;width:100%;background-color:green;">{{hello}}</div>

以及b.html

1 <div ng-controller="bController" style="height:2500px;width:100%;background-color:blue;">{{hello}}</div>

這樣，就能夠實現路由的跳轉了。

所有的代碼能夠參考：

 1 <html ng-app="myApp">
 2 <head>
 3     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 4     <script src="../../bower_components/angular/angular.js"></script>
 5     <script src="../../bower_components/angular-route/angular-route.js"></script>
 6 </head>
 7 <body>
 8     <div ng-controller="myCtrl">
 9         <ul>
10             <li><a href="#/a">click a</a></li>
11             <li><a href="#/b">click b</a></li>
12         </ul>
13 
14         <ng-view></ng-view>
15         <!-- <div ng-view ></div> -->
16     </div>
17     <script type="text/javascript">
18     angular.module("myApp",["ngRoute"])
19     .controller("aController",function($scope,$route){
20         $scope.hello = "hello,a!";
21     })
22     .controller("bController",function($scope){
23         $scope.hello = "hello,b!";
24     })
25     .controller("myCtrl",function($scope,$location){
26 
27         $scope.$on("$viewContentLoaded",function(){
28             console.log("ng-view content loaded!");
29         });
30 
31         $scope.$on("$routeChangeStart",function(event,next,current){
32             //event.preventDefault(); //cancel url change
33             console.log("route change start!");
34         });
35     })
36     .config(function($routeProvider, $locationProvider) {
37           $routeProvider
38            .when('/a', {
39             templateUrl: 'a.html',
40             controller: 'aController'
41           })
42         .when('/b', {
43             templateUrl: 'b.html',
44             controller: 'bController',
45             resolve: {
46                   // I will cause a 1 second delay
47                   delay: function($q, $timeout) {
48                     var delay = $q.defer();
49                     $timeout(delay.resolve, 3000);
50                     return delay.promise;
51                   }
52             }
53         })
54         .otherwise({
55             redirectTo: '/a'
56           });
57     });
58     </script>
59 </body>
60 </html>