angular ui route 學習筆記

2022-08-25 16:57:27 字數 1165 閱讀 3079

一、頁面導航實現(不分層)

1、新建乙個主頁面,如main.html,引入angular.min.js,angular-ui-router.min.js (關於angularjs的一些外掛程式可以上"" 引入 '/'後面是對應的外掛程式名,版本可以自選);

2、內容展示 ui-sref對應state   href =""會自動查詢鏈結   ui-view內容展示容器位置

首頁 新聞

科技

3、路由設定js**

定義angular模組,注入ui.router模組

function

($stateprovider, $urlrouterprovider) )

.state("page2", )

.state("page3", );

});4、對應page1.html,page2.html,page3.html加上需要的內容就可以了。是不是很簡單呢?

二、巢狀的ui-router(借助乙個母版檔案實現路由分層) 這裡把真正的內容渲染ui-view放到了pagetab.html檔案中,路徑相當都變成/pagetab/pagex..

1、新建main.html檔案,引入對應的angularjs相關檔案,並寫好內容容器;

2、新建母版檔案pagetab.html,在母版檔案裡寫上對應的a鏈結,並提供內容容器ui-view;

page-1

page-2

page-3

3、路由設定的js**

新建angular模組,注入ui.router模板

function

($stateprovider, $urlrouterprovider) )

.state("pagetab.page1", )

.state("pagetab.page2", )

.state("pagetab.page3", );

});4、執行main.html,自動重定向到"/pagetab",展示出三個a鏈結選項,點選a鏈結,會進入二級目錄下,如"/pagetab/page1"。

在此記錄下ui-router一些簡單用法,加深理解記憶,也方便以後使用。

學做事,先學做人

經理很關照我,我很感謝經理。其實,有乙個好的領導,只要好好幹,他是一定會知道的。但是,要改變客戶的看法,看來還真的很難。在客戶面前不可以太謙虛,太過謙虛,他們反覺得我們無能。做事先做人,一點都沒錯啊。感覺自己太嫩了,這一切還得慢慢磨練。希望多看數,多學習,多仔細觀察生活,觀察周圍成功的人,不斷提高自...

B 學密碼學真的得學程式

b 學密碼學真的得學程式 time limit 1000msmemory limit 65536kb64bit io format lld llu submit status practice sdutoj 2464 description 話說,上次zyj同學最終在眾位瑪麗亞的幫助下搞定了那個神奇...

學密碼學一定得學程式

time limit 1000ms memory limit 65536k 曾經,zyj同學非常喜歡密碼學。有一天,他發現了乙個很長很長的字串s1。他很好奇那代表著什麼,於是神奇的wl給了他另乙個字串s2。但是很不幸的是,wl忘記跟他說是什麼意思了。這個時候,zyj不得不求助與偉大的zp。zp笑了笑...