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

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

ID:30766304

大小:55.00 KB

頁數(shù):5頁

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

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

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

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

2、}}

Ng-cloak實(shí)現(xiàn)原理為一個(gè)directive,頁面初始化是在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)置的用于操作綁定頁面數(shù)據(jù)的指令。我們可以使用ng-bind代替{{}}的形式綁定元素到頁面上;使用ng-bind替代{{"可以防止未被渲染的{{}}就展示給用戶了,使用ng-bind渲染的空元素替代{{"會(huì)顯得友好很多。上面的例子可以重寫成下面那樣,

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

Hello
3、resolve當(dāng)在不同的頁面Z間使用routes(路由)的時(shí)候,我們有另外的方式防止頁面在數(shù)據(jù)被完全加載到routeZ前被渲染。在route(路由)里使用resolve可以讓我們?cè)趓oute(路由)被完全加載Z前獲取我們需耍加載的數(shù)據(jù)。當(dāng)數(shù)據(jù)被加載成功之后,路Ft!就會(huì)改變而頁面也會(huì)呈現(xiàn)給用戶;數(shù)據(jù)沒有被加載成功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ù)覽五頁,下載文檔查看全文

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

當(dāng)前文檔最多預(yù)覽五頁,下載文檔查看全文
溫馨提示:
1. 部分包含數(shù)學(xué)公式或PPT動(dòng)畫的文件,查看預(yù)覽時(shí)可能會(huì)顯示錯(cuò)亂或異常,文件下載后無此問題,請(qǐng)放心下載。
2. 本文檔由用戶上傳,版權(quán)歸屬用戶,天天文庫負(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)等原因無法下載或下載錯(cuò)誤,付費(fèi)完成后未能成功下載的用戶請(qǐng)聯(lián)系客服處理。
相關(guān)標(biāo)簽