AngularJS -- Bootstrap(啓動器)

時間 2019-11-30

標籤 angularjs bootstrap 啓動欄目 AngularJS 简体版

原文原文鏈接

點擊查看AngularJS系列目錄
轉載請註明出處：http://www.cnblogs.com/leosx/html

Bootstrap(初始化)

這章介紹了Angular的初始化過程，以及如何在必要的時候，手動進行初始化Angular。angularjs

Angular <script> 標籤
什麼都不說，先來個例子。這個例子展現了Angular推薦的如何繼承Angular和自動初始化Angular。

<!doctype html>
<html xmlns:ng="http://angularjs.org" ng-app>
  <body>
    ...
    <script src="angular.js">
  </body>
</html>

1. 咱們應該講Script標籤放在頁面底部。這樣能夠改善應用程序的加載時間。你能夠從http://code.angularjs.org去得到最新的版本。bootstrap

2. ng-app指示了你的Angular應用程序的根。若是你但願你的整個頁面都是Angular應用程序，那麼你能夠把它放到<html>標籤上。數組

3.若是你選擇比較舊式的指令語法，例如：爲了兼容IE低版本，你在html標籤中使用命名空間(這個是個歷史緣由，咱們是不推薦你使用命名空間的)。瀏覽器

自動初始化

若是引用了angular.js腳本，並且document.readyState爲「complete」狀態，那麼AngularJS會在DOMContentLoaded事件中自動初始化。此時，Angular會先去查找 ng-app指令做爲你的應用程序的根。若是Angular發現了 ng-app指令，那麼它將：app

1. 加載與這個指令相關的模塊。工具

2. 建立應用程序注入器。測試

3. 編譯器將ng-app指令做爲一個根去編譯爲對應的DOM樹。在這裏，你就能夠告訴Angular應用程序，把哪部分DOM編譯爲Angular應用程序的一部分。spa

<!doctype html>
<html ng-app="optionalModuleName">
  <body>
    I can add: {{ 1+2 }}.
    <script src="angular.js"></script>
  </body>
</html>

手動初始化(能夠解決IE低版本瀏覽器問題)

若是你想要去控制Angular應用程序的初始化過程，那麼你可使用手動引導啓動的方法。固然，你也可使用一個手動啓動器方法去代替掉原來的啓動方法，手動初始化調用angular.bootstrap()方法。直接來一個例子吧！雙向綁定

<!doctype html>
<html>
<body>
  <div ng-controller="MyController">
    Hello {{greetMe}}!
  </div>
  <script src="http://code.angularjs.org/snapshot/angular.js"></script>

  <script>
    angular.module('myApp', [])
      .controller('MyController', ['$scope', function ($scope) {
        $scope.greetMe = 'World';
      }]);

    angular.element(document).ready(function() {
      angular.bootstrap(document, ['myApp']);
    });
  </script>
</body>
</html>

請注意，咱們把咱們的應用程序名稱(上例中就是模塊myApp的名稱「myApp」)經過injector注入器注入到了angular.bootstrap方法中的第二個參數中去。須要注意的是，angular.bootstrap 它不動態去建立模塊，因此當你把它當作參數傳遞的時候，你必須本身去建立你的模塊。下面來看看另外一個手動初始化Angular的例子：

你應該在你定義了和加載了你的module以後再去調用 angular.bootstrap() 方法。你不能夠在angular.bootstrap() 調用以後再去增長controller, service, directives等等…

注意：當你手動啓動你的應用程序的時候，你是不能夠再去使用 ng-app 指令的。。

你的代碼應該遵循這樣的順序：

1. 當你的全部文件，代碼都加載完畢以後，去找到你的根元素(要做爲Angular應用程序的那個元素)，一般，咱們都是將文檔(document)做爲的咱們的根。

2. 調用 angular.bootstrap，去編譯爲一個能夠進行雙向綁定的可執行的Angular應用程序。