工具/材料

Sublime Text

操作方法

• 01

  首先在Sublime Text新建HTML頁(yè)面，然后導(dǎo)入angular.min.js和angular-route.js兩個(gè)腳本文件，如下圖所示

  
• 02

  然后在body標(biāo)簽里添加ng-app屬性，這個(gè)屬性告訴angular從body開(kāi)始全面監(jiān)聽(tīng)元素動(dòng)態(tài)，如下圖所示

  
• 03

  然后準(zhǔn)備一個(gè)錨鏈接的列表，用于下面路由跳轉(zhuǎn)使用，如下圖所示

  
• 04

  接下來(lái)我們就需要在script標(biāo)簽中通過(guò)module方法實(shí)例化angular了，注意實(shí)例化的時(shí)候添加ngRoute依賴(lài)，如下圖所示

  
• 05

  然后通過(guò)angular實(shí)例來(lái)實(shí)現(xiàn)config方法，如下圖所示，在config方法中傳入?yún)?shù)routeProvider

  
• 06

  接下來(lái)利用routeProvider中的when方法來(lái)匹配路徑，然后實(shí)現(xiàn)路由跳轉(zhuǎn)，如下圖所示

  
• 07

  最后我們運(yùn)行頁(yè)面，你會(huì)看到如下圖所示的展示，當(dāng)你點(diǎn)擊某個(gè)連接的時(shí)候，你會(huì)發(fā)現(xiàn)地址欄的連接也會(huì)跟著變得