菜鳥筆記-AngularJS 5月30日學習（頁面初始化會出現花括號）
首先把angularjs放在<head></head >裡面
三種方法：
1、 ng-cloakng-cloak指令是angular的內建指令，它的作用是隱藏所有被它包含的元素：
2、 ng-bind ng-bind是angular裡面另一個內建的用於操作繫結頁面資料的指令。我們可以使用ng-bind代替{{ }}的形式繫結元素到頁面上；
3、 resolve當在不同的頁面之間使用routes（路由）的時候，我們有另外的方式防止頁面在資料被完全載入到route之前被渲染。
感覺比較適用的是ng-cloak
轉載自其它人的：
2013-12-28 21:42 by
在做angular的SPA開發時，我們經常會遇見在如Chrome這類能夠快速解析的瀏覽器上出現表示式({{express }} ),或者是模組(div)的閃爍。對於這個問題由於JavaScript去操作DOM，都會等待DOM載入完成（DOM ready）。對於angular會在DOM ready完會才回去解析html view Template，所以對於Chrome這類快速的瀏覽器你會看見有閃爍的情況出現。而對於IE7，8這類解析稍慢的瀏覽器大部分情況下是不會出現這個問題的。
在angular中為我們提供了ng-cloak來實現紡織閃爍的方案，我們只需要在需要的地方加上
<div id="template1" ng-cloak>hello</div>
<div id="template2" ng-cloak class="ng-cloak"> {{'hello IE7}}</div>
<div id="template2" ng-bing="'helloIE7'"></div>
angular講ng-cloak實現為一個directive，並會在初始化的時候在DOM的heade增加一行css程式碼，如下：
<styletype="text/css">@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide{display:none!important;}ng\:form{display:block;}.ng-animate-start{clip:rect(0,auto,auto,0);-ms-zoom:1.0001;}.ng-animate-active{clip:rect(-1px,auto,auto,0);-ms-zoom:1;}
</style>
從上面我們可以看見angular將帶有ng-clock的的元素設定為display:none，隱藏掉，在等到angular解析到帶有ng-clock的節點時候，會把attribute和class同時remove掉，這樣就可以實現防止節點的閃爍。
var ngCloakDirective = ngDirective({
compile: function(element,attr) {
attr.$set('ngCloak', undefined);
element.removeClass('ng-cloak');
}
});
在angular.js的最後一段程式碼中能看見前面所說的增加css的程式碼：
!angular.$$csp()&& angular.element(document).find('head').prepend('<styletype="text/css">@charset"UTF-8";[ng\\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide{display:none!important;}ng\\:form{display:block;}.ng-animate-block-transitions{transition:0sall!important;-webkit-transition:0s all!important;}</style>');
好像閃爍的問題好像已經能夠被我解決了，恩是否是這樣的，理論也改如此，但是現實是殘酷的，我們的感性認識經常會被現實一記重重的耳光，我們才能很更深入全面的思考，如果瀏覽器的速度比angular在head中加入css的速度還快呢？我在給公司的一個專案組解決這個閃爍的問題的時候就遇見了這個問題。怎麼辦呢？那我們只能使出我們必殺技，自己把css加入我們的css檔案引入heade，啟動載入，ok這樣就可以完美解決了。(如果你也遇見了加了ng-cloak還不起作用的話，那麼試試直接引入css檔案吧)
到這裡關於ng-cloak的原理和解決方案已經完成，歡迎繼續關注angular的後續經驗篇分享。
作者：破狼出處：http://www.cnblogs.com/whitewolf/本文版權歸作者，歡迎轉載，但未經作者同意必須保留此段宣告，且在文章頁面明顯位置給出原文連線，否則保留追究法律責任的權利。該文章也同時釋出在我的獨立部落格中-個人獨立部落格、部落格園--破狼和51CTO--破狼。