真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

angularjs中ui-router如何實現(xiàn)路由的二級嵌套

這篇文章主要為大家展示了“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.首先我們的頁面層次為

angularjs中ui-router如何實現(xiàn)路由的二級嵌套 

其中Main.html是我們的主頁,我們要在main.html中對路由進行統(tǒng)一的管理。

main.html頁面中有一個ui-view在這里將填充PageTab.html,同時被填充的PageTab.html中也有一個ui-view

這樣就實現(xiàn)了嵌套路由。

最終效果:

angularjs中ui-router如何實現(xiàn)路由的二級嵌套 

當我們點擊Page-1時出現(xiàn)的是Page1中的內(nèi)容,同理點擊Page-2。

下面是實際的代碼:

Main.html











Main page

  
    
  

PageTab.html





Insert title here


PageTab

  
     Page-1      Page-2   
  

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è)資訊頻道!


本文標題:angularjs中ui-router如何實現(xiàn)路由的二級嵌套
分享路徑:http://weahome.cn/article/piijhp.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部