AngularJs基本篇 一 (簡介+基本指令)

1.AngularJs 五大核心

• 雙向數據綁定 —— 實現了把model與view完全綁定在一起，model變化，view也變化，反之亦然。

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

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

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

• 指令 —— 可以用來創建自定義的標籤，也可以用來裝飾元素或者操作DOM屬性

2.AngularJs 基本指令

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

a.指令：ng-app

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

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

1. <div ng-app=""> 
2. </div>

b.指令：ng-init

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

我們不僅可以賦值字符串，也可以賦值爲數字、數組、對象，而且可以爲多個變量賦初始值，如下所示：

1. <div ng-app="" ng-init="test1=1;test2=5"> 
2. </div>
3. //或者
4. <div ng-app="" ng-init="names=['1','2','3']"> 
5. </div>

c.AngularJS表達式

輸出數字，如下示例：

1. <div ng-app="" ng-init="test1=12;test2=5">
2.  
3. Price： {{ test1* test2}}
4.  
5. </div>

輸出對象，如下示例：

1. <div ng-app="" ng-init="names=['1','2','3']">
2.  
3. Name： {{ names[0] }}
4.  
5. </div>

d.指令：ng-model

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

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

1. <div ng-app="">
2.  
3. input value：<input type="text" ng-model="test" />
4.  
5. your value： {{ test}}
6.  
7. </div>

e.指令：ng-bind

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

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

1. <div ng-app="">
2. input your name：<input type="text" ng-model="test" />
3. Hello Your Name : <span ng-bind="test"></span>
4. </div>

f.指令：ng-click

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

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

1. <div ng-app="" ng-init="isshow=false">
2. <button ng-click="isshow= !isshow">隱藏/顯示</button>
3. <div ng-hide="isshow">
4. input your name：<input type="text" ng-model="test" />
5. Hello Your Name : <span ng-bind="test"></span>
6. </div>
7. </div>