Angular 路由route實(shí)例代碼
AngularJS 路由 routing
能夠從頁面的一個視圖跳轉(zhuǎn)到另外一個視圖,對單頁面應(yīng)用來講是至關(guān)重要的。當(dāng)應(yīng)用變得越來越復(fù)雜時,我們需要一個合理的方式來管理用戶在使用過程中看到的界面。AngularJS的做法是將視圖分解成布局和模板視圖,并且根據(jù)用戶當(dāng)前訪問的URL來展示對應(yīng)的視圖。
本文對 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把模板渲染到何處。這個例子中,我們將需要渲染的內(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", { templateUrl: "Subpage_2.html" }) .otherwise({ redirectTo: "/" }); }]);
把 ngRoute 模塊在我們的應(yīng)用中當(dāng)作依賴加載進(jìn)來。用 config 函數(shù)在模塊或應(yīng)用中定義路由,使用AngularJS提供的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ā)路由變化。
運(yùn)行結(jié)果
點(diǎn)擊 go page 1
點(diǎn)擊 go page 2
以上這篇Angular 路由route實(shí)例代碼就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
詳解Angular2學(xué)習(xí)筆記之Html屬性綁定
本篇文章主要介紹了詳解Angular2學(xué)習(xí)筆記之Html屬性綁定,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-01-01Angular 2.0+ 的數(shù)據(jù)綁定的實(shí)現(xiàn)示例
本篇文章主要介紹了Angular 2.0+ 的數(shù)據(jù)綁定的實(shí)現(xiàn)實(shí)例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-08-08AngularJS實(shí)現(xiàn)Input格式化的方法
這篇文章主要介紹了AngularJS實(shí)現(xiàn)Input格式化的方法,結(jié)合實(shí)例形式分析了AngularJS實(shí)現(xiàn)Input格式化的操作步驟與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-11-11angularjs的select使用及默認(rèn)選中設(shè)置
本篇文章主要介紹了angularjs的select使用及默認(rèn)選中設(shè)置,非常具有實(shí)用價值,需要的朋友可以參考下2017-04-04Angular.js實(shí)現(xiàn)動態(tài)加載組件詳解
這篇文章主要給大家介紹了關(guān)于Angular.js實(shí)現(xiàn)動態(tài)加載組件的相關(guān)資料,文中介紹的非常詳細(xì),對大家具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起看看吧。2017-05-05