1.配置使用ui-router

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),紅崗企業(yè)網(wǎng)站建設(shè),紅崗品牌網(wǎng)站建設(shè),網(wǎng)站定制,紅崗網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,紅崗網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

1.1導(dǎo)入js文件

需要注意的是：必須導(dǎo)入angular.min.js這個(gè)文件，且angular.min.js必須導(dǎo)入在angular-ui-router.min.js前面。

1.2注入angular模塊

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

注入的名字“ui.router”，可在angular-ui-router.min.js里找到，如下圖：

1.3定義視圖

ui-view替代的是ngroute路由的ng-view。

1.4配置路由狀態(tài)

app.config(["$stateProvider", function ($stateProvider){    
  $stateProvider   
  .state("home", { //導(dǎo)航用的名字，如login里的login
    url: '/',  //訪問路徑 
    template:'
模板內(nèi)容......
'
  })   

 }]);

2.簡(jiǎn)單示例

3.嵌套路由的實(shí)現(xiàn)

通過url參數(shù)的設(shè)置實(shí)現(xiàn)路由的嵌套（父路由與子路由通過”.“連接就形成了子路由）。嵌套路由可實(shí)現(xiàn)多層次的ui-view。

   
  

    點(diǎn)我顯示父view內(nèi)容
    點(diǎn)我顯示父view與子view內(nèi)容
    
    
  
 
 


 

上面的是相對(duì)路徑方式：

‘parent'將匹配…./index.html#/parent； ‘parent.child'將匹配…./index.html#/parent/child。

若改成絕對(duì)路徑方式，則需要在子url里加上^:

.state("parent.child", {
  url: '^/child',  
  template:'
child
'
}) 

此時(shí)，'parent'將匹配…./index.html#/parent； ‘parent.child'將匹配…./index.html#/child。

4. 通過views實(shí)現(xiàn)多視圖

多個(gè)示圖時(shí)，使用views屬性。該屬性里包含了哪些ui-view，則對(duì)應(yīng)的template或templateUrl里的內(nèi)容就會(huì)填充該ui-view。

同一個(gè)狀態(tài)下有多個(gè)視圖示例：

   
  

    點(diǎn)我顯示index內(nèi)容
    
 
    
 
    
   
  
 
 

 

5.ui-view的定位

@的作用 是用來絕對(duì)定位view，即說明該ui-view屬于哪個(gè)模板。如：'header@index'表示名為header的view屬于index模板。絕對(duì)和相對(duì)路徑的效果一樣，請(qǐng)看如下代碼：

  
  

    show index
    content111111
    content222222
    
       
  
 
 

 

由上面代碼可知，相對(duì)定位不能找到的ui-view需要用@來絕對(duì)定位。

6.URL路由傳參（通過$stateParams服務(wù)獲取參數(shù)）

有url: '/index/:id',和url: '/index/{id}',兩種形式傳參

   
  

    show index  
    show test
    

  
 
 

 

7.Resolve（預(yù)載入）

參考資料：

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

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

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

  
  

    show index  
    

  
 
 

 

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。