angular.js之路由的選擇方法
在一個(gè)單頁(yè)面中,我們可以添加多個(gè)模塊,使得網(wǎng)頁(yè)只在需要的時(shí)候加載這個(gè)模塊。模塊的切換大致上可以代替網(wǎng)頁(yè)的切換,于是,我們便可以通過(guò)模塊的切換實(shí)現(xiàn)網(wǎng)頁(yè)的切換,這個(gè)切換是按需加載的。
乍一看非常普通的東西,但是仔細(xì)想想就可以發(fā)現(xiàn),這種思想可以解決非常多的資源。
例如,假如有一個(gè)頁(yè)面,需要顯示1000種商品的信息,每個(gè)商品的表現(xiàn)形式各不相同(設(shè)他們有各自獨(dú)立的css和js),那么一般來(lái)說(shuō),我們就需要準(zhǔn)備1000張網(wǎng)頁(yè)去加載這些信息。但是,使用這種模塊化思想,我們就可以僅僅在后臺(tái)設(shè)定1000個(gè)各不相同的模塊,然后根據(jù)需要將需要的商品的對(duì)應(yīng)模塊加載到唯一一張頁(yè)面上而已。
而要做到上面介紹的功能就必須使用路由功能了。
主體思路:
1. 后臺(tái)設(shè)立多個(gè)獨(dú)立的模塊
2. 建立一個(gè)路由控制模塊
3. 根據(jù)需要通過(guò)路由提取需要模塊加載到主頁(yè)上
4. 加載的同時(shí),將其他模塊隱藏。
那么,路由模塊的建立需要多少功夫呢?其實(shí)意外地簡(jiǎn)單:
首先,主頁(yè)面上,寫(xiě)上對(duì)應(yīng)的代碼:
<ng-view></ng-view>這個(gè)代表路由區(qū)域和視圖區(qū)域,只有寫(xiě)了這個(gè)標(biāo)簽才會(huì)觸發(fā)路由事件:
<html lang="en" ng-app="myTodo"><head> <meta charset="utf-8"> <title>angularjs • TodoMVC</title> <link rel="stylesheet" href="node_modules/todomvc-common/base.css"> <link rel="stylesheet" href="node_modules/todomvc-app-css/index.css"> <style> .pagination { overflow: hidden; padding: 20px; } .pagination ul li { width: 60px; height: 30px; line-height: 30px; border:1px solid black; float: left; list-style-type: none; margin-right: 10px; text-align: center; } </style> </head> <body> <ng-view></ng-view> <!-- 路由區(qū)域,視圖區(qū)域--> <footer id="info"> <p>Double-click to edit a todo</p> <p>Created by <a >Sindre Sorhus</a></p> <p>Part of <a >TodoMVC</a></p> </footer> <script src="node_modules/angular/angular.js"></script> <script src="node_modules/angular-route/angular-route.js"></script> <script src="js/app.js"></script> </body> </html>
其他的東西都是裝飾,只要看第24行就可以了。
在路由區(qū)域和視圖區(qū)域中,我們可以添加內(nèi)容進(jìn)去——甚至添加一個(gè)網(wǎng)頁(yè)進(jìn)去。
接下來(lái)請(qǐng)看對(duì)應(yīng)的app.js。
var app = angular.module("myTodo", ['ngRoute']); //路由的配置: app.config(function($routeProvider) { var routeconfig = { templateUrl: "body.html", controller: "myTodoCtrl" /*controller: 'myTodoCtrl'*/ } var ohter_config = { templateUrl: "other.html" } $routeProvider. when("",routeconfig). //status : 它對(duì)應(yīng)我們頁(yè)面的hash: all completed active //路由規(guī)則的優(yōu)先級(jí)按寫(xiě)法的順序所決定的 when("/other", ohter_config). when("/:aaa", routeconfig ). otherwise( { redirectTo: "/all" }); }); app.controller("myTodoCtrl", function($scope, $routeParams, $filter){ console.log($routeParams); });
如果僅僅使用路由的話,以上的代碼就足夠使用了。它會(huì)保證;
1.當(dāng)頁(yè)面停留在主頁(yè)或者其他奇怪的地方的時(shí)候自動(dòng)跳轉(zhuǎn)到
/all
上面,網(wǎng)址是——http://127.0.0.1:8020/finishAngularJS-mark2/index.html#/all
只需要注意index后面的就可以了。
2. 當(dāng)頁(yè)面跳轉(zhuǎn)方向是/other的時(shí)候,跳轉(zhuǎn)到
http://127.0.0.1:8020/finishAngularJS-mark2/iother.html
上
3. 當(dāng)出現(xiàn)特定的跳轉(zhuǎn)的時(shí)候(這里規(guī)定跳轉(zhuǎn)的是/active,/complete/all三個(gè)),也會(huì)跳轉(zhuǎn)到對(duì)應(yīng)頁(yè)面,但這是在index下的跳轉(zhuǎn)——
http://127.0.0.1:8020/finishAngularJS-mark2/index.html#/active
http://127.0.0.1:8020/finishAngularJS-mark2/index.html#/all
http://127.0.0.1:8020/finishAngularJS-mark2/index.html#/complete
【尤其注意的一點(diǎn):除了2會(huì)跳出這個(gè)頁(yè)面,其他的跳轉(zhuǎn)是顯示在規(guī)定的視圖區(qū)和路由區(qū)上面的,body網(wǎng)頁(yè)上的內(nèi)容會(huì)被加載過(guò)來(lái)?!?/p>
接下來(lái)我們講解原理:
app.config(function($routeProvider)
這便是用來(lái)設(shè)定路由的代碼,直接寫(xiě)就好
var routeconfig = { templateUrl: "body.html", controller: "myTodoCtrl" /*controller: 'myTodoCtrl'*/ } var ohter_config = { templateUrl: "other.html" }
這是兩個(gè)跳轉(zhuǎn),跳轉(zhuǎn)是一個(gè)對(duì)象,templateUrl,即模板是body.html,這就是為什么index.html會(huì)加載body.html的原因。第二個(gè)參數(shù)是為這個(gè)模板添加控制器,名字是——myTodoCtrl。
第二個(gè)跳轉(zhuǎn)因?yàn)椴恢匾詐ass。
$routeProvider. when("",routeconfig). //status : 它對(duì)應(yīng)我們頁(yè)面的hash: all completed active //路由規(guī)則的優(yōu)先級(jí)按寫(xiě)法的順序所決定的 when("/other", ohter_config). when("/:aaa", routeconfig ). otherwise( { redirectTo: "/all" }); });
這一段代碼是用來(lái)進(jìn)行判斷的,當(dāng)哈希值發(fā)生改變的時(shí)候,執(zhí)行對(duì)應(yīng)的跳轉(zhuǎn)對(duì)象。
當(dāng)哈希值為""即第二句,為空的時(shí)候,執(zhí)行routeconfig
當(dāng)哈希值為"/other",即第五局,執(zhí)行other_config
當(dāng)哈希值是一個(gè)特殊變量的時(shí)候,變量的名稱為aaa,值為X(X可以是定義好的任何指,這里是all,complete,active中其中一個(gè)),即"/active","/complete","/all"的時(shí)候,執(zhí)行routeconfig。
當(dāng)哈希值是其他情況的時(shí)候,默認(rèn)跳轉(zhuǎn)到哈希值為"/all"上。
我們得到了哈希值,執(zhí)行了后面的對(duì)象,取出對(duì)象的模板,添加在了主頁(yè)上面,啟動(dòng)了控制器,整個(gè)路由便算完成了。
以上就是小編為大家?guī)?lái)的angular.js之路由的選擇方法的全部?jī)?nèi)容了,希望對(duì)大家有所幫助,多多支持腳本之家~
- Angularjs制作簡(jiǎn)單的路由功能demo
- AngularJS 路由詳解和簡(jiǎn)單實(shí)例
- AngularJS路由實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)實(shí)例
- angular.js 路由及頁(yè)面?zhèn)鲄⑹纠?/a>
- 使用AngularJS對(duì)路由進(jìn)行安全性處理的方法
- AngularJS監(jiān)聽(tīng)路由的變化示例代碼
- AngularJS 路由和模板實(shí)例及路由地址簡(jiǎn)化方法(必看)
- 詳解Angular4中路由Router類的跳轉(zhuǎn)navigate
- AngularJS監(jiān)聽(tīng)路由變化的方法
- AngularJS中的路由使用及實(shí)現(xiàn)代碼
相關(guān)文章
AngularJS基礎(chǔ) ng-readonly 指令簡(jiǎn)單示例
本文主要介紹AngularJS ng-readonly 指令,這里對(duì)ng-readonly指令的資料做了整理,有學(xué)習(xí)AngularJS 指令的同學(xué)可以參考下2016-08-08Angular中使用響應(yīng)式表單的詳細(xì)步驟
Angular提供了兩種處理表單的方式模板驅(qū)動(dòng)表單和響應(yīng)式表單(也稱為模型驅(qū)動(dòng)表單),使用模板驅(qū)動(dòng)表單時(shí),模板指令被用來(lái)構(gòu)建表單的內(nèi)部表示,在本文中,您探討了如何將響應(yīng)式表單應(yīng)用于一個(gè)示例 Angular 應(yīng)用程序2024-02-02AngularJs實(shí)現(xiàn)聊天列表實(shí)時(shí)刷新功能
這篇文章主要介紹了AngularJs實(shí)現(xiàn)聊天列表實(shí)時(shí)刷新功能,需要的朋友可以參考下2017-06-06Angular應(yīng)用里異步打開(kāi)對(duì)話框技術(shù)詳解
這篇文章主要為大家介紹了Angular應(yīng)用里異步打開(kāi)對(duì)話框技術(shù)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-12-12AngularJS框架中的雙向數(shù)據(jù)綁定機(jī)制詳解【減少需要重復(fù)的開(kāi)發(fā)代碼量】
這篇文章主要介紹了AngularJS框架中的雙向數(shù)據(jù)綁定機(jī)制,結(jié)合實(shí)例形式分析了AngularJS雙向數(shù)據(jù)綁定機(jī)制的原理及實(shí)現(xiàn)方法,以及減少需要重復(fù)開(kāi)發(fā)代碼量的優(yōu)勢(shì),需要的朋友可以參考下2017-01-01Angular實(shí)現(xiàn)預(yù)加載延遲模塊的示例
本篇文章主要介紹了Angular實(shí)現(xiàn)預(yù)加載延遲模塊的示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10深入解析AngularJS框架中$scope的作用與生命周期
這篇文章主要介紹了AngularJS中$scope的作用與生命周期,包括在DOM中添加controller對(duì)象的相關(guān)用法,需要的朋友可以參考下2016-03-03在Angular中使用NgTemplateOutlet創(chuàng)建可重用組件的流程步驟
在 Angular 中,使用 NgTemplateOutlet 而不是創(chuàng)建特定組件,可以使組件在不修改組件本身的情況下輕松修改為各種用例,在本文中,您將接受一個(gè)現(xiàn)有組件并重寫(xiě)它以使用 NgTemplateOutlet,需要的朋友可以參考下2024-03-03