Angularjs 基礎入門

更新時間：2014年12月26日 11:06:41 投稿：hebedich

這篇文章主要介紹了Angularjs 基礎入門的一些知識,需要的朋友可以參考下

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

1.angular.element
2.angular.Bootstrap

我們非常清楚ng-app應用到節(jié)點，angular自動幫你初始化，初始化的過程分為如下幾個步驟

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

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

復制代碼代碼如下:

<!DOCTYPE HTML>

  <html lang="zh-cn">

  <head>

  <meta charset="UTF-8">

  <title>Bootstrap-manual</title>

  <style type="text/css">

  .ng-cloak {

  display: none;

  }

  </style>

  </head>

  <body>

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

  <div id="widuu" >這里是ng-app里面~~~ {{1+2}}</div>

  <script src="angular.min.js" type="text/javascript"></script>

  <script type="text/javascript">

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

  angular.bootstrap(angular.element(document.getElementById("widuu")));

  });

  </script>

  </body>

  </html>

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 model. This makes the scope model the single source of truth.

Some directives such as ng-repeat clone DOM elements once for each item in a collection. Having a compile and link phase improves performance since the cloned template only needs to be compiled once, and then linked once for each clone instance.

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

1.編譯：遍歷節(jié)點和收集所有的directives，返回一個鏈接函數(shù)linking function
2.鏈接：將directives綁定到一個作用域（scope）中，創(chuàng)建一個實況視圖（live view）。在scope中的任何改變，將會在視圖中得到體現(xiàn)（更新視圖）；任何用戶對模版的活動（改變），將會體現(xiàn)在scope model中（雙向綁定）。這使得scope model能夠反映正確的值。
一些directives，諸如ng-repeat，會為每一個在集合（collection）中的元素復制一次特定的元素（組合）。編譯和鏈接兩個階段，使性能得以提升。因為克隆出來的模版(template)只需要編譯一次，然后為每一個集合中的元素進行一次鏈接（類似模版緩存）。

3.一步一步創(chuàng)建自己的directive

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

復制代碼代碼如下:

<input ng-model="foo">

  <input data-ng:model="foo">

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

復制代碼代碼如下:

<span ng-bind="name"></span> <br/>

  <span ng:bind="name"></span> <br/>

  <span ng_bind="name"></span> <br/>

  <span data-ng-bind="name"></span> <br/>

  <span x-ng-bind="name"></span> <br/>

一般我們使用ng-bind對應ngBind，這種格式
$compile可以匹配directive基于元素名稱,屬性,類名以及注釋

復制代碼代碼如下:

<my-dir></my-dir>

  <span my-dir="exp"></span>

  <!-- directive: my-dir exp -->

  <span class="my-dir: exp;"></span>

　在編譯過程中，compiler通過$interpolate服務匹配文本與屬性中的嵌入表達式（如{{something}}）。這些表達式將會注冊為watches，并且作為digest cycle的一部分，一同更新。下面是一個簡單的interpolation：
<img src="img/{{username}}.jpg"/>Hello {{username}}!

2.編譯的步驟

HTML“編譯”的三個步驟：

1. 首先，通過瀏覽器的標準API，將HTML轉(zhuǎn)換為DOM對象。這是很重要的一步。因為模版必須是可解析（符合規(guī)范）的HTML。這里可以跟大多數(shù)的模版系統(tǒng)做對比，它們一般是基于字符串的，而不是基于DOM元素的。
2. 對DOM的編譯（compilation）是通過調(diào)用$comple()方法完成的。這個方法遍歷DOM，對directive進行匹配。如果匹配成功，那么它將與對應的DOM一起，加入到directive列表中。只要所有與指定DOM關聯(lián)的directive被識別出來，他們將按照優(yōu)先級排序，并按照這個順序執(zhí)行他們的compile() 函數(shù)。directive的編譯函數(shù)（compile function），擁有一個修改DOM結構的機會，并負責產(chǎn)生link() function的解析。$compile()方法返回一個組合的linking function，是所有directive自身的compile function返回的linking function的集合。
3. 通過上一步返回的linking function，將模版與scope連接起來。這反過來會調(diào)用directive自身的linking function，允許它們在元素上注冊一些監(jiān)聽器（listener），以及與scope一起建立一些watches。這樣得出的結果，是在scope與DOM之間的一個雙向、即時的綁定。scope發(fā)生改變時，DOM會得到對應的響應。

復制代碼代碼如下:

var $compile = ...; // injected into your code

  var scope = ...;

  var html = '<div ng-bind='exp'></div>';

  // 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屬性綁定

復制代碼代碼如下:

<svg>

  <circle ng-attr-cx="{{cx}}"></circle>

  </svg>

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

您可能感興趣的文章:

AngularJS實現(xiàn)圖片上傳和預覽功能的方法分析
這篇文章主要介紹了AngularJS實現(xiàn)圖片上傳和預覽功能的方法,結合HTML5實例形式對比分析了AngularJS圖片上傳的相關操作技巧與注意事項,需要的朋友可以參考下
2017-11-11
AngularJS基礎 ng-keypress 指令簡單示例
本文主要介紹AngularJS ng-keypress 指令,這里幫大家整理了基礎資料,并附是示例代碼,有需要的小伙伴可以參考下
2016-08-08
AngularJS中的過濾器filter用法完全解析
這篇文章主要介紹了AngularJS中的過濾器filter用法,包括Angular中一些常用的自帶的過濾器的列舉以及自定義filter的方法,需要的朋友可以參考下
2016-04-04
Angularjs自定義指令Directive詳解
Directive是一個非常棒的功能。可以實現(xiàn)我們自義的的功能方法。下面通過實例代碼給大家介紹Angularjs自定義指令Directive相關知識，感興趣的朋友一起學習吧
2017-05-05
詳解Angular2響應式表單
這篇文章主要介紹了詳解Angular2響應式表單，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-06-06
angular6.0開發(fā)教程之如何安裝angular6.0框架
這篇文章主要介紹了angular6.0開發(fā)教程之如何安裝angular6.0框架，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-06-06
AngularJS控制器詳解及示例代碼
本文主要介紹AngularJS控制器,這里整理了控制器的相關資料和提供示例代碼及實例效果圖，有需要的小伙伴可以參考下
2016-08-08
自學實現(xiàn)angularjs依賴注入
這篇文章主要為大家詳細介紹了angularjs依賴注入的自己成果，如何實現(xiàn)angularjs依賴注入，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-12-12
Angular 開發(fā)學習之Angular CLI的安裝使用
這篇文章主要介紹了Angular 開發(fā)學習之Angular CLI的安裝使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-12-12
AngularJS實用開發(fā)技巧(推薦)
Angular JS 是一組用來開發(fā)Web頁面的框架、模板以及數(shù)據(jù)綁定和豐富UI組件。接下來通過本文給大家介紹AngularJS實用開發(fā)技巧的相關資料,需要的朋友可以參考下
2016-07-07