Web前端開發(fā)第17章：AngularJS1本章主要內(nèi)容AngularJS概述AngularJS基本概念A(yù)ngularJS應(yīng)用案例：使用AngularJS實現(xiàn)即時搜索21.AngularJS概述AngularJS是一個JavaScript類庫一個用來開發(fā)動態(tài)Web應(yīng)用的框架通過<script>標(biāo)簽添加到HTML頁面。以HTML為模板語言并通過擴(kuò)展的HTML語法使應(yīng)用組件更加清晰和簡潔。AngularJS的創(chuàng)新之處在于，通過數(shù)據(jù)綁定和依賴注入減少了大量代碼，而這些都在瀏覽器端通過JavaScript實現(xiàn)，能夠和任何服務(wù)端技術(shù)完美結(jié)合。31.1AngularJS簡介1.AngularJS概述相關(guān)網(wǎng)址AngularJS官方下載地址：https://AngularJS中文網(wǎng)：http://41.1AngularJS簡介1.AngularJS概述AngularJS為克服HTML在構(gòu)建應(yīng)用上的不足而設(shè)計，有著諸多特性，其中最為核心的是：MVC模塊化自動化雙向數(shù)據(jù)綁定依賴注入51.2AngularJS特性1.AngularJS概述MVCMVC是一種代碼結(jié)構(gòu)組織方式，由模型（Model）、視圖（View）、控制器（Controller）3部分組成。模型（Model）：是應(yīng)用程序中處理數(shù)據(jù)邏輯的部分，通常負(fù)責(zé)在數(shù)據(jù)庫中存取數(shù)據(jù)。視圖（View）：用戶看到并進(jìn)行交互操作的界面?？刂破鳎–ontroller）：應(yīng)用程序中處理用戶交互的部分，通常負(fù)責(zé)從視圖讀取數(shù)據(jù)，控制用戶輸入，并向模型發(fā)送數(shù)據(jù)。這種開發(fā)模式能夠合理組織代碼，降低代碼間耦合度，方便后期維護(hù)。在Angular應(yīng)用中，視圖就是Dom、控制器就是JavaScript，模型數(shù)據(jù)存儲在對象的屬性中。61.2AngularJS特性1.AngularJS概述模塊化使用AngularJS構(gòu)建應(yīng)用時采用模塊化方式組織代碼，將整個應(yīng)用劃分為若干個模塊，每個模塊都有特定的職責(zé)。采用模塊化的組織方式可以最大程度實現(xiàn)代碼復(fù)用，使開發(fā)像搭積木一樣進(jìn)行。AngularJS中的模塊主要分官方提供模塊和自定義模塊兩種：官方提供的模塊包括ng、ngRoute、ngAnimate、ngTouch等用戶自定義的模塊通過angular.module('模塊名',[])創(chuàng)建71.2AngularJS特性1.AngularJS概述自動化雙向數(shù)據(jù)綁定在傳統(tǒng)JS框架中，頁面的HTML代碼與數(shù)據(jù)混合在一起，AngularJS則在視圖和模型之間建立映射關(guān)系，實現(xiàn)數(shù)據(jù)的自動同步：：方向一：Model->View，{{Model數(shù)據(jù)}}或<XXXng-xxx="Model數(shù)據(jù)">，Model改變View跟著改。方向二：View->Model，<表單控件ng-model="Model數(shù)據(jù)名">，View變化Model跟著變化81.2AngularJS特性1.AngularJS概述依賴注入依賴注入（DependencyInjection,簡稱DI）是一種設(shè)計模式,一個或更多的依賴（或服務(wù)）被注入（或者通過引用傳遞）到一個獨立的對象（或客戶端）中，然后成為了該客戶端狀態(tài)的一部分。該模式分離了客戶端依賴本身行為的創(chuàng)建，并遵循依賴反轉(zhuǎn)和單一職責(zé)原則，這使得程序變得松耦合，可擴(kuò)展性更強(qiáng)。91.2AngularJS特性1.AngularJS概述AngularJS框架由以下三個主要部分組成：ng-app指令，在HTML中定義AngularJS應(yīng)用程序。ng-model指令，把元素值（比如輸入域的值）綁定到應(yīng)用程序。ng-bind指令，把應(yīng)用程序數(shù)據(jù)綁定到HTML視圖。101.3AngularJS框架2.AngularJS基本概念A(yù)ngularJS中一些基本概念如下：113.AngularJS應(yīng)用AngularJS通過<script>標(biāo)簽添加到HTML頁面進(jìn)行初始化，主要有自動初始化、手動初始化兩種方式：自動初始化在以下兩種情況下完成自動初始化：DOMContentLoaded事件觸發(fā)時。angular.js腳本執(zhí)行時，document.readyState被設(shè)置‘complete’。初始化時，Angular首先找到表示應(yīng)用開始位置的ng-app指令，然后執(zhí)行以下過程：加載ng-app指令所指的模塊。創(chuàng)建應(yīng)用所需注入器（injector）。以ng-app所在的節(jié)點為根節(jié)點，遍歷編譯DOM樹。123.1AngularJS初始化13現(xiàn)場演示：案例17-01：AngularJS自動初始化3.AngularJS應(yīng)用AngularJS通過<script>標(biāo)簽添加到HTML頁面進(jìn)行初始化，主要有自動初始化、手動初始化兩種方式：手動初始化如果希望在初始化階段擁有更多的控制權(quán)，在應(yīng)用中使用腳本加載器或者想要在Angular編譯頁面之前執(zhí)行其它操作，可以使用手動初始化方法。與自動初始化不同，手動初始化不使用ng-app指令，通過應(yīng)用程序完成初始化。143.1AngularJS初始化3.AngularJS應(yīng)用AngularJS通過<script>標(biāo)簽添加到HTML頁面進(jìn)行初始化，主要有自動初始化、手動初始化兩種方式：手動初始化代碼運行順序如下：HTML頁面以及所有JS腳本加載完畢后，Angular找到文檔根節(jié)點。調(diào)用angular.module()創(chuàng)建模塊。調(diào)用api/angular.bootstrap加載模塊，并將文檔元素編譯成一個可執(zhí)行雙向綁定的應(yīng)用。153.1AngularJS初始化16現(xiàn)場演示：案例17-02：AngularJS手動初始化3.AngularJS應(yīng)用指令是什么指令是一些附加在HTML元素上的自定義標(biāo)記（如：屬性、元素、CSS類）。它告訴AngularJS的HTML編譯器（$compile）在元素上附加某些指定的行為，甚至操作DOM、改變DOM元素以及它的各級子節(jié)點。AngularJS有一整套內(nèi)置指令，如ngBind、ngModel和ngView，同時支持用戶自定義指令。當(dāng)Angular啟動器引導(dǎo)應(yīng)用程序時，HTML編譯器遍歷整個DOM，以匹配DOM元素里的指令。173.2指令3.AngularJS應(yīng)用指令是什么AngularJS常用指令：183.2指令3.AngularJS應(yīng)用指令匹配Angular的HTML編譯器通過規(guī)范化的元素屬性匹配要調(diào)用的指令。Angular把一個元素的標(biāo)簽和屬性名字進(jìn)行規(guī)范化，來決定哪個元素匹配哪個指令。通常用區(qū)分大小寫的規(guī)范化命名方式(比如ngModel)來識別指令。然而HTML是區(qū)分大小的，所以在DOM中使用的指令只能用小寫的方式命名，除此之外還會使用破折號隔開(比如：ng-model)。193.2指令3.AngularJS應(yīng)用指令匹配規(guī)范過程從元素或?qū)傩缘拿智懊嫒サ簟皒-”和“data-”。從“:”、“-”或“_”分隔的形式轉(zhuǎn)換成小駝峰命名法(camelCase)。如下代碼，從input元素ng-model屬性匹配了ngModel指令203.2指令3.AngularJS應(yīng)用Angular模板是一個聲明式的視圖，它將指定信息從模型、控制器變成用戶在瀏覽器上可以看見的視圖。它引導(dǎo)Angular為一個只包含HTML、CSS以及Angular標(biāo)記和屬性的靜態(tài)DOM加上一些行為和格式轉(zhuǎn)換器，最終變成一個動態(tài)的DOM。Angular中的指令（Directive）、表達(dá)式（Expressions）、過濾器（Filter）和表單控件(FormControl)元素屬性可直接在模板中使用。213.3模板3.AngularJS應(yīng)用AngularJS表達(dá)式寫在雙大括號內(nèi)“{{expression}}”，把數(shù)據(jù)綁定到HTML。AngularJS表達(dá)式可以包含文字、運算符和變量。以下示例展示了數(shù)字、對象和數(shù)組在AngularJS表達(dá)式中的應(yīng)用。223.4表達(dá)式23現(xiàn)場演示：案例17-03：AngularJS表達(dá)式3.AngularJS應(yīng)用作用域是一個存儲應(yīng)用數(shù)據(jù)模型的對象，其層級結(jié)構(gòu)對應(yīng)DOM樹結(jié)構(gòu)，為表達(dá)式提供了一個執(zhí)行上下文，同時可以監(jiān)聽表達(dá)式的變化并傳播事件。243.5作用域3.AngularJS應(yīng)用AngularJS應(yīng)用由View（視圖）、Model（模型）、Controller（控制器）組成。作用域是應(yīng)用在視圖和控制器之間的紐帶。作用域中的屬性方法可以在視圖和控制器中使用，示例如下。253.5作用域26現(xiàn)場演示：案例17-04：AngularJS作用域3.AngularJS應(yīng)用AngularJS應(yīng)用由View（視圖）、Model（模型）、Controller組成示例包含內(nèi)容：控制器：demoCtrl引用$scope對象并注冊了兩個屬性和一個方法。$scope對象：持有本例所需數(shù)據(jù)模型，包括name屬性、show屬性和showTech()方法。視圖：擁有一個輸入框、一個按鈕以及一個利用雙向數(shù)據(jù)綁定來顯示數(shù)據(jù)的內(nèi)容塊。273.5作用域3.AngularJS應(yīng)用AngularJS應(yīng)用由View（視圖）、Model（模型）、Controller組成從控制器發(fā)起的角度看，示例有兩個流程：控制器向作用域?qū)憣傩裕篿nput因ng-model指令實現(xiàn)了雙向數(shù)據(jù)綁定，給作用域name屬性賦值后，input發(fā)現(xiàn)name屬性值已變更，進(jìn)而在視圖中渲染出改變的值，即“Web前端開發(fā)”。控制器向作用域中寫方法：“確定”按鈕因ng-click指令綁定了showTech()方法，因此點擊“確定”按鈕時調(diào)用作用域中的showTech()方法，該方法讀取作用域中的name屬性，并加前綴“我要學(xué)”然后賦值給作用域中創(chuàng)建的show屬性。283.5作用域3.AngularJS應(yīng)用AngularJS應(yīng)用由View（視圖）、Model（模型）、Controller組成從視圖角度來看，分三部分內(nèi)容：input文本框中的渲染邏輯：ng-model指令對作用域和視圖元素進(jìn)行雙向數(shù)據(jù)綁定，一方面根據(jù)ng-model中的name去作用域取值，如果存在則在輸入框中顯示，另一方面接受用戶輸入，并將用戶輸入的字符串傳遞給name，作用域中該屬性的值實時更新為用戶輸入的值。input按鈕中的邏輯：接受用戶單擊，調(diào)用作用域中的showTech()方法。{{show}}的渲染邏輯：在用戶未點擊按鈕時不顯示內(nèi)容；取值階段：“確定”按鈕被點擊后，表達(dá)式向$scope中取已存在的show屬性；計算階段：在當(dāng)前作用域下計算show表達(dá)式，然后渲染視圖顯示“我要學(xué)Web前端開發(fā)！”。293.5作用域3.AngularJS應(yīng)用AngularJS控制器是控制AngularJS應(yīng)用程序數(shù)據(jù)的JavaScript對象，通過ng-controller指令定義，就像JavaScript中的構(gòu)造函數(shù)一般，是用來增強(qiáng)Angular作用域（scope）的。示例17-04中ng-app定義了AngularJS應(yīng)用程序demoApp，ng-controller指令定義了控制器demoCtrl。控制器demoCtrl是一個JavaScript函數(shù)，其作用域?qū)ο?scope用來保存AngularJSModel（模型）的對象，在作用域中創(chuàng)建了屬性name、屬性show和方法showTech()。ng-model指令在input文本框和name屬性間建立數(shù)據(jù)綁定。303.6控制器3.AngularJS應(yīng)用{{show}}表達(dá)式將show屬性綁定到頁面視圖。ng-click指令將showTech方法綁定到頁面視圖，當(dāng)用戶點擊input按鈕時，show屬性被賦值并顯示到頁面視圖。313.6控制器3.AngularJS應(yīng)用在視圖模板（templates）、控制器（controllers）或者服務(wù)（services）中，過濾器通過管道字符（|）添加到表達(dá)式和指令中，用來格式化表達(dá)式中的值。AngularJS內(nèi)置的過濾器如下：323.7過濾器33現(xiàn)場演示：案例17-05：AngularJS內(nèi)置過濾器3.AngularJS應(yīng)用自定義過濾器創(chuàng)建自定義過濾器過程很簡單，僅僅需要在模塊中注冊一個新的過濾器方法即可。這個方法將返回一個以輸入值為第一個參數(shù)的新的過濾方法，過濾器中的參數(shù)作為附加參數(shù)傳遞給它。以下示例使用過濾器將字符串中的第一個“_”替換為“-”。343.7過濾器35現(xiàn)場演示：案例17-06：AngularJS自定義過濾器3.AngularJS應(yīng)用AngularJS表單是輸入控件（input、select、textarea等）的集合。在視圖中通過基本的數(shù)據(jù)綁定形式可以訪問到表單和控件的內(nèi)部狀態(tài)，因此可以在應(yīng)用中通過ng-model指令在表單數(shù)據(jù)模型和表單視圖間建立雙向數(shù)據(jù)綁定，記錄表單狀態(tài)，在數(shù)據(jù)改變時更新狀態(tài)。363.8表單37現(xiàn)場演示：案例17-07：AngularJS表單綁定與狀態(tài)控制3.AngularJS應(yīng)用大部分應(yīng)用都有一個主方法用來實例化、組織、啟動應(yīng)用。AngularJS應(yīng)用沒有主方法，而是使用模塊來聲明應(yīng)用應(yīng)該如何啟動。AngularJS通過angular.module()方法創(chuàng)建模塊，模塊中可添加控制器、指令、過濾器等。383.9模塊3.AngularJS應(yīng)用以下示例是（17-04）一個簡單的模塊應(yīng)用：在頁面視圖中，ng-app指令綁定應(yīng)用demoApp，通過angular.module()聲明應(yīng)用模塊；ng-controller綁定控制器，app.controller()函數(shù)定義控制器及其屬性和方法。393.9模塊3.AngularJS應(yīng)用AngularJS路由允許我們通過不同的URL訪問不同的內(nèi)容，可以實現(xiàn)多視圖的單頁Web應(yīng)用（singlepagewebapplication，SPA）。通常URL形式為：http://domain/first/page，但在單頁Web應(yīng)用中AngularJS通過“#”+“標(biāo)記”實現(xiàn)，如下所示：當(dāng)點擊以上任一鏈接時，向服務(wù)端發(fā)送的請求都是一樣的（http://domain/），#號后的內(nèi)容被瀏覽器忽略。403.10路由3.AngularJS應(yīng)用如圖所示，每個URL都有對應(yīng)的視圖和控制器413.10路由3.AngularJS應(yīng)用簡單路由示例如下：423.10路由3.AngularJS應(yīng)用路由配置對象規(guī)則如圖：template：可在ng-view中插入簡單HTML內(nèi)容。templateUrl：可在ng-view中插入HTML模板文件。controller：function、string或數(shù)組類型，在當(dāng)前模板上執(zhí)行controller函數(shù)，生成scope。controllerAs：string類型，為controller指定別名。redirectTo：重定向的地址。resolve：指定當(dāng)前controller所依賴的其他模塊。433.10路由3.AngularJS應(yīng)用路由配置對象示例如下，使用templateUrl向ng-view中插入HTML模板，HTML模板中使用了控制器和表達(dá)式，點擊鏈接調(diào)用不同的模板鏈接和控制器顯示相應(yīng)的內(nèi)容。443.10路由45現(xiàn)場演示：案例17-08：AngularJS路由案例17-09：AngularJS路由配置對象3.AngularJS應(yīng)用AngularJS中服務(wù)是一個函數(shù)或?qū)ο?，可以在AngularJS應(yīng)用中使用。常用的AngularJS內(nèi)建服務(wù)如下：$location服務(wù)$location服務(wù)是一個對象，作為一個參數(shù)傳遞到controller中，使用時需在controller中定義。下面代碼實現(xiàn)效果為：頁面視圖輸出$location內(nèi)容。463.10服務(wù)3.AngularJS應(yīng)用常用的AngularJS內(nèi)建服務(wù)如下：$http服務(wù)$http是AngularJS中最常用的服務(wù)，服務(wù)向服務(wù)器發(fā)送請求，應(yīng)用響應(yīng)服務(wù)器返回的數(shù)據(jù)。下面代碼實現(xiàn)效果為：頁面視圖顯示請求的頁面內(nèi)容。473.10服務(wù)3.AngularJS應(yīng)用常用的AngularJS內(nèi)建服務(wù)如下：$timeout服務(wù)和$interval服務(wù)AngularJS中$timeout服務(wù)對應(yīng)了JSwindow.setTimeout函數(shù)，