AngularJS ui-router (嵌套路由)

介紹

AngularJS 嵌套路由：這是我針對同一個主題（ui-router）的第二篇文章. 若是你對第一篇文章感興趣的話，能夠訪問這裏. 好了，讓咱們繼續吧，來看看嵌套的ui-router狀態是怎麼回事. ui-router和同屬AngularJS框架一部分的ng-route同樣強大. ui-router提供了讓咱們能夠作路由嵌套和視圖命名的特性. 咱們將在示例中看到ui-router中存在的全部類型. javascript

背景

引述我以前那篇文章開頭給出的使用ui-router框架實現的簡單路由, 基於咱們的業務需求，須要有不一樣類型的導航, 通常像那種從一個頁面到另一個頁面的導航很是的普通。但請想象一下在某些狀況下，你須要在一個主頁中有tab頁或者菜單能夠點擊打開相應的頁面.html

leoxu

翻譯於 3年前

3人頂

頂翻譯得不錯哦！

好吧，讓咱們來看看一個典型的導航..java

注意，這個導航咱們已經在以前的文章中見過。針對如今的主題咱們將看到該導航嵌套進視圖中的形式.web

根據上的界面設計，咱們計劃該頁面能從一個頁面導航到另一個頁面, 當點擊page-1時，咱們將在下面顯示page-1的內容，點擊其它導航菜單也會有相似的效果. 咱們但願這可以用一種很直接的方式被處理. 讓咱們開始寫代碼吧.app

實戰

針對該需求咱們使用AngularJS框架來建立簡單的html和JavaScript頁面. 咱們將建立3個HTML頁面和一個JavaScript腳本文件。框架

一開始咱們建立一個空的web應用程序，並加入三個HTML頁面。以下所示. 這些頁面都是片斷視圖, 它們會在導航過程當中展現。咱們還要爲了能展現應用程序的Tab，建立另一個叫作PageTab.html的頁面.ide

leoxu

翻譯於 3年前

1人頂

頂翻譯得不錯哦！

所以咱們須要建立如下文件：函數

1. Page1.htmlui

2. Page2.htmlurl

3. Page3.html

4. PageTab.html

注意：咱們使用的是AngularJS 1.2，當我寫這篇文章的時候，Angular 1.3已經發布了。

Page1.html

建立以下的html頁面：

<div>      <div>          <h1>Page 1 content goes here...</h1>      </div> </div>

Page2.html

建立以下的html頁面：

<div>      <div>          <h1>Page 2 content goes here...</h1>      </div> </div>

Page3.html

建立以下的html頁面：

<div>      <div>          <h1>Page 3 content goes here...</h1>      </div> </div>

建立以下的html頁面：

PageTab.html

建立以下的html頁面：

<div>      <div>          <span style="width:100px">Page-1</span>          <span style="width:100px">Page-2</span>          <span style="width:100px">Page-3</span>      </div> </div>

這將會使頁面文本處於側邊，哎呀，我忘了添加當用戶將鼠標懸停在文本上的時候的超連接了。讓咱們這樣作：

<div>      <div>          <span style="width:100px"><a href="">Page-1</a></span>          <span style="width:100px"><a href="">Page-2</a></span>          <span style="width:100px"><a href="">Page-3</a></span>      </div> </div>

咱們沒有指向任何超連接，只是爲了把連接放在href中，實際上這是一種獲取url的解決方法。

痞子蔡

翻譯於 3年前

1人頂

頂翻譯得不錯哦！

注意，到目前爲止，咱們尚未插入任何AngularJS路由或者其它任何框架。目前咱們只是建立了一些頁面片斷，咱們須要一個佔位或者說父頁面來裝下這些東西. 讓咱們把這個頁面叫作 Main.html.

如今咱們就來建立它.

Main.html

用以下內容建立這個html頁面.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"> <head>     <title></title>     <script src="Scripts/angular.js"></script>     <script src="Scripts/angular-ui-router.js"></script>     <script src="App.js"></script> </head> <body data-ng-app="myApp">     <h1>AngularJS Home Page (Ui-router Demonstration)</h1>     <div data-ui-view=""></div> </body> <html>

咱們須要在主頁中作一些事情, (i) 咱們須要引入AngularJS框架 (ii) 咱們須要引入ui-router框架. (iii) 引入AngularJS文件 App.js (以後我會談到這個) (iv) 第四件事情就是讓主頁內容展現出來，而後顯示出它裏面的頁面.

leoxu

翻譯於 3年前

2人頂

頂翻譯得不錯哦！

如今，讓咱們看一下App.JS文件的內容，咱們聲明瞭AngularJS模塊和路由配置。當頁面加載的時候咱們會在Main.html中顯示PageTab.html的內容。代碼以下：

App.js

var myApp = angular.module("myApp", [&apos;ui.router&apos;]); myApp.config(function ($stateProvider, $urlRouterProvider) {      $urlRouterProvider.when("", "/PageTab");      $stateProvider         .state("PageTab", {             url: "/PageTab",             templateUrl: "PageTab.html"         })         .state("PageTab.Page1", {             url:"/Page1",             templateUrl: "Page-1.html"         })         .state("PageTab.Page2", {             url:"/Page2",             templateUrl: "Page-2.html"         })         .state("PageTab.Page3", {             url:"/Page3",             templateUrl: "Page3.html"         }); });

咱們一步步地來解釋這作了什麼。

Line-1: 第一行，聲明AngularJS模塊, 並把ui-router傳入AngularJS主模塊，全部的結合起來咱們就獲得了Angular模塊。

var myApp = angular.module("myApp", [&apos;ui.router&apos;]);

這裏叫作App模塊，這將告訴HTML頁面這是一個AngularJS做用的頁面，它的內容由AngularJS引擎來解釋。

痞子蔡

翻譯於 3年前

4人頂

頂翻譯得不錯哦！

代碼行-2:這一行聲明瞭把 $stateProvider 和 $urlRouteProvider 路由引擎做爲函數參數傳入，這樣咱們就能夠爲這個應用程序配置路由了.

myApp.config(function ($stateProvider, $urlRouterProvider) {

代碼行-3: 好，那這一行作什麼的呢，若是沒有路由引擎能匹配當前的導航狀態，那它就會默認將路徑路由至 PageTab.html, 這個頁面就是狀態名稱被聲明的地方. 只要理解了這個，那它就像switch case語句中的default選項.

$urlRouterProvider.when("", "/PageTab");

語句塊-1: 這一行定義了會在main.html頁面第一個顯示出來的狀態，做爲頁面被加載好之後第一個被使用的路由.

$stateProvider
        .state("PageTab", {
            url: "/PageTab",             templateUrl: "PageTab.html"         })

這就向母版頁的子頁面，應用程序會首先加載這個main.html頁面。

leoxu

翻譯於 3年前

1人頂

頂翻譯得不錯哦！

語句塊-2: 現在，就由這一行來定義頁面, 可是等一等，這裏有點不一樣，咱們以前爲上面的狀態名稱加上了前綴，而且使用點「.「號進行了分隔. 這裏很關鍵，它會告訴路由引擎咱們在這裏定義的是子頁面/嵌入頁面/嵌入(sub page / nested page / nested)狀態的page/route.

.state("PageTab.Page1", {
            url:"/Page1",             templateUrl: "Page-1.html"         })

它將會在 "PageTab.html" 頁面裏面顯示出來，那麼它是什麼意思呢. 想象一下當咱們想要在母版頁中管理全部的頁面時，咱們就會想要一個叫作」ui-view「的佔位標記, 所以咱們如今把PageTab.html叫作一個母版頁，由於它會把咱們須要在PageTab.html中用」ui-view「聲明好的其它頁面都管理起來. 如今讓咱們來修改一下它.

PageTab.html

<div>
     <div>
         <span style="width:100px"><a href="">Page-1</a></span>          <span style="width:100px"><a href="">Page-2</a></span>          <span style="width:100px"><a href="">Page-3</a></span>      </div>      <div>           <div ui-view=""/>      </div> </div>

好了，再來下面一行..

<div>
    <div ui-view=""/>
</div>

也就是說 PageTab.html 將對裝下全部的子頁面.

leoxu

翻譯於 3年前

2人頂

頂翻譯得不錯哦！

如今一切就緒了。OK，但是如今誰來告訴程序應該顯示哪一個頁面呢. 這就是咱們要在路由引擎裏面配置的東西，以下所示.

.state("PageTab.Page2", {
            url:"/Page2",             templateUrl: "Page2.html"         })

Page2.html 將會在被叫作PageTab的狀態中展現，它就是 PageTab.html.

Ok, 可是咱們還落下啥事沒作，這事就是當咱們在 Page-1 或者 Page-2 再或者 Page-3 菜單上點擊的時候須要頁面在佔位標記那裏顯示出來，是不 ?

還真是把那一塊給忘啦，咱們尚未爲路由和這種邏輯創建起聯繫, 想象一下若是那是href的話，就意味着咱們能夠指定將會錨向頁面裏面的ID名稱, 若是它是簡單的html本地引用就是這樣，但咱們則須要按照需求顯示不一樣的頁面.

leoxu

翻譯於 3年前

4人頂

頂翻譯得不錯哦！

關鍵的地方在這裏. (ui-sref) 咱們須要再一次修改 PageTab.html，以下所示.,

<div>      <div>          <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>           <div ui-view=""/>      </div> </div>

注意，只是上面高亮的部分發生了改變 , 這裏咱們只是簡單的將App.js中定義的狀態同tab中定義的對應文本進行了關聯. 當咱們使用點符號對它進行了聲明，程序就會認爲頁面時ui-view中的子頁面或者說嵌入頁面，它們就是路由配置中須要被展現的頁面.

如今，咱們要看看目前爲止咱們討論過的那些頁面的內容了.

Main.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"> <head>     <title></title>     <script src="Scripts/angular.js"></script>     <script src="Scripts/angular-ui-router.js"></script>     <script src="App.js"></script> </head> <body data-ng-app="myApp">     <h1>AngularJS Home Page (Ui-router Demonstration)</h1>     <div data-ui-view=""></div> </body> <html>

PageTab.html

<div>      <div>          <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>           <div ui-view=""/>      </div> </div>

Page1.html

<div>      <div>          <h1>Page 1 content goes here...</h1>      </div> </div>

Page2.html

<div>      <div>          <h1>Page 1 content goes here...</h1>      </div> </div>

Page2.html

<div>      <div>          <h1>Page 1 content goes here...</h1>      </div> </div>

App.js

var myApp = angular.module("myApp", [&apos;ui.router&apos;]); myApp.config(function ($stateProvider, $urlRouterProvider) {      $urlRouterProvider.when("", "/PageTab");      $stateProvider         .state("PageTab", {             url: "/PageTab",             templateUrl: "PageTab.html"         })         .state("PageTab.Page1", {             url:"/Page1",             templateUrl: "Page1.html"         })         .state("PageTab.Page2", {             url:"/Page2",             templateUrl: "Page2.html"         })         .state("PageTab.Page3", {             url:"/Page3",             templateUrl: "Page3.html"         }); });

一切OK，如今讓咱們把這個應用程序運行起來吧.