深究AngularJS之ui-router詳解

發(fā)布時(shí)間：2020-09-08 20:39:58 來(lái)源：腳本之家閱讀：133 作者：zcl_love_wx 欄目：web開(kāi)發(fā)

1.配置使用ui-router

1.1導(dǎo)入js文件

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

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

1.2注入angular模塊

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

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

深究AngularJS之ui-router詳解

1.3定義視圖

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

<div ui-view></div>

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

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

 }]);

2.簡(jiǎn)單示例

<html>
 <head>  
  <title>ui-router</title>
  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="cache-control" content="no-cache">
  <meta http-equiv="expires" content="0">  
  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  <meta http-equiv="description" content="This is my page">
  <!-- 導(dǎo)入JS -->
  <script type="text/javascript" src="JS/angular.min.js"></script>
  <script type="text/javascript" src="JS/angular-ui-router.min.js"></script> 
 </head>

 <body >  
  <div ng-app="myApp">    
    <div ui-view></div> <!-- 視圖 -->   
  </div> 
 </body>


 <script type="text/javascript">
  //定義模板，并注入ui-router
  var app = angular.module('myApp', ['ui.router']);  
  //對(duì)服務(wù)進(jìn)行參數(shù)初始化，這里配stateProvider服務(wù)的視圖控制
  app.config(["$stateProvider", function ($stateProvider) {   
    $stateProvider   
    .state("home", {
      url: '/',  
      template:'<div>模板內(nèi)容......</div>'
    })   
  }]); 
 </script>

</html>

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

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

 <body >  
  <div ng-app="myApp" >
    <a ui-sref="parent">點(diǎn)我顯示父view內(nèi)容</a>
    <a ui-sref="parent.child">點(diǎn)我顯示父view與子view內(nèi)容</a>
    <div ui-view></div> <!-- 父View -->   
  </div> 
 </body>


 <script type="text/javascript">
  var app = angular.module('myApp', ['ui.router']);  
  app.config(["$stateProvider", function ($stateProvider) {   
    $stateProvider   
    .state("parent", {//父路由
      url: '/parent', 
      template:'<div>parent'
          +'<div ui-view><div>'// 子View
          +'</div>'
    })   
    .state("parent.child", {//子路由
      url: '/child',  
      template:'<div>child</div>'
    })   
  }]);

 </script>

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

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

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

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

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

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

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

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

 <body >  
  <div ng-app="myApp" >
    <a ui-sref="index">點(diǎn)我顯示index內(nèi)容</a>
    <div ui-view="header"></div> 
    <div ui-view="nav"></div> 
    <div ui-view="body"></div>   
  </div> 
 </body>

 <script type="text/javascript">
  var app = angular.module('myApp', ['ui.router']);  
  app.config(["$stateProvider", function ($stateProvider) {   
    $stateProvider   
    .state("index", {
      url: '/index', 
      views:{
        'header':{template:"<div>頭部?jī)?nèi)容</div>"},
        'nav':{template:"<div>菜單內(nèi)容</div>"},
        'body':{template:"<div>展示內(nèi)容</div>"}
      }
    })   

  }]);

 </script>

5.ui-view的定位

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

<body >  
  <div ng-app="myApp" >
    <a ui-sref="index">show index</a>
    <a ui-sref="index.content1">content111111</a>
    <a ui-sref="index.content2">content222222</a>
    <div ui-view="index"><div>       
  </div> 
 </body>

 <script type="text/javascript">
  var app = angular.module('myApp', ['ui.router']);  
  app.config(["$stateProvider", function ($stateProvider) {   
    $stateProvider   
    .state("index", {
      url: '/index', 
      views:{
        'index':{template:"<div><div ui-view='header'></div> <div ui-view='nav'></div> <div ui-view='body'></div> </div>"},
        //這里必須要絕對(duì)定位
        'header@index':{template:"<div>頭部?jī)?nèi)容header</div>"},
        'nav@index':{template:"<div>菜單內(nèi)容nav</div>"},
        'body@index':{template:"<div>展示內(nèi)容contents</div>"}
      }
    })  
    //絕對(duì)定位
    .state("index.content1", {
      url: '/content1', 
      views:{
        'body@index':{template:"<div>content11111111111111111</div>"}
        //'body@index'表時(shí)名為body的view使用index模板
      }
    }) 
    //相對(duì)定位：該狀態(tài)的里的名為body的ui-view為相對(duì)路徑下的（即沒(méi)有說(shuō)明具體是哪個(gè)模板下的）
    .state("index.content2", {
      url: '/content2', 
      views:{
        'body':{template:"<div>content2222222222222222222</div>"}//
      }
    })   

  }]);

 </script>

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

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

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

 <body >  
  <div ng-app="myApp" >
    <a ui-sref="index({id:30})">show index</a>  
    <a ui-sref="test({username:'peter'})">show test</a>
    <div ui-view></div>
  </div> 
 </body>

 <script type="text/javascript">
  var app = angular.module('myApp', ['ui.router']);  
  app.config(["$stateProvider", function ($stateProvider) {   
    $stateProvider   
    .state("home", {
      url: '/', 
      template:"<div>homePage</div>"

    })
    .state("index", {
      url: '/index/:id', 
      template:"<div>indexcontent</div>",
      controller:function($stateParams){
        alert($stateParams.id)
      }
    }) 
    .state("test", {
      url: '/test/:username', 
      template:"<div>testContent</div>",
      controller:function($stateParams){
        alert($stateParams.username)
      }
    })     

  }]);

 </script>

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

參考資料：

使用預(yù)載入功能，開(kāi)發(fā)者可以預(yù)先載入一系列依賴或者數(shù)據(jù)，然后注入到控制器中。在ngRoute中resolve選項(xiàng)可以允許開(kāi)發(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ì)被注入到控制器中。

<body >  
  <div ng-app="myApp" >
    <a ui-sref="index">show index</a>  
    <div ui-view></div>
  </div> 
 </body>

 <script type="text/javascript">
  var app = angular.module('myApp', ['ui.router']);  
  app.config(["$stateProvider", function ($stateProvider) {   
    $stateProvider   
    .state("home", {
      url: '/', 
      template:"<div>homePage</div>"

    })
    .state("index", {
      url: '/index/{id}', 
      template:"<div>indexcontent</div>",
      resolve: {
        //這個(gè)函數(shù)的值會(huì)被直接返回，因?yàn)樗皇菙?shù)據(jù)保證
        user: function() {
         return {
          name: "peter",
          email: "audiogroup@qq.com"
         }
        },
        //這個(gè)函數(shù)為數(shù)據(jù)保證, 因此它將在控制器被實(shí)例化之前載入。
        detail: function($http) {
         return $http({
          method: 'JSONP',
          url: '/current_details'
         });
        },
        //前一個(gè)數(shù)據(jù)保證也可作為依賴注入到其他數(shù)據(jù)保證中?。ㄟ@個(gè)非常實(shí)用）
        myId: function($http, detail) {
         $http({
          method: 'GET',
          url: 'http://facebook.com/api/current_user',
          params: {
           email: currentDetails.data.emails[0]
          }
         })
        }

      },
      controller:function(user,detail,myId$scope){
        alert(user.name)
        alert(user.email)
        console.log(detail)
      }
    })         

  }]);

 </script>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

深究AngularJS之ui-router詳解

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽