AngularJS技術交流(基礎篇).ppt

1、AngularJS技術交流,基礎知識交流,什么是AngularJS,AngularJS是協(xié)助和搭建單頁面工程的開源前端框架，它通過MVC模式使得開發(fā)和測試變的更容易 AngularJS試圖成為WEB應用中的一種端對端的解決方案，它將指導開發(fā)整個應用 2009年誕生，由Misko Hevery 等人創(chuàng)建，后為Google所收購，在google的多個產(chǎn)品中被使用 2016年2月 AngularJS 1.5版本發(fā)布 2.0版本即將發(fā)布是對AngularJS一個重大的變更據(jù)說是不往下兼容，也有人說是在開發(fā)遷移工具，目前都還不確定，但是唯一確定的一點就是2.0版本將只支持H5的瀏覽器,AngularJS

2、,基礎篇 提高篇 衍生篇,目錄,基礎篇 AngularJS的核心思想 MVC 模塊化與依賴注入 雙向數(shù)據(jù)綁定 指令,目錄,提高篇 過濾器 控制器 指令（自定義指令） 路由及依賴注入 服務 XHR和服務器通訊 事件,目錄,衍生篇 自己動手搭建自動化的前端開發(fā)平臺 擴展主題：用AngularJS開發(fā)移動應用 TDD與前端自動化測試,問題,我們已經(jīng)學習了類似與Jquery這樣的工具了，為什么還有耗費精力學習，angularJS？,Jquery與AngularJS比較,AngularJS核心思想,AngularJs的核心思想 將視圖與業(yè)務邏輯解耦。在AngularJS中通過數(shù)據(jù)視圖雙向綁定實現(xiàn)。這將提

3、高代碼的可測試性。,UI視圖,數(shù)據(jù)模型,視圖、數(shù)據(jù)雙向更新,這個過程由 AngularJs自動進行 開發(fā)者無需關注,AngularJS核心思想,遵循MVC模式開發(fā)，鼓勵視圖、數(shù)據(jù)、邏輯組件間松耦合。,MVC,為什么需要MVC？,代碼規(guī)模越來越大，切分職責是大勢所趨 為了復用：很多邏輯是一模一樣的 為了后期維護方便：修改一塊功能不影響其它功能,數(shù)據(jù)模型,視圖1,視圖2,控制器,Controller的實現(xiàn)方式1,數(shù)據(jù)模型,視圖1,視圖2,控制器1,問題：如果“控制器1”和“控制器2”里面有2個方法是一模一樣的，怎么辦？,控制器2,Controller的實現(xiàn)方式2,數(shù)據(jù)模型,視圖1,視圖2,控制器1

4、,在ng中請不要這樣做！,控制器2,通用控制器,繼承,繼承,Controller的實現(xiàn)方式3,數(shù)據(jù)模型,視圖1,視圖2,控制器1,控制器2,Service,AngularJS中的Controller實現(xiàn),不要試圖去復用Controller，一個控制器一般只負責一小塊視圖 不要在Controller中操作DOM，這不是控制器的職責 不要在Controller里面做數(shù)據(jù)格式化，ng有很好用的表單控件 不要在Controller里面做數(shù)據(jù)過濾操作，ng有$filter服務 一般來說，Controller是不會互相調(diào)用的，控制器之間的交互會通過事件進行,ng使用Controller的最佳實踐,$sco

5、pe是一個POJO(Plain Old JavaScript Object) $scope提供了一些工具方法$watch()/$apply() $scope是表達式的執(zhí)行環(huán)境（或者叫作用域） $scope是一個樹型結構，與DOM標簽平行 子$scope對象會繼承父$scope上的屬性和方法 每一個Angular應用只有一個根$scope對象（一般位于ng-app上） $scope可以傳播事件，類似DOM事件，可以向上也可以向下 $scope不僅是MVC的基礎，也是后面實現(xiàn)雙向數(shù)據(jù)綁定的基礎 可以用angular.element($0).scope()進行調(diào)試,AngularJS中MVC的核心是

6、$scope,作用域,作用域的生命周期,創(chuàng)建,鏈接,更新,銷毀,創(chuàng)建控制器或者指令的時候，會創(chuàng)建新的作用域，在在這個新建的控制器函數(shù)運行時將作用域傳遞進去,在Angular開始運行的時候，所有的$scope對象都會附加或者鏈接到視圖中,當事件循環(huán)運行時，它通常執(zhí)行在頂層$scope對象上，每個子作用域 都執(zhí)行自己的臟值檢測。每個監(jiān)控函數(shù)都會檢查變化。如果檢測到任意變化，$scope對象就會觸 發(fā)指定的回調(diào)函數(shù)。,清理作用域Angular會來進行，當然我們也可以自己手動進行清理調(diào)用$scope上的destory方法即可,模塊化與依賴注入,一切都是從模塊開始的,ng官方推薦的模塊切分方式,app,

7、controllers,directives,services,routes,filters,任何一個ng應用都是由控制器、指令、服務、路由、過濾器等有限的模塊類型構成的 控制器、指令、服務、路由、過濾器分別放在一個模塊里面 用一個總的app模塊作為入口點，它依賴其它所有模塊,模塊的寫法,模塊的簡單寫法：,angular.module(modulename, x1,x2)/依賴于x1、x2模塊 .directive(directiveName, function() ) .factory(a, function() return 123; )/創(chuàng)建服務 .filter(b,function()

8、/創(chuàng)建過濾器 .value(d, 123)/創(chuàng)建變量，創(chuàng)建后可修改 .contract(c,324)/創(chuàng)建常量創(chuàng)建后不可修改,配置塊、運行塊,模塊的兩個部分：配置塊、運行塊,angular.module(modulename, x1,x2) .config(function($provide, $compileProvider, $filterProvider) $provide.value(a, 123) $provide.factory(a, function() return 123; ) $compileProvider.directive(directiveName, .). $fi

9、lterProvider.register(filterName, .); );,配置塊：在實例工廠（provider）注冊和配置階段運行。只有工廠、常量才可以注入到配置塊中（常量的配置要放在前面）。,運行塊：注入器(injector)被創(chuàng)建后執(zhí)行，被用來啟動應用。實例和常量、變量等都能被注入。,angular.module(modulename, x1,x2) .run(function($timeout) /運行的代碼 );,Angular的依賴注入實現(xiàn),每一個Angular應用都有一個injector injector負責自動處理依賴關系、實例化對象 對用戶代碼來說，injector是透

10、明的 injector會自動分析函數(shù)簽名，注入所需要的對象 聲明依賴關系的三種方式：/guide/di DI可以用在各種不同的地方，主要用在controller和factory中,依賴注入的核心原理,分析匹配參數(shù)名,fn.$injections=,使用fn.call或者apply傳遞需要注入的對象,http:/www.html-,雙向數(shù)據(jù)綁定,最簡單的例子,AngularJs雙向綁定的大概步驟,用$watch()監(jiān)控數(shù)據(jù)模型,$digest()啟動臟值檢測,觸發(fā)視圖變化,編譯指令，設置監(jiān)聽器,定時器輪詢、對象“深比較”,用事件通知指令刷新視圖,A

11、ngularJs雙向綁定的詳細解釋,在編譯時，Angular使用$watch()在對應的$scope上添加了監(jiān)控，一旦$scope中的屬性值發(fā)生變化，這里就會跟著變。（臟值檢測的$digest過程）,在指令編譯時，Angular對input添加了事件監(jiān)控，會自動把input的值設置到$scope中的對應屬性上。,AngularJs雙向綁定的核心代碼,關于雙向數(shù)據(jù)綁定的一些忠告,監(jiān)控的表達式不要過于復雜，表達式數(shù)量不要太多 監(jiān)聽函數(shù)內(nèi)不要有DOM操作，那樣會顯著降低性能 不能互相監(jiān)聽對方會修改的屬性，以免形成交叉引用 ng默認的TTL是10次 深拷貝式的臟值檢測會消耗更多內(nèi)存（樹形的JSON數(shù)據(jù)

12、尤其如此）,指令,指令,指令,什么是指令 指令是AngularJS用來擴展瀏覽器能力的技術之一。在DOM編譯期間，和HTML關聯(lián)著的指令會被檢測到，并且被執(zhí)行。這使得指令可以為DOM指定行為，或者改變DOM的結構。,指令,指令如何被檢測,生成鏈接函數(shù)集合,指令的命名規(guī)則,關于自定義指令的命名，你可以隨便怎么起名字都行，官方是推薦用命名空間-指令名稱這樣的方式，像ng-controller。不過千萬不要用 ng-前綴了，防止與系統(tǒng)自帶的指令重名。另外一個需知道的地方，指令命名時用駝峰規(guī)則，使用時用-分割各單詞。如：定義myDirective，使用時 像這樣：。,聲明指令的方式,聲明指令并不是一定

13、要創(chuàng)建元素，也可以創(chuàng)建屬性、類、注釋 格式如下： 創(chuàng)建類似的指令的時候只要在自定義指令里面指定restrict就可以，元素（E），屬性（A）、類（C）、注釋（M），也可以一次指定多個 例“ACEM”,內(nèi)置指令,所有已ng前綴開頭作為命名空間的指令都是AngularJS提供的內(nèi)置指令 基礎的ng屬性指令 ng-href;ng-src;ng-disabled;ng-checked; ng-readonly;ng-selected;ng-class; ng-style,布爾屬性,1、ng-disabled: 可以綁定的html元素 (text,checkbox,radio,number,url, E

14、mail,submit); Html 中的 disabled屬性只會禁用這個輸入字段，通過ng-disabled可以根據(jù)值來具體的判斷，參考例子directive5-disabled.html 2、ng-readonly,ng-checked，ng-selected的使用方式跟disabled差不多這里就不多做舉例了,類布爾屬性,ng-href 參考例子 ：directtive7-href.html ng-href跟ng-src都能夠有效的幫助重構和避免錯誤，因此在改進代碼時強烈建議用他們來代替原來的href跟src屬性？,Ng-app和ng-controller,ng-app 任何具有ng-

15、app屬性的DOM元素都將被標記為$rootScope的起始點 $rootScope是作用域的起始點，任何嵌套在ng-app內(nèi)的指令都會繼承它 在JS中通過run方法來訪問$rootScope ng-controller 作用是為嵌套在其中的指令創(chuàng)建一個子作用域，避免將所有的操作和模型都定義在$rootScope 用這個指令可以在一個DOM元素上放置控制器,AngularJS的優(yōu)勢,AngularJS的優(yōu)勢在哪？,解耦 視圖、邏輯解 耦，具有更 大的靈活性。,組件化 通過指令方式 可以靈活封裝 html組件。,功能完整 提供完整的解 決方案。內(nèi)置 豐富的服務。,利于測試 因為模塊化管 理，可以對模 進行塊單元測 試。,模塊化 引入依賴注入 技術管理各模 塊。,Angular