欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2016年12月27日 08:44:47   作者：strivescript  
這篇文章主要給大家介紹了如何用Angularjs中的模板ui-route來管理狀態(tài)的方法,文中通過示例代碼介紹的很詳細(xì)，相信對(duì)大家的理解和學(xué)習(xí)具有一定的參考借鑒價(jià)值，有需要的朋友可以一起來學(xué)習(xí)學(xué)習(xí)。

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

  • 在應(yīng)用程序的整個(gè)用戶界面和導(dǎo)航中，一個(gè)狀態(tài)對(duì)應(yīng)于一個(gè)頁面位置
  • 通過定義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)被激活時(shí)，它的模板會(huì)自動(dòng)插入到父狀態(tài)對(duì)應(yīng)的模板中包含ui-view屬性的元素內(nèi)部。如果是頂層的狀態(tài)，那么它的父模板就是index.html。

激活狀態(tài)

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

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

Templates 模板

可以通過下面幾種方法來配置一個(gè)狀態(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 的值也可以是一個(gè)函數(shù)返回的url，函數(shù)帶一個(gè)預(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>有一些默認(rèn)的內(nèi)容，當(dāng)狀態(tài)被激活之后默認(rèn)內(nèi)容將被狀態(tài)對(duì)應(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 控制器

可以為模板指定一個(gè)控制器（controller）。警告：控制器不會(huì)被實(shí)例化如果模板沒有定義。 設(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)定義了一個(gè)控制器，只需要指定控制器的名稱即可：

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

對(duì)于更高級(jí)的需要，可以使用controllerProvider來動(dòng)態(tài)返回一個(gè)控制器函數(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ù)需要實(shí)例化，當(dāng)相應(yīng)的 scope 被創(chuàng)建時(shí)。例如，當(dāng)用戶點(diǎn)擊一個(gè) url 手動(dòng)導(dǎo)航一個(gè)狀態(tài)時(shí)，$stateProvider 將加載對(duì)應(yīng)的模板到視圖中，并且將控制器和模板的 scope 綁定在一起。

解決器 Resolver

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

    key – {string} ：注入控制器的依賴項(xiàng)名稱。

    factory – {string|function} ：

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

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

          例子

          在 controller 實(shí)例化之前，resolve 中的每一個(gè)對(duì)象都必須 be resolved，請(qǐng)注意每個(gè) 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">// 請(qǐng)給函數(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">// 如果想對(duì)返回結(jié)果進(jìn)行處理， 可以使用 .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ù)的依賴項(xiàng)，通過參數(shù)傳入</span>
 <span class="hljs-comment">// 提示：依賴項(xiàng) $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">// 控制器將等待上面的解決項(xiàng)都被解決后才被實(shí)例化</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 中的對(duì)象</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 對(duì)象提供自定義數(shù)據(jù)

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

<span class="hljs-comment">// 基于對(duì)象和基于字符串定義 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ù)是可選配置項(xiàng)，分別稱為當(dāng)一個(gè)狀態(tài)變得活躍的和不活躍的時(shí)候觸發(fā)?；卣{(diào)函數(shù)也可以訪問所有解決依賴項(xiàng)。

$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 是解決依賴項(xiàng)，這里也是可以使用解決依賴項(xiàng)的
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 是解決依賴項(xiàng)，這里也是可以使用解決依賴項(xiàng)的
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 時(shí)通過狀態(tài)名查找狀態(tài)，當(dāng)狀態(tài)無法找到時(shí)發(fā)生。該事件在 scope 鏈上廣播，只允許一次處理錯(cuò)誤的機(jī)會(huì)。unfoundState將作為參數(shù)傳入事件監(jiān)聽函數(shù)，下面例子中可以看到unfoundState的三個(gè)屬性。使用 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ā)生錯(cuò)誤時(shí)觸發(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)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。

相關(guān)文章

最新評(píng)論