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

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

ID:30766304

大?。?5.00 KB

頁數(shù):5頁

時間:2019-01-03

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

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

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

2、}}

Ng-cloak實現(xiàn)原理為一個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é)點的時候,會把元素上ng-cloakattribute和calss同時remove掉,這樣就防止了節(jié)點的閃爍。如下: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里面另一個內(nèi)置的用于操作綁定頁面數(shù)據(jù)的指令。我們可以使用ng-bind代替{{}}的形式綁定元素到頁面上;使用ng-bind替代{{"可以防止未被渲染的{{}}就展示給用戶了,使用ng-bind渲染的空元素替代{{"會顯得友好很多。上面的例子可以重寫成下面那樣,

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

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

7、就(不)會被激活?】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動畫的文件,查看預(yù)覽時可能會顯示錯亂或異常,文件下載后無此問題,請放心下載。
2. 本文檔由用戶上傳,版權(quán)歸屬用戶,天天文庫負責(zé)整理代發(fā)布。如果您對本文檔版權(quán)有爭議請及時聯(lián)系客服。
3. 下載前請仔細閱讀文檔內(nèi)容,確認文檔內(nèi)容符合您的需求后進行下載,若出現(xiàn)內(nèi)容與標(biāo)題不符可向本站投訴處理。
4. 下載文檔時可能由于網(wǎng)絡(luò)波動等原因無法下載或下載錯誤,付費完成后未能成功下載的用戶請聯(lián)系客服處理。
相關(guān)標(biāo)簽