利用Angularjs中模塊ui-route管理狀態(tài)的方法

更新時間：2016年12月27日 08:44:47 作者：strivescript

這篇文章主要給大家介紹了如何用Angularjs中的模板ui-route來管理狀態(tài)的方法,文中通過示例代碼介紹的很詳細，相信對大家的理解和學(xué)習(xí)具有一定的參考借鑒價值，有需要的朋友可以一起來學(xué)習(xí)學(xué)習(xí)。

ui-router 的工作原理非常類似于 Angular 的路由控制器，但它只關(guān)注狀態(tài)。

在應(yīng)用程序的整個用戶界面和導(dǎo)航中，一個狀態(tài)對應(yīng)于一個頁面位置
通過定義controller、template和view等屬性，來定義指定位置的用戶界面和界面行為
通過嵌套的方式來解決頁面中的一些重復(fù)出現(xiàn)的部位

最簡單的形式

模板可以通過下面這種最簡單的方式來指定

<!-- in index.html -->
<body ng-controller="MainCtrl">
 <section ui-view></section>
</body>

// in app-states.js (or whatever you want to name it)
$stateProvider.state('contacts', {
 template: '<h1>My Contacts</h1>'
})

模板將被插入哪里?

狀態(tài)被激活時，它的模板會自動插入到父狀態(tài)對應(yīng)的模板中包含ui-view屬性的元素內(nèi)部。如果是頂層的狀態(tài)，那么它的父模板就是index.html。

激活狀態(tài)

有三種方法來激活狀態(tài)：

調(diào)用$state.go()方法，這是一個高級的便利方法。
點擊包含ui-sref指令的鏈接。
導(dǎo)航到與狀態(tài)相關(guān)聯(lián)的 url。

Templates 模板

可以通過下面幾種方法來配置一個狀態(tài)的模板。方法一：配置template屬性，指定一段 HTML 字符串，這人是設(shè)置模板的最簡單的方式。

$stateProvider.state(<span class="hljs-string">'contacts'</span>, {
 template: <span class="hljs-string">'&lt;h1&gt;My Contacts&lt;/h1&gt;'</span>
})

方法二：配置templateUrl屬性，來加載指定位置的模板，這是設(shè)置模板的常用方法。

$stateProvider.state(<span class="hljs-string">'contacts'</span>, {
 templateUrl: <span class="hljs-string">'contacts.html'</span>
})

templateUrl 的值也可以是一個函數(shù)返回的url，函數(shù)帶一個預(yù)設(shè)參數(shù)stateParams。

方法三：通過 templateProvider 函數(shù)返回模板的 HTML。

<span class="hljs-variable">$stateProvider</span>.state(<span class="hljs-string">'contacts'</span>, {
 templateProvider: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(<span class="hljs-variable">$timeout</span>, <span class="hljs-variable">$stateParams</span>)</span> </span>{
 <span class="hljs-keyword">return</span> <span class="hljs-variable">$timeout</span>(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
 <span class="hljs-keyword">return</span> <span class="hljs-string">'&lt;h1&gt;'</span> + <span class="hljs-variable">$stateParams</span>.contactId + <span class="hljs-string">'&lt;/h1&gt;'</span>
 }, <span class="hljs-number">100</span>);
 }
})

如果想在狀態(tài)被激活前，讓<ui-view>有一些默認的內(nèi)容，當(dāng)狀態(tài)被激活之后默認內(nèi)容將被狀態(tài)對應(yīng)的模板替換。

<span class="hljs-tag">&lt;<span class="hljs-title">body</span>&gt;</span>
 <span class="hljs-tag">&lt;<span class="hljs-title">ui-view</span>&gt;</span>
 <span class="hljs-tag">&lt;<span class="hljs-title">i</span>&gt;</span>Some content will load here!<span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-title">ui-view</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">body</span>&gt;</span>

Controllers 控制器

可以為模板指定一個控制器（controller）。警告：控制器不會被實例化如果模板沒有定義。設(shè)置控制器：

$stateProvider.state('contacts', {
 <span class="hljs-keyword">template</span>: '&lt;h1&gt;{{title}}&lt;/h1&gt;',
 controller: function($scope){
 $scope.title = '<span class="hljs-type">My</span> <span class="hljs-type">Contacts</span>';
 }
})

如果在模塊中已經(jīng)定義了一個控制器，只需要指定控制器的名稱即可：

$stateProvider.state(<span class="hljs-string">'contacts'</span>, {
 template: <span class="hljs-keyword">...</span>,
 controller: <span class="hljs-string">'ContactsCtrl'</span>
})

使用 controllerAs語法：

$stateProvider.state(<span class="hljs-string">'contacts'</span>, {
 template: <span class="hljs-keyword">...</span>,
 controller: <span class="hljs-string">'ContactsCtrl as contact'</span>
})

對于更高級的需要，可以使用controllerProvider來動態(tài)返回一個控制器函數(shù)或字符串：

$stateProvider.state(<span class="hljs-string">'contacts'</span>, {
 template: <span class="hljs-keyword">...</span>,
 controllerProvider: <span class="hljs-keyword">function</span>($stateParams) {
 var ctrlName = $stateParams.type + <span class="hljs-string">"Controller"</span>;
 <span class="hljs-keyword">return</span> ctrlName;
 }
})

控制器可以使用 $scope.on()方法來監(jiān)聽事件狀態(tài)轉(zhuǎn)換。控制器可以根據(jù)需要實例化，當(dāng)相應(yīng)的 scope 被創(chuàng)建時。例如，當(dāng)用戶點擊一個 url 手動導(dǎo)航一個狀態(tài)時，$stateProvider 將加載對應(yīng)的模板到視圖中，并且將控制器和模板的 scope 綁定在一起。

解決器 Resolver

可以使用 resolver 為控制器提供可選的依賴注入項。 resolver 配置項是一個由key/value構(gòu)成的對象。

key – {string} ：注入控制器的依賴項名稱。

factory – {string|function} ：

1、string：一個服務(wù)的別名

2、function：函數(shù)的返回值將作為依賴注入項，如果函數(shù)是一個耗時的操作，那么控制器必須等待該函數(shù)執(zhí)行完成（be resolved）才會被實例化。

例子

在 controller 實例化之前，resolve 中的每一個對象都必須 be resolved，請注意每個 resolved object 是怎樣作為參數(shù)注入到控制器中的。

<span class="hljs-variable">$stateProvider</span>.state(<span class="hljs-string">'myState'</span>, {
 resolve:{
 
 <span class="hljs-comment">// Example using function with simple return value.</span>
 <span class="hljs-comment">// Since it's not a promise, it resolves immediately.</span>
 simpleObj: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{
 <span class="hljs-keyword">return</span> {value: <span class="hljs-string">'simple!'</span>};
 },
 
 <span class="hljs-comment">// Example using function with returned promise.</span>
 <span class="hljs-comment">// 這是一種典型使用方式</span>
 <span class="hljs-comment">// 請給函數(shù)注入任何想要的服務(wù)依賴，例如 $http</span>
 promiseObj: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(<span class="hljs-variable">$http</span>)</span></span>{
 <span class="hljs-comment">// $http returns a promise for the url data</span>
 <span class="hljs-keyword">return</span> <span class="hljs-variable">$http</span>({method: <span class="hljs-string">'GET'</span>, url: <span class="hljs-string">'/someUrl'</span>});
 },
 
 <span class="hljs-comment">// Another promise example. </span>
 <span class="hljs-comment">// 如果想對返回結(jié)果進行處理， 可以使用 .then 方法</span>
 <span class="hljs-comment">// 這是另一種典型使用方式</span>
 promiseObj2: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(<span class="hljs-variable">$http</span>)</span></span>{
 <span class="hljs-keyword">return</span> <span class="hljs-variable">$http</span>({method: <span class="hljs-string">'GET'</span>, url: <span class="hljs-string">'/someUrl'</span>})
  .then (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(data)</span> </span>{
  <span class="hljs-keyword">return</span> doSomeStuffFirst(data);
  });
 }, 
 
 <span class="hljs-comment">// 使用服務(wù)名的例子，這將在模塊中查找名稱為 'translations' 的服務(wù)，并返回該服務(wù) </span>
 <span class="hljs-comment">// Note: The service could return a promise and</span>
 <span class="hljs-comment">// it would work just like the example above</span>
 translations: <span class="hljs-string">"translations"</span>,
 
 <span class="hljs-comment">// 將服務(wù)模塊作為解決函數(shù)的依賴項，通過參數(shù)傳入</span>
 <span class="hljs-comment">// 提示：依賴項 $stateParams 代表 url 中的參數(shù)</span>
 translations2: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(translations, <span class="hljs-variable">$stateParams</span>)</span></span>{
  <span class="hljs-comment">// Assume that getLang is a service method</span>
  <span class="hljs-comment">// that uses $http to fetch some translations.</span>
  <span class="hljs-comment">// Also assume our url was "/:lang/home".</span>
  translations.getLang(<span class="hljs-variable">$stateParams</span>.lang);
 },
 
 <span class="hljs-comment">// Example showing returning of custom made promise</span>
 greeting: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(<span class="hljs-variable">$q</span>, <span class="hljs-variable">$timeout</span>)</span></span>{
  <span class="hljs-keyword">var</span> deferred = <span class="hljs-variable">$q</span>.defer();
  <span class="hljs-variable">$timeout</span>(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
  deferred.resolve(<span class="hljs-string">'Hello!'</span>);
  }, <span class="hljs-number">1000</span>);
  <span class="hljs-keyword">return</span> deferred.promise;
 }
 },
 
 <span class="hljs-comment">// 控制器將等待上面的解決項都被解決后才被實例化</span>
 controller: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(<span class="hljs-variable">$scope</span>, simpleObj, promiseObj, promiseObj2, translations, translations2, greeting)</span></span>{
 
 <span class="hljs-variable">$scope</span>.simple = simpleObj.value;
 
 <span class="hljs-comment">// 這里可以放心使用 promiseObj 中的對象</span>
 <span class="hljs-variable">$scope</span>.items = promiseObj.items;
 <span class="hljs-variable">$scope</span>.items = promiseObj2.items;
 
 <span class="hljs-variable">$scope</span>.title = translations.getLang(<span class="hljs-string">"english"</span>).title;
 <span class="hljs-variable">$scope</span>.title = translations2.title;
 
 <span class="hljs-variable">$scope</span>.greeting = greeting;
 }
})

為 $state 對象提供自定義數(shù)據(jù)

可以給 $state 對象提供自定義數(shù)據(jù)（建議使用data屬性，以免沖突）

<span class="hljs-comment">// 基于對象和基于字符串定義 state 的例子</span>
<span class="hljs-keyword">var</span> contacts = { 
name: <span class="hljs-string">'contacts'</span>,
templateUrl: <span class="hljs-string">'contacts.html'</span>,
data: {
 customData1: <span class="hljs-number">5</span>,
 customData2: <span class="hljs-string">"blue"</span>
} 
}
$stateProvider
.state(contacts)
.state(<span class="hljs-string">'contacts.list'</span>, {
templateUrl: <span class="hljs-string">'contacts.list.html'</span>,
data: {
 customData1: <span class="hljs-number">44</span>,
 customData2: <span class="hljs-string">"red"</span>
} 
})

可以通過下面的方式來訪問上面定義的數(shù)據(jù)：

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Ctrl</span><span class="hljs-params">(<span class="hljs-variable">$state</span>)</span></span>{
console.log(<span class="hljs-variable">$state</span>.current.data.customData1) <span class="hljs-comment">// 輸出 5;</span>
console.log(<span class="hljs-variable">$state</span>.current.data.customData2) <span class="hljs-comment">// 輸出 "blue";</span>
}

onEnter 和 onExit 回調(diào)函數(shù)

onEnter和onExit回調(diào)函數(shù)是可選配置項，分別稱為當(dāng)一個狀態(tài)變得活躍的和不活躍的時候觸發(fā)?；卣{(diào)函數(shù)也可以訪問所有解決依賴項。

$stateProvider.state(<span class="hljs-string">"contacts"</span>, {
template: <span class="hljs-string">'&lt;h1&gt;{{title}}&lt;/h1&gt;'</span>,
resolve: { title: <span class="hljs-string">'My Contacts'</span> },
controller: <span class="hljs-keyword">function</span>($scope, title){
$scope.title = <span class="hljs-string">'My Contacts'</span>;
},
// title 是解決依賴項，這里也是可以使用解決依賴項的
onEnter: <span class="hljs-keyword">function</span>(title){ 
<span class="hljs-keyword">if</span>(title){ <span class="hljs-keyword">...</span> do something <span class="hljs-keyword">...</span> }
},
// title 是解決依賴項，這里也是可以使用解決依賴項的
onExit: <span class="hljs-keyword">function</span>(title){
<span class="hljs-keyword">if</span>(title){ <span class="hljs-keyword">...</span> do something <span class="hljs-keyword">...</span> }
}
})

State Change Events 狀態(tài)改變事件

所有這些事件都是在$rootScope作用域觸發(fā)

$stateChangeStart – 當(dāng)模板開始解析之前觸發(fā)

$rootScope.$on(<span class="hljs-string">'$stateChangeStart'</span>, 
<span class="hljs-keyword">function</span>(event, toState, toParams, fromState, fromParams){ <span class="hljs-keyword">...</span> })

注意：使用event.preventDefault()可以阻止模板解析的發(fā)生

<span class="hljs-variable">$rootScope</span>.<span class="hljs-variable">$on</span>(<span class="hljs-string">'$stateChangeStart'</span>, 
<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(event, toState, toParams, fromState, fromParams)</span></span>{ 
 event.preventDefault(); 
 <span class="hljs-comment">// transitionTo() promise will be rejected with </span>
 <span class="hljs-comment">// a 'transition prevented' error</span>
})

$stateNotFound – v0.3.0 – 在 transition 時通過狀態(tài)名查找狀態(tài)，當(dāng)狀態(tài)無法找到時發(fā)生。該事件在 scope 鏈上廣播，只允許一次處理錯誤的機會。unfoundState將作為參數(shù)傳入事件監(jiān)聽函數(shù)，下面例子中可以看到unfoundState的三個屬性。使用 event.preventDefault() 來阻止模板解析.

// somewhere, assume lazy.<span class="hljs-keyword">state</span> has not been defined
<span class="hljs-variable">$state</span>.go(<span class="hljs-string">"lazy.state"</span>, {a:<span class="hljs-number">1</span>, b:<span class="hljs-number">2</span>}, {inherit:false});
// somewhere else
<span class="hljs-variable">$scope</span>.<span class="hljs-variable">$on</span>('<span class="hljs-variable">$stateNotFound</span>', 
function(event, unfoundState, <span class="hljs-keyword">from</span>State, <span class="hljs-keyword">from</span>Params){ 
 console.<span class="hljs-keyword">log</span>(unfoundState.<span class="hljs-keyword">to</span>); // <span class="hljs-string">"lazy.state"</span>
 console.<span class="hljs-keyword">log</span>(unfoundState.<span class="hljs-keyword">to</span>Params); // {a:<span class="hljs-number">1</span>, b:<span class="hljs-number">2</span>}
 console.<span class="hljs-keyword">log</span>(unfoundState.options); // {inherit:false} + <span class="hljs-keyword">default</span> options
})

$stateChangeSuccess – 當(dāng)模板解析完成后觸發(fā)

$rootScope.$on(<span class="hljs-string">'$stateChangeSuccess'</span>, 
<span class="hljs-keyword">function</span>(event, toState, toParams, fromState, fromParams){ <span class="hljs-keyword">...</span> })

$stateChangeError – 當(dāng)模板解析過程中發(fā)生錯誤時觸發(fā)

$rootScope.$on(<span class="hljs-string">'$stateChangeError'</span>, 
<span class="hljs-keyword">function</span>(event, toState, toParams, fromState, fromParams, error){ <span class="hljs-keyword">...</span> })

View Load Events 視圖加載事件

$viewContentLoading – 當(dāng)視圖開始加載，DOM渲染完成之前觸發(fā)，該事件將在$scope鏈上廣播此事件。

<span class="hljs-variable">$scope</span>.<span class="hljs-variable">$on</span>(<span class="hljs-string">'$viewContentLoading'</span>, 
<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(event, viewConfig)</span></span>{ 
 <span class="hljs-comment">// Access to all the view config properties.</span>
 <span class="hljs-comment">// and one special property 'targetView'</span>
 <span class="hljs-comment">// viewConfig.targetView </span>
});

$viewContentLoaded – 當(dāng)視圖加載完成，DOM渲染完成之后觸發(fā)，視圖所在的$scope發(fā)出該事件。

$scope.$on(<span class="hljs-string">'$viewContentLoading'</span>, 
$scope.$on(<span class="hljs-string">'$viewContentLoaded'</span>, 
<span class="hljs-keyword">function</span>(event){ <span class="hljs-keyword">...</span> });

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。

您可能感興趣的文章: