快捷導(dǎo)航

Angular的Bootstrap(引導(dǎo))和Compiler(編譯)機(jī)制

更新時(shí)間：2016年06月20日 10:37:37 作者：破狼

這篇文章主要介紹了Angular的Bootstrap(引導(dǎo))和Compiler(編譯)機(jī)制的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

在上節(jié)簡單介紹了Angular js框架，在這節(jié)將繼續(xù)Angular的Bootstrap(引導(dǎo))和Compiler(編譯)機(jī)制。

一：Bootstrap：Angular的初始化

1：Angular推薦的自動(dòng)化初始如下：

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

利用ngapp標(biāo)示你需要自動(dòng)引導(dǎo)應(yīng)用程序的根節(jié)點(diǎn)，一般典型為html tag。在DOMContentLoaded事件觸發(fā)Angular會(huì)自動(dòng)尋找ngapp作為應(yīng)用的根節(jié)點(diǎn)，如果找到則會(huì)進(jìn)行如下操作：

1.加載module(模塊)相關(guān)directive(指令)。

2.創(chuàng)建應(yīng)用程序injector(Angular的注入機(jī)制).

3.編譯處理ng-app作為根節(jié)點(diǎn)的指令。這里允許你自定義選擇DOM節(jié)點(diǎn)作為應(yīng)用根節(jié)點(diǎn)。

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

2：手動(dòng)初始化：

如果想對(duì)對(duì)初始化有更多的控制權(quán)，可以采用自定義手動(dòng)引導(dǎo)方法初始化代替angular的自動(dòng)初始化。比如你需要在angular編譯模板之前做一些事情，比如改變模板某些內(nèi)容。手動(dòng)引導(dǎo)方式將會(huì)如下：

<!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>

1.在頁面所有代碼加載完成后，找到html模板根節(jié)點(diǎn)(典型為document元素).

2.調(diào)用api/angular.bootstrap（angular.bootstrap(element[, modules])）編譯模板使其可執(zhí)行.

二：Compiler：Angular的編譯

Angular的編譯機(jī)制允許開發(fā)人員給瀏覽器添加新的Html語法，允許我們添加一些html節(jié)點(diǎn)，attribute，甚至創(chuàng)建一些自定義的節(jié)點(diǎn)，attribute。Angular把這些行為的擴(kuò)展成為指令directives.Angular帶來了有用的directive，并允許我們創(chuàng)建特定領(lǐng)域的directive。

1: Compiler處理分為兩個(gè)步驟：

1.轉(zhuǎn)換DOM，收集directive，返回Link(連接)function。

2.合并指令和Scope產(chǎn)生一個(gè)活生生的View。scop mode中的任何改變都會(huì)通過反應(yīng)到view中，并來自view的用戶交互也會(huì)同步到scope model，并scope是一個(gè)單一數(shù)據(jù)源。

2:指令Directive

Directive是一個(gè)會(huì)被特殊的html設(shè)計(jì)編輯處理的行為。其可以被放置在節(jié)點(diǎn)的names, attributes, class 上，甚至是html注釋中。下面是Angular自帶的ng-bind的等價(jià)寫法：

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

directive僅僅是一個(gè)在dom中會(huì)被Angular執(zhí)行的一個(gè)function。下面是一個(gè)拖拽的實(shí)例，其可以被應(yīng)用于span，div的attribute上：

angular.module('drag', []).directive('draggable', function ($document) { 
var startX = , 
startY = , 
x = , 
y = ; 
return function (scope, element, attr) { 
element.css({ 
position: 'relative', 
border: 'px 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); 
} 
} 
});

Demo
you can drag and move me to anywhere !

3：view理解

有許多的模板引擎都被設(shè)計(jì)為模板(template)和數(shù)據(jù)(model)的合并返回一個(gè)字符串，再利用innerHTML追加在DOM節(jié)點(diǎn)，這以為則數(shù)據(jù)的任何改變都必須重新合并生成新的內(nèi)容追加在DOM上。形如下圖屬于單向綁定技術(shù)：

而Angular則不同利用directive指令而非字符串，返回值是一個(gè)合并數(shù)據(jù)model的link function。view和model的綁定是自動(dòng)，透明的，不需要開發(fā)人員添加額外的action去更新view，Angular在這里不僅是數(shù)據(jù)model的綁定，還有行為概念。作為雙向的綁定，形如下圖：