AngularJS技術使用經驗-達觀數(shù)據

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

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

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

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

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

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

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

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

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

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

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

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

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

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

15、最高的一個答案是：“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.”一般獲取依賴有三種方式，用new操作符創(chuàng)建依賴，通過全局變量查找，依賴需要時被導入。前兩種方式都不是很好，因為它們需要對依賴硬編碼，使得修改依賴的時候變得困難。特別是在測試的時候不好辦，因為對某個部分進行孤立的測試常常需要模擬它的依賴。第三種方式是最好的，因為它不必在組件中去主動需找和獲取依賴，而是由外界將依賴傳入。Angular依賴注入的

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