首頁 > 開發者 > JavaScript
angularjs ui-router中路由的二級嵌套，angularjsui-router
關於ui-router中嵌套路由中的問題
1.首先我們的頁面層次為
其中Main.html是我們的首頁，我們要在main.html中對路由進行統一的管理。
main.html頁面中有一個ui-view在這裡將填充PageTab.html，同時被填充的PageTab.html中也有一個ui-view
這樣就實現了嵌套路由。
最終效果：
當我們點擊Page-1時出現的是Page1中的內容，同理點擊Page-2。
下面是實際的代碼：
Main.html
<!DOCTYPE html><html ng-app="myApp"><head><meta charset="UTF-8"><title></title><script src="js/angular.min.js"></script><script src="js/angular-ui-router.js"></script><script> </script></head><body><h3>Main page</h3> <div> <div ui-view></div> </div><script> angular.module("myApp",["ui.router"]) .config(function($stateProvider){ $stateProvider .state("PageTab",{ url:"", templateUrl:"PageTab.html" }) .state("PageTab.Page1",{ url:"/Page1", templateUrl:"Page1.html" }) .state("PageTab.Page2",{ url:"/Page2", templateUrl:"Page2.html" }) })</script></body></html>
PageTab.html
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body><h2>PageTab</h2> <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> </div> <div ui-view=""></div></body></html>
Page1.html
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Page1</title></head><body> <h2>Page1</h2></body></html>
Page2.html
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Page2</title></head><body> <h2>Page2</h2></body></html>
以上是全部的頁面代碼，Main.html中js庫需要手動匯入。
下面我們重點看Main.html中對路由統一管理的部分也就是這段js代碼
<script> angular.module("myApp",["ui.router"]) .config(function($stateProvider){ $stateProvider .state("PageTab",{ url:"", templateUrl:"PageTab.html" }) .state("PageTab.Page1",{ url:"/Page1", templateUrl:"Page1.html" }) .state("PageTab.Page2",{ url:"/Page2", templateUrl:"Page2.html" }) })</script>
一共三個狀態：
第一個狀態
.state("PageTab",{ url:"", templateUrl:"PageTab.html" })
在第一個中我們定義了初始狀態名為PageTab，url狀態為空白，這時候在母片中將會在ui-view中填充PageTab.html這個頁面。
第二個狀態
.state("PageTab.Page1",{ url:"/Page1", templateUrl:"Page1.html" })
我們把這個狀態名字命名為PageTab.Page1 這時候的路由將會交給PageTab來處理，即在PageTab.html頁面中的ui-view中填充Page1.html中的內容。同理如果state命名為PageTab.Page2 那麼處理它的就會是PageTab.html這個頁面。
希望本文所述對你有所協助，angularjs ui-router中路由的二級嵌套就給大家介紹到這裡了。希望大家繼續關注我們的網站!想要學習angularjs可以繼續關注本站。
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
