這篇文章主要為大家展示了“angularjs中ui-router如何實現(xiàn)路由的二級嵌套”,內(nèi)容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領大家一起研究并學習一下“angularjs中ui-router如何實現(xiàn)路由的二級嵌套”這篇文章吧。
“專業(yè)、務實、高效、創(chuàng)新、把客戶的事當成自己的事”是我們每一個人一直以來堅持追求的企業(yè)文化。 成都創(chuàng)新互聯(lián)公司是您可以信賴的網(wǎng)站建設服務商、專業(yè)的互聯(lián)網(wǎng)服務提供商! 專注于成都網(wǎng)站制作、成都網(wǎng)站設計、軟件開發(fā)、設計服務業(yè)務。我們始終堅持以客戶需求為導向,結合用戶體驗與視覺傳達,提供有針對性的項目解決方案,提供專業(yè)性的建議,創(chuàng)新互聯(lián)建站將不斷地超越自我,追逐市場,引領市場!
1.首先我們的頁面層次為
其中Main.html是我們的主頁,我們要在main.html中對路由進行統(tǒng)一的管理。
main.html頁面中有一個ui-view在這里將填充PageTab.html,同時被填充的PageTab.html中也有一個ui-view
這樣就實現(xiàn)了嵌套路由。
最終效果:
當我們點擊Page-1時出現(xiàn)的是Page1中的內(nèi)容,同理點擊Page-2。
下面是實際的代碼:
Main.html
Main page
PageTab.html
Insert title here PageTab
Page1.html
Page1 Page1
Page2.html
Page2 Page2
以上是全部的頁面代碼,Main.html中js庫需要手動導入。
下面我們重點看Main.html中對路由統(tǒng)一管理的部分也就是這段js代碼
一共三個狀態(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中的內(nèi)容。同理如果state命名為PageTab.Page2 那么處理它的就會是PageTab.html這個頁面。
以上是“angularjs中ui-router如何實現(xiàn)路由的二級嵌套”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學習更多知識,歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道!