Angular-Bootstrap和Compiler

最後更新：2013-12-28 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

在上節簡單介紹了Angular js架構，在這節將繼續Angular的Bootstrap(引導)和Compiler(編譯)機制。

一：Bootstrap：Angular的初始化

1：Angular推薦的自動化初始如下：

<!doctype html>

<body>

...

</body>

</html

利用ngapp標示你需要自動引導應用程式的根節點，一般典型為html tag。在DOMContentLoaded事件觸發Angular會自動尋找ngapp作為應用的根節點，如果找到則會進行如下操作：

<!doctype html>

<body>

I can add: {{ 1+2 }}.

</body>

</html>

2：手動初始化：

如果想對對初始化有更多的控制權，可以採用自訂手動引導方法初始化代替angular的自動初始化。比如你需要在angular編譯模板之前做一些事情，比如改變模板某些內容。手動引導方式將會如下：

<!doctype html>

<body>

Hello {{'World'}}!

angular.element(document).ready(function() {

angular.bootstrap(document);

});

</script>

</body>

</html>

二：Compiler：Angular的編譯

Angular的編譯機制允許開發人員給瀏覽器添加新的Html文法，允許我們添加一些html節點，attribute，甚至建立一些自訂的節點，attribute。Angular把這些行為的擴充成為指令directives.Angular帶來了有用的directive，並允許我們建立特定領域的directive。

1: Compiler處理分為兩個步驟：

2:指令Directive

Directive是一個會被特殊的html設計編輯處理的行為。其可以被放置在節點的names, attributes, class 上，甚至是html注釋中。下面是Angular內建的ng-bind的等價寫法：

directive僅僅是一個在dom中會被Angular執行的一個function。下面是一個拖拽的執行個體，其可以被應用於span，div的attribute上：

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

3：view理解

有許多的模板引擎都被設計為模板(template)和資料(model)的合并返回一個字串，再利用innerHTML追加在DOM節點，這以為則資料的任何改變都必須重新合并產生新的內容追加在DOM上。形如屬於單向綁定技術：

650) this.width=650;" style="border-bottom: 0px; border-left: 0px; border-top: 0px; border-right: 0px" title="2012-8-13 23-33-08" border="0" alt="2012-8-13 23-33-08" height="304" src="http://www.bkjia.com/uploads/allimg/131228/125G21W0-0.png" />

而Angular則不同利用directive指令而非字串，傳回值是一個合并資料model的link function。view和model的綁定是自動，透明的，不需要開發人員添加額外的action去更新view，Angular在這裡不僅是資料model的綁定，還有行為概念。作為雙向的綁定，形如：

650) this.width=650;" style="border-bottom: 0px; border-left: 0px; border-top: 0px; border-right: 0px" title="2012-8-13 23-33-08" border="0" alt="2012-8-13 23-33-08" height="315" src="http://www.bkjia.com/uploads/allimg/131228/125G26293-1.png" />

資料：

Angular隨筆：

其他章節還在翻譯中...希望大家多多指教，對於翻譯我不會去按照原文完全翻譯，會按照自己的理解。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More