AngularJS入門之如何快速上手

AngularJS（ng）是一個純JS架構，AngularJS易于建構CRUD應用(CRUD意思是增删改查)

适用于以資料操作為主的SPA（Single Page Application）應用。

基于jQuery對傳統的DOM操作進行進一步的封裝---使用MVC操作代替了所有的DOM操作。

不再是“先查找元素再操作元素”，

所有的操作都是以“業務資料“為中心

搭建環境：

使用 AngularJS 的步驟：

1.引入必需的js檔案 : angular.js

2.為父元素聲明ngApp屬性(這裡的父元素一般指html)(系統會自動載入或啟動一個NG應用，這個ngApp是唯一的，隻能有一個)

3.為父元素内部使用angularJS相關内容

<code><html lang=</code><code>"en"</code> <code>ng-app=</code><code>"haixin"</code><code>></code>

<code><script src=</code><code>"public/js/html5shiv.min.js"</code><code>></script></code>

<code><script src=</code><code>"public/js/respond.min.js"</code><code>></script></code>

<code><script src=</code><code>"public/js/jquery-2.2.3.min.js"</code><code>></script></code>

<code><script src=</code><code>"public/js/bootstrap.js"</code><code>></script></code>

<code><script src=</code><code>"public/js/angular.js"</code><code>></script></code>

<code><link rel=</code><code>"stylesheet"</code> <code>href=</code><code>"public/css/bootstrap.css"</code><code>></code>

<code><link rel=</code><code>"stylesheet"</code> <code>href=</code><code>"public/css/animation.css"</code><code>></code>

　　ng四大特性：

1.采用MVC模式，頁面中再也無需出現DOM操作。

2.雙向資料綁定。

3.依賴注入

4.子產品化設計

ng四大特性之一MVC模式：

(1)Model: 模型，指業務資料，web項目中由js變量擔當model。

(2)View: 視圖，使用者界面，HTML

(3)Controller: 控制器，Function

ng指令：

AngularJS 中ng子產品提供的指令(directive)

(1) ngApp：自動載入/啟動一個AngularJS應用

(2) ngInit：用于聲明Model（模型）變量

(3) ngController：建立一個控制器對象的執行個體

(4) ngBind：在目前元素的innerHTML上輸入指定的表達式的值

(5) ngRepeat：為HTML增加循環功能，循環輸出目前元素

(6) ngIf：為HTML增加選擇功能，隻有在表達式值為true時，目前元素才添加到DOM樹

(7) ngSrc：解決img等标簽的src屬性中包含{{}}産生的問題

文法： <img ng-src="路徑/{{表達式}}"/>

(8) ngClick: 為元素綁定監聽函數(不是全局函數，而是Model函數)

文法： <ANY ng-click="模型函數()">

(9) 使用$scope.模型函數名 = function(){}格式來聲明模型函數

(10) ngStyle: 指派為一個Model對象，用于為目前元素指定樣式

(11) ngShow/ngHide: 通過display：none/block來控制目前元素是否顯示

(12) ngDisabled: 指派為true/false，可以控制目前元素是否禁用

(13) ngChecked: 指派為true/false，可以控制目前元素是否選中

Angular中聲明變量——Model資料

有兩種方式可以聲明Model變量：

(1)使用ngInit指令聲明

ngInit 指令可以聲明為HTML元素的屬性或樣式

ngInit 指令聲明的Model變量可以先使用再聲明

ngInit 指令可以一次聲明多個Model變量，用分号隔開即可

ngInit 指令可以聲明哪些類型的Model變量：

number、string、boolean、對象、數組、對象的數組

注意：使用ngInit定義Model變量時不能使用new關鍵字；此方法

把View和Model混雜在一起，不推薦使用！

(2)使用Controller建立Model變量——推薦使用

建立Module <= 建立Controller <= 建立Model變量

注意：新版本的Angular要求控制器必須聲明在一個子產品中！

具體步驟：

1)聲明一個自定義的子產品(module)

angular.module('子產品名', [ ])

2)在目前AngularJS應用中注冊自定義子產品

ng-app="子產品名"

3)在自定義子產品中建立Controller函數，其中建立Model資料

$scope.模型變量名 = 值

4)在View中建立Controller對象的執行個體，指定其作用範圍

<标簽 ng-controller=“控制器名”>...控制器的有效範圍...</标簽>

5)在控制器的作用範圍内輸出Model變量

可以使用{{}}輸出Model變量的值開發人員來編寫

$scope $rootScope

(1)每個控制器的執行個體都對應一個作用範圍對象，即$scope

(2)在控制器中聲明的Model資料，必須儲存在一個作用範圍内

(3)一個HTML中可以聲明多個控制器執行個體，每個控制器都有自己的作用範圍，這些範圍内的資料彼此隔離不會互相影響，

可以由不同開發人員來編寫

(4)為了在多個控制器間共享資料，可以将Model資料儲存在一個“全局作用範圍内”——$rootScope——整個AngularApp中

有且隻有一個$rootScope對象，且此對象是所有的$scope的父作用域對象

(5)作用域對象間可以實作繼承，隻需要将某個控制器執行個體聲明在另一個控制器執行個體的有效作用域内部即可。

子產品：

基本文法：

控制器：

定義對象屬性：

定義方法：

PS：小練習：

(1)建立一個新的頁面，其中聲明module、controller、model變量：一個學生對象，其中包含sname、gender、birthday、

score等屬性，在view中顯示這些model資料

(2)建立一個新的頁面，其中聲明module、controller、model變量：5個分數組成的數組，在view中的一個清單中輸出這5個數字

(3)五個商品的資料顯示在View中的table元素中，使用ngRepeat指令進行循環

案例答案：

<code><section ng-controller=</code><code>"practice"</code><code>></code>

<code><li ng-</code><code>repeat</code><code>=</code><code>"k in arr"</code><code>>{{k}}</li></code>

<code><li ng-</code><code>repeat</code><code>=</code><code>"(k,v) in arr"</code><code>>{{k}}:{{v}}</li></code>

<code><section ng-controller=</code><code>"commodity"</code><code>></code>

<code><table class=</code><code>"table table-bordered table-hover text-center"</code><code>></code>

<code><tr ng-</code><code>repeat</code><code>=</code><code>"i in arr1"</code><code>></code>

<code><td>{{$index+</code><code>1</code><code>}}</td></code>

<code><td>{{i.price}}</td></code>

<code><td><img ng-src=</code><code>"{{i.img}}"</code> <code>width=</code><code>"60"</code><code>></td></code>

<code><button class=</code><code>"btn btn-block btn-primary"</code> <code>ng-click=</code><code>"add()"</code><code>>點選加載</button></code>

<code>angular.module(</code><code>"haixin"</code><code>,[]).controller(</code><code>"practice"</code><code>,function($scope){</code>

<code>$scope.obj = new Object();</code>

<code>$scope.obj.name = </code><code>"Tom"</code><code>;</code>

<code>$scope.obj.gender =</code><code>"boy"</code><code>;</code>

<code>$scope.obj.birthday = </code><code>"4.18"</code><code>;</code>

<code>$scope.arr=[</code><code>10</code><code>,</code><code>20</code><code>,</code><code>30</code><code>];</code>

<code>}).controller(</code><code>"commodity"</code><code>,function ($scope) {</code>

<code>$scope.arr</code><code>1</code><code>=[</code>

<code>{name:</code><code>"商品1"</code><code>,price:</code><code>"77"</code><code>,img:</code><code>"images/1.jpg"</code><code>},</code>

<code>{name:</code><code>"商品2"</code><code>,price:</code><code>"33"</code><code>,img:</code><code>"images/2.jpg"</code><code>},</code>

<code>{name:</code><code>"商品3"</code><code>,price:</code><code>"55"</code><code>,img:</code><code>"images/3.jpg"</code><code>}</code>

<code>$scope.add=function () {</code>

<code>arr</code><code>2</code><code>.price=</code><code>"11"</code><code>;</code>

<code>arr</code><code>2</code><code>.img=</code><code>"images/"</code><code>+(</code><code>1</code><code>+i)+</code><code>".jpg"</code><code>;</code>

<code>$scope.arr</code><code>1</code><code>.push(arr</code><code>2</code><code>);</code>

　　 ng四大特性--雙向資料綁定：

方向一：把Model資料綁定到View上

把Model資料綁定到View上後，任何Model資料的修改，都會自動更新到View上（{{ }}、ngBind、ngRepeat、

ngSrc...都實作了方向1的綁定）

方向二：把View綁定到Model上

把View資料綁定到Model後，任何View資料的修改，都會自動更新到Model上

此後不論任何時候，隻要View中的資料一修改，Model中的資料會自動随之修改。實作方法：隻有ngModel指令。

可以使用$scope.$watch(‘模型變量名’, fn)監視一個模型變量值的改變；單行文本輸入域、多行文本輸入域、下拉框、

單選按鈕控件預設會把自己的value屬性值綁定到一個Model變量；複選框會把一個true/false值綁定到一個Model變量。

ng子產品中提供的服務(service)

(1)$rootScope: 用于在不同的控制器間共享資料

(2)$interval: 提供周期性定時器服務

(3)$interval.cancel(t)：清除定時器

(4)$timeout: 提供一次性定時器服務

(5)$http: 發起異步的Ajax請求服務

定時器小案例：input值改變的時候，控制台也會改變，若隻寫input和P的時候，input值改變的時候P的内容也跟着改變。

代碼如下：

<code><input type=</code><code>"text"</code> <code>ng-model=</code><code>"Uname"</code><code>></code>

<code>$scope.$watch(</code><code>"Uname"</code><code>,function () {</code>

<code>console.log($scope.Uname);</code>

PS：小練習

1：簡易版的點選次數電腦

2：簡易版的輪播廣告

3：用Bootstrap元件制作一個進度條（每隔0.2s，前進10%）取消定時：$interval.cancel(t);

4：簡易版的購物車

5：同意使用條款，則可以注冊，否則禁止注冊

6：簡易版模拟QQ選擇切換頭像

7：全選或取消全選（PS：4,5,6,7這四個小練習是雙向資料綁定了，直接加ng指令就可實作。下面案例中圖檔

名字一律為n.jpg【n 為正整數】）

案例代碼如下：

<code><section class=</code><code>"container"</code><code>></code>

<code><section ng-controller=</code><code>"lunbo"</code><code>></code>

<code><button class=</code><code>"btn btn-danger"</code> <code>ng-click=</code><code>"fn()"</code><code>>點選加一</button><br/></code>

<code><img ng-src=</code><code>"images/{{img}}.jpg"</code> <code>alt=</code><code>""</code> <code>width=</code><code>"300"</code><code>></code>

<code><button class=</code><code>"btn btn-success"</code> <code>ng-click=</code><code>"prev()"</code><code>>上一個</button></code>

<code><button class=</code><code>"btn btn-success"</code> <code>ng-click=</code><code>"next()"</code><code>>下一個</button></code>

<code><section class=</code><code>"progress"</code> <code>ng-controller=</code><code>"jindutiao"</code><code>></code>

<code><div class=</code><code>"progress-bar"</code> <code>role=</code><code>"progressbar"</code> <code>aria-valuenow=</code><code>"85"</code> <code>aria-valuemin=</code><code>"0"</code> <code>aria-valuemax=</code><code>"100"</code>

<code>ng-style=</code><code>"myStyle"</code><code>></div></code>

<code>單價：<input type=</code><code>"number"</code> <code>placeholder=</code><code>"請輸入價錢"</code> <code>ng-model=</code><code>"price"</code><code>></code>

<code>數量：<input type=</code><code>"number"</code> <code>placeholder=</code><code>"請輸入數量"</code> <code>ng-model=</code><code>"num"</code><code>></code>

<code>小計：<span>{{price*num}}</span></code>

<code><input type=</code><code>"checkbox"</code> <code>ng-model=</code><code>"agree"</code><code>>我同意本站的使用條款</code>

<code><button class=</code><code>"btn btn-success"</code> <code>ng-disabled=</code><code>"!agree"</code><code>>送出注冊</button></code>

<code><button class=</code><code>"btn btn-danger"</code> <code>ng-if=</code><code>"agree"</code><code>>送出注冊</button></code>

<code><button class=</code><code>"btn btn-primary"</code> <code>ng-</code><code>show</code><code>=</code><code>"agree"</code><code>>送出注冊</button></code>

<code><option value=</code><code>"images/1.jpg"</code><code>>帥鍋</option></code>

<code><option value=</code><code>"images/2.jpg"</code><code>>蕾女</option></code>

<code><option value=</code><code>"images/3.jpg"</code><code>>大爺</option></code>

<code><option value=</code><code>"images/4.jpg"</code><code>>大叔</option></code>

<code><input type=</code><code>"checkbox"</code> <code>ng-checked=</code><code>"checkAll"</code><code>>A</code>

<code><input type=</code><code>"checkbox"</code> <code>ng-checked=</code><code>"checkAll"</code><code>>B</code>

<code><input type=</code><code>"checkbox"</code> <code>ng-checked=</code><code>"checkAll"</code><code>>C</code>

<code><input type=</code><code>"checkbox"</code> <code>ng-model=</code><code>"checkAll"</code><code>></code>

<code><span ng-</code><code>hide</code><code>=</code><code>"checkAll"</code><code>>全選</span></code>

<code><span ng-</code><code>show</code><code>=</code><code>"checkAll"</code><code>>取消全選</span></code>

<code>angular.module(</code><code>"haixin"</code><code>,[]).controller(</code><code>"lunbo"</code><code>,function ($scope) {</code>

<code>$scope.n = </code><code>10</code><code>;</code>

<code>$scope.fn=function () {</code>

<code>$scope.n++;</code>

<code>$scope.img =</code><code>1</code><code>;</code>

<code>$scope.next=function () {</code>

<code>$scope.img++;</code>

<code>if($scope.img==</code><code>5</code><code>){</code>

<code>$scope.img=</code><code>1</code><code>;</code>

<code>$scope.prev=function () {</code>

<code>$scope.img--;</code>

<code>if($scope.img<</code><code>1</code><code>){</code>

<code>$scope.img=</code><code>4</code><code>;</code>

<code>}).controller(</code><code>"jindutiao"</code><code>,function ($scope,$interval) {</code>

<code>$scope.n=</code><code>10</code><code>;</code>

<code>$scope.myStyle={</code><code>"width"</code><code>:</code><code>"0%"</code><code>};</code>

<code>var t = $interval(function () {</code>

<code>$scope.myStyle.width=$scope.n+</code><code>"%"</code><code>;</code>

<code>$scope.n+=</code><code>10</code><code>;</code>

<code>if($scope.n==</code><code>90</code><code>){</code>

<code>$interval.cancel(t);</code>

ng四大特性之—依賴注入：

依賴： Driver對象的建立和運作必需一個car對象，稱為Driver對象“依賴于”Car對象。依賴注入展現着“最少知識法則”

依賴對象的解決方法：

(1)主動建立

(2)被動注入(inject)

一般由特定架構來建立Driver對象，發現其依賴于一個Car對象，架構自動建立被依賴的Car對象——稱為“依賴注入”。

依賴注入的典型例子：

注意：

控制器對象的構造函數是由AngularJS來調用的，不能手動調用

Angular會根據控制器對象的構造函數的形參名來建立依賴的參數對象——形參名不能随意指定！

若控制器對象未聲明形參，則Angular不會傳遞任何實參進來

控制器對象的形參名（PS：此處的形參名是不能夠随意定的）必需是Angular可識别的，但數量和順序都沒有限制—Angular會

根據每一個形參的名稱來查找建立被依賴的對象，并自動注入進來。

ng四大特性之—子產品化設計：

子產品化設計展現着“高内聚低耦合”設計原則。

項目中，可以根據功能的不同，将不同的元件放置在不同的子產品中

AngularJS中有兩種子產品：

(1)AngularJS官方提供的子產品：ng、ngRoute、ngAnimate、ngTouch、....

(2)使用者自定義的子產品：userModule、productModule、orderModule、....

一個NG子產品中可以包含多個元件：

（1）controller元件：用于維護模型資料

（2）directive元件：用于在View中輸出/綁定Model資料

（3）service元件：用于在不同的控制器中提供某種函數服務

（4）filter元件：用于對View中輸出的資料進行格式化

……..

Filter元件（過濾器）：

用于Model資料在View中呈現時進行某種格式的篩選/過濾/格式化。

在View中使用過濾器時，需要借助于管道：|

ng子產品中提供的過濾器：(ps:HH指的是24小時制)

(1)lowercase：把資料格式化為小寫

(2)uppercase：把資料格式化為大寫

(3)number：把數字型資料格式化為三位一個逗号的字元串同時指定小數點位數 eg: {{price | number : 2 }}

(4)currency：把數字型資料格式化為貨币格式的字元串，同時指定貨币符号 eg: {{price | currency : '￥' }}

(5)date：把數字/Date型資料格式化為特定日期時間格式的字元串

PS案例：點選一個按鈕“加載員工資料”，向伺服器發起異步的Ajax請求，擷取服務端的一段JSON資料，顯示在一個

表格中（注意資料格式）；加載完資料後，按鈕即禁用/消失。

<code><html ng-app=</code><code>"haixin"</code><code>></code>

<code><title>Title</title></code>

<code><link rel=</code><code>"stylesheet"</code> <code>href=</code><code>"../css/bootstrap.css"</code><code>></code>

<code><section class=</code><code>"container"</code> <code>ng-controller=</code><code>"a1"</code><code>></code>

<code><table class=</code><code>"table table-bordered table-hover"</code><code>></code>

<code><tr ng-</code><code>repeat</code><code>=</code><code>"j in pro"</code><code>></code>

<code><td>{{j.ename}}</td></code>

<code><td>{{j.salary |number}}</td></code>

<code><td>{{j.hiredate |date:</code><code>"yyyy年MM月dd日"</code><code>}}</td></code>

<code><button ng-click=</code><code>"add()"</code> <code>class=</code><code>"btn btn-block btn-success"</code> <code>ng-disabled=</code><code>"tab"</code><code>>點選</button></code>

<code><script src=</code><code>"../js/jquery-1.11.3.js"</code><code>></script></code>

<code><script src=</code><code>"../js/bootstrap.js"</code><code>></script></code>

<code><script src=</code><code>"../js/angular.js"</code><code>></script></code>

<code>angular.module(</code><code>"haixin"</code><code>,[]).controller(</code><code>"a1"</code><code>,function ($scope,$http) {</code>

<code>$scope.tab = false;</code>

<code>$scope.tab = true;</code>

<code>$http.get(</code><code>"1.json"</code><code>).success(function (data) {</code>

<code>$scope.pro=data;</code>

JSON檔案：

<code>{</code><code>"ename"</code><code>:</code><code>"Tom"</code><code>, </code><code>"salary"</code><code>:</code><code>456765</code><code>,</code><code>"hiredate"</code><code>:</code><code>22224352345</code><code>},</code>

<code>{</code><code>"ename"</code><code>:</code><code>"Mary"</code><code>, </code><code>"salary"</code><code>:</code><code>232323</code><code>,</code><code>"hiredate"</code><code>:</code><code>234798237823</code><code>},</code>

<code>{</code><code>"ename"</code><code>:</code><code>"John"</code><code>, </code><code>"salary"</code><code>:</code><code>8875645</code><code>,</code><code>"hiredate"</code><code>:</code><code>23423478923</code><code>},</code>

<code>{</code><code>"ename"</code><code>:</code><code>"King"</code><code>, </code><code>"salary"</code><code>:</code><code>34325546</code><code>,</code><code>"hiredate"</code><code>:</code><code>772374234333</code><code>},</code>

<code>{</code><code>"ename"</code><code>:</code><code>"Allen"</code><code>, </code><code>"salary"</code><code>:</code><code>86756453234</code><code>,</code><code>"hiredate"</code><code>:</code><code>237643274234</code><code>}</code>

Angular官方提供的子產品之二——ngRoute子產品

ngRoute子產品可以讓使用者自定義“路由字典”，自動解析請求URL中的路由位址，查找路由字典，自動發起異步AJAX請求，把擷取的結果放在目前頁面中。

值得注意的是，一定要在myApp的moudle中引用ng-route，同時要在檔案中引用angular-route.js檔案，否則不起作用

Route：路由，為到達目的地而經過的線路

(1)頁面URL形如： http://127.0.0.1/index.html#/路由位址

(2)浏覽器首先請求基礎頁面(index.html)，再解析URL中的路由位址

(3)查找路由字典，形如：

#/start =》 tpl/start.html

#/main =》 tpl/main.html

....

擷取目前URL中路由位址所對應的真實模闆頁面的位址

(4)用戶端發起異步AJAX請求，擷取目标模闆頁面，将伺服器傳回HTML片段(隻含有幾個div)，插入到目前的DOM樹上。

使用ngRoute子產品的步驟：

(1)建立唯一完整的頁面: index.html，引入angular.js和angular-route.js

(2)在index.html的body中使用ngView指令聲明一個容器元素，用于盛放模闆頁面

(3)建立自定義子產品，聲明依賴于ng和ngRoute兩個子產品

(4)在目前子產品中使用ngRoute提供的對象配置路由字典

(5)再建立幾個模闆頁面，隻需要有div元素即可

(6)測試路由字典的配置是否正确

使用ngRoute子產品需要注意的問題：

(1)由于模闆頁面被用戶端請求後挂載在index.htmlDOM樹上，是以其中所有的圖檔等外部資源檔案的路徑必須相對于index.html，而不是模闆頁面。

(2)使用ngRoute子產品時，無需為模闆頁面中的某個元素單獨設定ngController，隻需要在聲明路由字典時設定整個模闆頁面所需要的控制器即可

(3)在不同的模闆頁面間跳轉可以采用兩種方式：·超連結方式：<a href="#/路由位址"></a>JS程式設計方式：<button ng-click="jump( )"></button>

(4) index.html中，由于所有模闆頁面都是在ngView中切換，ngView外面的内容會始終呈現。

官方提供的子產品——ngAnimate

ngAnimate可以支援JS、Transition、Keyframes動畫，但它本身未提供任何的動畫效果，而是為上面三種技術提供了相應的“動畫鈎子(Hooks)”

ng子產品中提供的指令：ngRepeat, ngInclude, ngIf, ngSwitch, ngShow, ngHide, ngView 和 ngClass預設都提供了動畫鈎子。

使用ngAnimate子產品調用其CSS Transition動畫鈎子的步驟：

(1) index.html引入angular.js和angular-animate.js。

(2) 自定義子產品中聲明依賴于ngAnimate子產品——特定的指令就會産生動畫鈎子。

(3) 為ngView聲明class，樣式中指定transition動畫；

可以看到ngAnimate為即将要離開的ngView添加了 ng-leave和ng-leave-active 兩個class，為即将要進入的ngView添加了 ng-enter和

ng-enter-active兩個class。為這四個class編寫特定的樣式即可。

(PS:這裡隻是普通的進出動畫，其實可以更炫點，每個頁面都有進出的動畫，這個就是後期要研究的，可以充分利用C3一些特效)

AngularJS入門之如何快速上手

繼續閱讀

UVA 1401 Remember the Word

ZOJ 2748 Free Kick

CSU 1567 Reverse Rot

JAVA 系列——>開發工具IntelliJ IDEA的安裝以及配置、快捷鍵IDEA 簡介

門戶通專訪草根站長九天狼：做站貴在堅持

UVA 519 Puzzle (II)

如何成為一名.net 工程師?

磁盤結構及在Linux中的命名

tabpanel 使用問題

為什麼把CSS放頭部，script放下面

CSS之折疊菜單

web開發之前後端渲染

DOM下元素 offset client scroll 相關屬性簡介

IE8 CSS設定DIV居中，添加“margin:0 auto”

403 Forbidden，You don't have permission to access / on this server.Forbidden

詳解STM32單片機的堆棧