angular ui-router：簡單的單頁面巢狀路由的實現過程

OBKoro1發表於2017-06-03
AngularUI巢狀路由

寫在前面：

ui-router是angular的一個外掛，因為angular前面幾個版本自帶的原生ng-router不能很好的滿足開發需求，所以在實現angular單頁面巢狀的時候，都是使用ui-router。本文是的內容關於angular ui-router實現過程，內含demo以及程式碼地址，需要的朋友可以過來參考下，喜歡的可以點波贊，或者關注一下本人，ui-router的實現過程並不複雜，希望通過本文大家能夠學會ui-router的使用方法。

ui-router與ng-router：

UI-Router是angular原生ng-route進化版，相較與ng-router有如下兩條優點：

  1. 檢視不能巢狀,這意味著$scope會發生不必要的重新載入。

  2. 同一URL下不支援多個檢視。這一需求也是常見的：我們希望導航欄用一個檢視（和相應的控制器）、內容部分用另一個檢視（和相應的控制器）。

最終實現demo效果

angular ui-router：簡單的單頁面巢狀路由的實現過程

AngularJS單頁面實現原理：

AngularJS 路由允許我們通過不同的 URL 訪問不同的內容，通常我們的URL形式為runoob.com/first/page ，在單頁Web應用中 AngularJS 通過 # + 標記 實現，例如：

http://runoob.com/#/first
http://runoob.com/#/second
http://runoob.com/#/third複製程式碼
  1. 當我們訪問這上面任意一個連結的時候，向服務端請求的都是同一個地址： runoob.com/
  2. #號之後的內容在向服務端請求時會被瀏覽器忽略掉

  3. 路由就通過 # + 標記幫助我們區分不同的邏輯頁面並將不同的頁面繫結到對應的控制器上，如下圖所示：

    angular ui-router：簡單的單頁面巢狀路由的實現過程
    不同的檢視頁面對應不同的控制器

demo地址

ui-router實現過程

1、建立頁面：

要實現上文那個demo效果，我們需要建立如下頁面：

  1. app.js
    這是路由的配置頁面
  2. index.html
    通常叫做index.html是單頁面的首頁，裡面匯入了各種css樣式、庫，外掛，框架之類的。
  3. PageTab.html
    進入index.html首先展示的檢視頁面，下面幾個是PageTab下面的巢狀頁面
  4. Page-1.html
  5. Page-2.html
  6. Page-3.html

程式碼上傳到github上面了，需要的朋友可以自行檢視： 程式碼地址

注：angular用的是：1.4.6，ui-router用的是1.0

ps：現在angular4，自帶的原生ng-router好像也已經支援了多層巢狀。但是因為還沒流傳開，市面上，大多還是1.4，所以還是需要用到ui-router。

2、在index.html裡面匯入js檔案

<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.js"></script>
<script src="https://cdn.bootcss.com/angular-ui-router/1.0.0-rc.1/angular-ui-router.min.js"></script>
<script src="App.js"></script>複製程式碼

1.angular檔案，2.ui-router外掛,3.路由js頁面

注意：angular檔案必須在ui-router前面，因為ui-router是依賴angular的外掛。

這幾個檔案是最基本的頁面，如果是一個完整的angular單頁面專案的話，index,html是這幅樣子：

angular ui-router：簡單的單頁面巢狀路由的實現過程

在單頁面中，不管你從哪個檢視檢視網頁程式碼，都是這樣子，第一次看的都醉了！

3.app.js

app.js宣告瞭AngularJS模組和路由配置。當頁面載入的時候我們會在index.html中顯示PageTab.html的內容。具體程式碼如下，每一個關鍵的地方都有相應的註釋註釋註釋：

var myApp = angular.module("myApp", ["ui.router"]);
//這裡叫做App模組，這將告訴HTML頁面這是一個AngularJS作用的頁面，並把ui-router注入AngularJS主模組，它的內容由AngularJS引擎來解釋。
myApp.config(function ($stateProvider, $urlRouterProvider) {
    //這一行宣告瞭把 $stateProvider 和 $urlRouteProvider 路由引擎作為函式引數傳入，這樣我們就可以為這個應用程式配置路由了.
    $urlRouterProvider.when("", "/PageTab");
    //如果沒有路由引擎能匹配當前的導航狀態，預設將路徑路由至 PageTab.html, 那它就像switch case語句中的default選項.就是一個預設的檢視選項
    $stateProvider
        //這一行定義了會在main.html頁面第一個顯示出來的狀態（就是進入頁面先載入的html），作為頁面被載入好以後第一個被使用的路由.
        .state("PageTab", {//導航用的名字 
            url: "/PageTab",//#+識別符號，這裡就是url位址列上面的識別符號，通過識別符號，進入不同的html頁面
            templateUrl: "PageTab.html"//這裡是html的路徑，這是跟識別符號相對應的html頁面
        })
        .state("PageTab.Page1", {//引號裡面代表Page1是PageTab的子頁面，用.隔開
            url:"/Page1",
            templateUrl: "Page-1.html"
        })
        .state("PageTab.Page2", {//需要跳轉頁面的時候，就是用這雙引號裡面的地址
            url:"/Page2",
            templateUrl: "Page-2.html"
        })
        .state("PageTab.Page3", {
            url:"/Page3",
            templateUrl: "Page3.html"
        });
});複製程式碼

現在已經成功把appjs實現出來，然後需要在html裡面定義檢視，以及檢視跳轉連結

4.html定義檢視

現在要把我們寫好的html檢視頁面在頁面中展示出來，我們來看看index.html裡面的程式碼：

<body data-ng-app="myApp">
<!--ui-router的html程式碼-->
<div data-ui-view=""></div>
<!--這裡要引入上面說的檔案-->
</body>
<html>複製程式碼

在ui-view=""的雙引號裡面，ui-view展示的頁面是根據app.js設定的url對應的html來展示的。

巢狀頁面跳轉：

  1. 導航裡面的名字必須是“父頁面的名字.子頁面的名字”
    比如：
    .state("PageTab", {//這裡是名字
         url: "/PageTab",
         templateUrl: "PageTab.html"
     })
     .state("PageTab.Page1", {//意思是PageTab檢視下面的Page1檢視
         url:"/Page1",
         templateUrl: "Page-1.html"
     })複製程式碼
  2. 在html裡面，用ui-sref進行跳轉
    demo程式碼栗子：
    <div>
     <h1>下面這幾個按鈕是在主頁面下面再巢狀一層的頁面</h1>
     <!--ui-sref跳轉-->
     <span style="width:100px" ui-sref=".Page1"><a href="">Page-1</a></span>
     <span style="width:100px" ui-sref=".Page2"><a href="">Page-2</a></span>
     <span style="width:100px" ui-sref=".Page3"><a href="">Page-3</a></span>
 </div>
 <div>
     <!--PageTap巢狀的檢視html展示的地方-->
     <div ui-view=""/>
 </div>複製程式碼

如果覺得不太明白可以點選下面的程式碼地址，將程式碼複製到本地，自己多試一試，應該就明白了：
demo地址、demo程式碼地址

寫在後面：

現在只是一個最簡單的使用方式，本來想在寫一些深一點的使用方式（內容：路由的其他引數、路由懶載入引用檔案、路由檢視頁面傳遞引數），寫了好久，結果發現還是需要demo結合起來寫，比較清楚，等我寫好了在下面加個連結。

最後：如需轉載，請放上原文連結並署名。碼字不易，感謝支援！因為我經常看不懂別人寫的分享，所以個人寫文比較偏小白，寫的不好之處，歡迎指點。然後就是希望看完的朋友點個喜歡，也可以關注一下我。
ps：目前待業，城市：杭州/北京（糾結中），本人適應網際網路快節奏，高強度的工作狀態，認真，嚴謹，學習積極性強。中小公司大佬求帶走，郵箱：obkoro1@foxmail.com。
掘金個人主頁

參考資料：

AngularJS 路由,菜鳥教程
深究AngularJS——ui-router詳解\
AngularJS ui-router (巢狀路由)

相關文章