下面小編就為大家?guī)?lái)一篇Angular 路由route實(shí)例代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。

AngularJS 路由 routing

能夠從頁(yè)面的一個(gè)視圖跳轉(zhuǎn)到另外一個(gè)視圖，對(duì)單頁(yè)面應(yīng)用來(lái)講是至關(guān)重要的。當(dāng)應(yīng)用變得越來(lái)越復(fù)雜時(shí)，我們需要一個(gè)合理的方式來(lái)管理用戶在使用過(guò)程中看到的界面。AngularJS的做法是將視圖分解成布局和模板視圖，并且根據(jù)用戶當(dāng)前訪問(wèn)的URL來(lái)展示對(duì)應(yīng)的視圖。

本文對(duì) AngularJS routing 做一簡(jiǎn)單示例，并提及其涉及的一些概念。

一、布局頁(yè)面

引用scripts：

<script src="../Scripts/jquery-1.9.1.min.js"></script>

<script src="../Scripts/angular.min.js"></script>

<script src="../Scripts/angular-route.min.js"></script>

頁(yè)面的布局比較簡(jiǎn)單：

<div>

   <ul>

     <li><a href="#page1">go page 1</a></li>

     <li><a href="#page2">go page 2</a></li>

     <li><a href="#other">to other page</a></li>

   </ul>

 </div>

 <div ng-view></div>

ng-view是由ngRoute模塊提供的一個(gè)特殊指令，其告訴AngularJS把模板渲染到何處。這個(gè)例子中，我們將需要渲染的內(nèi)容放到 下面的 div 中。上面的三個(gè) a 鏈接分別指向了三個(gè)視圖view。

二、模板頁(yè)面

創(chuàng)建兩模板頁(yè)面，分別叫 Subpage_1.html 和 Subpage_2.html。

3、路由規(guī)則 routing config

angular.module("myRouteApp", ["ngRoute"])

  .config(['$routeProvider', function ($routeProvider) {

    $routeProvider

      .when("/page1", {

        templateUrl: "Subpage_1.html"

      })

      .when("/page2", {

        templateUrl: "Subpage_2.html"

      })

      .otherwise({

        redirectTo: "/"

      });

  }]);

把 ngRoute 模塊在我們的應(yīng)用中當(dāng)作依賴加載進(jìn)來(lái)。用 config 函數(shù)在模塊或應(yīng)用中定義路由，使用AngularJS提供的when和otherwise兩個(gè)方法來(lái)定義應(yīng)用的路由。

templateUrl:

應(yīng)用會(huì)根據(jù) templateUrl 屬性所指定的路徑通過(guò)XHR讀取視圖（或者從$templateCache中讀?。?。如果能夠找到并讀取這個(gè)模板，AngularJS將模板的內(nèi)容渲染到具有ng-view指令的DOM元素中。

redirectTo:

如果redirectTo屬性的值是一個(gè)字符串，那么路徑會(huì)被替換成這個(gè)值，并根據(jù)這個(gè)目標(biāo)路徑觸發(fā)路由變化。如果redirectTo屬性的值是一個(gè)函數(shù)，那么路徑會(huì)被替換成函數(shù)的返回值，并根據(jù)這個(gè)目標(biāo)路徑觸發(fā)路由變化。

運(yùn)行結(jié)果

點(diǎn)擊 go page 1

點(diǎn)擊 go page 2

以上這篇Angular 路由route實(shí)例代碼就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考