AngularJs學習筆記系列第一篇，希望我可以堅持寫下去。本文內容主要來自 http://docs.angularjs.org/guide/ 文檔的內容，但也加入些許自己的理解與嘗試結果。
一、總括
本文用於解釋Angular初始化的過程，以及如何在你有需要的時候對Angular進行手工初始化。
二、Angular <script> 標籤
本例用於展示如何通過推薦的路徑整合Angular，實現自動初始化。
<!doctype html> <html xmlns:ng="http://angularjs.org" ng-app> <body> ... <script src="angular.js"> </body> </html>
將sciprt標籤放置於頁面底部。這樣做能避免因為載入angular.js而阻擋HTML的載入，從而降低應用的載入時間。我們可以在http://code.angularjs.org中擷取到最新版本的angularJs。出於安全考慮，切勿在產品中直接引用這個地址來載入指令碼。但如果僅僅是研究學習使用的話，直接連接也無妨。
選擇：angular-[version].js 是方便閱讀的一個版本，適合日常開發、調試使用。
選擇：angular-[version].min.js 是壓縮、混淆後的版本，適合最終產品使用。
放置”ng-app”到應用的根節點中，如果你想讓angular自動啟動你的應用，通常可以放置於<html>標籤中。
<html ng-app>
如果我們需要使用老派風格的directive文法”ng:”，那麼我們需要加入一個xml-namespace到html標籤中以“取悅”IE。（這個是一個曆史原因，我們也不推薦使用ng:）
<html xmlns:ng="http://angularjs.org">
三、自動初始化
Angular會在DOMContentLoaded事件中自動初始化，Angular會找出由你通過ng-app這個directive指定的應用根節點。如果找到，Angular會做以下事情：
載入與module相關的directive。
建立應用相關的injector（依賴管理器）。
以ng-app指定根節點，開始對DOM進行相關“編譯”工作。換言之，可以將頁面的其中一部分（非<html>）作為根節點，從而限制angular的作用範圍。
<!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載入完成之前。所以，如果想很好地避免這個情況，最好的辦法是最佳化應用的載入流程，或者結合css對未編譯的模版進行處理。而由於那萬惡的ie6、7不支援屬性選取器，所以最好使用class=”ng-cloak”的方式。編譯完成後，這個class或屬性會被刪除。）隱藏模版，避免在頁面顯示原模版。
四、手工初始化
如果我們想進一步控制初始化進程(例如你需要通過script loader載入angular.js或者在angular編譯頁面前做一些操作)，那麼我們可以用一個手工調用的啟動方法去代替。
以下例子等同於使用ng-app這個directive：
<!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>
就是說，我們的代碼可以按照以下步驟編寫：
1. 在頁面和其他代碼載入完成後，找到應用模版的根節點；
2. 調用angular.bootstrap，讓angular去將模版編譯為一個可執行檔，雙向繫結的應用！
後續繼續補充相關文章，謝謝大家對本站的支援！
相關文章：
AngularJs bootstrap搭載前台架構——js控制部分
AngularJs bootstrap搭載前台架構——基礎頁面
AngularJs bootstrap搭載前台架構——準備工作
AngularJs bootstrap詳解及範例程式碼
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
