AngularJS ui-router
介紹
我是一個新手到AngularJS世界，並與它工作了幾個月，仍然學習新的東西和力量的AngularJS框架。它真的很神奇，它的優點是你可以快速完成，你想在UI端做的事情，它很容易完成，只需要幾行程式碼。
AngularJS中讓我印象深刻的一點是路由框架。希望這將幫助那些想要開始它(AngularJS ui路由器)。
我們將看到關於什麼是路由以及如何配置和使用路由的簡單示例。
如果你想要快速瀏覽和跳轉到行動，請檢視這裡。
背景
那些曾經使用過Microsoft . net MVC的人，他們更熟悉架構模式MVC(模型-檢視-控制器)。在這種情況下，伺服器端程式碼將由控制器處理，而模型可以是用於繫結檢視中的資料的域實體。
在UI層端使用了相同的MVC模式概念，但沒有伺服器程式碼。假設你有兩個Javascipt檔案，其中它服務於使用AngularJS功能的MVC。
Microsoft MVC中最偉大的特性之一就是從一個頁面導航到另一個頁面的方式，這是由路由引擎控制的。同樣的概念在AngularJS中也可以使用，我們稱之為路由框架/路由服務。
注意:我們不會在本文中看到Angular架構和MVC。重點是AngularJS ui路由器模組。
好的，我們將看到路由引擎(ui-路由器)在AngularjS。我們有兩個版本的路由框架，我不打算討論這兩個版本，讓我們集中討論ui路由器。
頁面導航
通常我們會有頁面導航，如下面的高階部分所示。
讓我們假設從一個HTML頁面到另一個HTML頁面的基本流程。在角的世界裡，我們稱之為部分觀點。對於所有的頁面，我們都有一個起始位置/起始頁面。讓我們把它作為Main.HTML。
現在流程看起來如下所示。它的意思是，我們將擁有承載其他頁面的容器頁面，這裡容器頁面是Main.html。
因此，使用AngularJS路由框架，我們將導航從一個頁面到另一個頁面。好的。讓我們停止對“文字”的解釋。現在就開始行動。:)
使用的程式碼
首先，我們使用Visual Studio建立一個空的web應用程式，然後總共建立4個HTML檔案，如下所示。
注意:我們將使用AngularJS的1.2版本，當我寫這篇文章時，AngularJS 1.3版本已經發布了。
1. Main.html,
2. - 1. - html頁
3.- 2. - html頁
4. - 3. - html頁
,
Main.html
html檔案的內容如下所示
隱藏,複製程式碼<!-- 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 Ui router - Demonstration</h1> <h4>This is the Home Page</h4> <div data-ui-view=""></div> </body> <html>
好的，我們一個接一個地看看main。html頁面做了什麼。
隱藏,複製程式碼<script src="Scripts/angular.js"></script> <script src="Scripts/angular-ui-router.js"></script>
希望你注意到上面的指令碼部分，我們必須新增/使用NuGet來安裝angular ui路由器到你的專案中，然後在你的指令碼部分引用路徑。
是的，AngularJS中的ui路由器是單獨的模組，我們需要單獨新增。
隱藏,複製程式碼<script src="App.js"></script>
現在，您知道的前兩個指令碼檔案，我稍後將討論的下一個App.js檔案。
隱藏,複製程式碼<h1>AngularJS Ui router - Demonstration</h1>
在身體部分，我們有h1gt;標籤，它將像母版頁，因為它將顯示標題為“AngularJS Ui-router演示”，為每個頁面，當我們導航。
另一件重要的事你可以看到下一行h1gt;標籤是
隱藏,複製程式碼<div data-ui-view=""></div>
這是ui-router引擎的佔位符，用於將我們將要宣告的所有部分檢視注入到路由配置中。在建立了剩下的HTML部分檢視之後，我們看到了這一點。
- 1. - html頁
為了使事情變得簡單，我將在頁-1到頁-3的HTML頁面中建立某種靜態內容。現在，頁面-1.html內容將如下所示。
隱藏,複製程式碼<div>
<div style="height: 400px">
<h2>Partial view-1</h2>
<p>The partial view of the content goes here...
</div>
<div ui-sref="page2"><a href="">Page 2</a></div>
</div>
請注意，頁面-1的內容沒有任何HTML和正文標記，這是因為正如我前面所說的，這是部分檢視，它將呈現到我們在main.html頁面中宣告的佔位符中。
隱藏,複製程式碼<div ui-sref="page2"><a href="">Page 2</a></div>
上面一行是從頁面1到頁面2的導航連結。因此，當你點選連結“第2頁”，你將被導向下一個頁面。這是由ui-sref>標籤。
讓我們繼續前進。除了一些小的變化外，其他頁面內容看起來類似。讓我們看看那些是什麼。
- 2. - html頁
現在，頁面-2.html內容將如下所示。
隱藏,複製程式碼<div>
<div style="height: 400px">
<h2>Partial view-2</h2>
<p>The partial view of the content goes here...
</div>
<div ui-sref="page3"><a href="">Page 3</a></div>
</div>
與Page-1.html相比，上面的程式碼需要注意的是，我們剛剛更改了ui-sref州名和alt; gt;標籤的文字。
- 3. - html頁
現在，頁面-2.html內容將如下所示。
隱藏,複製程式碼<div>
<div style="height: 400px">
<h2>Partial view-3</h2>
<p>The partial view of the content goes here...
</div>
<div ui-sref="page1"><a href="">Back to Page 1</a></div>
</div>
注意，與Page-2.html相比，上面的程式碼只是改變了ui-sref狀態名和alt; gt;標籤的文字。注意，從這個頁面我們將導航回到第一個頁面page -1.html
好了，我們已經基本完成了HTML頁面及其內容的宣告。現在讓我們進入狀態引擎的角度部分。
現在，在Visual Studio空專案的根目錄中，建立一個JavaScript檔案，並將其命名為App.js。
App.js
這個檔案中聲明瞭AngularJS應用程式模組。也聲明瞭國家導航。
隱藏,複製程式碼var myApp = angular.module("myApp", ['ui.router']); myApp.config(function ($stateProvider, $urlRouterProvider) { $urlRouterProvider.when("", "/page1"); $stateProvider .state("page1", { url: "/page1", templateUrl: "Page-1.html" }) .state("page2", { url:"/page2", templateUrl: "Page-2.html" }) .state("page3", { url:"/page3", templateUrl: "Page-3.html" }); });
好，讓我們逐個來看構型。
隱藏,複製程式碼var myApp = angular.module("myApp", ['ui.router']);
這一行delcares AngularJS模組和‘ui-router’模組注入它。
隱藏,複製程式碼myApp.config(function ($stateProvider, $urlRouterProvider) {
上面一行是使用.config函式宣告的狀態路由配置。$stateProvider和$urlRouterProvider是可用來處理州導航的服務。狀態導航宣告有以下引數，
stateName, UrlName, Template或TemplateURL和控制器(本例中我們不使用controller)
隱藏,複製程式碼 $stateProvider
.state("page1", {
url: "/page1",
templateUrl: "Page-1.html"
})
因此，根據我們的宣告，“page1”是州名，“/page1”是您在位址列導航期間看到的URL。templateUrl是在導航時顯示的部分檢視。
隱藏,複製程式碼$urlRouterProvider.when("", "/page1");
還請注意，上面的行給出了載入期間顯示的預設檢視，它只是佔位符將在main.html中擁有的第一個部分檢視
就像這樣，我們已經為所有頁面分配了路由，現在我們在導航時告訴了路由/狀態配置。現在，AngularJS知道哪些檢視可以導航，哪些檢視可以從頭開始，但是知道如何從一個頁面導航到另一個頁面。
是的，您是對的，我們已經在page-1.html中聲明瞭這一點，以便導航到其他頁面。(注意:我們有不同的導航方式，ui-sref是其中一種)。如前所述，頁面1包含要導航的內容。注意，我們使用狀態名從一個檢視導航到另一個檢視。
隱藏,複製程式碼<div ui-sref="page2"><a href="">Page 2</a></div>
現在，我們可以看到到目前為止建立的檔案的全部內容。
隱藏,複製程式碼<!-- 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 Ui router - Demonstration</h1> <h4>This is the Home Page</h4> <div data-ui-view=""></div> </body> <html>隱藏,複製程式碼
<!-- Page-1.html --> <div> <div style="height: 400px"> <h2>Partial view-1</h2> <p>The partial view of the content goes here...</p> </div> <div ui-sref="page2"><a href="">Page 2</a></div> </div>隱藏,複製程式碼
<!-- Page-2.html --> <div> <div style="height: 400px"> <h2>Partial view-2</h2> <p>The partial view of the content goes here...</p> </div> <div ui-sref="page3"><a href="">Page 3</a></div> </div>隱藏,複製程式碼
<!-- Page-3.html --> <div> <div style="height: 400px"> <h2>Partial view-3</h2> <p>The partial view of the content goes here...</p> </div> <div ui-sref="page1"><a href="">Back to Page 1</a></div> </div>隱藏,複製程式碼
// App.js var myApp = angular.module("myApp", ['ui.router']); myApp.config(function ($stateProvider, $urlRouterProvider) { $urlRouterProvider.when("", "/page1"); $stateProvider .state("page1", { url: "/page1", templateUrl: "Page-1.html" }) .state("page2", { url:"/page2", templateUrl: "Page-2.html" }) .state("page3", { url:"/page3", templateUrl: "Page-3.html" }); });
現在，讓我們在瀏覽器中檢視main.html頁面，我們將看到下面的輸出。
當你點選連結“第2頁”，它會進入第二頁…
,
,
的興趣點
,
NA
歷史
NA
本文轉載於：http://www.diyabc.com/frontweb/news16583.html本文轉載於：http://www.diyabc.com/frontweb/news16905.html