標籤：pre data- asc height app 自己 載入 顯示 標記
今天讓我們一起來學習一下AngularJS裡的嵌套路由。
ui-router和同屬AngularJS架構一部分的ng-route一樣強大. ui-router提供了讓我們可以做路由嵌套和視圖命名的特性，嵌套路由功能主要是依賴$stateProvider服務,$urlRouterProvider服務與 ui-view實現。.
首先我們先使用AngularJS架構來建立簡單的html和JavaScript頁面。
我們需要建立的檔案有一下這些：
1.先建立主體頁面 main.html
2.嵌套路由頁面 page.html
3.在建立三個子頁面 page1.html 、 page1.html 、 page1.html
注意：在使用這個方法時，記得要引入angular-ui-route.js外掛程式哦！
main.html
建立頁面如下：
<!DOCTYPE html><html ng-app="mk"><head> <title></title> <script src="libs/angular.min.js"></script> <script src="libs/angular-ui-route.js"></script> <script> var app = angular.module("mk", [‘ui.router‘]);// 依賴$stateProvider服務與$urlRouterProvider服務 app.config(function ($stateProvider, $urlRouterProvider) { }); </script></head><body data-ng-app="myApp"><h1>路由嵌套的主體頁-----AngularJS Home Page (Ui-router)</h1><div ui-view=""></div>//必填</body><html>
Page.html
建立頁面如下：
<div> <span style="padding-right: 20px" ><a href="javascript:;">Page-1</a></span> <span style="padding-right: 20px" ><a href="javascript:;">Page-2</a></span> <span style="padding-right: 20px" ><a href="javascript:;">Page-3</a></span></div>
Page1.html
建立頁面如下：
<!--子頁面1--><div> <div> <h1>Page 子頁面1</h1> </div></div>
Page2.html
建立頁面如下：
<!--子頁面2--><div> <div> <h1>Page 子頁面2</h1> </div></div>
Page3.html
建立頁面如下：
<!--子頁面3--><div> <div> <h1>Page 子頁面3</h1> </div></div>
以上還是個開始，主體頁面main.html還沒有嵌套page.html頁面，接下來先把page.html頁面嵌套在其中吧。
此時main.html
建立頁面如下：（紅色部分為新加內容）
<!DOCTYPE html><html ng-app="mk"><head> <title></title>
<style>
body{
background: #cc9900;
}
</style>
<script src="libs/angular.min.js"></script> <script src="libs/angular-ui-route.js"></script> <script> var app = angular.module("mk", [‘ui.router‘]);// 依賴$stateProvider服務與$urlRouterProvider服務 app.config(function ($stateProvider, $urlRouterProvider) { $urlRouterProvider.when("", "/Page"); //這一行定義了會在main.html頁面第一個顯示出來的狀態，作為頁面被載入好以後第一個被使用的路由. $stateProvider .state("Page", { url: "/Page", templateUrl: "Page.html" }) }); </script></head><body data-ng-app="myApp"><h1>路由嵌套的主體頁-----AngularJS Home Page (Ui-router)</h1><div ui-view=""></div></body><html>
：（現在的連結還未新增內容）
接下來完善一下Page.html
建立頁面如下：
<div> <span style="padding-right: 20px" ui-sref=".Page1"><a href="javascript:;">Page-1</a></span> <span style="padding-right: 20px" ui-sref=".Page2"><a href="javascript:;">Page-2</a></span> <span style="padding-right: 20px" ui-sref=".Page3"><a href="javascript:;">Page-3</a></span></div><div ui-view=""/></div>
最後我們把main.html修改完整，讓在 Page-1 或者 Page-2 再或者 Page-3 菜單上點擊的時候需要頁面在佔位標記那裡顯示出來。
【完整的main.html】
<!DOCTYPE html><html ng-app="mk"><head> <title></title> <script src="libs/angular.min.js"></script> <script src="libs/angular-ui-route.js"></script> <script> var app = angular.module("mk", [‘ui.router‘]);// 依賴$stateProvider服務與$urlRouterProvider服務 app.config(function ($stateProvider, $urlRouterProvider) { $urlRouterProvider.when("", "/Page"); $stateProvider .state("Page", { url: "/Page", templateUrl: "Page.html" }) // Page下的page1 .state("Page.Page1", { url:"/Page1", templateUrl: "Page1.html" }) .state("Page.Page2", { url:"/Page2", templateUrl: "Page2.html" }) .state("Page.Page3", { url:"/Page3", templateUrl: "Page3.html" }); }); </script></head><body data-ng-app="myApp"><h1>路由嵌套的主體頁-----AngularJS Home Page (Ui-router)</h1><div ui-view=""></div></body><html>
好了，AngularJS裡的嵌套路由到現在就全部實現了，你們快點在自己的本上運行一下吧！
AngularJS ui-router (嵌套路由)的簡單學習
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
