本文實(shí)例講述了AngularJS路由切換實(shí)現(xiàn)方法。分享給大家供大家參考，具體如下：

目前成都創(chuàng)新互聯(lián)公司已為近1000家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁(yè)空間、網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計(jì)、南華網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

之前有在服務(wù)器端接觸到angular路由切換，今天想在本地實(shí)現(xiàn)路由，搗鼓半天終于成功了，特把步驟整理分享下，免得大家走彎路！

1.首先引入angular.min.js和angular-route.min.js

2.然后我們來(lái)寫框架index.html，index里面裝的是所有頁(yè)面都有的nav導(dǎo)航和footer頁(yè)腳（我這個(gè)demo里只有nav），模板文件page1.html，page2.html，也就是中間路由切換的部分

index.html代碼如下：

  
  
  
  
  


  

    
go page 1
    
go page 2
    
to other page
  
  

page1.html代碼如下：

this is page 1

page2.html代碼如下：

this is page 2

3.其次來(lái)寫controllers.js，說(shuō)明見(jiàn)注釋

angular.module("RoutingApp", ["ngRoute"]) //定義路由 在應(yīng)用模塊RoutingApp里注入ngRoute
  .config(['$routeProvider', function ($routeProvider) { //在路由模塊里面的.config()方法里面注入了$routeProvider
    $routeProvider
      .when("/page1", { //templateUrl: 表示路由跳轉(zhuǎn)的view模板
        templateUrl: "page1.html"
      })
      .when("/page2", {
        templateUrl: "page2.html"
      })
      .otherwise({
        redirectTo: "/"
      });
  }]);

4.要想實(shí)現(xiàn)angular路由的本地切換必須要在本地有個(gè)服務(wù)器的環(huán)境，我是用Python搭建的，很簡(jiǎn)單的呦！新建一個(gè)python文件拷貝以下代碼

import http.server
def start_server(port=8000, bind="", cgi=False):
  if cgi==True:
    http.server.test(HandlerClass=http.server.CGIHTTPRequestHandler, port=port, bind=bind)
  else:
    http.server.test(HandlerClass=http.server.SimpleHTTPRequestHandler, port=port, bind=bind)
start_server() #If you want cgi, set cgi to True e.g. start_server(cgi=True)

5.在桌面上新建一個(gè)叫l(wèi)emonServer的文件夾，并把所有文件扔進(jìn)去，得到如下文件目錄

6.運(yùn)行python文件結(jié)果如下，這段代碼的意思是，把python文件所在的目錄搭建成一個(gè)簡(jiǎn)單的服務(wù)器

7.打開瀏覽器輸入localhost:8000/index.html就可以看到剛才建立的index.html了，點(diǎn)擊鏈接完成路由操作，是不是很簡(jiǎn)單呢！

更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》

希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。