国产在线色,欧美午夜影院,级毛片

概覽

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指令的例子。

復制代碼代碼如下:

	
	<span ng-bind="exp"></span>

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

	<ng-bind></ng-bind>

	<!-- directive: ng-bind exp -->

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

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

index.html:

復制代碼代碼如下:

	
	<!doctype html>

	<html ng-app="drag">

	  <head>

	    <script src="http://code.angularjs.org/angular-1.1.0.min.js"></script>

	    <script src="script.js"></script>

	  </head>

	  <body>

	    <span draggable>Drag ME</span>

	  </body>

	</html>

script.js:

復制代碼代碼如下:

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);
      }
    }
});

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

理解視圖

網上有很多的模板系統。他們大多數都是“將靜態的字符模板和數據綁定，生成新字符，然后通過innerHTML插入到頁面元素中”。

這意味著數據上的任何改變，都會導致數據要重新和模板結合生成新字符，再插入到DOM里。這其中會出現的問題有：需要讀取用戶輸入并和模型的數據結合，需要覆寫用戶的輸入，需要手動管理整個更新過程，缺少豐富的表現形式。

AngularJS則不同，AngularJS編譯器使用的是帶指令的DOM，而不是字符串模板。它返回的是一個鏈接函數，這個函數和作用域模型結合就會生成一個動態視圖。這個視圖和模型的綁定過程是“透明的”。開發者不需要做任何關于更新視圖的工作。并且應用沒有用到innerHTML，所以我們也不用覆寫用戶的輸入。更特別的是，Angular的指令不僅僅能使用字符串形式的綁定，還可以使用一些指示行為的結構體。

AngularJS的編譯會生成一個“穩定的DOM”。這意味綁定了數據模型的DOM元素的實例不會在綁定的生命周期中發生改變。這也意味著代碼中可以獲取到DOM元素的實例引用并注冊事件，不用擔心這用引用會在模板和數據的結合時丟失。