AngularJS學習筆記2——AngularJS的初始化

pengisgood發表於2013-11-24

  本文主要介紹AngularJS的自動初始化以及在必要的適合如何手動初始化。


  Angular <script> Tag


     下面通過一小段程式碼來介紹推薦的自動初始化過程:

<!doctype html>
<html xmlns:ng="http://angularjs.org" ng-app>
<body>
     ...
     <script src="angular.js">
</body>
</html>
  • 把script標籤放在頁面的底部可以縮短應用載入的時間,因為這樣的話Html的載入不會被angular.js指令碼的載入阻塞。
  • angular-[version].js是具有可讀性的版本,適用於開發和除錯。
  • angular-[version].min.js是壓縮和混淆後的版本,適用於產品程式碼。
  • 如果你想讓angular自動初始化的話,可以在<html>標籤中加上ng-app
    <html ng-app></html>
  • 如果要支援IE7的話需要加上id="ng-app"
    <html id="ng-app" ng-app></html>
  • 如果要使用舊版的指令語法(ng:)的話,要支援IE還需要在<html>標籤中引入xml的名稱空間(因為一些歷史原因,現在已經不推薦使用ng:的語法了)
    <html xmlns:ng="http://angularjs.org"></html>

     

  自動初始化(Automatic Initialization)


      在DOMContentLoaded事件觸發時Angular會執行自動初始化過程。這時,Angular會查詢ng-app指令,並用它來標明整個應用的根作用域。如果找到了ng-app指令,Angular會做一下幾件事:

  • 載入和指令(directive)內容相關的模組(module)
  • 建立一個應用“注入器”(injector)
  • 將含有ng-app指令的節點作為根節點來編譯DOM。這樣一來,你可以只指定一部分DOM作為Angular應用。

 
  手動初始化(Manual Initialization)


     如果你想更多的來控制初始化的過程,你可以手動的執行載入程式。比如你需要用到指令碼載入器(script loader)或者要在Angular編譯頁面之前加入一些操作的話,你就需要手動的呼叫Angular的初始化方法了。例如:

<!doctype html>
<html xmlns:ng="http://angularjs.org”>
<body>
    Hello{{'World'}}!     
    <script src="http://code.angularjs.org/angular.js"></script>
    <script>
          angular.element(document).ready(function(){                   
        angular.module(
'myApp',[]); angular.bootstrap(document,['myApp']); }); </script> </body> </html> 

     注意:angular.bootstrap函式簽名如下:

引數 型別 說明
element Element 作為Angular應用根作用域的DOM元素
modules
(optional)
Array<String|Function|Array> 陣列中為所有需要載入的模組的的名稱,每個模組的名字需要在此之前定義,Angular不會在執行到這裡時自己去定義模組。

     如果手動呼叫初始化函式的話,程式碼的書寫需要遵循以下順序:

  • 等到頁面載入完成後,找到AngularJS的根元素(通常是文件的根元素)。
  • 呼叫angular.bootstrap函式將模板編譯成可以執行的、資料雙向繫結的應用程式。


     延遲引導(Deferred Bootstrap)


      這個特性使得像Batarang這樣的工具和一些test runner能夠在Angular的引導過程中建立鉤子,在註冊需要注入的依賴的時候可以增加或者替換注入的service,或者mock一些比較重的依賴。當angular.bootstrap被呼叫時如果window.name中包含字首NG_DEFER_BOOTSTRAP!,引導過程將會被暫停直到angular.resumeBootstrap()被呼叫。angular.resumeBootstrap()可以傳入一個可選的模組陣列作為引數,這個陣列中的模組會被加到引導函式的模組陣列中一起被初始化。

=============Angular  JS學習筆記系列=============

  1. AngularJS學習筆記1——什麼是AngularJS?
  2. AngularJS學習筆記2——AngularJS的初始化     

=========================================

 

 

相關文章