AngularJS 路由routing
能夠從頁面的一個視圖跳轉到另外一個視圖，對單頁面應用來講是至關重要的。當應用變得越來越複雜時，我們需要一個合理的方式來管理用戶在使用過程中看到的界面。 AngularJS的做法是將視圖分解成佈局和模板視圖，並且根據用戶當前訪問的URL來展示對應的視圖。
本文對AngularJS routing 做一簡單示例，並提及其涉及的一些概念。
一、佈局頁面
引用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>
頁面的佈局比較簡單：
<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模塊提供的一個特殊指令，其告訴AngularJS把模板渲染到何處。這個例子中，我們將需要渲染的內容放到下面的div 中。上面的三個a 鏈接分別指向了三個視圖view。
二、模板頁面
創建兩模板頁面，分別叫Subpage_1.html 和Subpage_2.html。
3、路由規則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 模塊在我們的應用中當作依賴加載進來。用config 函數在模塊或應用中定義路由，使用AngularJS提供的when和otherwise兩個方法來定義應用的路由。
templateUrl:
應用會根據templateUrl 屬性所指定的路徑通過XHR讀取視圖（或者從$templateCache中讀取）。如果能夠找到並讀取這個模板，AngularJS將模板的內容渲染到具有ng-view指令的DOM元素中。
redirectTo:
如果redirectTo屬性的值是一個字符串，那麼路徑會被替換成這個值，並根據這個目標路徑觸發路由變化。如果redirectTo屬性的值是一個函數，那麼路徑會被替換成函數的返回值，並根據這個目標路徑觸發路由變化。
運行結果
點擊go page 1
點擊go page 2
以上這篇Angular 路由route實例代碼就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。