angularjs ui-router中路由的二級嵌套
關于ui-router中嵌套路由中的問題
1.首先我們的頁面層次為
其中Main.html是我們的主頁，我們要在main.html中對路由進行統(tǒng)一的管理。
main.html頁面中有一個ui-view在這里將填充PageTab.html，同時被填充的PageTab.html中也有一個ui-view
這樣就實現(xiàn)了嵌套路由。
最終效果：
當我們點擊Page-1時出現(xiàn)的是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中對路由統(tǒng)一管理的部分也就是這段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>
一共三個狀態(tài)：
第一個狀態(tài)
.state("PageTab",{
url:"",
templateUrl:"PageTab.html"
})
在第一個中我們定義了初始狀態(tài)名為PageTab，url狀態(tài)為空，這時候在母版中將會在ui-view中填充PageTab.html這個頁面。
第二個狀態(tài)
.state("PageTab.Page1",{
url:"/Page1",
templateUrl:"Page1.html"
})
我們把這個狀態(tài)名字命名為PageTab.Page1 這時候的路由將會交給PageTab來處理，即在PageTab.html頁面中的ui-view中填充Page1.html中的內容。同理如果state命名為PageTab.Page2 那么處理它的就會是PageTab.html這個頁面。
希望本文所述對你有所幫助，angularjs ui-router中路由的二級嵌套就給大家介紹到這里了。希望大家繼續(xù)關注我們的網站!想要學習angularjs可以繼續(xù)關注本站。
相關文章
這篇文章主要給大家介紹了關于Angular2 + node接口調試的解決方案，文中介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2017-05-05
Angular中ng-options下拉數據默認值的設定方法
本篇文章主要介紹了Angular中ng-options下拉數據默認值的設定方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
本篇文章主要介紹了詳解使用angular的HttpClient搭配rxjs ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了AngularJS服務service用法,結合實例形式總結分析了服務Service的概念、功能及自定義服務的相關操作技巧,需要的朋友可以參考下2016-12-12
AngularJS通過$location獲取及改變當前頁面的URL
本篇將介紹AngularJS中的$location服務的基本用法,$location服務的主要作用是用于獲取當前url以及改變當前的url,并且存入歷史記錄。本文通過示例代碼介紹的很詳細，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-09-09
這篇文章主要介紹了創(chuàng)建你的第一個AngularJS應用的方法,AngularJS是一個非常具有人氣的JavaScript框架,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了在AngularJS中使用AJAX的方法,示例非常簡單,并不能完全體現(xiàn)出AJAX動態(tài)刷新的強大功能,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了Angular開發(fā)實踐之服務端渲染，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
AngularJs最重要也是最難理解的模塊之一就是它的指令（directive）了，自定義指令配置有很多個參數，下面這篇文章主要介紹了關于Angular.js指令中scope類型的幾種特殊情況，需要的朋友可以參考下。2017-02-02
AngularJS中實現(xiàn)顯示或隱藏動畫效果的方式總結
AngularJS 是一組用于創(chuàng)建單頁Web應用的豐富框架，給構建豐富交互地應用帶來了所有功能，其中一項主要的特性是Angular對動畫的支持。下面通過本文給大家介紹AngularJS中實現(xiàn)顯示或隱藏動畫效果的方式總結，對angularjs動畫效果相關知識感興趣的朋友一起學習2015-12-12