Angular 路由route例項程式碼

Angular 路由route例項程式碼

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例項程式碼就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援指令碼之家。

您可能感興趣的文章:

AngularJS刪除路由中的#符號的方法AngularJs ng-route路由詳解及例項程式碼AngularJS入門教程之路由與多檢視詳解AngularJS 路由詳解和簡單例項使用AngularJS對路由進行安全性處理的方法Angularjs製作簡單的路由功能demoangular中使用路由和$location切換檢視Angular2 (RC4) 路由與導航詳解