AngularJS HTML編譯器介紹_AngularJS

概覽

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

HTML在寫靜態頁面時，有許多聲明式的結構來控制格式。例如你要把某個內容居中，你不必告訴瀏覽器「去找到視窗的中點位置，然後跟內容的中間結合」。你只需要加入一個 align="center" 的屬性給需要內容居中的元素就行了。這就是聲明式語言的強大之處。

但是聲明式語言也有力所不能及的地方，原因之一在於你不能用它來讓瀏覽器辨識新的語法。比如說，你不要內容居中，而是居左到1/3,這時它就做不到了。所以我們需要一個方法讓瀏覽器能學會新的HTML語法。

AngularJS生來自帶一些對創建APP非常有用的指令。我們也希望你能自己創造一些對你自己的應用有用的指令。這些擴充的指令就是你創造APP的 「特定領域語言（Domain Specific Language）」。

編譯的過程都會在瀏覽器端發生；伺服器端不會參與其中的任何步驟，也不會做預編譯。

編譯器(complier)

編譯器是AngularJS提供的服務，它透過遍歷DOM來尋找和它相關的屬性。整個編譯的過程分為兩個階段。

1.編譯： 遍歷DOM並且收集所有的相關指令，產生一個連結函數。

2.連結： 給指令綁定一個作用域，產生一個動態的視圖。作用域模型的任何變更都會反映在視圖上，並且視圖上的任何使用者操作也會反映到作用域模型。這使得作用域模型成為你的業務邏輯裡唯一要關心的東西。

有一些指令，例如ng-repeat會為資料集合裡的每一項DOM元素都克隆一次。將整個編譯過程分為編譯和連結兩個階段的作法改善了整體的效能，因為克隆出來的模板總共只需要被編譯一次，然後連結到各自的模型實例就行了。

指令

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

複製程式碼 程式碼如下:

指令本質上只是一個當編譯器編譯到相關DOM時需要執行的函數。你可以在指令API文件中找到更詳盡的關於指令的資料。

以下是一條能讓元素變得可拖曳的指令。注意元素裡的那個draggable屬性。

index.html:

複製程式碼 程式碼如下:

 
   
   
 
 
    Drag ME
 

script.js:

複製程式碼 程式碼如下:

angular.module('拖曳', []).
指令（'可拖曳'，函數（$文檔）{
    var startX=0, startY=0, x = 0, y = 0;
    回傳函數（範圍、元素、屬性）{
      element.css({
       位置：'相對'，
       邊框: '1px 純紅色',
       背景顏色：'淺灰色'，
       遊標：'指針'
      });
      element.bind('mousedown', function(event) {
        startX = event.screenX - x;
        startY = event.screenY - y;
        $document.bind('mousemove', mousemove);
        $document.bind('mouseup', mouseup);
      });

      函數 mousemove(事件) {
        y = event.screenY - startY;
        x = event.screenX - startX;
        element.css({
          上方：y 'px',
          左： x 'px'
        });
      }

      函數 mouseup() {
        $document.unbind('mousemove', mousemove);
        $document.unbind('mouseup', mouseup);
      }
    }
 });

透過加入draggable屬性可以讓任何HTML元素都實現這個新的行為。我們這種改進的完美之處就等於我們給了瀏覽器新能力。我們用了一種只要開發者熟悉HTML規則，就會展現了非常自然的方式擴展了瀏覽器理解新行為新語法的能力。

理解視野

網路上有很多的模板系統。它們大部分都是「將靜態的字符模板和資料綁定，產生新的字符，然後透過innerHTML插入到頁面元素中」。

這意味著資料上的任何改變，都會導致資料要重新和模板結合產生新字符，然後插入到DOM裡。這其中會出現的問題有：需要讀取使用者輸入並和模型的資料結合，需要覆寫使用者的輸入，需要手動管理整個更新過程，缺乏豐富的表現形式。

AngularJS則不同，AngularJS編譯器使用的是帶有指令的DOM，而不是字串模板。它傳回的是一個連結函數，這個函數和作用域模型就會產生一個動態視圖。這個視圖和模型的綁定過程是「透明的」。開發者不需要做任何關於更新視圖的工作。且應用程式沒有使用innerHTML，所以我們也不必用覆寫使用者的輸入。更特別的是，Angular的指令擴充能力使用字串形式的綁定，也可以使用一些指示行為的結構體。

AngularJS的編譯會產生一個「穩定的DOM」。這意味著綁定了資料模型的DOM元素的實例不會在綁定的生命週期中改變。這也意味著程式碼中可以取得DOM元素的實例參考並註冊事件，不用擔心這用參考會在模板和資料的結合時遺失。