angularjs ui-router

時間  2019-12-20
標籤 angularjs router 欄目 AngularJS 简体版
原文   原文鏈接

[轉]AngularJS ui-router (嵌套路由)

本文轉自：http://www.oschina.net/translate/angularjs-ui-router-nested-routeshtml

 http://www.codeproject.com/Articles/842880/AngularJS-ui-router-nested-routesjava

AngularJS ui-router (嵌套路由)                    angularjs

英文原文：AngularJS ui-router (nested routes)

 

介紹

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

背景

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

             
leoxu 翻譯於 5個月前

0人頂框架

 

頂 翻譯的不錯哦!                        ide

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

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

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

實戰

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

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

             
leoxu 翻譯於 5個月前

0人頂

 

頂 翻譯的不錯哦!                        

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

1. Page1.html

2. Page2.html

3. Page3.html

4. PageTab.html

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

Page1.html

建立以下的html頁面：

1
2
3
4
5
<div>
     <div>
         <h1>Page 1 content goes here...</h1>
     </div>
</div>

 

Page2.html

建立以下的html頁面：

1
2
3
4
5
<div>
     <div>
         <h1>Page 2 content goes here...</h1>
     </div>
</div>

 

Page3.html

建立以下的html頁面：

1
2
3
4
5
<div>
     <div>
         <h1>Page 3 content goes here...</h1>
     </div>
</div>

 

建立以下的html頁面：

PageTab.html

建立以下的html頁面：

1
2
3
4
5
6
7
<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>

 

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

1
2
3
4
5
6
7
<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的解決方法。

             
痞子蔡 翻譯於 6個月前

0人頂

 

頂 翻譯的不錯哦!                        

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

如今咱們就來建立它.

Main.html

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!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 翻譯於 5個月前

0人頂

 

頂 翻譯的不錯哦!                        

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

App.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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模塊。

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

 

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

             
痞子蔡 翻譯於 6個月前

1人頂

 

頂 翻譯的不錯哦!                        

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

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

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

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

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

1
2
3
4
5
$stateProvider
        .state("PageTab", {
            url: "/PageTab",
            templateUrl: "PageTab.html"
        })

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

             
leoxu 翻譯於 5個月前

0人頂

 

頂 翻譯的不錯哦!                        

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

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

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

PageTab.html

1
2
3
4
5
6
7
8
9
10
<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>

好了，再來下面一行..

1
2
3
<div>
    <div ui-view=""/>
</div>

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

             
leoxu 翻譯於 5個月前

0人頂

 

頂 翻譯的不錯哦!                        

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

1
2
3
4
.state("PageTab.Page2", {
            url:"/Page2",
            templateUrl: "Page2.html"
        })

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

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

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

             
leoxu 翻譯於 5個月前

0人頂

 

頂 翻譯的不錯哦!                        

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

1
2
3
4
5
6
7
8
9
10
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!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

1
2
3
4
5
6
7
8
9
10
<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

1
2
3
4
5
<div>
     <div>
         <h1>Page 1 content goes here...</h1>
     </div>
</div>

Page2.html

1
2
3
4
5
<div>
     <div>
         <h1>Page 1 content goes here...</h1>
     </div>
</div>

Page2.html

1
2
3
4
5
<div>
     <div>
         <h1>Page 1 content goes here...</h1>
     </div>
</div>

App.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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，如今讓咱們把這個應用程序運行起來吧.

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程