翻譯：深入 AngularUI Router

原文地址：http://www.ng-newsletter.com/posts/angular-ui-router.html

ui-router:?https://angular-ui.github.io/ui-router/site/#/api/ui.router?

ui-router 是 AngularUI 庫提供的特別有用的一個部分，是一個通過提供狀態(tài)機機制，而不是簡單的 URL 來組織我們的界面的路由框架。

這個庫提供了針對視圖的眾多的額外控制，我們可以創(chuàng)建嵌套的視圖，在單個頁面使用多個視圖，多個視圖來控制單個視圖，還有更多特性。對于更加精細的控制和更為復(fù)雜的應(yīng)用，ui-router 是非常棒的工具。

ui-router 從狀態(tài)著手來管理路由，它將應(yīng)用視為多個狀態(tài)的組合，通過狀態(tài)的切換進行路由。

• 一個狀態(tài)可以對應(yīng)一個頁面地址，通過特定的地址到達應(yīng)用的特定狀態(tài)。
• 通過狀態(tài)的 controller、template 和 views 來管理特定狀態(tài)的 UI 和行為
• 通過嵌套視圖來解決頁面中重復(fù)出現(xiàn)的內(nèi)容。

?

Installation

安裝 ui-router，既可以直接下載發(fā)布版本，也可以通過 bower 來獲取。

$ bower install angular-ui-router --save

?

然后，需要在頁面中進入這個庫，當然要先加載 angular 庫。

<script type="text/javascript" src="angular-ui-router.js"></script>

?

在 angular 中注入 ui.router.

angular.module('myApp', ['ui.router'])

?

不像 angular 內(nèi)置的 ngRoute, ui-router 可以嵌套視圖，它是基于狀態(tài)，而不 URL 的。

也不像 ngRoute 使用 ng-view 指令，在 ui-router 中，我們使用 ui-view 指令。

當在 ui-router 中考慮路由和狀態(tài)的關(guān)系時，我們主要關(guān)注應(yīng)用的什么狀態(tài)對應(yīng)應(yīng)用的什么路由。

<div ng-controller="DemoController"><div ui-view></div> </div>

?

類似 ngRoute, 對于給定的狀態(tài)，模板中的內(nèi)容將會填充到 <div ui-view></div> 元素，每個模板還可以包含自己的 ui-view ，這就是我們可以支持嵌套路徑的原因。

定義路徑的時候，我們使用 .config 方法，像通常一樣，但是使用 $stateProvider 來替換 $routeProvider。

.config(function($stateProvider, $urlRouterProvider) {$stateProvider.state('start', {url: '/start',templateUrl: 'partials/start.html'}) });

?

這樣，我們；定義了名為 start 的狀態(tài)，傳遞的對象定義了狀態(tài)配置信息，或者稱為 stateConfig，類似于路由配置對象，我們通過它配置狀態(tài)信息。

template, templateUrl, templateProvider

可以使用下面三種之一的方式來定義視圖使用的模板：

• template, 字符串方式的模板內(nèi)容，或者是一個返回 HTML 的函數(shù)
• templateUrl, 模板的路徑，或者返回模板路徑的函數(shù)
• templateProvider, 返回 HTML 內(nèi)容的函數(shù)

例如

$stateProvider.state('home', {template: '<h1>Hello {{ name }}</h1>' });

?

?

Controller

類似于 ngRoute，我們既可以通過控制器的名字來關(guān)聯(lián)一個預(yù)定義的控制器，也可以直接創(chuàng)建一個控制器函數(shù)來處理。

如果沒有對應(yīng)的模板定義，控制器對象就不會被創(chuàng)建。

Resolve

使用 resolve 功能，我們可以準備一組用來注入到控制器中的依賴對象。在 ngRoute 中，resolve 可以在路由實際渲染之前解決掉 promise

resolve 選項提供一個對象，對象中的 key 就是準備注入 controller 的依賴名稱，值則是創(chuàng)建對象的工廠。

如果是一個串，就試圖用這個串來匹配當前已經(jīng)注冊的服務(wù)名稱，如果是一個函數(shù)，執(zhí)行這個函數(shù)，返回的值就是依賴。如果函數(shù)返回一個 promise，在控制器被實例化之前，將會被 resolved，返回的值被注入到 controller 中。

$stateProvider.state('home', {resolve: {// This will return immediately as the // result is not a promiseperson: function() {return {name: "Ari",email: "ari@fullstack.io"}},// This function returns a promise, therefore// it will be resolved before the controller// is instantiatedcurrentDetails: function($http) {return $http({method: 'JSONP',url: '/current_details'});},// We can use the resulting promise in another// resolutionfacebookId: function($http, currentDetails) {$http({method: 'GET',url: 'http://facebook.com/api/current_user',params: {email: currentDetails.data.emails[0]}})}},controller: function($scope, person, currentDetails, facebookId) {$scope.person = person;} })

?

?

URL

url 用來設(shè)置應(yīng)用對應(yīng)的一個特定狀態(tài). 也就是說，我們可以通過 url 來到達某個特定的狀態(tài)，所以這里的 url 不是簡單的 url 地址，而是某個可到達狀態(tài)的標志。

這個特性類似于 ngRoute 中的 URL, 但是，可以被看作一個重大的升級，后面我們就會看到。

簡單的路由類似下面所示。

$stateProvider.state('inbox', {url: '/inbox',template: '<h1>Welcome to your inbox</h1>'});

?

當我們導(dǎo)航到 /index 的時候，應(yīng)用將會過渡到 inbox 狀態(tài)，使用這里提供的內(nèi)容模板填充 ui-view 的內(nèi)容。

URL 中可以包含多種內(nèi)容，令人難以置信的強大，可以像在 ngRoute 中設(shè)置簡單的參數(shù)。

$stateProvider.state('inbox', {url: '/inbox/:inboxId',template: '<h1>Welcome to your inbox</h1>',controller: function($scope, $stateParams) {$scope.inboxId = $stateParams.inboxId;}});

?

這里，我們創(chuàng)建了 :inboxId 參數(shù)來捕獲 url 中的第二部分，例如，如果應(yīng)用訪問 /inbox/1，那么，$stateParameter.inboxId 就成為 1, 實際上， $stateParams 的值將為 { inboxId: 1 }

也可以使用另外一種語法。

url: '/inbox/{inboxId}'

?

路徑必須完全匹配，不像 ngRoute, 如果用戶訪問 /inbox/，這個路徑配置將會工作，但是，如果訪問 /inbox，這個狀態(tài)就不會被激活。

還可以使用正則表達式來表示參數(shù)，這樣可以通過正則表達式來設(shè)置匹配規(guī)則，例如。

// Match only inbox ids that contain // 6 hexidecimal digits url: '/inbox/{inboxId:[0-9a-fA-F]{6}}', // Or // match every url at the end of `/inbox` // to `inboxId` (a catch-all) url: '/inbox/{inboxId:.*}'

?

注意，不能在路由中使用捕獲組

甚至可以在路徑中使用查詢參數(shù)。

// will match a route such as // /inbox?sort=ascending url: '/inbox?sort'

?

?絕對路由

如果你使用絕對 url 方式，需要在 url 字符串的開發(fā)加上特殊字符 ^

$stateProvider.state('contacts', {url: '/contacts',...}).state('contacts.list', {url: '^/list',...});

?

• 'contacts'狀態(tài)將匹配"/contacts"
• 'contacts.list'狀態(tài)將匹配"/list"。子狀態(tài)的url沒有附在父狀態(tài)的url之后的，因為使用了^。

?

嵌套路由

我們可以使用 url 參數(shù)添加到路由中來實現(xiàn)嵌套路由。這樣可以提供多個 ui-views 在我們的頁面中，例如，我們可以在 /inbox 之上，提供嵌套的獨立路由。這里使用了子狀態(tài)。

$stateProvider.state('inbox', {url: '/inbox/:inboxId',template: '<div><h1>Welcome to your inbox</h1>\<a ui-sref="inbox.priority">Show priority</a>\<div ui-view></div>\</div>',controller: function($scope, $stateParams) {$scope.inboxId = $stateParams.inboxId;}}).state('inbox.priority', {url: '/priority',template: '<h2>Your priority inbox</h2>'});

?第一個路由與前面一樣，現(xiàn)在還有第二個路由，一個匹配 inbox 之下的子路由，語法 (.) 表示這是一個子路由。

/inbox/1 匹配第一個狀態(tài)，/inbox/1/priority 則匹配第二個狀態(tài)。使用這種語法，我們可以在父路由中支持嵌套的 url。在父視圖中的 ui-view 指令將會處理 priority。

Params

params 選項是參數(shù)名稱或者正則的數(shù)組。它不能合并 url 選項，當狀態(tài)激活的時候，應(yīng)用會使用這些參數(shù)填充 $stateParams 服務(wù)。

Views

我們可以在 state 中提供命名的視圖。這是強大的特性，在單個視圖中，我們可以定義多個視圖，甚至使用單個模板。

如果我們使用了 views 參數(shù)，那么，templateUrl, template 和 templateProvider 就會忽略。如果我們希望包含父模板，我們需要創(chuàng)建一個抽象模板。

假如我們有如下模板。

<div><div ui-view="filters"></div><div ui-view="mailbox"></div><div ui-view="priority"></div> </div>

?主要注意的是，頂級的狀態(tài)自然對應(yīng)母版頁中的視圖，一般這個視圖是 noname 的，所以，需要一個 noname 的視圖來匹配這個 placeholder。其它的視圖需要匹配父狀態(tài)中的視圖 placeholder，這些 placeholder 可以是命名的，也可以是 naname的，自然，noname 的只能有一個，否則無法進行區(qū)分，我們在 provider 中進行配置的時候，就需要描述清楚這些 view 和 placeholder 之間的對應(yīng)關(guān)系。

使用 @ 可以定義絕對命名的視圖名稱，@ 的前面是 placeholder 的名稱，后面是狀態(tài)的名稱。@ 前面為空表示未命名的 ui-view，@ 后面為空表示相對于根模板，通常是 index.html

我們可以創(chuàng)建命名的視圖，然后填充對應(yīng)的模板。每個子視圖都可以有特有的模板，控制器和數(shù)據(jù)。

$stateProvider.state('inbox', {views: {'filters': {template: '<h4>Filter inbox</h4>',controller: function($scope) {}},'mailbox': {templateUrl: 'partials/mailbox.html'},'priority': {template: '<h4>Priority inbox</h4>',resolve: {facebook: function() {return FB.messages();}}}}});

?

在這個例子中，我們有兩個命名的視圖嵌套在抽象視圖中。

Abstract

我們永遠不能直接激活抽象模板，但是，可以通過派生模板來激活。

抽象模板提供封裝命名視圖的模板，可以傳遞 $scope 對象給派生子模板。可以通過它解決依賴問題，或者特定數(shù)據(jù)處理，或者簡單地同樣的 url 來嵌套多個路由，例如，所有路由都在 /admin 下面。

$stateProvider.state('admin', {abstract: true,url: '/admin',template: '<div ui-view></div>'}).state('admin.index', {url: '/index',template: '<h3>Admin index</h3>'}).state('admin.users', {url: '/users',template: '<ul>...</ul>'});

?

onEnter, onExit

在應(yīng)用進入或者退出視圖的時候，會調(diào)用這些回調(diào)函數(shù)。它們都可以設(shè)置回調(diào)函數(shù)；函數(shù)可以訪問獲取的數(shù)據(jù)。

這些回調(diào)函數(shù)可以提供我們一些能力，在訪問新視圖，或者改變當前狀態(tài)的時候。這里是很好的執(zhí)行 "Are you sure?" 對話框，或者請求用戶在進入之前登陸的地方。

兩個函數(shù)都不提供參數(shù)，需要的信息需要自己提供。

Data

我們可以附加任意的數(shù)到我們的狀態(tài)配置對象 configObject 上，data 屬性類似于 resolve 屬性，除了不會注入到控制器，也不會 resolve promise。

當需要從父狀態(tài)向子狀態(tài)傳遞數(shù)據(jù)的時候，附加數(shù)據(jù)是方便的途徑。

Evnets

類似 ngRoute 服務(wù)，angular-route 服務(wù)在狀態(tài)生命周期的不同時間點會觸發(fā)多種事件。我們可以通過在 $scope 中監(jiān)聽來處理這些事件。

所有的下面的事件都會在 $rootScope 中觸發(fā)，所以，我們可以在任何 $scope 對象中監(jiān)聽這些事件。

State change events

可以如下監(jiān)聽

$scope.$on('$stateChangeStart', function(evt, toState, toParams, fromState, fromParams), {// We can prevent this state from completingevt.preventDefault(); });

?

?

$stateChangeStart

當從一個狀態(tài)開始向另外一個狀態(tài)過度的時候觸發(fā)。

$stateChangeSuccess

當狀態(tài)過渡完成之后觸發(fā)。

$stateChangeError

在狀態(tài)過渡中出現(xiàn)錯誤。常見的錯誤例如，不能獲取模板，或者 promise 不能成功 resolve 等等

視圖加載事件

ui-router 也提供了視圖加載階段的事件。

$viewContentLoading

視圖開始加載，但是，在 DOM 渲染之前。

可以如下監(jiān)聽。

$scope.$on('$viewContentLoading', function(event, viewConfig){ // Access to all the view config properties.// and one special property 'targetView'// viewConfig.targetView });

?

?

$viewContentLoad

視圖已經(jīng)加載，渲染完成。

$stateParams

在前面的內(nèi)容中，我們使用 $stateParams 來從 url 參數(shù)中獲取 params ，這個服務(wù)，與 url 不同。

例如，如果我們 inbox 狀態(tài)的 url 如下。

url: '/inbox/:inboxId/messages/{sorted}?from&to'

?

用戶使用下面的 url 訪問

/inbox/123/messages/ascending?from=10&to=20

?

我們的 $stateParams 對象將獲取如下數(shù)據(jù)。

{inboxId: '123', sorted: 'ascending', from: 10, to: 20}

?

?

$urlRouterProvider

類似 ngRoute, 可以創(chuàng)建當特定的 url 訪問時處理的規(guī)則。

可以通過不同的 url 激活不同的狀態(tài)，所以在管理激活和加載狀態(tài)的時候， $urlRouterProvider 并不是必須的。在狀態(tài)管理之外的時候才會需要，比如重定向，或者驗證的時候。

when()

when 函數(shù)需要兩個參數(shù)，我們希望匹配的路徑，另外就是我們希望重新定向的目標。也可以是一個函數(shù)。

例如，如果希望任何空的路由到我們的 /inbox 路由中。

.config(function($urlRouterProvider) {$urlRouterProvider.when('', '/inbox'); });

?

如果提供一個函數(shù)處理，路由匹配的時候，這個函數(shù)就會被調(diào)用，它可以返回下列三種之一的結(jié)果。

• false，這個回應(yīng)告訴 $urlRouter 規(guī)則并不匹配，應(yīng)該查找其它匹配的狀態(tài)，在我們希望驗證用戶是否訪問正確地址的時候很有用。
• 字符串，$urlRouter 將其作為重定向目標。
• true 或者 undefined，函數(shù)已經(jīng)處理了這個 url?

otherwise()

與 ngRoute 中的 oterwise() 方法類似，oterwiese() 在沒有其它路由匹配的情況下重定向。這是創(chuàng)建默認 url 的好方法。

otherwise() 函數(shù)只需要一個參數(shù)，一個字符串或者一個函數(shù)。

如果提供了一個字符串，就會被看做一個默認地址，在任何錯誤的或者不能匹配任何路由的時候，就會被重定向到這個地址。

如果是一個函數(shù)，在沒有其它路由匹配的時候，就會被執(zhí)行

.config(function($urlRouterProvider) {$urlRouterProvider.otherwise('/');// or$urlRouterProvider.otherwise(function($injector, $location) {$location.path('/');}); });

?

?

rule()

如果我們希望處理任何路由，或者在其它路由之前進行一些處理，可以使用 rule() 函數(shù)。

我們必須返回一個驗證的路徑串

app.config(function($urlRouterProvider){$urlRouterProvider.rule(function($injector, $location) {return '/index';}); })

?

?激活狀態(tài)

有三種方式來激活特定的狀態(tài)

• 使用 $state.go() 方法
• 使用 ui-sref 綁定的連接
• 直接導(dǎo)航到與狀態(tài)關(guān)聯(lián)的 url

?

創(chuàng)建報名向?qū)?/h1>

為什么不使用一下它呢？

我們創(chuàng)建一個報名的向?qū)硌菥氁幌?ui-router 的使用。

使用 ui-router ，我們創(chuàng)建一個簡單的報名服務(wù)，使用一個控制器來處理報名。

首先，我們創(chuàng)建應(yīng)用的視圖。

<div ng-controller="WizardSignupController"><h2>Signup wizard</h2><div ui-view></div> </div>

?

在這個視圖中，我們定義了報名視圖。下一步，在報名向?qū)е?#xff0c;需要三步

• start，在這一步，我們獲取用戶名稱，提供歡迎信息
• email, 這里，我們獲取用戶的 email 信息
• finish, 這里，用戶完成報名，我們簡單地顯示完成頁面

報名處理依賴 wizardapp.controllers 模塊，

angular.module('wizardApp', ['ui.router','wizardapp.controllers']);

?

我們的 wizardSignupController 控制器，使用 $scope.user 對象在整個過程中收集信息。

angular.module('wizardapp.controllers', []) .controller('WizardSignupController', ['$scope', '$state', function($scope, $state) {$scope.user = {};$scope.signup = function() {} }]);

?

現(xiàn)在，向?qū)幚磉壿嬏幚碇饕ぷ?#xff0c;配置 config()?

angular.module('wizardApp', ['ui.router', 'wizardapp.controllers']) .config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {$stateProvider.state('start', {url: '/step_1',templateUrl: 'partials/wizard/step_1.html'}).state('email', {url: '/step_2',templateUrl: 'partials/wizard/step_2.html'}).state('finish', {url: '/finish',templateUrl: 'partials/wizard/step_3.html'}); }]);

?

這樣，我們基本的流程就已經(jīng)有了。現(xiàn)在，如果用戶導(dǎo)航到 /step_1，就會看到開始頁面，盡管現(xiàn)在地址是 /step_1, 而我們希望是 /wizard/step_1

為了這個效果，我們創(chuàng)建 abstract 狀態(tài)來寄宿各個步驟。

.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {$stateProvider.state('wizard', {abstract: true,url: '/wizard',template: '<div><div ui-view></div></div>'}).state('wizard.start', {url: '/step_1',templateUrl: 'partials/wizard/step_1.html'}).state('wizard.email', {url: '/step_2',templateUrl: 'partials/wizard/step_2.html'}).state('wizard.finish', {url: '/finish',templateUrl: 'partials/wizard/step_3.html'}); }]);

?

這樣，它們都安全地嵌套到 /wizard 之下了。

在狀態(tài)之間進行導(dǎo)航，我們使用 ui-router 提供的指令 ui-sref 來生成鏈接，這個指令用來生成導(dǎo)航鏈接。

例如，step_1.html 如下。

<!-- step_1.html --> <h3>Step 1</h3> <form ng-submit=""><input type="text" ng-model="user.name" placeholder="Your name" /><input type="submit" class="button" value="Next" ui-sref="wizard.email"/> </form>

?

我們還希望在報名流程完成之后，執(zhí)行特定的動作，來調(diào)用定義在父控制器上的 signup 函數(shù)，我們可以在最后的步驟中添加一個控制器來調(diào)用 $scope.signup() 函數(shù)。由于整個向?qū)Х庋b在 WizardSignupControoler 中，我們可以像通常一樣訪問嵌套的 scope 對象。

.state('wizard.finish', {url: '/finish',templateUrl: 'partials/wizard/step_3.html',controller: function($scope) {$scope.signup();} });

?

?

總結(jié)

在這里，我們深入討論了 ui-router 幾乎全部的特性，我們發(fā)現(xiàn)這個庫非常有用，希望也能幫到你。

?參考資料

學習 ui-router 系列文章索引

分類:?Web Front,AngularJS

轉(zhuǎn)載于:https://www.cnblogs.com/dianli_jingjing/p/7363914.html

總結(jié)

以上是生活随笔為你收集整理的深入 AngularUI Router的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。