一、摘要：

angular是采用JavaScript編寫的前端mvc框架，幫助開發(fā)者編寫現(xiàn)代化的單頁面應(yīng)用。它尤其適用編寫有大量CRUD操作的，具有Ajax風(fēng)格的客戶端應(yīng)用。這里總結(jié)了一些我學(xué)習(xí)AngularJs的筆記。

二、總結(jié)：

AngularJs中的mvc模式（model-view-control）:

AngularJs應(yīng)用的基本元素介紹：

表達(dá)式（expressions）、指令（directive）、模塊（modules）、控制器（controller）、模型（model）。

1.表達(dá)式（expressions）：

AngularJs中expressions的兩種寫法：

a）寫在雙括號里面：{{expressions}}； b）和指令綁定，例如和ng-bind指令綁定：ng-bind="expressions"

 在這里總結(jié)，在view層顯示數(shù)據(jù)的4種方法：

1）用指令ng-init初始化數(shù)據(jù)，用{{ }}的方式在視圖上顯示數(shù)據(jù)：

2）用ng-bind將元素與數(shù)據(jù)綁定（span里面將會顯示Doe）：

3）用ng-model實(shí)現(xiàn)數(shù)據(jù)的雙向綁定（初始值計(jì)算的Total in dollar為5，改變input控件中的值，Total in dollar會隨之改變）：

4）用指令ng-controller來調(diào)用model里面的數(shù)據(jù)：

2.指令（directive）：

在angularjs中，所有能夠被框架理解和解釋的特殊HTML標(biāo)簽和屬性，統(tǒng)稱為指令。

例如：

ng-app：初始化一個(gè)angularjs應(yīng)用程序

ng-init：初始化應(yīng)用程序數(shù)據(jù)

ng-model：將應(yīng)用程序控件(input, select, textarea)的值和應(yīng)用程序數(shù)據(jù)綁定在一起。

ng-controller：作用域創(chuàng)建指令。當(dāng)在DOM樹中遇到此指令，angularjs都會創(chuàng)建scope類的新實(shí)例$scope。

... ...

3.模塊（modules）：

Angularjs為自己定義了全局命名空間angular，它提供了多種功能及不少便利函數(shù)，module就是其中之一。module為AngularJs管理的對象（控制器、服務(wù)等）扮演容器的角色。

用angular.module定義模塊：

第一個(gè)參數(shù)：應(yīng)用程序?qū)⒁\(yùn)行的html元素（也可以將ng-app指定在html元素或body元素等其他元素中，使用模塊一定要給ng-app屬性指明模塊的名字）

第二個(gè)參數(shù)：代表此模塊依賴哪些其他模塊。

4.控制器（controller）：

控制器（controller）主要是初始化作用域?qū)嵗?，控制器?shí)際上是JavaScript函數(shù)。在設(shè)定模型初始值時(shí)，控制器和ng-init指令做同樣的工作。

控制器可以讓你在JavaScript代碼中表達(dá)初始化邏輯，而不是污染HTML模塊。

5.模型（model）：

AngularJs中的模型實(shí)際上就是普通的JavaScript對象，和控制器一樣，不需要特別地去擴(kuò)展任何Angular的底層類，也不用去構(gòu)造模型對象。

模型層中使用任何當(dāng)前存在的純JavaScript的類和對象，模型可擁有的屬性也不僅限于原始值，任何有效的JavaScript對象或數(shù)組都是可以的。

只需要將模型簡單的指派給$scope,AngularJs就可確定它的存在。

原文來自：博客園/youyi2016