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

時間 2019-11-16

標籤 angular router 簡單頁面嵌套路由實現過程欄目 AngularJS 简体版

原文原文鏈接

寫在前面：

ui-router是angular的一個插件，由於angular前面幾個版本自帶的原生ng-router不能很好的知足開發需求，因此在實現angular單頁面嵌套的時候，都是使用ui-router。本文是的內容關於angular ui-router實現過程，內含demo以及代碼地址，須要的朋友能夠過來參考下，喜歡的能夠點波贊，或者關注一下本人，ui-router的實現過程並不複雜，但願經過本文你們可以學會ui-router的使用方法。javascript

ui-router與ng-router：

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

視圖不能嵌套,這意味着$scope會發生沒必要要的從新載入。html
同一URL下不支持多個視圖。這一需求也是常見的：咱們但願導航欄用一個視圖（和相應的控制器）、內容部分用另外一個視圖（和相應的控制器）。java

最終實現demo效果

AngularJS單頁面實現原理：

AngularJS 路由容許咱們經過不一樣的 URL 訪問不一樣的內容，一般咱們的URL形式爲runoob.com/first/page ，在單頁Web應用中 AngularJS 經過 # + 標記 實現，例如：git

http://runoob.com/#/first
http://runoob.com/#/second
http://runoob.com/#/third複製代碼

當咱們訪問這上面任意一個連接的時候，向服務端請求的都是同一個地址： runoob.com/
#號以後的內容在向服務端請求時會被瀏覽器忽略掉
路由就經過 # + 標記幫助咱們區分不一樣的邏輯頁面並將不一樣的頁面綁定到對應的控制器上，以下圖所示：angularjs

不一樣的視圖頁面對應不一樣的控制器

demo地址

ui-router實現過程

一、建立頁面：

要實現上文那個demo效果，咱們須要建立以下頁面：github

app.js
這是路由的配置頁面
index.html
一般叫作index.html是單頁面的首頁，裏面導入了各類css樣式、庫，插件，框架之類的。
PageTab.html
進入index.html首先展現的視圖頁面，下面幾個是PageTab下面的嵌套頁面
Page-1.html
Page-2.html
Page-3.html

代碼上傳到github上面了，須要的朋友能夠自行查看：代碼地址瀏覽器

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

ps：如今angular4，自帶的原生ng-router好像也已經支持了多層嵌套。可是由於還沒流傳開，市面上，大多仍是1.4，因此仍是須要用到ui-router。框架

二、在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是這幅樣子：

在單頁面中，無論你從哪一個視圖查看網頁代碼，都是這樣子，第一次看的都醉了！

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來展現的。

嵌套頁面跳轉：

導航裏面的名字必須是「父頁面的名字.子頁面的名字」
好比：

.state("PageTab", {//這裏是名字
         url: "/PageTab",
         templateUrl: "PageTab.html"
     })
     .state("PageTab.Page1", {//意思是PageTab視圖下面的Page1視圖
         url:"/Page1",
         templateUrl: "Page-1.html"
     })複製代碼

在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。
掘金我的主頁