Angularjs?ui-router - 組件：

• $state / $stateProvider：管理狀態(tài)定義、當(dāng)前狀態(tài)和狀態(tài)轉(zhuǎn)換。包含觸發(fā)狀態(tài)轉(zhuǎn)換的事件和回調(diào)函數(shù)，異步解決目標(biāo)狀態(tài)的任何依賴項，更新$location到當(dāng)前狀態(tài)。由于狀態(tài)包含關(guān)聯(lián)的 url，通過$urlRouterProvider生成一個路由規(guī)則來執(zhí)行轉(zhuǎn)換的狀態(tài)。

• ui-view指示器：渲染狀態(tài)中定義的視圖，是狀態(tài)中定義的視圖的一個占位符。

• $urlRouter / $urlRouterProvider：管理了一套路由規(guī)則列表來處理當(dāng)$location發(fā)生變化時如何跳轉(zhuǎn)。最低級的方式是，規(guī)則可以是任意函數(shù)，來檢查$location，并在處理完成時候返回true。支持正則表達(dá)式規(guī)則和通過$urlMatcherFactory編譯的UrlMatcher對象的 url 占位符規(guī)則。

• $urlMatcherFactory：將 url和占位符編譯為UrlMatcher對象。除了$routeProvider支持的占位符語法之外，它還支持?jǐn)U展語法，允許一個正則表達(dá)式指定占位符，并且能夠提取命名參數(shù)和查詢url的一部分。

• $templateFactory?- 通過$http?/?$templateCache來加載模板，供狀態(tài)配置中使用。

?

AngularJS不需要任何第三方庫，利用自身集成的各個模塊便可開發(fā)出功能齊全的web應(yīng)用，不過活躍的AngularJS社區(qū)也開發(fā)了很多能夠最大限度強(qiáng)化web應(yīng)用的編程庫。本文帶讀者了解專業(yè)開發(fā)使用的模塊AngularUI中的ui-路由(ui-router)。AngularUI庫已經(jīng)被分成了幾個模塊，用戶可以只選擇載入自己感興趣的模塊，而不用載入整個庫。

UI-Router

UI-Router被認(rèn)為是AngularUI為開發(fā)者提供的最實用的一個模塊，它是一個讓開發(fā)者能夠根據(jù)URL狀態(tài)或者說是'機(jī)器狀態(tài)'來組織和控制界面UI的渲染，而不是僅僅只改變路由（傳統(tǒng)AngularJS應(yīng)用實用的方式）。該模塊為開發(fā)者提供了很多最視圖（view）額外的控制。開發(fā)者可以創(chuàng)建嵌套分層的視圖、在同一個頁面使用多個視圖、讓多個視圖控制某個視圖等更多的功能。即使是非常復(fù)雜的web應(yīng)用，UI-Router也可以極佳地駕馭。

安裝

安裝方式可以選擇下載發(fā)行版本或者使用Bower（前端包管理器）：

$ bower install angular-ui-router --save

同時也需要將源文件包含到頁面中：

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

接下來，將UI-Router作為web應(yīng)用的依賴，注入到主程序：

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

與集成的ngRoute服務(wù)不同的是，UI-Router可以將視圖嵌套，因為它基于的是操作狀態(tài)而僅非URL。與傳統(tǒng)做法使用ng-view不同的是，在ngRoute里需要使用ui-view服務(wù)。當(dāng)在ui-router中處理路由和狀態(tài)時，開發(fā)者的重心是當(dāng)前的狀態(tài)是什么以及在哪一個頁面里。

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

和ngRoute一樣，為特定狀態(tài)指定的模板將會放在<div ui-view></div>元素中。在這些模板中也可以包含自己的ui-view,這就是在同一個路由下實現(xiàn)嵌套視圖的方法。要定義一個路由，與傳統(tǒng)的方法相同：使用.config方式，但使用的不是$routeProvider而是$stateProvider。

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

上述代碼在設(shè)置對象上定義了一個叫start的狀態(tài)。設(shè)置對象stateConfig和路由設(shè)置對象的選項是非常相似的。

模板，模板路徑，模板Provider

開發(fā)者可以在每個視圖下使用如下方式來設(shè)置模板 - template - HTML字符串，或者是返回HTML字符串的函數(shù) - templateUrl - HTML模板的路徑，或者是返回HTML模板路徑的函數(shù) - templateProvider - 返回HTML字符串的函數(shù) 例如：

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

控制器

和ngRoute相似，開發(fā)者可以指定任何已經(jīng)被注冊的控制器，或者在路由里面創(chuàng)建一個作為控制器的函數(shù)。但如果沒有定義模板，控制器將無效。

預(yù)載入Resolve

使用預(yù)載入功能，開發(fā)者可以預(yù)先載入一系列依賴或者數(shù)據(jù)，然后注入到控制器中。在ngRoute中resolve選項可以允許開發(fā)者在路由到達(dá)前載入數(shù)據(jù)保證（promises）。在使用這個選項時比使用angular-route有更大的自由度。

預(yù)載入選項需要一個對象，這個對象的key即要注入到控制器的依賴，這個對象的value為需要被載入的factory服務(wù)。

如果傳入的時字符串，angular-route會試圖匹配已經(jīng)注冊的服務(wù)。如果傳入的是函數(shù)，該函數(shù)將會被注入，并且該函數(shù)返回的值便是控制器的依賴之一。如果該函數(shù)返回一個數(shù)據(jù)保證（promise），這個數(shù)據(jù)保證將在控制器被實例化前被預(yù)先載入并且數(shù)據(jù)會被注入到控制器中。

$stateProvider.state('home', { resolve: { //這個函數(shù)的值會被直接返回，因為它不是數(shù)據(jù)保證 person: function() { return { name: "Ari", email: "ari@fullstack.io" } }, //這個函數(shù)為數(shù)據(jù)保證, 因此它將在控制器被實例化之前載入。 currentDetails: function($http) { return $http({ method: 'JSONP', url: '/current_details' }); }, //前一個數(shù)據(jù)保證也可作為依賴注入到其他數(shù)據(jù)保證中！（這個非常實用） facebookId: 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選項將會為該應(yīng)用的狀態(tài)指定一個URL基于用戶瀏覽該應(yīng)用所在的狀態(tài)。這樣當(dāng)在瀏覽該應(yīng)用的時候便能實現(xiàn)深度鏈接的效果。 該選項與ngRoute的URL相似，但可以被視為對ngRoute主要的升級，在接下來的文章里你便會認(rèn)可這一點。開發(fā)者可以這樣指定一個基本的路由。

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

當(dāng)用戶瀏覽到/inbox時，該應(yīng)用將狀態(tài)改為inbox同時向主ui-view元素中插入模板中的內(nèi)容('Welcome to your inbox')。URL參數(shù)有多個選項，因此它非常強(qiáng)大。開發(fā)者可以像設(shè)置ngRoute一樣設(shè)置最基本的參數(shù)：

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

現(xiàn)在將:inboxId最為URL的第二個部分，例如：訪問/inbox/1,那么$stateParams.inboxId就為1（$stateParams為{inboxId:1}）。同時也可使用不同的語法：

url: '/inbox/{inboxId}'

路徑必須匹配URL，與ngRoute不同的是，當(dāng)用戶訪問到/inbox/時，上面的的路徑會被激活，然而當(dāng)訪問到/inbox時不會被激活。路徑同時也使開發(fā)者可以使用正則表達(dá)式來匹配，例如：

// 限定id為6位16進(jìn)制數(shù)字url: '/inbox/{inboxId:[0-9a-fA-F]{6}}', // 或者 // 匹配任何在 `/inbox`后面的url（慎用）并匹配值到indexId url: '/inbox/{inboxId:.*}'

注意，在路由中目前還無法使用路由組，路由數(shù)據(jù)預(yù)載入器無法預(yù)載入。

在路徑里也可以指定查詢參數(shù)：

// /inbox?sort=ascending 將會被匹配url: '/inbox?sort'

嵌套路由

使用url參數(shù)可以實現(xiàn)嵌套的路由，有了嵌套路由便可在同一個模板同一個路由實現(xiàn)多層次的ui-view，例如在/inbox中嵌入更多路由：

$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>' });

第一個路由是傳統(tǒng)的，注意第二個，它是/inbox下的一個子路由：state( . )語法指定了它使子路由。/inbox/1將匹配第一個路由，而/index/1/priority會匹配第二個路由。使用這種語法，在父視圖中的ui-view元素將會由第二個路由控制。

Params 路由參數(shù)

params選項是一個包含路徑中的參數(shù)和正則表達(dá)式匹配結(jié)果的數(shù)組。該選項不能和url選項混用！當(dāng)某狀態(tài)被激活時，應(yīng)用將這個數(shù)組賦值給$stateParams服務(wù)。

Views 視圖

開發(fā)者可以在一個狀態(tài)中設(shè)置多個有名稱的視圖。該功能在ui-router中很強(qiáng)大，開發(fā)者可以在同一個模板中改變和切換不同的視圖。

<如果設(shè)置了視圖選項，則該狀態(tài)的‘template’，‘templateUrl’及‘templateProvider’將被忽略。如果想在路由里包含父級模板，就需要創(chuàng)建一個包含模板的抽象模板。

例如有這樣的視圖：

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

接下來就可以創(chuàng)建將被分別被插入到上述ui-view的有命名的視圖了，每個子視圖可以包含自己的模板、控制器和預(yù)載入數(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給子模板。使用它可以在同一個url下傳遞自定義數(shù)據(jù)或者預(yù)載入的依賴。除了需要添加abstract屬性外，其他設(shè)置和設(shè)定一個常規(guī)狀態(tài)是相同的：

$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 回調(diào)函數(shù)

當(dāng)應(yīng)用進(jìn)入或者離開當(dāng)前狀態(tài)的視圖時會調(diào)用這兩個函數(shù)。這兩個函數(shù)可以訪問預(yù)載入的數(shù)據(jù)。這兩個回調(diào)函數(shù)使開發(fā)者可以根據(jù)狀態(tài)改變來采取某些動作，例如在用戶要離開時可以彈出對話框‘你確定嗎？’以及防止意外操作等。

Data 數(shù)據(jù)

自定義數(shù)據(jù)也可以被附加到狀態(tài)控制對象state configObject.該數(shù)據(jù)和預(yù)載入數(shù)據(jù)resolve屬性相似，但是該數(shù)據(jù)不會被注入到控制器中，promise也不會被預(yù)載入，它的用途是從父狀態(tài)傳遞數(shù)據(jù)到子狀態(tài)。

事件

和ngRoute相同的是，angular-route服務(wù)會在不同的狀態(tài)生命周期lifecycle里啟動某些事件events。監(jiān)聽$scope對象便可以捕獲這些事件然后采取不同的響應(yīng)或者操作。如下的事件將會在$rootScope上觸發(fā)，因此在任何$scope對象上都可以監(jiān)聽到這些事件。

狀態(tài)改變事件

$scope.$on('$stateChangeStart', function(evt, toState, toParams, fromState, fromParams), { // 如果需要阻止事件的完成 evt.preventDefault(); });

可以觸發(fā)的事件包括：

stateChangeStart

當(dāng)狀態(tài)改變開始的時候被觸發(fā)

$stateChangeSuccess

當(dāng)狀態(tài)改變成功后被觸發(fā)

$stateChangeError

當(dāng)狀態(tài)改變遇到錯誤時被觸發(fā)，錯誤通常是目標(biāo)無法載入，需要預(yù)載入的數(shù)據(jù)無法被載入等。

視圖載入事件

視圖載入階段ui-router也提供了一些事件

$viewContentLoading

當(dāng)視圖正在被載入且在DOM被渲染之前觸發(fā)。

$scope.$on('$viewContentLoading', function(event, viewConfig){ // 獲取任何視圖設(shè)置的參數(shù)，以及一個特殊的屬性：viewConfig.targetView });

$viewContentLoaded

當(dāng)視圖被載入且DOM已經(jīng)渲染完成后被觸發(fā)。

$stateParams 狀態(tài)參數(shù)

在上面提及使用$stateparams來提取在url中的不同參數(shù)。該服務(wù)的作用是處理url的不同部分。例如，當(dāng)上述的inbox狀態(tài)是這樣時：

url: '/inbox/:inboxId/messages/{sorted}?from&to' //當(dāng)用戶訪問者鏈接時： '/inbox/123/messages/ascending?from=10&to=20'

$stateParams對象的值為：

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

$urlRouterProvider

和ngRoute一樣，開發(fā)者可以在該對象上設(shè)定特定的URL被激活時做什么的規(guī)則。由于設(shè)定好的狀態(tài)在特定的url被訪問是會自動激活，所以$urlRouterProvider沒有必要用來管理激活和載入狀態(tài)。但當(dāng)需要管理哪些被發(fā)生在當(dāng)前狀態(tài)之外的作用域scope時它會非常有用，例如在重定向或者安全驗證的時候。在模塊的設(shè)置函數(shù)里便可使用$urlRouterProvider。

when()

該函數(shù)需要兩個參數(shù)：1.當(dāng)前的路徑，2.需要重定向到的路徑（或者是需要在路徑被訪問是運行的函數(shù)）。設(shè)置重定向前需要為$urlRouterProvider設(shè)置when函數(shù)來接受一個字符串。例如，當(dāng)希望重定向一個空的路由到/inbox：

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

如果傳遞的是函數(shù)，在路徑被匹配時該函數(shù)會被執(zhí)行，處理器返回如下3個值中的一個： - falsy，該回應(yīng)告訴$urlRouter沒有匹配到當(dāng)前url規(guī)則，應(yīng)該嘗試匹配新的路徑，這樣能保證用戶訪問了正常的路徑。 - 字符串，$urlRouter將該字符串當(dāng)做重定向的路徑。 - TRUE 或者 undefined，該回應(yīng)告訴$urlRouter，url已被處理

otherwise()

和ngRoute的otherwise()函數(shù)相似，在用戶提交的路徑?jīng)]有被定義的時候它將重定向到指定的頁面。這是個創(chuàng)建’默認(rèn)‘路徑的好方法。 otherwise()只接受一個參數(shù)，要么函數(shù)要么字符串，字符串必須為合法的url路由地址，函數(shù)則會在沒有任何路徑被匹配的時候被運行。

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

rule()

如果想越過任何URL的匹配或者在其他路由前做路由修改，則可以使用rule()函數(shù)。在使用它的時候必須返回一個合法的代表路徑的字符串。

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

總結(jié)

本文涵蓋了ui-router深度及幾乎全部的功能。希望你也發(fā)現(xiàn)這個庫的強(qiáng)大和實用，并在下一個項目中實用這些強(qiáng)大的功能。

更多詳情→http://www.cnblogs.com/ys-ys/p/5052660.html

?

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

總結(jié)

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

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