理解AngularJS ngRoute

通常來講，咱們認爲AngularJS是一套前端的MVC框架。那麼，爲了實現視圖的中轉，確定會涉及到路由的概念。這裏咱們就來講說有關AngularJS的路由——ngRoute。

序

我的瞭解到AngularJS，是因爲在尋找能夠動態利用Ajax從服務器端取得部分頁面這一功能而找到EmberJS，然後又根據EmberJS找到的AngularJS。而在AngularJS中，實現這一功能的，就是ngRoute。

因此，我的與AngularJS的結緣，是因爲ngRoute一點也不爲過。

理解

AngularJS的基礎是其模塊機制。在模塊的基礎上，咱們能夠利用JavaScript的一些特性來作咱們想作的任何的事情。

ngRoute是一個AngularJS的模塊。其不是在AngularJS的核心庫當中。

在使用ngRoute的時候，實際上，咱們是在應用的主模塊中引入ngRoute模塊並添加$routeProvider服務到主模塊的config方法中來達到咱們的目標。這與其餘一些庫的使用方式是相似的，如ng-grid。

在ngRoute中，主要有$route、$routeProvider、$routeParams三個服務項目。

$routeProvider用於在主應用主模塊的配置方法中。$route與$routeParams通常常見於控制器中。

安裝

1. 使用Google CDN

1	http://ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js

1. 使用Bower

因爲國內網絡環境的和諧，我的強烈建議使用此種方式！

1	bower install angular-route@X.Y.Z

1. 使用官方CDN

1	http://code.angularjs.org/X.Y.Z/angular-route.js

使用

ngRoute並無在AngularJS的核心包裏面，因此在使用的時候，須要引入一個獨立的庫。

1. 在HTML中引入ngRoute

1 2 3 4

<!-- index.html --><script src="angular.js" /><script src="angular-route.js" />

1. 在應用主模塊中，引入ngRoute

1 2 3

myApp = angular.module(, []);

1. 在模塊的config中綁定URL路徑與控制器

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

configFn =      $routeProvider.       when(, {         templateUrl: ,         controller:        }).       when(, {         templateUrl: ,         controller:        }).       otherwise({         redirectTo:        }); }; myApp.config(configFn);

$routeProvider

$routeProvider是一個用於配置路由的內置服務。因爲它是一個服務，根據service的使用建議，咱們主要將其當作爲工具來使用，因此咱們通常直接使用$routeProvider.XXX來調用它的成員方法來實現必定的功能，而不是實例化一個$routeProvider的實例。它主要有如下兩個成員函數：

1. otherwise(params)：設定映射信息到$route.current，通常用於指定沒有標明的路由如何處理。
2. when(path, route)：向$route服務添加新的路由。path是指定的URL路徑，route標明路由的處理。

$routeProvider.when(path, route)中的路由處理參數對象，經常使用的有以下的屬性：

• controller：用於指向用於路由處理的控制器。
• template：用於指向用於路由的視圖模板。
• redirectTo：重定向。（使用$location）

不經常使用屬性：

• controllerAs：控制器別名，一旦設定，在視圖中的scope就得使用這個別名來調用控制器。
• templateUrl
• resolve

$route

$route用於將控制器與視圖相連。它觀察$location.url()，而且嘗試映射路徑到一個已經存在的路由定義中。它依賴$location、$routeParams。它主要有以下成員函數：

• reload() 用於從新加載當前的路由，哪怕$location沒有改變。調用後，ngView將建立新的Scope等。

它主要有以下事件：

• $routeChangeStart：路由改變以前觸發；
• $routeChangeSuccess：路由改變以後觸發；
• $routeChangeError：路由改變出錯觸發；

$routeParams

$routeParams容許你檢索當前路由的參數。主要使用$location的search()與path()方法。

參考

• http://docs.angularjs.org/tutorial/step_07
• http://docs.angularjs.org/api/ngRoute
• http://docs.angularjs.org/api/ngRoute.$route
• http://docs.angularjs.org/api/ngRoute.$routeParams
• http://docs.angularjs.org/api/ngRoute.$routeProvider