小編給大家分享一下AngularJS路由中resolve怎么用,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
成都創(chuàng)新互聯(lián)公司是專(zhuān)業(yè)的館陶網(wǎng)站建設(shè)公司,館陶接單;提供網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站建設(shè),網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專(zhuān)業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行館陶網(wǎng)站開(kāi)發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專(zhuān)業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專(zhuān)業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!ng-route模塊中的when()和ui-route的state()都提供了resolve屬性。
為什么需要使用resolve?
當(dāng)路由切換的時(shí)候,被路由的頁(yè)面中的元素(標(biāo)簽)就會(huì)立馬顯示出來(lái),同時(shí),數(shù)據(jù)會(huì)被準(zhǔn)備好并呈現(xiàn)出來(lái)。但是注意,數(shù)據(jù)和元素并不是同步的,在沒(méi)有任何設(shè)置的情況下,AngularJS默認(rèn)先呈現(xiàn)出元素,而后再呈現(xiàn)出數(shù)據(jù)。這樣就會(huì)導(dǎo)致頁(yè)面會(huì)被渲染兩遍,導(dǎo)致“頁(yè)面UI抖動(dòng)”的問(wèn)題,對(duì)用戶不太友好。resolve的出現(xiàn)解決了這個(gè)問(wèn)題。
resolve是干嘛用的
resolve屬性里的值會(huì)在路由成功前被預(yù)先設(shè)定好,然后注入到控制器中。通俗地將,就是等數(shù)據(jù)都“就位”后,才進(jìn)行路由(其實(shí)我覺(jué)得也不能叫路由,因?yàn)槁酚墒且恍┝械牟僮?,其中就包括了設(shè)置resolve屬性等等)。這樣的好處就是頁(yè)面僅會(huì)被渲染一遍。
//js var app = angular.module('myApp',['ui.router']); app.config(["$stateProvider",function($stateProvider){ $stateProvider .state("index",{ url:'/', templateUrl:'list.html', controller:'myController', resolve:{ user:function(){ return { name:"perter", email:"826415551@qq.com", age:"18" } } } }) .state("index.list",{ url:'/list', template:'{{name}}
', controller:'myController', }) .state("index.list2",{ url:'/list2', template:'{{name}}
', controller:'myController', resolve:{ user:function () { return{ name:"Rose" } } } }) }]); app.controller('myController',function($scope,user){ $scope.name=user.name; $scope.age=user.age; $scope.email=user.email; $scope.user=user; });
這里省略了首頁(yè)的html,可以翻到最上面看。重點(diǎn)對(duì)比最后的兩個(gè)state(),可以發(fā)現(xiàn)第一個(gè)沒(méi)有重新設(shè)置resolve屬性,而第二個(gè)重新設(shè)置了resolve()屬性。他們雖然共用了同一個(gè)控制器myController ,但是他們的值卻不相同。
這樣,控制器的可維護(hù)性就會(huì)得到提高。
除此之外還可以借助$ocLazyLoad動(dòng)態(tài)加載js、css,用法如下:
resolve: { deps: ['$ocLazyLoad', function($ocLazyLoad) { return $ocLazyLoad.load({ name: 'App', insertBefore: '#ng_load_plugins_before', files: [ 'xx/js/controllers/xx.js' ] }); }], showImgFiles: ['$ocLazyLoad', function($ocLazyLoad) { return $ocLazyLoad.load([{ name: 'App', insertBefore: '#ng_load_plugins_before', files: [ 'xx/xx/xx.css', 'xx/xx/xx.js' ] }]).then(function(){ //做些事情 }); }] }
以上是“AngularJS路由中resolve怎么用”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道!
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com,海內(nèi)外云服務(wù)器15元起步,三天無(wú)理由+7*72小時(shí)售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì),專(zhuān)為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。