Angularjs 基礎入門_AngularJS

針對於這個其實我不太清楚應該針對於哪些人或說不知道從哪開始寫，所以這裡我就按照一種簡單的思路開始寫

1.angular.element
2.angular.Bootstrap

我們很清楚ng-app應用到節點，angular自動幫你初始化，初始化的過程分為以下幾個步驟

1.angular會在document load的時候自動初始化，首先會找到ng-app這個指令指定的節點。
2.載入與module相關的指令
3.建立與應用程式相關的injector(依賴管理器)
4.以製定的ng-app為根節點，開始對Dom進行compile

現在我們自己初始化一下，做一個等同於ng-app這個指令的東西。 angular.element這個就是包裝,包裝原始DOM元素或HTML字串作為jQuery元素。 angular.Bootstrap可以手動初始化腳本，我們用這兩個來初始化這個腳本

複製程式碼 程式碼如下:

  
  
  
  
  
  
  
  這裡是ng-app外面的~~{{1 2}}
  

這裡是ng-app裡面~~~ {{1 2}}

  
  
  
  

2.compiler

我們清楚的看到angularjs的官方文檔上邊都是駝峰式命名法，譬如ngApp、ngModule、ngBind等等這些都是相關的指令，其中html compiler就是允許我們自己定義元素屬性和標籤，Angular將這些附加行為稱為directives。
官方文件對compiler的解釋是這樣的

複製程式碼 程式碼如下:

Compiler
  Compiler is an Angular service which traverses the DOM looking for attributes. The compilation process happens in two phases.

  Compile: traverse the DOM and collect all of the directives. The result is a linking function.

  Link: combine the directives with a scope and produce a live view. Any changes in the scope model are reflected in the view, and any user interactions with the view are reflected in the scope ingle s user interactions with the view are reflected in the scope ingle s soo source of truth.

  Some directives such as ng-repeat clone D。 🎜>

compiler是angular的一個(service),負責遍歷dom節點和查找屬性，編譯分為兩個階段：

1.編譯：遍歷節點和收集所有的directives，回傳一個連結函數linking function

2.連結：將directives綁定到一個作用域（scope）中，建立一個實況視圖（live view）。在scope中的任何改變，將會在視圖中體現（更新視圖）；任何使用者對模版的活動（改變），將會體現在scope model中（雙向綁定）。這使得scope model能夠反映正確的值。
有些directives，諸如ng-repeat，會為每一個在集合（collection）中的元素複製一次特定的元素（組合）。編譯和連結兩個階段，使效能得以提升。因為克隆出來的模版(template)只需要編譯一次，然後為每一個集合中的元素進行一次連結（類似模版快取）。

3.一步一步建立自己的directive

1.了解directive

首先了解，directive是依照駝峰式命名法，如ngModule,當編譯的時候匹配是這樣的，舉例如下：

複製程式碼 程式碼如下:

  

 

directive可以使用x-或data-作為前綴，可以使用:, -, 或 _等分隔符號來轉換駝峰式命名方法，如下所示：

複製程式碼 程式碼如下:

  

  

  

  

一般我們使用ng-bind對應ngBind，這種格式
$compile可以符合directive基於元素名稱,屬性,類別名稱以及註解

複製程式碼 程式碼如下:

  
  
  

　在編譯過程中，compiler透過$interpolate服務來匹配文字與屬性中的嵌入表達式（如{{something}}）。這些表達式將會註冊為watches，並且作為digest cycle的一部分，一同更新。下面是一個簡單的interpolation：
Hello {{username}}!
  
2.編譯的步驟

HTML「編譯」的三個步驟：

1. 首先，透過瀏覽器的標準API，將HTML轉換為DOM物件。這是很重要的一步。因為模版必須是可解析（符合規範）的HTML。這裡可以跟大多數的模版系統做對比，它們一般是基於字串的，而不是基於DOM元素的。
2. 對DOM的編譯（compilation）是透過呼叫$comple()方法完成的。這個方法遍歷DOM，對directive進行配對。如果配對成功，那麼它將與對應的DOM一起，加入directive清單。只要所有與指定DOM關聯的directive被識別出來，他們將按照優先排序，並按照這個順序執行他們的compile() 函數。 directive的編譯函數（compile function），擁有一個修改DOM結構的機會，並負責產生link() function的解析。 $compile()方法傳回一個組合的linking function，是所有directive本身的compile function傳回的linking function的集合。
3. 透過上一個步驟返回的linking function，將模版與scope連接起來。這反過來會呼叫directive本身的linking function，允許它們在元素上註冊一些監聽器（listener），以及與scope一起建立一些watches。這樣得出的結果，是在scope與DOM之間的一個雙向、即時的綁定。 scope改變時，DOM會得到對應的反應。

複製程式碼 程式碼如下:

var $compile = ...; // injected into your code
  var scope = ...;
  var html = '

';
  // Step 1: parse HTML into DOM element
  var template = angular.element(html);
  // Step 2: compile the template
  var linkFn = $compile(template);
  // Step 3: link the compiled template with the scope.
  linkFn(scope);

ngAttr屬性綁定

複製程式碼 程式碼如下:

  
  

今天就寫到這裡，明天開始寫創建directive ~~~控制篇幅不要太長，這章主要概念的多~~~