AngularJs學(xué)習(xí)筆記系列第一篇，希望我可以堅持寫下去。本文內(nèi)容主要來自 http://docs.angularjs.org/guide/ 文檔的內(nèi)容，但也加入些許自己的理解與嘗試結(jié)果。 一、總括 本文用于解釋Angular初始化的過程，以及如何在你有需要的時候?qū)?/span>Angular進(jìn)行手工初始化。 二、Angular <script> 標(biāo)簽 本例用于展示如何通過推薦的路徑整合Angular，實現(xiàn)自動初始化。 三、自動初始化 Angular會在DOMContentLoaded事件中自動初始化，Angular會找出由你通過ng-app這個directive指定的應(yīng)用根節(jié)點。如果找到，Angular會做以下事情： 四、手工初始化 如果我們想進(jìn)一步控制初始化進(jìn)程(例如你需要通過script loader加載angular.js或者在angular編譯頁面前做一些操作)，那么我們可以用一個手工調(diào)用的啟動方法去代替。 以下例子等同于使用ng-app這個directive： 1. 在頁面和其他代碼加載完成后，找到應(yīng)用模版的根節(jié)點； 2. 調(diào)用angular.bootstrap，讓angular去將模版編譯為一個可執(zhí)行的，雙向綁定的應(yīng)用！
<!doctype html> <html xmlns:ng="http://angularjs.org" ng-app> <body> ... <script src="angular.js"> </body> </html>
<html ng-app>
<html xmlns:ng="http://angularjs.org">
<!DOCTYPE HTML><html lang="zh-cn"><head> <meta charset="UTF-8"> <title>Bootstrap-auto</title> <style type="text/css"> .ng-cloak { display: none; } </style></head><body> 這里是ng-app外面的~~{{1+2}} <div ng-app class="ng-cloak">這里是ng-app里面~~~{{1+3*2}}</div> <script src="../angular-1.0.1.js" type="text/javascript"></script></body></html>
注：里面的”ng-cloak”，這個是用于在angular.js編譯完成之前（對！沒錯！是編譯完成之前，不是angularjs加載完成之前。所以，如果想很好地避免這個情況，最好的辦法是優(yōu)化應(yīng)用的加載流程，或者結(jié)合css對未編譯的模版進(jìn)行處理。而由于那萬惡的ie6、7不支持屬性選擇器，所以最好使用class=”ng-cloak”的方式。編譯完成后，這個class或?qū)傩詴粍h除。）隱藏模版，避免在頁面顯示原模版。 <!DOCTYPE HTML><html lang="zh-cn"><head> <meta charset="UTF-8"> <title>Bootstrap-manual</title> <style type="text/css"> .ng-cloak { display: none; } </style></head><body> 這里是ng-app外面的~~{{1+2}} <div id="rootOfApp" class="ng-cloak">這里是ng-app里面~~~{{1+3*2}}</div> <script src="../angular-1.0.1.js" type="text/javascript"></script> <script type="text/javascript"> angular.element(document).ready(function() { angular.bootstrap(angular.element(document.getElementById("rootOfApp"))); }); </script></body></html>
就是說，我們的代碼可以按照以下步驟編寫：
