提升前端開發效率必備AngularJS （基礎）

 

簡介

---

AngularJS 是一個爲動態WEB應用設計的結構框架，提供給你們一種新的開發應用方式，這種方式可讓你擴展HTML的語法，以彌補在構建動態WEB應用時靜態文本的不足，從而在web應用程序中使用HTML聲明動態內容。

AngularJS有五個主要核心特性，以下介紹：

• 雙向數據綁定 —— 實現了把model與view徹底綁定在一塊兒，model變化，view也變化，反之亦然。

• 模板 —— 在AngularJS中，模板至關於HTML文件被瀏覽器解析到DOM中，AngularJS遍歷這些DOM，也就是說AuguarJS把模板當作DOM來操做，去生成一些指令來完成對view的數據綁定。

• MVVM —— 吸取了傳統的MVC設計模式針但又並不執行傳統意義上的MVC，更接近於MVVM(Moodel-View-ViewModel)。

• 依賴注入 —— AngularJS擁有內建的依賴注入子系統，能夠幫助開發人員更容易的開發，理解和測試應用。

• 指令 —— 能夠用來建立自定義的標籤，也能夠用來裝飾元素或者操做DOM屬性。

 

建立應用

認識了AngularJS框架，咱們開始建立第一個AngularJS應用。

AngularJS是以一個JavaScript文件形式發佈的，可經過script標籤載入AngularJS腳本

 

複製如下代碼至右邊欄，作好準備工做。

<div ng-app="" ng-init="name='World'">
Hello {{ name }}！
</div>

　　

點擊運行結果查看是否爲「Hello World」，如正確則表示AngularJS腳本成功引入。

指令介紹

---

AngularJS有一套完整的、可擴展的、用來幫助web應用開發的指令集，它使得HTML能夠轉變成「特定領域語言(DSL)」，是用來擴展瀏覽器能力的技術之一，在DOM編譯期間，和HTML關聯着的指令會被檢測到，而且被執行，這使得指令能夠爲DOM指定行爲，或者改變它。

AngularJS經過稱爲指令的新屬性來擴展的HTML，帶有前綴ng-，咱們也能夠稱之爲「指令屬性」，它就是綁定在DOM元素上的函數，能夠調用方法、定義行爲、綁定controller及$scope對象、操做DOM，等等。

 

AngularJS指令指示的是「當關聯的HTML結構進入編譯階段時應該執行的操做」，它本質上只是一個當編譯器編譯到相關DOM時須要執行的函數，能夠寫在元素的名稱裏，屬性裏，css類名裏，註釋裏。

當瀏覽器啓動、開始解析HTML時，DOM元素上的指令屬性就會跟其餘屬性同樣被解析，也就是說當一個Angular.js應用啓動，Angular編譯器就會遍歷DOM樹來解析HTML，尋找這些指令屬性函數，在一個DOM元素上找到一個或多個這樣的指令屬性函數，它們就會被收集起來、排序，而後按照優先級順序被執行。

Angular.js應用的動態性和響應能力，都要歸功於指令屬性，常見的有：ng-app、ng-init、ng-model、ng-bind、ng-repeat等等。

關於「指令屬性」就先暫時介紹這些，相信你已經對它有初步的瞭解，接下來咱們就開始逐一的深刻的學習它們。

 

指令：ng-app

---

ng-app指令來標明一個AngularJS應用程序，並經過AngularJS完成自動初始化應用和標記應用根做用域，同時載入和指令內容相關的模塊，並經過擁有ng-app指令的標籤爲根節點開始編譯其中的DOM。

引用方法很簡單，以下所示：

<div ng-app="">
 
</div>  

如上引用，一個AngularJS應用程序初始化就完成了並標記了做用域，也就是div元素就是AngularJS應用程序的"全部者"，在它裏面的指令也就會被Angular編譯器所編譯、解析了。

 

指令：ng-init

---

ng-init指令初始化應用程序數據，也就是爲AngularJS應用程序定義初始值，一般狀況下，咱們會使用一個控制器或模塊來代替它，後面咱們會介紹有關控制器和模塊的知識。

以下所示，咱們爲應用程序變量name賦定初始值。

<div ng-app="" ng-init="name='Hello World'">
 
</div>

咱們不只能夠賦值字符串，也能夠賦值爲數字、數組、對象，並且能夠爲多個變量賦初始值，以下所示：

　

<div ng-app="" ng-init="quantity=1;price=5">
 
</div>
//或者
<div ng-app="" ng-init="names=['Tom','Jerry','Gaffey']">
 
</div>

　　

AngularJS表達式

---

AngularJS框架的核心功能之一 —— 數據綁定，由兩個花括號{{}}組成，能夠把數據綁定到HTML，相似Javascript代碼片斷，能夠包含文字、運算符和變量，一般在綁定數據中用到，表達式能夠綁定數字、字符串、對象、數組，寫在雙大括號內：{{ expression }}。

1. 如前面的示例，咱們就可使用表達式這樣調用初始化的變量值，以下。

<div ng-app="" ng-init="name='Hello World'">
  {{ name }}
</div>

　　

1. 固然咱們也可使用表達式輸出數字、數組等等，以下所示：

　　2.1. 輸出數字，以下示例：

<div ng-app="" ng-init="quantity=12;price=5">
 
總價： {{ quantity * price }}
 
</div>

　　2.2. 輸出對象，以下示例：　

<div ng-app="" ng-init="names=['Tom','Jerry','Gaffey']">
 
名字爲： {{ names[0] }}
 
</div>

　　

指令：ng-model

---

在AngularJS中，只須要使用ng-model指令就能夠把應用程序數據綁定到HTML元素，實現model和view的雙向綁定。

以下示例，使用ng-model指令對數據進行綁定。

 注：輸出什麼顯示什麼

<div ng-app="">
 
請輸入任意值：<input type="text" ng-model="name" />
 
你輸入的爲： {{ name }}
 
</div>

ng-model把相關處理事件綁定到指定標籤上，這樣咱們就能夠不用在手工處理相關事件(好比change等)的條件下完成對數據的展示需求。

以上介紹了ng-model的單向綁定(view->model)後面控制器咱們會用到它的雙向綁定功能，好，參照以上代碼，趕快試試數據綁定的效果吧！

指令：ng-bind

---

指令ng-bind和AngularJS表達式{{}}有殊途同歸之妙，但不一樣之處就在於ng-bind是在angular解析渲染完畢後纔將數據顯示出來的。

以下使用ng-bind指令綁定把應用程序數據。

<div ng-app="">
    請輸入一個名字：<input type="text" ng-model="name" />
    Hello <span ng-bind="name"></span>
</div>

PS：使用花括號語法時，由於瀏覽器須要首先加載頁面，渲染它，而後AngularJS才能把它解析成你指望看到的內容，因此對於首個頁面中的數據綁定操做，建議採用ng-bind，以免其未被渲染的模板被用戶看到。

指令：ng-click

---

AngularJS也有本身的HTML事件指令,好比說經過ng-click定義一個AngularJS單擊事件。

對按鈕、連接等，咱們均可以用ng-click指令屬性來實現綁定，以下簡單示例：

<div ng-app="" ng-init="click=false">
    <button ng-click="click= !click">隱藏/顯示</button>
    <div ng-hide="click">
        請輸入一個名字：<input type="text" ng-model="name" />
        Hello <span ng-bind="name"></span> 
    </div>
</div>

 

PS：ng-hide="true"，設置HTML元素不可見。

ng-click指令將DOM元素的鼠標點擊事件(即mousedown)綁定到一個方法上，當瀏覽器在該DOM元素上鼠標觸發點擊事件時，Angular就會調用相應的方法，是否是很簡單方便呢！