AngularJS技術(shù)交流(基礎(chǔ)篇).ppt

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

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

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

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

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

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

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

8、/創(chuàng)建過濾器 .value(d, 123)/創(chuàng)建變量，創(chuàng)建后可修改 .contract(c,324)/創(chuàng)建常量創(chuàng)建后不可修改,配置塊、運(yùn)行塊,模塊的兩個(gè)部分：配置塊、運(yùn)行塊,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, .); );,配置塊：在實(shí)例工廠（provider）注冊(cè)和配置階段運(yùn)行。只有工廠、常量才可以注入到配置塊中（常量的配置要放在前面）。,運(yùn)行塊：注入器(injector)被創(chuàng)建后執(zhí)行，被用來啟動(dòng)應(yīng)用。實(shí)例和常量、變量等都能被注入。,angular.module(modulename, x1,x2) .run(function($timeout) /運(yùn)行的代碼 );,Angular的依賴注入實(shí)現(xiàn),每一個(gè)Angular應(yīng)用都有一個(gè)injector injector負(fù)責(zé)自動(dòng)處理依賴關(guān)系、實(shí)例化對(duì)象 對(duì)用戶代碼來說，injector是透

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

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

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

13、要?jiǎng)?chuàng)建元素，也可以創(chuàng)建屬性、類、注釋 格式如下： 創(chuàng)建類似的指令的時(shí)候只要在自定義指令里面指定restrict就可以，元素（E），屬性（A）、類（C）、注釋（M），也可以一次指定多個(gè) 例“ACEM”,內(nèi)置指令,所有已ng前綴開頭作為命名空間的指令都是AngularJS提供的內(nèi)置指令 基礎(chǔ)的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屬性只會(huì)禁用這個(gè)輸入字段，通過ng-disabled可以根據(jù)值來具體的判斷，參考例子directive5-disabled.html 2、ng-readonly,ng-checked，ng-selected的使用方式跟disabled差不多這里就不多做舉例了,類布爾屬性,ng-href 參考例子 ：directtive7-href.html ng-href跟ng-src都能夠有效的幫助重構(gòu)和避免錯(cuò)誤，因此在改進(jìn)代碼時(shí)強(qiáng)烈建議用他們來代替原來的href跟src屬性？,Ng-app和ng-controller,ng-app 任何具有ng-

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