Angular JS

簡介

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

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

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

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

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

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

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

指令

1.ng-app

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

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

2.ng-init

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

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

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

3.AngularJS表達式

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

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

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

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

 輸出數字，以下示例：

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

 輸出對象，以下示例：

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

4.ng-model

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

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

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

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

5.ng-bind

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

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

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

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

6.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">
    <p>請輸入一個名字：<input type="text" ng-model="name"></p>
    <p>Hello <span ng-bind="name"></span> </p>
    </div>
</div>

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

 

控制器

AngularJS控制器控制AngularJS應用程序的數據，是常規的JavaScript對象。

ng-controller指令就是用來定義應用程序控制器的，而且同時建立了一個新的做用域關聯到相應的DOM元素上。

所謂做用域就是一個指向應用模型的對象，它是表達式的執行環境，做用域有層次結構，這個層次和相應的DOM幾乎是同樣的，做用域能監控表達式和傳遞事件而且能夠從父做用域繼承屬性。

每個AngularJS應用都有一個絕對的根做用域。但也可能有多個子做用域。 一個應用能夠有多個做用域，由於有一些指令會生成新的子做用域，當新做用域被建立的時候，他們會被當成子做用域添加到父做用域下，這使得做用域會變成一個和相應DOM結構一個的樹狀結構。

如今咱們就用ng-controller指令來建立一個簡單的控制器定義，以下所示：

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

如上所述，咱們經過ng-controller指令建立了一個JavaScript對象 —— MyController並帶有name屬性，那參數$scope是什麼呢，表明什麼意思呢。

如今咱們就來解答MyController對象參數 —— $scope。

$scope就是把一個DOM元素連結到控制器上的對象，它提供一個綁定到DOM元素(以及其子元素)上的執行上下文。它也是一個JavaScript對象，指向應用程序做用域內的全部HTML元素和執行上下文。做用域呢，就是做爲$scope的數據屬性關聯到DOM上的，而且能在須要調試的時候被獲取到。

要明確建立一個$scope對象，咱們就要給DOM元素安上一個controller對象，使用的是ng-controller 指令屬性。

全部$scope都遵循原型繼承，這意味着它們都能訪問父$scope們,對任何屬性和方法，若是AngularJS在當前$scope上找不到，就會到父$scope上去找，若是在父$scope上也沒找到，就會繼續向上回溯，一直到$rootScope上，這個$rootScope是最頂級的$scope，它對應着含有 ng-app指令屬性的那個DOM元素，也就是說根做用域關聯的DOM就是ng-app指令定義的地方。

也就是說，擁有了$scope，咱們就能夠操做做用域內任何咱們想要獲取的對象數據。

控制器不只聲明屬性也能夠聲明方法，以下所示：

<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>

固然若是是開發條件的須要，咱們也能夠將控制器寫在外部文件中，那如上示例該怎麼作呢，很簡單，以下簡單引用便可：

<script src="MyController.js"></script>

 

經常使用指令

ng-hide指令，用於控制部分HTML元素不可見(ng-hide="false")和可見狀態(ng-hide="true")，以下：

<div ng-app="" ng-init="click=false">
  <button ng-click="click= !click">我變</button>
   <p ng-hide="click">顯示了。</p>
   <p ng-hide="!click">隱藏了。</p>
</div>

ng-show指令和ng-hide用法相同但行爲相反，這裏就不作詳細介紹了。

擴展內容：

當咱們面對一些長列表數據,可能會經過默認隱藏點擊顯示的形式來展示數據內容，當內容中也會伴隨不少數據綁定，這個在頁面渲染的時候很是影響性能。

舉一個列子,好比說一般angular建議一個頁面的數據綁定不超過2000個,假如如今有一個頁面直接綁定了2000個model,而後你加載,會發現很是卡.若是你將其中100的model經過ng-show設置爲不顯示,你會發現仍是很卡。

而後你試着將全部的ng-show換成ng-if,你會發現性能瞬間快的像兩個應用,這是爲何呢，緣由就在於ng-show指令雖然隱藏了但仍是會執行其中的全部綁定，而ng-if就不一樣了，它只會在等於true的時候也就是顯示的時候纔去執行其中的綁定，這樣一來性能就有很大的提升，因此在能使用ng-if的狀況,用它代替全部的ng-show和ng-hide吧！

 

ng-repeat指令，遍歷一個數據集合中的每一個數據元素，而且加載HTML模版把數據渲染出來，當咱們要向HTML容器節點中添加更多相似DOM元素的時候，使用ng-repeat是再好不過了。

使用方法，以下示例：

<div ng-app="" ng-init="friends = [
   {name:'Tom', age:25}, 
   {name:'Jerry', age:28},
   {name:'Tom', age:25}, 
   {name:'Jerry', age:28}]">
 
   <table>
     <tbody><tr ng-repeat="x in friends">
       <td> {{ 'Name：'+ x.name +' ，Age：'+ x.age}} </td>
     </tr>
   </tbody></table>
</div>

過濾器

使用AngularJS過濾器能夠實現對字符串的大小寫轉換、貨幣格式的轉換、數組的過濾等等。

用法：管道字符(|)+過濾器名。

1.過濾器uppercase、lowercase對字符串轉換大、小寫，以下所示：

<div ng-app="">
請輸入: <input type="text" ng-model="name">
<p>結果爲： {{ name | uppercase}}</p>
</div>

2.過濾器currency，能夠將數字轉換成貨幣格式

3.filter過濾器能夠過濾數組並從中選擇出一個子集出來，用法是「filter:模型名稱」，示例以下：

<div ng-app="" ng-init="friends = [
   {name:'tom', age:16},
   {name:'jerry', age:20}, 
   {name:'garfield', age:22}]">
 
<p>輸入過濾:<input type="text" ng-model="name"></p>
 
<ul style="list-style-type:none">
<li>姓名，年齡</li>
  <li ng-repeat="x in friends | filter:name">
    {{ x.name + ' , ' + x.age }}
  </li>
</ul>
 
</div>