AngularJS技術(shù)使用經(jīng)驗(yàn)-達(dá)觀數(shù)據(jù)

1、AngularJS技術(shù)使用經(jīng)驗(yàn)-達(dá)觀數(shù)據(jù)AngularJs誕生于2009年，最初由Misko Hevery和Adam Abrons開(kāi)發(fā)，后來(lái)成為Google的項(xiàng)目。AngularJS 是一個(gè)為動(dòng)態(tài)WEB應(yīng)用設(shè)計(jì)的結(jié)構(gòu)框架。它能讓你使用HTML作為模板語(yǔ)言，通過(guò)擴(kuò)展HTML的語(yǔ)法，讓你能更清楚、簡(jiǎn)潔地構(gòu)建你的應(yīng)用組件。它的創(chuàng)新點(diǎn)在于，利用 數(shù)據(jù)綁定 和 依賴(lài)注入，它使你不用再寫(xiě)大量的代碼了。這些全都是通過(guò)瀏覽器端的Javascript實(shí)現(xiàn)，這也使得它能夠完美地和任何服務(wù)器端技術(shù)結(jié)合。（達(dá)觀數(shù)據(jù) 陳高星）本文主要涵蓋：AngularJs MVC模型、$scope，co

2、ntroller和數(shù)據(jù)雙向綁定（$apply(),$digest(),$watch）、module模塊、AngularJs路由、過(guò)濾器和自定義過(guò)濾器（filter）、服務(wù)和自定義服務(wù)（provider, factory，service）、指令和自定義指令（directive）、依賴(lài)注入（DI）、Angular繼承。一、Angular MVC模型：MVC作為web應(yīng)用程序的一種優(yōu)秀的設(shè)計(jì)模式，由model，veiw，controller三部分組成，它隔離了應(yīng)用邏輯從用戶(hù)界面層和支持的關(guān)注點(diǎn)分離，所以常受歡迎。Model負(fù)責(zé)管理應(yīng)用程序的數(shù)據(jù)。它響應(yīng)來(lái)自視圖的請(qǐng)求，同時(shí)也響應(yīng)指令從控制器進(jìn)行自我更

3、新。Veiw即視圖，它以一種特定的格式或者說(shuō)樣式來(lái)顯示數(shù)據(jù)。Controller負(fù)責(zé)響應(yīng)于用戶(hù)輸入并執(zhí)行交互數(shù)據(jù)模型對(duì)象。控制器接收到輸入，它驗(yàn)證輸入，然后執(zhí)行修改數(shù)據(jù)模型的狀態(tài)的業(yè)務(wù)操作。通常認(rèn)為angular采用了MVC模型的設(shè)計(jì)模式（也有爭(zhēng)論認(rèn)為MVW或MVVM），后面涉及到的會(huì)較為詳細(xì)解釋。二、Angular 的$scope，controller和數(shù)據(jù)雙向綁定（$apply(),$digest(),$watch）：$scope 對(duì)象在 AngularJS 中充當(dāng)數(shù)據(jù)模型的作用,也就是一般 MVC 框架中 Model 

4、得角色.但又不完全與通常意義上的數(shù)據(jù)模型一樣,因?yàn)?#160;$scope 并不處理和操作數(shù)據(jù)。我理解$scope類(lèi)似于種子或者橋梁的角色，使controller可以獲取數(shù)據(jù)模型的信息。進(jìn)一步系統(tǒng)的劃分它的作用和功能:1.提供了觀察者可以監(jiān)聽(tīng)數(shù)據(jù)模型的變化2.可以將數(shù)據(jù)模型的變化通知給整個(gè) App3.可以進(jìn)行嵌套,隔離業(yè)務(wù)功能和數(shù)據(jù)4.給表達(dá)式提供上下文執(zhí)行環(huán)境$scope類(lèi)似于javascript的原型鏈 。搜索的時(shí)候，優(yōu)先找自己的scope，如果沒(méi)有找到就沿著作用域鏈向上搜索，直至到達(dá)根作用域rootScope。$rootScope是由angularJS加載模

5、塊的時(shí)候自動(dòng)創(chuàng)建的，每個(gè)模塊只會(huì)有1個(gè)rootScope。rootScope創(chuàng)建好會(huì)以服務(wù)的形式加入到 $injector中。也就是說(shuō)通過(guò) $injector.get("$ rootScope ");能夠獲取到某個(gè)模塊的根作用域。更準(zhǔn)確的來(lái)說(shuō)，$rootScope是由angularJS的核心模塊ng創(chuàng)建的。在AngularJS中，控制器Controller是一個(gè)Javascript函數(shù)（類(lèi)型/類(lèi)）, 能通過(guò)表達(dá)式或者ng事件指令調(diào)用。（比如，ngClick）,從而達(dá)到處理數(shù)據(jù)的目地。需要注意的一點(diǎn)是，一個(gè)控制器不應(yīng)該做太多工作。它應(yīng)該

6、只包含單個(gè)視圖的業(yè)務(wù)邏輯，保持控制器職責(zé)單一的最常見(jiàn)做法是將那些不屬于控制器的工作抽離到服務(wù)中，然后通過(guò)依賴(lài)注入在控制器中使用這些服務(wù)。后面會(huì)討論依賴(lài)注入服務(wù)。AngularJs最迷人的一點(diǎn)便是雙向數(shù)據(jù)綁定，AngularJS的工作原理是:HTML模板將會(huì)被瀏覽器解析到DOM中, DOM結(jié)構(gòu)成為AngularJS編譯器的輸入。AngularJS將會(huì)遍歷DOM模板, 來(lái)生成相應(yīng)的NG指令,所有的指令都負(fù)責(zé)針對(duì)view(即HTML中的ng-model)來(lái)設(shè)置數(shù)據(jù)綁定。在HTML中：在JS中： 但是需要注意，這種雙向綁定僅限于angular的上下文, 如果你在AngularJS上下文之外的任何地方修

7、改了model，那么你就需要通過(guò)手動(dòng)調(diào)用$apply()來(lái)通知AngularJS。 例如： 這里，我們使用JavaScript的settimeout()來(lái)更新一個(gè)Scope Model，所以我們把代碼wrapped到$scope.$apply()中（也可以用$watch來(lái)監(jiān)控model變化），它會(huì)自動(dòng)觸發(fā)$rootScope.$digest()，從而讓watchers被觸發(fā)用以更新view。三、Module 模塊：如果全局的聲明Controller等等，這樣會(huì)污染全局命名空間。模塊化的方法還可以讓代碼的復(fù)用更加便捷，單元測(cè)試也更加方便。例如： 四、AngularJs路由：AngularJS路由

8、功能是一個(gè)純前端的解決方案，與我們熟悉的后臺(tái)路由不太一樣。后臺(tái)路由，通過(guò)不同的URL會(huì)路由到不同的控制器上 (controller)，再渲染(render)到頁(yè)面(HTML)。AngularJS的前端路由，需求提前對(duì)指定的(ng-app)，定義路由規(guī)則 (routeProvider)，然后通過(guò)不同的URL，告訴(ng-app)加載哪個(gè)頁(yè)面(HTML)，再渲染到(ng-app)視圖(ng- view)中。目前單頁(yè)面應(yīng)用越來(lái)越受歡迎，而Angular在構(gòu)建單頁(yè)面應(yīng)用上簡(jiǎn)直是標(biāo)配。這樣構(gòu)建的單頁(yè)面應(yīng)用的特點(diǎn)是單頁(yè)、無(wú)刷新式頁(yè)面變化，每個(gè)頁(yè)面包含不同數(shù)據(jù)。Angular路由由ngRoute模塊提供，需

9、要引用angular-route.min.js。下面給出一個(gè)例子：文檔結(jié)構(gòu)：Index.html 部分：Js路由配置：模版template:ng-view 是一個(gè)用來(lái)包含當(dāng)前路由(/home, /about, or /contact)的模板的angular指令, 它會(huì)獲得基于特定路由的文件并將其諸如到主布局中(index.html).五、過(guò)濾器和自定義過(guò)濾器filter：AngularJS過(guò)濾器用類(lèi)似于管道的方式來(lái)格式化輸出給用戶(hù)的數(shù)據(jù)。除了格式化數(shù)據(jù)，過(guò)濾器還能修改DOM。這使得過(guò)濾器通常用來(lái)做些如“適時(shí)地給輸出加入CSS樣式”等工作。例如：AngularJs允許自定義filter：在你的模

10、塊中注冊(cè)一個(gè)新的過(guò)濾器（可注入的）工廠函數(shù)。這個(gè)工廠函數(shù)必須放回一個(gè)新的過(guò)濾器函數(shù)，這個(gè)過(guò)濾函數(shù)的第一個(gè)參數(shù)接受的是輸入。任何過(guò)濾器參數(shù)都會(huì)被當(dāng)成附加的參數(shù)傳遞給過(guò)濾器?？梢酝ㄟ^(guò) | reverse 的方式使用reverse過(guò)濾器。六、服務(wù)和自定義服務(wù)（Factory, Service,Provider）前面提到過(guò)Controller應(yīng)該很薄，不要把所有業(yè)務(wù)邏輯和操作都放到Controller里。應(yīng)該說(shuō)，大部分的業(yè)務(wù)邏輯和持久化數(shù)據(jù)應(yīng)該放到Service里。Angular提供三種方式實(shí)現(xiàn)Service：Factory、Service、Provider。1）用Factory就是創(chuàng)建一個(gè)對(duì)象，為它

11、添加屬性，然后把這個(gè)對(duì)象返回出來(lái)。你把 service 傳進(jìn) controller 之后，在 controller 里這個(gè)對(duì)象里的屬性就可以通過(guò) factory 使用了。2）Service是用"new"關(guān)鍵字實(shí)例化的。因此，你應(yīng)該給"this"添加屬性，然后 service 返回"this"。你把 service 傳進(jìn) controller 之后，在controller里 "this" 上的屬性就可以通過(guò) service 來(lái)使用了。3）Provider是唯一一種你可以傳進(jìn) .config() 函數(shù)的 service

12、。當(dāng)你想要在 service 對(duì)象啟用之前，先進(jìn)行模塊范圍的配置，那就應(yīng)該用 provider。七、指令和自定義指令directive:指令使我們用來(lái)擴(kuò)展瀏覽器能力的技術(shù)之一。在DOM編譯期間，和HTML關(guān)聯(lián)著的指令會(huì)被檢測(cè)到，并且被執(zhí)行。這使得指令可以為DOM指定行為，或者改變它。AngularJS有一套完整的、可擴(kuò)展的、用來(lái)幫助web應(yīng)用開(kāi)發(fā)的指令集，它使得HTML可以轉(zhuǎn)變成“特定領(lǐng)域語(yǔ)言(DSL)”。上面在docsTransclusionExample模塊中創(chuàng)建了myDialog指令，那么<myDialog></myDialog>標(biāo)簽就會(huì)被解析成my-dialog

13、.html模版的標(biāo)簽。Directive的幾個(gè)屬性：Restrict:E(元素),A(屬性),C(類(lèi)),M(注釋) 默認(rèn)值是AScope:默認(rèn)值false，表示繼承父作用域，true表示繼承父作用域并創(chuàng)建自己的作用域，表示創(chuàng)建一個(gè)全新的隔離作用域。當(dāng)你想要?jiǎng)?chuàng)建一個(gè)可重用的組件時(shí)隔離作用域是一個(gè)很好的選擇，通過(guò)隔離作用域我們確保指令是獨(dú)立的,并可以輕松地插入到任何HTML app中，并且這種做法防止了父作用域被污染。Template:模版TemplateUrl：加載指定Url模版Link和compile負(fù)責(zé)渲染directive，compile在編譯前執(zhí)行，負(fù)責(zé)把template（包括trans

14、clude所引用的）變成一個(gè)完整的DOM結(jié)構(gòu)。link在編譯后執(zhí)行，負(fù)責(zé)根據(jù)controller和scope，給compile得到的DOM注冊(cè)事件、關(guān)聯(lián)數(shù)據(jù)等等。Transclude:true,false或者element，true表示提取包含在指令那個(gè)元素里面的內(nèi)容，并可以使用ng-transclude來(lái)將它放置在指令模板的特定位置。False表示不提取。Element表示提取整個(gè)元素。Replace：true表示替換當(dāng)前元素，false表示拼接。默認(rèn)false。八、依賴(lài)注入（DI）：關(guān)于什么是依賴(lài)注入，在Stack Overflow上面有一個(gè)問(wèn)題，如何向一個(gè)5歲的小孩解釋依賴(lài)注入，其中得分

15、最高的一個(gè)答案是：“When you go and get things out of the refrigerator for yourself, you can cause problems. You might leave the door open, you might get something Mommy or Daddy doesnt want you to have. You might even be looking for something we dont even have or which has expired.What you should be doing is

16、 stating a need, “I need something to drink with lunch,” and then we will make sure you have something when you sit down to eat.”一般獲取依賴(lài)有三種方式，用new操作符創(chuàng)建依賴(lài)，通過(guò)全局變量查找，依賴(lài)需要時(shí)被導(dǎo)入。前兩種方式都不是很好，因?yàn)樗鼈冃枰獙?duì)依賴(lài)硬編碼，使得修改依賴(lài)的時(shí)候變得困難。特別是在測(cè)試的時(shí)候不好辦，因?yàn)閷?duì)某個(gè)部分進(jìn)行孤立的測(cè)試常常需要模擬它的依賴(lài)。第三種方式是最好的，因?yàn)樗槐卦诮M件中去主動(dòng)需找和獲取依賴(lài)，而是由外界將依賴(lài)傳入。Angular依賴(lài)注入的

17、方式：1）最簡(jiǎn)單的處理依賴(lài)的方法，就是假設(shè)函數(shù)的參數(shù)名就是依賴(lài)的名字，給出一個(gè)注入器可以通過(guò)檢查聲明來(lái)獲取函數(shù)名，從而知道需要的依賴(lài)的函數(shù)。坦白的來(lái)講，用了這種方法就不能使用JavaScript minifiers/obfuscators（一些用來(lái)縮短的JS的類(lèi)庫(kù)）了，因?yàn)樗鼈儠?huì)改變變量名。這使得這種方法只適合于pretotyping和做demo。2）$inject標(biāo)記：要允許壓縮類(lèi)庫(kù)重命名函數(shù)參數(shù)，同時(shí)注入器又能正確處理依賴(lài)的話，函數(shù)需要使用$inject屬性。這個(gè)屬性是一個(gè)包含依賴(lài)的名稱(chēng)的數(shù)組。注意$inject標(biāo)記里的值和函數(shù)聲明的參數(shù)是對(duì)應(yīng)的。這種方式適合用于控制器的聲明，因?yàn)榭刂破饔辛嗣鞔_的聲明標(biāo)記。3）行內(nèi)標(biāo)記：這種方法比較方便。下面$window為注入依賴(lài)。依賴(lài)注入再AngularJS中很普遍。一般用在控制器和工場(chǎng)方法中?？刂破髦械囊蕾?lài)注入：工廠方法：工場(chǎng)方法負(fù)責(zé)創(chuàng)建AngularJS中的大部分對(duì)象。比如指令，服務(wù)，過(guò)濾器。工廠方法一般在模塊中使用。九、AngularJs繼承：AngularJS中沒(méi)有提供內(nèi)建的用于繼承的特性，AngularJS組件中使用普通的JavaScript繼承模式。1）作用域的原型繼承：原型繼承時(shí)對(duì)