AngularJS開發指南2：AngularJS初始化過程

時間 2019-11-30

原文原文鏈接

自動初始化css

請將ng-app指令放到你應用的標籤節點中, 若是你想要AngularJS自動執行整個<html>程序就把它放在 <html> 標籤中。好比：<html ng-app>html

AngularJS會在DOMContentLoaded事件觸發時執行，並經過ng-app指令尋找你應用的根做用域。若是 ng-app指令找到了，那麼AngularJS將會：angularjs

（1）載入指令相關的模塊。這裏指的是optionalModuleName模塊。
（2）建立應用的「注入器(injector)」。
（3）擁有ng-app 指令的標籤爲根節點來編譯其中的DOM。bootstrap

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

手動初始化瀏覽器

若是你須要主動控制一下初始化的過程，你可使用手動執行引導程序的方法。app

<!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.bootstrap(document);
            });
        </script>
    </body>
</html>

等頁面和全部的腳本加載完以後，找到HTML模板的根節點——一般就是文檔的根節點。
調用 angular.bootstrap方法，將模板編譯成可執行的、數據雙向綁定的應用程序。函數

HTML編譯器性能

HTML在編寫靜態頁面時，有不少聲明式的結構來控制格式。好比你要把某個內容居中，你只須要添加一個 align="center" 的屬性給須要內容居中的元素就好了。這就是聲明式語言的強大之處。spa

可是聲明式語言也有力所不能及的地方，緣由之一在於你不能用它來讓瀏覽器識別新的語法。好比說，你不要內容居中，而是居左到1/3,這時它就作不到了。因此咱們須要一個辦法讓瀏覽器能學會新的HTML語法。雙向綁定

AngularJS的HTML編譯器能讓瀏覽器識別新的HTML語法。它能讓你將行爲關聯到HTML元素或者屬性上，甚至能讓你創造具備自定義行爲的新元素。AngularJS稱這種行爲擴展爲「指令」。

編譯器是AngularJS提供的一項服務，它經過遍歷DOM來查找和它相關的屬性。整個編譯的過程分爲兩個階段。

編譯：遍歷DOM而且收集全部的相關指令，生成一個連接函數。
連接：給指令綁定一個做用域，生成一個動態的視圖。做用域模型的任何改變都會反映到視圖上，而且視圖上的任何用戶操做也都會反映到做用域模型。這使得做用域模型成爲你的業務邏輯裏惟一要關心的東西。

有一些指令，好比ng-repeat會爲數據集合裏的每一項都克隆一次對應的DOM元素。將整個編譯過程分爲編譯和連接兩個階段的做法改善了總體的性能，由於克隆出來的模板總共只須要被編譯一次，而後連接到各自的模型實例上就好了。

指令指示的是「當關聯的HTML結構進入編譯階段時應該執行的操做」。指令能夠寫在元素的名稱裏，屬性裏，css類名裏，註釋裏。下面有幾個功能相同的使用ng-bind指令的例子。

<span ng-bind="exp"></span>
<span class="ng-bind: exp;"></span>
<ng-bind></ng-bind>
<!-- directive: ng-bind exp -->

指令本質上只是一個當編譯器編譯到相關DOM時須要執行的函數。

下面是一條能讓元素變得可拖拽的指令。注意<span>元素裏的那個draggable屬性。

<!doctype html>
<html ng-app="drag">
  <head>
    <script src="http://code.angularjs.org/angular-1.1.0.min.js"></script>
    <script>
       angular.module('drag', []).directive('draggable', function($document) {
          var startX=0, startY=0, x = 0, y = 0;
          return function(scope, element, attr) {
             element.css({
                 position: 'relative',
                 border: '1px solid red',
                 backgroundColor: 'lightgrey',
                 cursor: 'pointer'
             });
             element.bind('mousedown', function(event) {
                startX = event.screenX - x;
                startY = event.screenY - y;
                $document.bind('mousemove', mousemove);
                $document.bind('mouseup', mouseup);
             });

             function mousemove(event) {
                 y = event.screenY - startY;
                 x = event.screenX - startX;
                 element.css({
                    top: y + 'px',
                    left:  x + 'px'
                 });
             }

            function mouseup() {
                 $document.unbind('mousemove', mousemove);
                 $document.unbind('mouseup', mouseup);
            }
         }
      }); 
    </script>
  </head>
  <body>
    <span draggable>Drag ME</span>
  </body>
</html>

經過加入draggable屬性可讓任何HTML元素都實現這個新的行爲。咱們這種改進的優美之處在於咱們給了瀏覽器新能力。咱們用了一種只要開發者熟悉HTML規則，就會很天然的擴展瀏覽器理解新行爲新語法的能力。

angular視圖

網上有不少的模板系統，好比handlerbars。他們大多數都是「將靜態的字符模板和數據綁定，生成新字符，而後經過innerHTML插入到頁面元素中」。這意味着數據上的任何改變，都會致使數據要從新和模板結合生成新字符，再插入到DOM裏。
AngularJS則不一樣，AngularJS編譯器使用的是帶指令的DOM，而不是字符串模板。它返回的是一個連接函數，這個函數和做用域模型結合就會生成一個動態視圖。這個視圖和模型的綁定過程是「透明的」。開發者不須要作任何關於更新視圖的工做。而且應用程序也沒有用到innerHTML。更特別的是，Angular的指令不單單能使用字符串形式的綁定，還可使用一些指示行爲的結構體，好比：ng-repeat。

加油！