angularjs頁(yè)面訪問(wèn)時(shí)出現(xiàn)頁(yè)面閃爍問(wèn)題的解決_angularjs

angularjs頁(yè)面訪問(wèn)時(shí)出現(xiàn)頁(yè)面閃爍問(wèn)題的解決_angularjs

ID:30766304

大?。?5.00 KB

頁(yè)數(shù):5頁(yè)

時(shí)間:2019-01-03

angularjs頁(yè)面訪問(wèn)時(shí)出現(xiàn)頁(yè)面閃爍問(wèn)題的解決_angularjs_第1頁(yè)
angularjs頁(yè)面訪問(wèn)時(shí)出現(xiàn)頁(yè)面閃爍問(wèn)題的解決_angularjs_第2頁(yè)
angularjs頁(yè)面訪問(wèn)時(shí)出現(xiàn)頁(yè)面閃爍問(wèn)題的解決_angularjs_第3頁(yè)
angularjs頁(yè)面訪問(wèn)時(shí)出現(xiàn)頁(yè)面閃爍問(wèn)題的解決_angularjs_第4頁(yè)
angularjs頁(yè)面訪問(wèn)時(shí)出現(xiàn)頁(yè)面閃爍問(wèn)題的解決_angularjs_第5頁(yè)
資源描述:

《angularjs頁(yè)面訪問(wèn)時(shí)出現(xiàn)頁(yè)面閃爍問(wèn)題的解決_angularjs》由會(huì)員上傳分享,免費(fèi)在線閱讀,更多相關(guān)內(nèi)容在工程資料-天天文庫(kù)

1、AngularJS頁(yè)面訪問(wèn)時(shí)出現(xiàn)頁(yè)面閃爍問(wèn)題的解決我們知道在應(yīng)用的頁(yè)面或者組件需要加載數(shù)據(jù)時(shí),瀏覽器和angular渲染頁(yè)面都需要消耗一定的時(shí)間。這里的間隔可能很小,甚至讓人感覺(jué)不到區(qū)別;但也可能很長(zhǎng),這樣會(huì)導(dǎo)致讓我們的用戶(hù)看到了沒(méi)有被渲染過(guò)的頁(yè)面。這種情況被叫做FlashOfUnrenderedContent(FOUC)(K)?andisalwaysunwanted.下面我們將要介紹幾個(gè)不同的方式防止這種情況發(fā)生在我們的用戶(hù)身±o1、ng-cloakng-cloak指令是angular的內(nèi)置指令,它的作用是隱藏所有被它包含的元素:Hcllo{{name

2、}}

Ng-cloak實(shí)現(xiàn)原理為一個(gè)directive,頁(yè)面初始化是在DOM的heade壇加一行CSS代碼,如下:[ng:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],?ng-cloak,.x-ng-cloak{Display:none!important;I[ng:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],?ng-cloak,

3、?x-ng-cloak{Display:none!important;Angular將帶有ng-cloak的元素設(shè)置為display:none.在等到angular解析到帶冇ng-cloak節(jié)點(diǎn)的時(shí)候,會(huì)把元素上ng-cloakattribute和calss同時(shí)remove掉,這樣就防止了節(jié)點(diǎn)的閃爍。如下:It('shouldremovethetemplatedirectiveandcssclass,,function(){Expect(element('?doc-exampl

4、e-1iveStemplateT).attr('ng-cloak,))not().toBeDefined();Expect(element('?doc-example-liveStemplate2,).attr('ng-cloak')).Not().toBeDefined();});Tt('shouldremovethetemplatedirectiveandcssclass',function(){Expect(element(doc-example-liveftt

5、emplateT)?attr(4ng-cloak"))not()?toBeDefined();Expect(clement(doc-cxomplc-live#template2")?attr(4ng-cloak"))?Not()?toBeDefined();});2、ng-bindng-bind是angular里面另一個(gè)內(nèi)置的用于操作綁定頁(yè)面數(shù)據(jù)的指令。我們可以使用ng-bind代替{{}}的形式綁定元素到頁(yè)面上;使用ng-bind替代{{"可以防止未被渲染的{{}}就展示給用戶(hù)了,使用ng-bind渲染的空元素替代{{"會(huì)顯得友好很多。上面的例子可以重寫(xiě)成下面那樣,

6、這樣就可以防止頁(yè)面岀現(xiàn){{}}了

Hello
3、resolve當(dāng)在不同的頁(yè)面Z間使用routes(路由)的時(shí)候,我們有另外的方式防止頁(yè)面在數(shù)據(jù)被完全加載到routeZ前被渲染。在route(路由)里使用resolve可以讓我們?cè)趓oute(路由)被完全加載Z前獲取我們需耍加載的數(shù)據(jù)。當(dāng)數(shù)據(jù)被加載成功之后,路Ft!就會(huì)改變而頁(yè)面也會(huì)呈現(xiàn)給用戶(hù);數(shù)據(jù)沒(méi)有被加載成功route就不會(huì)改變,the$routeChangeErroreventwillgetfired.[$routcChangeError事件

7、就(不)會(huì)被激活?】angular,module('myApp5,['ngRoute5])?config(function($routeProvider){SrouteProvider?whon(,/account,,{controller:'AccountCtrr,templateUrl:'views/account.htrnV,resolve:{//Wespecifyapromisetoberesolvedaccount:fun

當(dāng)前文檔最多預(yù)覽五頁(yè),下載文檔查看全文

此文檔下載收益歸作者所有

當(dāng)前文檔最多預(yù)覽五頁(yè),下載文檔查看全文
溫馨提示:
1. 部分包含數(shù)學(xué)公式或PPT動(dòng)畫(huà)的文件,查看預(yù)覽時(shí)可能會(huì)顯示錯(cuò)亂或異常,文件下載后無(wú)此問(wèn)題,請(qǐng)放心下載。
2. 本文檔由用戶(hù)上傳,版權(quán)歸屬用戶(hù),天天文庫(kù)負(fù)責(zé)整理代發(fā)布。如果您對(duì)本文檔版權(quán)有爭(zhēng)議請(qǐng)及時(shí)聯(lián)系客服。
3. 下載前請(qǐng)仔細(xì)閱讀文檔內(nèi)容,確認(rèn)文檔內(nèi)容符合您的需求后進(jìn)行下載,若出現(xiàn)內(nèi)容與標(biāo)題不符可向本站投訴處理。
4. 下載文檔時(shí)可能由于網(wǎng)絡(luò)波動(dòng)等原因無(wú)法下載或下載錯(cuò)誤,付費(fèi)完成后未能成功下載的用戶(hù)請(qǐng)聯(lián)系客服處理。