Angular 路由route實例代碼_

1、Angular 路由route實例代碼_ 下面我就為大家?guī)硪黄狝ngular 路由route實例代碼。我覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。 AngularJS 路由 routing 能夠從頁面的一個視圖跳轉(zhuǎn)到另外一個視圖，對單頁面應(yīng)用來講是至關(guān)重要的。當(dāng)應(yīng)用變得越來越簡單時，我們需要一個合理的方式來管理用戶在用法過程中看到的界面。AngularJS的做法是將視圖分解成布局和模板視圖，并且依據(jù)用戶當(dāng)前訪問的URL來展現(xiàn)對應(yīng)的視圖。 本文對 AngularJS routing 做一簡潔示例，并提及其涉及的一些概念。 一、布局頁面 引用scripts： script src=./S

2、cripts/jquery-1.9.1.min.js/script script src=./Scripts/angular.min.js/script script src=./Scripts/angular-route.min.js/script 頁面的布局比較簡潔： div ul lia href=#page1go page 1/a/li lia href=#page2go page 2/a/li lia href=#otherto other page/a/li /ul /div div ng-view/div ng-view是由ngRoute模塊供應(yīng)的一個特別指令，其告訴Angula

3、rJS把模板渲染到何處。這個例子中，我們將需要渲染的內(nèi)容放到 下面的 div 中。上面的三個 a 鏈接分別指向了三個視圖view。 二、模板頁面 創(chuàng)建兩模板頁面，分別叫 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, t

4、emplateUrl: Subpage_2.html ) .otherwise( redirectTo: / ); ); 把 ngRoute 模塊在我們的應(yīng)用中當(dāng)作依靠加載進來。用 config 函數(shù)在模塊或應(yīng)用中定義路由，用法AngularJS供應(yīng)的when和otherwise兩個方法來定義應(yīng)用的路由。 templateUrl: 應(yīng)用會依據(jù) templateUrl 屬性所指定的路徑通過XHR讀取視圖（或者從$templateCache中讀取）。假如能夠找到并讀取這個模板，AngularJS將模板的內(nèi)容渲染到具有ng-view指令的DOM元素中。 redirectTo: 假如redirectTo屬性的值是一個字符串，那么路徑會被替換成這個值，并依據(jù)這個目標(biāo)路徑觸發(fā)路由改變。假如redirectTo屬性的值是一個函數(shù)，那么路徑會被替換成函數(shù)的返回值，并依據(jù)這個目標(biāo)路徑觸發(fā)路由改變。 運行結(jié)果 點擊 go pa