AngularJS - 路由入門

AngularJS - 路由入門

我們有很多方法讓一個視圖隨著用戶的操作進行變化。
但是，只是單單一個視圖就要滿足所有的需求會讓代碼變得非常復雜。
也許我們可以使用ng-include來引用各種模板，但這只限於部分場景。

於是我們可以將視圖拆分為兩種:

• 布局視圖
• 模板視圖

如此一來，我們便可以使用route實現模板和布局視圖的組裝，以構建多視圖的應用。

Route

ngRoutes並不屬於核心模塊，我們需要額外引用angular-route.js，並在聲明應用時:

var myApp = angular.module('myApp',['ngRoute']);

$routeProvider

route需要通過$routeProvider定義，比如這樣:

var myApp = angular.module('myApp', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
    $routeProvider
    .when('/', {
        template: '<h2>contacts</h2>',
        controller: 'myController'
    })
    .when('/contacts', {
        templateUrl: 'contacts.html',
        controller: 'contactsController'
    })
    .when('/contacts/:userId', {
        templateUrl: 'contact.html',
        controller: 'contactController'
    })
    .otherwise({redirectTo: '/'});
}]);

OMG，這種定義方式太晦澀了，我們不能像定義指令時用directive()那樣用route()什麼的嗎?
其實directive()什麼的都是config()的語法糖。

比如我們這樣聲明一個指令:

var myApp = angular.module('myApp', [])
.directive('myDirective', function() {
    return {
        template: '<p>Kavlez</p>'
    };
});  

其實是:

var myApp = angular.module('myApp', [])
.config(function($compileProvider){
    $compileProvider.directive('myDirective', function() {
        return {
            template: '<p>Kavlez</p>'
        };
    });
});

provider用來實例化依賴並對外提供API，比如這裡的$route服務就是通過相應的$routeProvider對外提供API，比如when()，我們通過這些API設置路由規則。

另外，provider是怎麼來的?
Injector對module進行配置時，會在這些module中注冊所有定義的provider，必要時會注入服務，而服務的實例化則需要provider來進行。

路由模式

不同的路由模式下URL會以不同的格式呈現，我們有兩種模式可以選擇。

• 標簽模式
  AngularJS默認使用這個模式，這個模式下URL會以'#'開頭。

• html5模式
  這個模式下的URL和一般的沒什麼區別，如果選擇了該模式，AngularJS會根據浏覽器重寫所有的<a href=""></a>。

路由模式也通過$routeProvider進行設置，比如:

var myApp = angular.module('myApp', ['ngRoute'])
 .config(['$locationProvider', function($locationProvider) {
     $locationProvider.html5Mode(false);
     $locationProvider.hashPrefix('!');
 }])

when

這裡使用的when(path,route)一共兩個參數。

• path比較好理解，也就是路由路徑，和$location.path匹配，後面帶上:則表示參數，可以傳遞給$routeParams。
• route指的是path匹配後的動作，是一個對象，屬性有:
  • controller (string/function):在這裡聲明的控制器會得到路由創建的作用域。
  • template (string):HTML模板渲染到聲明了ng-view的元素裡。
  • templateURL (string):功能和template一樣，只是通過XHR獲得模板。
  • resolve : 將列表對象注入到controller中。
  • redirectTo (string/function): 用於替換path。比起用作字符串，函數更有意義。
  • reloadOnSearch (boolean):默認是true，也就是$location.search()發生變化時重新加載路由。

ng-view

我們用ng-view接收對應的視圖模板，給$route對應的視圖占位。
mg-view的優先級為1000，也就是說AngularJS不會運行同一個元素上的低優先級指令。

ngView指令遵循以下規則。

• 每次觸發$routeChangeSuccess事件，視圖都會更新。
• 如果某個模板同當前的路由相關聯：
  • 創建一個新的作用域；
  • 移除上一個視圖，同時上一個作用域也會被清除；
  • 將新的作用域同當前模板關聯在一起；
  • 如果路由中有相關的定義，那麼就把對應的控制器同當前作用域關聯起來；
  • 觸發$viewContentLoaded事件；
  • 如果提供了onload屬性，調用該屬性所指定的函數。

$location

既然涉及到了路徑，就不得不說$location服務。
感覺和windows.location差不多，但$location只能用來在內部訪問路由，無法刷新整個頁面。

下面列出$location的常用的一些方法。

• path()
  當前路徑:

  $location.path();
  

  跳轉至:

  $location.path('/');
  

• replace()
  這個方法可以讓用戶無法後退，比如這樣:

  $location.path('/').replace();
  

• absUrl() : 獲取絕對路徑
• hash() : 獲取URL中的hash片段
• host() : 獲取host
• port() : 獲取端口號
• protocol() : 獲取協議

• search() :
  用於設置URL中的查詢參數，比如:

  $location.search({id:'000000',name:'Kavlez'});
  $location.search('id=000000&name=Kavlez');
  

• url() : 獲取當前URL，或者修改當前URL

event

有幾個路由相關的事件如下:

• $routeChangeStart : 路由變化之前會觸發該事件，有三個參數，分別是AngularJS事件對象、將要路由的url、當前url。

  $rootScope.$on('$routeChangeStart', function(evt, next, current) {
      //something
  });
  

• $routeChangeSuccess : 路由成功後觸發，三個參數分別為AngularJS事件對象、當前url、上一個url
• $routeChangeError : 被拒時觸發，三個參數為當前路由信息、上一個路由的信息、錯誤信息。
• $routeUpdate : 如果reloadOnSearch為false，重新使用控制器的實力時觸發。

AngularJS權威教程 清晰PDF版  http://www.linuxidc.com/Linux/2015-01/111429.htm

希望你喜歡，並分享我的工作~帶你走近AngularJS系列：

1. 帶你走近AngularJS - 基本功能介紹 http://www.linuxidc.com/Linux/2014-05/102140.htm
2. 帶你走近AngularJS - 體驗指令實例 http://www.linuxidc.com/Linux/2014-05/102141.htm
3. 帶你走近AngularJS - 創建自定義指令 http://www.linuxidc.com/Linux/2014-05/102142.htm

如何在 AngularJS 中對控制器進行單元測試 http://www.linuxidc.com/Linux/2013-12/94166.htm

在 AngularJS 應用中通過 JSON 文件來設置狀態 http://www.linuxidc.com/Linux/2014-07/104083.htm

AngularJS 之 Factory vs Service vs Provider http://www.linuxidc.com/Linux/2014-05/101475.htm

AngularJS —— 使用 ngResource、RESTful APIs 和 Spring MVC 框架提交數據 http://www.linuxidc.com/Linux/2014-07/104402.htm

AngularJS 的詳細介紹：請點這裡
AngularJS 的下載地址：請點這裡