網站首頁 健康小知識 母嬰教育 起名 運動知識 職場理財 情感生活 綠色生活 遊戲數碼 美容 特色美食 愛好

Angular如何運用路由技術

欄目: IT技術 / 發佈於: / 人氣:3.25W

工具/材料

Sublime Text

操作方法

首先在Sublime Text新建HTML頁面,然後匯入和兩個腳本檔案,如下圖所示

Angular如何運用路由技術

然後在body標籤裏添加ng-app屬性,這個屬性告訴angular從body開始全面監聽元素動態,如下圖所示

Angular如何運用路由技術 第2張

然後準備一個錨連結的列表,用於下面路由跳轉使用,如下圖所示

Angular如何運用路由技術 第3張

接下來我們就需要在script標籤中透過module方法實例化angular了,注意實例化的時候添加ngRoute依賴,如下圖所示

Angular如何運用路由技術 第4張

然後透過angular實例來實現config方法,如下圖所示,在config方法中傳入參數routeProvider

Angular如何運用路由技術 第5張

接下來利用routeProvider中的when方法來匹配路徑,然後實現路由跳轉,如下圖所示

Angular如何運用路由技術 第6張

最後我們執行頁面,你會看到如下圖所示的展示,當你點擊某個連接的時候,你會發現地址欄的連接也會跟着變得

Angular如何運用路由技術 第7張