新聞中心
什么是路由?
創(chuàng)新互聯(lián)建站,為您提供成都網(wǎng)站建設(shè)、網(wǎng)站制作公司、網(wǎng)站營(yíng)銷(xiāo)推廣、網(wǎng)站開(kāi)發(fā)設(shè)計(jì),對(duì)服務(wù)宣傳片制作等多個(gè)行業(yè)擁有豐富的網(wǎng)站建設(shè)及推廣經(jīng)驗(yàn)。創(chuàng)新互聯(lián)建站網(wǎng)站建設(shè)公司成立于2013年,提供專(zhuān)業(yè)網(wǎng)站制作報(bào)價(jià)服務(wù),我們深知市場(chǎng)的競(jìng)爭(zhēng)激烈,認(rèn)真對(duì)待每位客戶,為客戶提供賞心悅目的作品。 與客戶共同發(fā)展進(jìn)步,是我們永遠(yuǎn)的責(zé)任!
路由是AngularJS構(gòu)建單頁(yè)面應(yīng)用的基礎(chǔ)。
路由,就是網(wǎng)絡(luò)數(shù)據(jù)或者請(qǐng)求進(jìn)行分發(fā)的一個(gè)網(wǎng)絡(luò)組件。
路由就是一個(gè)用于請(qǐng)求URL分發(fā)和跳轉(zhuǎn)的一個(gè)應(yīng)用組件,Angular中通過(guò)$routeProvider路由服務(wù)提供者進(jìn)行核心的配置處理。
ng路由
ng 路由是 AngularJS 官方提供的一種簡(jiǎn)單的路由操作。
ng 路由主要分三個(gè)組成部分:路由指令、路由服務(wù)、路由服務(wù)提供者
路由指令:ng-view
ngView指令主要用于將路由指向的頁(yè)面渲染到當(dāng)前頁(yè)面的布局中。
語(yǔ)法:
- onload:當(dāng)視圖發(fā)生改變時(shí)執(zhí)行屬性值中的表達(dá)式
- autoscroll:當(dāng)視圖發(fā)生改變時(shí)自動(dòng)觸發(fā)$anchorScroll事件
事件:
路由視圖一旦加載時(shí),就會(huì)自動(dòng)觸發(fā)$viewContentLoaded 事件
路由提供者:$routeProvider
描述:
內(nèi)置服務(wù)對(duì)象 內(nèi)置服務(wù)對(duì)象 $routeProvider $routeProvider $routeProvider 主要用于進(jìn)行路由配置 主要用于進(jìn)行路由配置
該服務(wù)的使用必須依賴 該服務(wù)的使用必須依賴 該服務(wù)的使用必須依賴 ngRoute 模塊,也就是項(xiàng)目中必須添加 模塊,也就是項(xiàng)目中必須添加 animate-route.js
主要方法:
when( path, route); 用于在訪問(wèn) path 路徑時(shí),跳轉(zhuǎn)到 route 指定的視圖 |-- path:路由跳轉(zhuǎn)的徑 |-- route:路由對(duì)象 <組件 對(duì)象 >,一個(gè) JSON對(duì)象 otherwise(params);用于在訪問(wèn)不存的路徑時(shí),跳轉(zhuǎn)的默認(rèn)路徑或者視圖 |-- params:指定路徑或者路由對(duì)象
內(nèi)置服務(wù)<路由服務(wù)>:$route &$routeParams
$route 服務(wù)被用于進(jìn)行深層超鏈接信息的描述, 它會(huì)監(jiān)聽(tīng) 它會(huì)監(jiān)聽(tīng) $location.url() 地址并進(jìn)行url 地址和指定的路由視圖之間映射關(guān)系。
$routeParams服務(wù)允許開(kāi)發(fā)人員可以進(jìn)行路由中參數(shù)的處理。
ui路由
Angular官方提供的 ng 路由已經(jīng)具備了非常強(qiáng)大的功能,但是在某些情況下存在一些不太好用的地方,項(xiàng)目中如果出現(xiàn)大量路由深層嵌套話官方的ng路由來(lái)處理就不是非常適合了。
第三方提供了一種強(qiáng)大的路由處理功能,對(duì)于路由嵌套也可以非常簡(jiǎn)單的進(jìn)行處理。
ui-route:ui路由,第三方路由
ui路由,主要的功能是項(xiàng)目中的路由操作,和官方的ng路由相比較,它的處理方式更加簡(jiǎn)潔和易用,尤其是涉及到項(xiàng)目中大量路由嵌套時(shí),使用ui路由能更加快捷方便的完成項(xiàng)目中路由的跳轉(zhuǎn)處理。
ui-view:指令
ui -view是 ui 路由中模板頁(yè)面用于數(shù)據(jù)展示的指令,可以作為標(biāo)簽的屬性出現(xiàn),同樣也可以作為標(biāo)簽的屬性出現(xiàn)
>
同時(shí)可以給 ui -view 指令命名,用于在路由跳轉(zhuǎn)時(shí)對(duì)應(yīng)名稱的 ui -view 上展示對(duì)應(yīng)的數(shù)據(jù)
總結(jié):兩者區(qū)別
① ng路由實(shí)現(xiàn)不了多頁(yè)面應(yīng)用
② ui路由:更加方便地處理路由嵌套,在state()函數(shù)中進(jìn)行即可。
③ngRoute 和 ui-route 相比:
$when —> $state 路由狀態(tài)配置的時(shí)候
$routeParams —> $stateParams 帶參數(shù)的時(shí)候的配置
$routeProvider —> $stateProvider 依賴注入的模塊
—> 頁(yè)面中綁定的指令
④ uiRoute中可以嵌套更深層次的路由,也就是路由中可以有路由(大致有兩種情況:1.橫向的 2.縱向的)。
(1)嵌套路由
(2)多視圖路由
ngRoute中就不能嵌套更深的路由。
用代碼看一下兩者的區(qū)別:
ng路由:首先要配置注冊(cè) ngRoute
代碼如下:
var app = angular.module(“myApp", ['ngRoute']); app.config(["$routeProvider",function($routeProvider){ }]);
ui路由:用hello world舉例子:
效果如下:
這是簡(jiǎn)單的一個(gè)單頁(yè)面跳轉(zhuǎn),有興趣可以思考一下多頁(yè)面應(yīng)用。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
新聞名稱:詳解Angular路由ng-route和ui-router的區(qū)別
新聞來(lái)源:http://www.dlmjj.cn/article/goggee.html