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

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

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

2、，它的作用是隱藏所有被它包含的元素：It;divng-cloakgt;nbsp:It:hlgt:Hello{{name}}It;/hlgt;lt;/divgt;Ng-cloak實(shí)現(xiàn)原理為一個(gè)directive,頁(yè)面初始化是在DOM的heade增加一行CSS代碼，如下：It;preclass=“prettyprintlinenums”gt;nbsp;[ng:cloak],[ng-cloak]，[data-ng-cloak]，[x-ng-cloak],.ng-cloak,.x-ng-cloak{nb

3、sp;Display:none!important:It:/pregt;1t;preclass=“prettyprintlinenums”gt;nbsp;[ng:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak{nbsp;Display:none!important;}lt;/pregt;Angular將帶有ng-cloak的元素設(shè)置為display：none.在等到angular解析到帶有ng-cloak節(jié)

4、點(diǎn)的時(shí)候，會(huì)把元素上ng—cloaknbsp;attribute和calss同時(shí)remove掉，這樣就防止了節(jié)點(diǎn)的閃爍。如下：It;scripttype=”text/ng-template’，id=’，scenario.js-150”gt;nbsp;It(‘shouldremovethetemplatedirectiveandcssclass’，function(){nbsp;Expect(element(‘?doc-example-live#templatel’).attr(‘ng-cloak’

5、))nbsp;not().toBeDefined();nbsp;nbsp:Expect(element(‘?doc-example-live#template2’).attr(‘ng-cloak’))?Not()?toBeDefined():});lt;/scriptgt;It:scripttype=，’text/ng-template”id=”seenario.js-150’’gt;nbsp;It(‘shouldremovethetemplatedirectiveandcssclass’，fun

6、ction(){nbsp:Expect(element(‘.doc-example-1ive#templatel’)?attr(‘ng-cloak’))nbsp;not().toBeDefined();nbsp;nbsp;Expect(element(.doc-example-livetttemplate2’)?attr(‘ng-cloak’))?Not().toBeDefinedO:});It;/scriptgt;2、ng-bindng-bind是angular里面另一個(gè)內(nèi)置的用于操作綁定頁(yè)面數(shù)

7、據(jù)的指令。我們可以使用ng-bind代替{{}}的形式綁定元素到頁(yè)面上；使用ng-bind替代{{nbsp;}}可以防止未被渲染的{{}}就展示給用戶了，使用ng-bind渲染的空元素替代{{}}會(huì)顯得友好很多。上面的例子可以重寫成下面那樣，這樣就可以防止頁(yè)面出現(xiàn){{}}了It;divgt;nbsp;It;hlgt;Hellolt:spanng-bind=zzname/，gt:It:/spangt;It;/hlgt;It:/divgt;3、resolve當(dāng)在不同的頁(yè)面之間使用routes（路由）的

8、時(shí)候，我們有另外的方式防止頁(yè)面在數(shù)據(jù)被完全加載到route之前被渲染。在route（路由）里使用resolve可以讓我們?cè)趓oute（路由）被完全加載之前獲取我們需要加載的數(shù)據(jù)。當(dāng)數(shù)據(jù)被加載成功之后，路由就會(huì)改變而頁(yè)面也會(huì)呈現(xiàn)給用戶;數(shù)據(jù)沒有被加載成功route就不會(huì)改變，the$routeChangeErroreventwillgetfired.［$routeChangeError事件就（不）會(huì)被激活？】angular.module（’myApp’，［’ngRoute’］）.co