簡介#

AngularJS 是一個(gè)為動態(tài)WEB應(yīng)用設(shè)計(jì)的結(jié)構(gòu)框架，提供給大家一種新的開發(fā)應(yīng)用方式，這種方式可以讓你擴(kuò)展HTML的語法，以彌補(bǔ)在構(gòu)建動態(tài)WEB應(yīng)用時(shí)靜態(tài)文本的不足，從而在web應(yīng)用程序中使用HTML聲明動態(tài)內(nèi)容。

AngularJS有五個(gè)主要核心特性，如下介紹：

• 雙向數(shù)據(jù)綁定 —— 實(shí)現(xiàn)了把model與view完全綁定在一起，model變化，view也變化，反之亦然。

• 模板 —— 在AngularJS中，模板相當(dāng)于HTML文件被瀏覽器解析到DOM中，AngularJS遍歷這些DOM，也就是說AuguarJS把模板當(dāng)做DOM來操作，去生成一些指令來完成對view的數(shù)據(jù)綁定。

• MVVM —— 吸收了傳統(tǒng)的MVC設(shè)計(jì)模式針但又并不執(zhí)行傳統(tǒng)意義上的MVC，更接近于MVVM(Moodel-View-ViewModel)。

• 依賴注入 —— AngularJS擁有內(nèi)建的依賴注入子系統(tǒng)，可以幫助開發(fā)人員更容易的開發(fā)，理解和測試應(yīng)用。

• 指令 —— 可以用來創(chuàng)建自定義的標(biāo)簽，也可以用來裝飾元素或者操作DOM屬性。

指令介紹

AngularJS有一套完整的、可擴(kuò)展的、用來幫助web應(yīng)用開發(fā)的指令集，它使得HTML可以轉(zhuǎn)變成“特定領(lǐng)域語言(DSL)”，是用來擴(kuò)展瀏覽器能力的技術(shù)之一，在DOM編譯期間，和HTML關(guān)聯(lián)著的指令會被檢測到，并且被執(zhí)行，這使得指令可以為DOM指定行為，或者改變它。

AngularJS通過稱為指令的新屬性來擴(kuò)展的HTML，帶有前綴ng-，我們也可以稱之為“指令屬性”，它就是綁定在DOM元素上的函數(shù)，可以調(diào)用方法、定義行為、綁定controller及$scope對象、操作DOM，等等。

AngularJS指令指示的是“當(dāng)關(guān)聯(lián)的HTML結(jié)構(gòu)進(jìn)入編譯階段時(shí)應(yīng)該執(zhí)行的操作”，它本質(zhì)上只是一個(gè)當(dāng)編譯器編譯到相關(guān)DOM時(shí)需要執(zhí)行的函數(shù)，可以寫在元素的名稱里，屬性里，css類名里，注釋里。

當(dāng)瀏覽器啟動、開始解析HTML時(shí)，DOM元素上的指令屬性就會跟其他屬性一樣被解析，也就是說當(dāng)一個(gè)Angular.js應(yīng)用啟動，Angular編譯器就會遍歷DOM樹來解析HTML，尋找這些指令屬性函數(shù)，在一個(gè)DOM元素上找到一個(gè)或多個(gè)這樣的指令屬性函數(shù)，它們就會被收集起來、排序，然后按照優(yōu)先級順序被執(zhí)行。

Angular.js應(yīng)用的動態(tài)性和響應(yīng)能力，都要?dú)w功于指令屬性，常見的有：ng-app、ng-init、ng-model、ng-bind、ng-repeat等等。

關(guān)于“指令屬性”就先暫時(shí)介紹這些，相信你已經(jīng)對它有初步的了解，接下來我們就開始逐一的深入的學(xué)習(xí)它們。

指令：ng-app

ng-app指令來標(biāo)明一個(gè)AngularJS應(yīng)用程序，并通過AngularJS完成自動初始化應(yīng)用和標(biāo)記應(yīng)用根作用域，同時(shí)載入和指令內(nèi)容相關(guān)的模塊，并通過擁有ng-app指令的標(biāo)簽為根節(jié)點(diǎn)開始編譯其中的DOM。

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

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

如上引用，一個(gè)AngularJS應(yīng)用程序初始化就完成了并標(biāo)記了作用域，也就是div元素就是AngularJS應(yīng)用程序的"所有者"，在它里面的指令也就會被Angular編譯器所編譯、解析了。

指令：ng-init

ng-init指令初始化應(yīng)用程序數(shù)據(jù)，也就是為AngularJS應(yīng)用程序定義初始值，通常情況下，我們會使用一個(gè)控制器或模塊來代替它，后面我們會介紹有關(guān)控制器和模塊的知識。

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

AngularJS表達(dá)式

AngularJS框架的核心功能之一 —— 數(shù)據(jù)綁定，由兩個(gè)花括號{{}}組成，可以把數(shù)據(jù)綁定到HTML，類似Javascript代碼片段，可以包含文字、運(yùn)算符和變量，通常在綁定數(shù)據(jù)中用到，表達(dá)式可以綁定數(shù)字、字符串、對象、數(shù)組，寫在雙大括號內(nèi)：{{ expression }}。

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

指令：ng-model

在AngularJS中，只需要使用ng-model指令就可以把應(yīng)用程序數(shù)據(jù)綁定到HTML元素，實(shí)現(xiàn)model和view的雙向綁定。

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

指令：ng-bind

指令ng-bind和AngularJS表達(dá)式{{}}有異曲同工之妙，但不同之處就在于ng-bind是在angular解析渲染完畢后才將數(shù)據(jù)顯示出來的。

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

指令：ng-click

AngularJS也有自己的HTML事件指令,比如說通過ng-click定義一個(gè)AngularJS單擊事件。

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

控制器

AngularJS控制器控制AngularJS應(yīng)用程序的數(shù)據(jù)，是常規(guī)的JavaScript對象。

ng-controller指令就是用來定義應(yīng)用程序控制器的，并且同時(shí)創(chuàng)建了一個(gè)新的作用域關(guān)聯(lián)到相應(yīng)的DOM元素上。

所謂作用域就是一個(gè)指向應(yīng)用模型的對象，它是表達(dá)式的執(zhí)行環(huán)境，作用域有層次結(jié)構(gòu)，這個(gè)層次和相應(yīng)的DOM幾乎是一樣的，作用域能監(jiān)控表達(dá)式和傳遞事件并且可以從父作用域繼承屬性。

每一個(gè)AngularJS應(yīng)用都有一個(gè)絕對的根作用域。但也可能有多個(gè)子作用域。 一個(gè)應(yīng)用可以有多個(gè)作用域，因?yàn)橛幸恍┲噶顣尚碌淖幼饔糜?，?dāng)新作用域被創(chuàng)建的時(shí)候，他們會被當(dāng)成子作用域添加到父作用域下，這使得作用域會變成一個(gè)和相應(yīng)DOM結(jié)構(gòu)一個(gè)的樹狀結(jié)構(gòu)。

控制器

現(xiàn)在我們就用ng-controller指令來創(chuàng)建一個(gè)簡單的控制器定義，如下所示：

<div ng-app="" ng-controller="MyController">
 
請輸入一個(gè)名字：<input type="text" ng-model="person.name"> 
 
Hello <span ng-bind="person.name"></span> 
 
</div>    
 
<script>
function MyController($scope) {
   $scope.person = {
      name: "World"
   };
}
</script>

如上所述，我們通過ng-controller指令創(chuàng)建了一個(gè)JavaScript對象 —— MyController并帶有name屬性，那參數(shù)$scope是什么呢，代表什么意思呢。

現(xiàn)在我們就來解答MyController對象參數(shù) —— $scope。

$scope就是把一個(gè)DOM元素連結(jié)到控制器上的對象，它提供一個(gè)綁定到DOM元素(以及其子元素)上的執(zhí)行上下文。它也是一個(gè)JavaScript對象，指向應(yīng)用程序作用域內(nèi)的所有HTML元素和執(zhí)行上下文。作用域呢，就是作為$scope的數(shù)據(jù)屬性關(guān)聯(lián)到DOM上的，并且能在需要調(diào)試的時(shí)候被獲取到。

要明確創(chuàng)建一個(gè)$scope對象，我們就要給DOM元素安上一個(gè)controller對象，使用的是ng-controller 指令屬性。

所有$scope都遵循原型繼承，這意味著它們都能訪問父$scope們,對任何屬性和方法，如果AngularJS在當(dāng)前$scope上找不到，就會到父$scope上去找，如果在父$scope上也沒找到，就會繼續(xù)向上回溯，一直到$rootScope上，這個(gè)$rootScope是最頂級的$scope，它對應(yīng)著含有 ng-app指令屬性的那個(gè)DOM元素，也就是說根作用域關(guān)聯(lián)的DOM就是ng-app指令定義的地方。

也就是說，擁有了$scope，我們就可以操作作用域內(nèi)任何我們想要獲取的對象數(shù)據(jù)。

控制器

控制器不僅聲明屬性也可以聲明方法，如下所示：

當(dāng)然如果是開發(fā)條件的需要，我們也可以將控制器寫在外部文件中，那如上示例該怎么做呢，很簡單，如下簡單引用即可：

<script src="MyController.js"></script>
<div ng-app="" ng-controller="MyController">
       Your name:
       <input type="text" ng-model="username">
       <button ng-click="sayHello()">打招呼</button>
       <hr />
       {{greeting}}
  </div>
   
  <script>
 function MyController($scope) {
   $scope.username = 'World';
   $scope.sayHello = function() {
     $scope.greeting= 'Hello ' + $scope.username + '!';
   };
 }
 </script>