UI-Router詳解

阿新 • • 發佈：2019-01-11

我們瞭解 angular.js 是一種富客戶端單頁面應用,所以要在一個頁面呈現不同的檢視,路由起到了至關重要的作用.

angular.js ：為我們封裝好了一個路由工具 ngRoute ,它是一種靠url改變去驅動檢視.

angularUI ：也為我們封裝了一個獨立的路由模組 ui-router ,它是一種靠狀態 state 來驅動檢視.

後者有什麼優勢:一個頁面可以巢狀多個檢視,多個檢視去控制某一個檢視等.

咱們今天主要講解ui-router的基本模組，先上程式碼。

<!DOCTYPE html>
<html lang="en" ng-app="sunday"> 

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

  <a ui-sref="hello" ui-sref-active="active">hello</a>
  <br>
  <a ui-sref="world" ui-sref-active="active">world</a>

  <ui-view></ui-view>


  <script 
 src="js/angular.js"></script>
  <script src="js/angular-ui-router.js"></script>
  <script src="js/index.js"></script>

</body>
</html>

基本的index.html，ui-sref表示指令連結到一個特定的狀態，一般情況下為替換檢視，替換檢視的部分為使用<ui-view></ui-view>所標記的區域。可以簡單的理解為<ui-view></ui-view>

起到的其實是一個佔位符的作用。

接下來咱們再看js程式碼。

(function(angular){

  angular.module('sunday',['ui.router'])
    .config(function($stateProvider){
      $stateProvider.state({
        name:'hello',
        url:'/hello',
        template:'<h3>hello world!</h3>'
      }).state({
        name:'world',
        url:'/world',
        template:'<h3>hello ui-router!</h3>'
      })
    });

})(angular);

在構造angular物件的時候，我們引入了 'ui.router' 模組，在angular物件的配製方法中，我們通過 ui-router提供的$stateProvider物件的 state方法去配置路由物件，name對應ui-sref中配置的值，使用template去替換<ui-view></ui-view>。

那麼ui-router中的巢狀路由是如何使用的呢？來看我們修改之後的程式碼。

.state('world',{
        url:'/world',
        templateUrl:'world.html'
      })

我們對index.js進行了修改，使點選world的之後指向了一個 world.html 的模板。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>This is a world</title>
</head>
<body>

    <div>
      <a ui-sref=".world1" ui-sref-active="active">world-1</a>
      <br>
      <a ui-sref="world2" ui-sref-active="active">world-2</a>
    </div>

    <div ui-view style="margin-left: 50px"></div>

</body>
</html>

這是world.html中的程式碼，我們可以看到在world.html中我們建立了兩個 ui-sref 分別為：.world1和world2 ，相信看到這裡大家也都能知道了，ui-router其實就是通過 .語法去進行的路由層級的配置。
來看一下新的 index.js的程式碼。

(function(angular){

  angular.module('sunday',['ui.router'])
    .config(function($stateProvider){
      $stateProvider.state('hello-world',{
        url:'/hello',
        template:'<h3>hello world!</h3>'
      }).state('world',{
        url:'/world',
        templateUrl:'world.html'
      }).state('world.world1',{
        url:'/world/world-1',
        template:'<h3>This is a World 1</h3>'
      }).state('world2',{
        url:'/world/world-2',
        template:'<h3>world2並不依賴於world，在我們點選它的時候，他會替換掉index.html中的<div ui-view></div></h3>'
      })
    });

})(angular);

index.html的程式碼

<!DOCTYPE html>
<html lang="en" ng-app="sunday">
<head>
  <meta charset="UTF-8">
  <title>Document</title>

  <style></style>
</head>
<body>

  <a ui-sref="hello-world" ui-sref-active="active">hello</a>
  <br>
  <a ui-sref="world" ui-sref-active="active">world</a>

  <div ui-view style="margin-left: 50px"></div>


  <script src="js/angular.js"></script>
  <script src="js/angular-ui-router.js"></script>
  <script src="js/index.js"></script>

</body>
</html>

UI-Router詳解

深究AngularJS——ui-router詳解

UI-Router詳解

Vue Router詳解

vue專案引入vux-ui框架詳解（快速入門）

Android UI(SeekBar)詳解

七. Vue Router詳解

UI Recorder 功能詳解

UI自動化測試（二）瀏覽器操作及對元素的定位方法（xpath定位和css定位詳解）

Vue-router的API詳解

Storm筆記整理（五）：可靠性分析、定時任務與Storm UI參數詳解

【轉】Vue-詳解設置路由導航的兩種方法： <router-link :to="..."> 和router.push(...)

jQuery-ui外掛datepicker的引數使用詳解

Android UI詳解之顏色資源的使用

Vue-詳解設定路由導航的兩種方法：router-link和router.push

詳解vue-router 初始化時做了什麼

【Mint-UI】Action sheet 用法及詳解（內含取消事件的觸發方法）

【Mint-UI】search元件的使用及詳解（內含取消事件的觸發）

react router @4 和 vue路由詳解(二)react-router @4用法

react router @4 和 vue路由詳解(一)vue路由基礎和使用

react router @4 和 vue路由詳解(七)react路由守衛

UI-Router詳解

相關推薦