AngularJs html compiler詳解及示例代碼
原文再續(xù)，書接上回。。。依舊參考http://code.angularjs.org/1.0.2/docs/guide/compiler
一、總括
Angular的HTML compiler允許開發(fā)者自定義新的HTML語法。compiler允許我們對任意HTML元素或屬性，甚至是新的HTML標簽、屬性（如<beautiful girl=”cf”></beautiful >）附加行為。Angular將這些附加行為稱為directives。
HTML有很多專門格式化靜態(tài)文檔的預定義HTML樣式結構（可以告訴瀏覽器如何顯示標記的內容）。假設某東東需要被居中，而我們不需要教瀏覽器如何去做（此處省略N字）。我們只需要簡單地對需要居中的標簽加入align=”center”即可。這就是聲明式語言（declarative language）的牛X之處。
但是聲明式語言也有它的局限性，即你不能告訴瀏覽器如何處理在預定義范圍外的語法。例如，我們不能很簡單地告訴瀏覽器如何讓文本在瀏覽器的1/3處對齊。所以，我們正需要一個讓瀏覽器與時俱進，學學新語法的途徑。
Angular預先綁定了一些對構建應用有幫助的directives。我們也可以自己創(chuàng)建屬于自己應用的獨特的directives。這些directive擴展將成為我們自己的應用的“特定領域語言”（Domain Specific Language）。
這些編譯將僅僅發(fā)生在瀏覽器端，無須服務端或者預編譯步驟。
二、Compiler
Compiler作為Angular的一個服務（Service），負責遍歷DOM結構，尋找屬性。編譯過程分成兩個階段：
1. 編譯（Compile）：遍歷DOM節(jié)點樹，收集所有directives。返回結果是一個鏈接函數(shù)（linking function）。
2. 鏈接（Link）：將directives綁定到一個作用域（scope）中，創(chuàng)建一個實況視圖（live view）。在scope中的任何改變，將會在視圖中得到體現(xiàn)（更新視圖）；任何用戶對模版的活動（改變），將會體現(xiàn)在scope model中（雙向綁定）。這使得scope model能夠反映正確的值。
一些directives，諸如ng-repeat，會為每一個在集合（collection）中的元素復制一次特定的元素（組合）。編譯和鏈接兩個階段，使性能得以提升。因為克隆出來的模版(template)只需要編譯一次，然后為每一個集合中的元素進行一次鏈接（類似模版緩存）。
三、Directive
Directive是一個行為，在編譯過程中遇到特定的HTML結構時，它會被觸發(fā)。Directives可以放置在元素的name、attribute、class甚至注釋中。以下是幾種引用ng-bind（一個內置directive）的方法：
<span ng-bind="exp"></span> <span class="ng-bind: exp;"></span> <ng-bind></ng-bind> <!-- directive: ng-bind exp -->
Directive只是一個當編譯器在DOM中遇到時會執(zhí)行的一個函數(shù)（function）。directive API文檔中有詳細講解如何創(chuàng)建一個directive。
下面是一個樣例，可以讓一個元素跟你的鼠標玩躲貓貓……
<!DOCTYPE html>
<html lang="zh-cn" ng-app="HideAnkSeek">
<head>
<meta charset="UTF-8">
<title>躲貓貓</title>
<style type="text/css">
.ng-cloak {
display: none;
}
</style>
</head>
<body>
<span class="ng-cloak" wildcat>一碰我就跑~~來點我啊~~</span>
<script src="../angular-1.0.1.js" type="text/javascript"></script>
<script type="text/javascript">
angular.module("HideAnkSeek", []).directive("wildcat", function ($document) {
var maxLeft = 400,maxTop = 300;
var msg = ["我閃~~", "抓我呀~~~", "雅蠛蝶~~", "噢耶~~", "你真遜~！","就差那么一點點了！","繼續(xù)吧~~總有一天我會累的"];
return function (scope, element, attr) {
element.css({
"position":"absolute",
"border":"1px solid green"
});
element.bind("mouseenter", function (event) {
element.css({
"left":parseInt(Math.random() * 10000 % maxLeft) + "px",
"top":parseInt(Math.random() * 10000 % maxTop) + "px"
}).text(msg[parseInt(Math.random() * 10000 % msg.length)]);
}).bind("click",function (event) {
element.text("噢My Lady Gaga。。。被你逮到了。。。");
element.unbind("mouseenter");
});
};
});
</script>
</body>
</html>
在任意元素中添加“wildcat”這個屬性，將會使該元素擁有新的行為。就這樣，我們教會了瀏覽器如何處理會躲貓貓的元素（放心，你不是在某個房間，你不會掛的-_-!）。我們通過這一途徑擴展了瀏覽器的“詞匯量”。對于任意一個熟悉HTML規(guī)則的人，這算是一個比較自然的方式。
現(xiàn)在已經夜深了，明天繼續(xù)。。。廣告之后見
===================華麗的分割線=======================
四、理解視圖（View）
外面有許多模版系統(tǒng)，它們通常都通過模版字符串與數(shù)據(jù)進行連接，生成最終的HTML字符串，并將結果通過innerHTML屬性寫入某元素里。
這意味著任何數(shù)據(jù)發(fā)生改變時，都需要重新將數(shù)據(jù)、模版合并成字符串，然后當作innerHTML寫回對應元素中。這里存在一些問題：(這里直譯實在沒法懂..唯有YY)假設有這么一個場景，模版里包含輸入框。用戶對在輸入框進行輸入，模版同步更新。普通模版通過innerHTML、字符串與數(shù)據(jù)連接的方式更新視圖，這樣會打斷用戶的輸入，體驗不好。
Angular是與眾不同的。Angular編譯器（compiler）通過directives處理DOM，而不是通過處理字符串模版。處理結果是一個與scope model組合并生成實時模版的鏈接函數(shù)（linking function）。視圖與scope model的綁定對我們來說是透明的。開發(fā)者無須為更新視圖、model做任何動作。而且，因為沒有使用innerHTML更新視圖模版，所以用戶輸入不會被打斷。此外，angular directives不僅可以綁定文本值，而且還可以是擁有行為的結構（behavioral constructs）。
Angular的這個處理方式，產生了一個穩(wěn)定的DOM。這意味著在DOM元素的生命周期里，一直與某model的實例綁定著，這個關系不會發(fā)生改變。這也意味著代碼可以保持對某DOM對象的引用，對其注冊事件函數(shù)，并且這個引用不會被模版數(shù)據(jù)合并所銷毀。
相關文章
本文主要介紹AngularJs Scope的知識，這里整理了詳細資料及示例代碼，有興趣的小伙伴可以參考下2016-09-09
本篇文章主要介紹了AngularJs實現(xiàn)基于角色的前端訪問控制，可以適用于不同的角色，有需要的可以了解一下。2016-11-11
詳解Angular系列之變化檢測(Change Detection)
這篇文章主要介紹了詳解Angular系列之變化檢測(Change Detection)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
AngularJS實現(xiàn)的2048小游戲功能【附源碼下載】
這篇文章主要介紹了AngularJS實現(xiàn)的2048小游戲,可實現(xiàn)通過鍵盤W、S、A、D鍵控制上下左右移動進行游戲的功能,涉及AngularJS頁面元素動態(tài)操作及數(shù)值運算等相關操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2018-01-01
下面小編就為大家分享一篇AngularJs 最新驗證手機號碼的實例,成功測試通過，具有很好的參考價值。希望對大家有所幫助。一起跟隨小編過來看看吧2017-11-11
本篇文章主要介紹了Angular整合zTree的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了Angular如何由模板生成DOM樹的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-12-12
Ionic + Angular.js實現(xiàn)圖片輪播的方法示例
圖片輪播在我們日常開發(fā)中是再熟悉不過的了，下面這篇文章主要給大家介紹了Ionic + Angular實現(xiàn)圖片輪播的方法，文中給出了詳細的示例代碼供大家參考學習，需要的朋友們下面來一起看看吧。2017-05-05
Angularjs使用ng-repeat中$even和$odd屬性的注意事項
無可否認angularjs的崛起成為前端很大的福利，最近接到項目，框架便選中了angularjs。angularjs最吸引人的地方就是數(shù)據(jù)的雙向綁定和指令了，這篇文章主要介紹了Angularjs中使用ng-repeat的$even和$odd屬性的注意事項,需要的朋友可以參考下2016-12-12
今天小編就為大家分享一篇淺談angular2子組件的事件傳遞(任意組件事件傳遞)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09