uiRouter

時間  2019-11-18
標籤 uirouter 简体版
原文   原文鏈接

介紹

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

背景

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

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

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

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

實戰

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

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

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

1. Page1.htmlapp

2. Page2.html框架

3. Page3.html

4. PageTab.html

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

Page1.html

建立以下的html頁面：

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

 

Page2.html

建立以下的html頁面：

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

 

Page3.html

建立以下的html頁面：

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

 

建立以下的html頁面：

PageTab.html

建立以下的html頁面：

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

 

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

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

 

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

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

如今咱們就來建立它.

Main.html

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

01 <!DOCTYPE html>
02 <html xmlns="http://www.w3.org/1999/xhtml">
03 <head>
04     <title></title>
05     <script src="Scripts/angular.js"></script>
06     <script src="Scripts/angular-ui-router.js"></script>
07     <script src="App.js"></script>
08  
09 </head>
10 <body data-ng-app="myApp">
11     <h1>AngularJS Home Page (Ui-router Demonstration)</h1>
12     <div data-ui-view=""></div>
13 </body>
14 <html>

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

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

App.js

01 var myApp = angular.module("myApp", [&apos;ui.router&apos;]);
02  
03 myApp.config(function ($stateProvider, $urlRouterProvider) {
04  
05      $urlRouterProvider.when("", "/PageTab");
06  
07      $stateProvider
08         .state("PageTab", {
09             url: "/PageTab",
10             templateUrl: "PageTab.html"
11         })
12         .state("PageTab.Page1", {
13             url:"/Page1",
14             templateUrl: "Page-1.html"
15         })
16         .state("PageTab.Page2", {
17             url:"/Page2",
18             templateUrl: "Page-2.html"
19         })
20         .state("PageTab.Page3", {
21             url:"/Page3",
22             templateUrl: "Page3.html"
23         });
24 });

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

PageTab.html

01 <div>
02      <div>
03          <span style="width:100px"><a href="">Page-1</a></span>
04          <span style="width:100px"><a href="">Page-2</a></span>
05          <span style="width:100px"><a href="">Page-3</a></span>
06      </div>
07      <div>
08           <div ui-view=""/>
09      </div>
10 </div>

好了，再來下面一行..

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

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

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

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

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

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

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

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

01 <div>
02      <div>
03          <span style="width:100px" ui-sref=".Page1"><a href="">Page-1</a></span>
04          <span style="width:100px" ui-sref=".Page2"><a href="">Page-2</a></span>
05          <span style="width:100px" ui-sref=".Page3"><a href="">Page-3</a></span>
06      </div>
07      <div>
08           <div ui-view=""/>
09      </div>
10 </div>

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

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

Main.html

01 <!DOCTYPE html>
02 <html xmlns="http://www.w3.org/1999/xhtml">
03 <head>
04     <title></title>
05     <script src="Scripts/angular.js"></script>
06     <script src="Scripts/angular-ui-router.js"></script>
07     <script src="App.js"></script>
08  
09 </head>
10 <body data-ng-app="myApp">
11     <h1>AngularJS Home Page (Ui-router Demonstration)</h1>
12     <div data-ui-view=""></div>
13 </body>
14 <html>

PageTab.html

01 <div>
02      <div>
03          <span style="width:100px" ui-sref=".Page1"><a href="">Page-1</a></span>
04          <span style="width:100px" ui-sref=".Page2"><a href="">Page-2</a></span>
05          <span style="width:100px" ui-sref=".Page3"><a href="">Page-3</a></span>
06      </div>
07      <div>
08           <div ui-view=""/>
09      </div>
10 </div>

Page1.html

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

Page2.html

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

Page2.html

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

App.js

01 var myApp = angular.module("myApp", [&apos;ui.router&apos;]);
02  
03 myApp.config(function ($stateProvider, $urlRouterProvider) {
04  
05      $urlRouterProvider.when("", "/PageTab");
06  
07      $stateProvider
08         .state("PageTab", {
09             url: "/PageTab",
10             templateUrl: "PageTab.html"
11         })
12         .state("PageTab.Page1", {
13             url:"/Page1",
14             templateUrl: "Page1.html"
15         })
16         .state("PageTab.Page2", {
17             url:"/Page2",
18             templateUrl: "Page2.html"
19         })
20         .state("PageTab.Page3", {
21             url:"/Page3",
22             templateUrl: "Page3.html"
23         });
24 });

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

 

 

=-=-=-=-=-=-=-=-=-=-=-=

糾正幾個東西

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

這行代碼裏傳的[]有問題，應該是ui.router

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

下面貼出來我本身實際運行沒問題的代碼出來。

先是目錄結構：

而後是源文件：

view.html對應的就是main.html以下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="../org/bootstrap.min.css" />
		<script type="text/javascript" src="../org/jquery.min.js" ></script>
		<script type="text/javascript" src="../org/angular.min.js" ></script>
		<script type="text/javascript" src="../org/angular-ui-router.min.js"></script>
		<script type="text/javascript" src="controller.js" ></script>
		<title>directive</title>
	</head>
	<body data-ng-app = "app">
		<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>
</div>

Page1.html

<div>
	<div>
		<h1>page1</h1>
	</div>
</div>

Page2.html

<div>
	<div>
		<h1>page2</h1>
	</div>
</div>

controller.js

var module = angular.module('app', ['ui.router']);

module.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"
        });
});

轉的文章地址：https://www.oschina.net/translate/angularjs-ui-router-nested-routes

源文：http://www.codeproject.com/Articles/842880/AngularJS-ui-router-nested-routes

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