1.MVC思想
2.依賴注入DI
3.數(shù)據(jù)綁定
4.模塊化Modules
5.服務(wù)Service
6.過濾器Filter
7.指令Directive
8.測試(Unit Testing & E2E Testing)
（一）MVC思想
MVC（Model View Controller）是一種架構(gòu)設(shè)計模式硼补。模型結(jié)構(gòu)如下圖所示：
view：視圖（用戶界面）
controller：控制器（業(yè)務(wù)邏輯）
model：模型（數(shù)據(jù)存儲）
MVC架構(gòu)中，所有通信都是單向的霉赡。
1）view傳送指令到controller绘趋；
2）controller完成業(yè)務(wù)邏輯后颤陶，model改變狀態(tài)；
3）model將更新后的數(shù)據(jù)發(fā)送到view陷遮，用戶得到反饋滓走。
（二）依賴注入DI
控制反轉(zhuǎn)IOC與依賴注入DI：
IOC：一種面向?qū)ο蟮脑O(shè)計原則，用來降低代碼之間的耦合度帽馋。借助IOC容器實(shí)現(xiàn)具有依賴關(guān)系的對象之間的解耦搅方。全部對象的控制權(quán)交給IOC容器，IOC容器是整個系統(tǒng)的關(guān)鍵核心绽族，起到“粘合劑”的作用姨涡。
DI：依賴注入就是將實(shí)例變量傳入到一個對象中去。
IOC是一種思想吧慢，DI是一種設(shè)計模式涛漂。
（三）數(shù)據(jù)綁定
AngularJS采用雙向數(shù)據(jù)綁定，意味著如果視圖改變了某個值检诗，數(shù)據(jù)模型會通過臟檢查觀察到這個變化匈仗，而如果數(shù)據(jù)模型改變了某個值底哗，視圖也會依據(jù)變化重新渲染。
AngularJS會記錄數(shù)據(jù)模型所包含的數(shù)據(jù)在任何特定時間點(diǎn)的值锚沸，而不是原始值跋选。當(dāng)AngularJS認(rèn)為某個值可能發(fā)生變化時，它會運(yùn)行自己的事件循環(huán)來檢查這個值是否變“臟”哗蜈。如果該值從上次事件循環(huán)運(yùn)行之后發(fā)生了變化前标，則該值被認(rèn)為是“臟”值。這也是Angular可以追蹤和響應(yīng)應(yīng)用變化的方式距潘。這個過程被稱作“臟檢查”炼列。臟檢查是檢查數(shù)據(jù)模型的變化的有效手段，當(dāng)有潛在的變化存在時音比，AngularJS會在事件循環(huán)時執(zhí)行臟檢查來保證數(shù)據(jù)的一致性俭尖。
借助AngularJS，不需要構(gòu)建復(fù)雜和新的JavaScript功能洞翩，就可以在視圖中實(shí)現(xiàn)類自動同步的機(jī)制稽犁。
（四）模塊化Modules
在使用JQuery和原生JS時，我們常常使用模塊來避免函數(shù)污染全局骚亿。
在Angular中已亥，模塊不只是為了解決全局函數(shù)的問題，還相當(dāng)于一個namespace或者package来屠，表示的是一堆功能單元的集合虑椎。Angular應(yīng)用沒有主方法，而是使用模塊來聲明應(yīng)用應(yīng)該如何啟動俱笛。
根據(jù)Angular官方文檔捆姜，模塊化有以下優(yōu)勢：
啟動過程是聲明式的，所以更容易懂迎膜；
在單元測試時泥技，不需要加載全部模塊，因此這種方式有利于單元測試的代碼書寫星虹；
在場景測試中零抬，額外的模塊可以被加載進(jìn)來，進(jìn)而重寫一些配置宽涌，這樣有助于實(shí)現(xiàn)應(yīng)用的端到端的測試叉抡；
第三方代碼可以打包成可重用的模塊偿荷；
模塊可以以任何先后或者并行的順序加載（因?yàn)槟K的執(zhí)行本身是延遲的）。
對于大型應(yīng)用，根據(jù)不同職責(zé)条舔，建議把它像這樣分成多個模塊：
一個服務(wù)模塊，用來做服務(wù)的聲明;
一個指令模塊，用來做指令的聲明;
一個過濾器模塊，用來做過濾器聲明;
一個依賴以上模塊的應(yīng)用級模塊吃溅，它包含初始化代碼。
這樣拆分的原因是鸯檬，在你的測試中常常需要忽略掉初始化代碼决侈，因?yàn)檫@些代碼比較難測試。通過把它拆分出來就能在測試中方便地忽視掉它喧务。通過只加載和當(dāng)前測試相關(guān)的模塊赖歌，也能使測試更專一。
模塊依賴
模塊聲明時可以列出它所需要依賴的其它模塊功茴。一個模塊依賴某模塊庐冯，意味著這個被依賴的模塊需要在模塊被加載之前加載完畢。更具體些坎穿，假設(shè)模塊A依賴于模塊B展父，那么模塊A的配置代碼塊的執(zhí)行，必須發(fā)生在模塊B的配置代碼塊之后玲昧；模塊A的執(zhí)行代碼塊亦同理栖茉，也在模塊B的執(zhí)行代碼塊之后被執(zhí)行。每個模塊只能被加載一次酌呆，即使有多個別的模塊依賴它衡载。
創(chuàng)建模塊，獲取模塊隙袁，如何實(shí)現(xiàn)模塊的依賴
使用 angular.module(‘myModule’, []) 將創(chuàng)建名為 myModule 的模塊并重寫已有的同名模塊。而使用 angular.module(‘myModule’) 則只會獲取已有的模塊實(shí)例弃榨。
模塊創(chuàng)建和獲取的區(qū)別菩收，在于module函數(shù)的第二參數(shù)，該參數(shù)的作用是定義創(chuàng)建模塊時的所依賴的模塊（子模塊）鲸睛。
這樣做的好處是娜饵，不同的服務(wù)或者一組服務(wù)被放置在不同的可重用模塊，那么應(yīng)用模塊只需要聲明應(yīng)用所需要的全部依賴模塊即可官辈。
（五）服務(wù)Service
服務(wù)提供了一種能在應(yīng)用的整個生命周期內(nèi)保持?jǐn)?shù)據(jù)的方法箱舞，它能夠在控制器之間進(jìn)行通信，并且能保證數(shù)據(jù)的一致性拳亿。
服務(wù)是一個單例對象晴股，在每個應(yīng)用中只會被實(shí)例化一次，并且是延遲加載的（需要時才會被創(chuàng)建）肺魁。服務(wù)提供了把與特定功能相關(guān)聯(lián)的方法集中在一起的接口电湘。
AngularJS提供了一些內(nèi)置服務(wù)，在任何地方使用它們的方式都是統(tǒng)一的。同時寂呛，為復(fù)雜應(yīng)用創(chuàng)建我們自己的服務(wù)也是非常有用的怎诫。
在AngularJS中創(chuàng)建自己的服務(wù)是非常容易的，只需要注冊這個服務(wù)即可贷痪。服務(wù)被注冊后幻妓，AngularJS編譯器就可以引用它，并且在運(yùn)行時把它當(dāng)作依賴加載進(jìn)來劫拢。服務(wù)名稱的注冊表使得在在測試中偽造和剔除相互隔離的應(yīng)用依賴變得非常容易肉津。
（六）過濾器Filter
過濾器（filter）的作用就是接收一個輸入，通過某個規(guī)則進(jìn)行處理尚镰，然后返回處理后的結(jié)果阀圾。主要用在數(shù)據(jù)的格式化上，例如獲取一個數(shù)組中的子集狗唉，對數(shù)組中的元素進(jìn)行排序等初烘。
AngularJS內(nèi)置了一些過濾器，它們是：currency(貨幣)分俯、date(日期)肾筐、filter(子串匹配)、json(格式化json對象)缸剪、limitTo(限制個數(shù))吗铐、lowercase(小寫)、uppercase(大寫)杏节、number(數(shù)字)唬渗、orderBy(排序),總共九種。
除此之外還可以自定義過濾器奋渔，可以滿足任何要求的數(shù)據(jù)處理镊逝。filter的自定義方式也很簡單，使用module的filter方法嫉鲸，返回一個函數(shù)撑蒜，該函數(shù)接收輸入值，并返回處理后的結(jié)果玄渗。
（七）指令Directive
AngularJS 通過被稱為 指令 的新屬性來擴(kuò)展 HTML座菠，通過內(nèi)置的指令來為應(yīng)用添加功能，并且允許自定義指令藤树。
ng-app 指令初始化一個 AngularJS 應(yīng)用程序浴滴。
ng-init 指令初始化應(yīng)用程序數(shù)據(jù)。
ng-model 指令把元素值（比如輸入域的值）綁定到應(yīng)用程序也榄。
（八）測試(Unit Testing & E2E Testing)
1）單元測試Unit Testing
我們可以專注于構(gòu)建我們的測試來隔離具體巡莹、單獨(dú)組件的代碼司志。這種方法被稱為“單元測試”，在不同階段降宅、不同條件下骂远、以不同的輸入來測試各種特定單元的代碼。
單元測試專門用于測試小型腰根、獨(dú)立的代碼單元激才，單個函數(shù)，或者較小的帶有功能的交互额嘿。
單元測試的麻煩在于把邏輯隔離成小塊瘸恼，這樣我們才能測試它。
2）端到端測試E2E Testing
對應(yīng)于進(jìn)行端到端測試册养，也即黑盒測試东帅。在端到端測試中，我們測試應(yīng)用的視角是：作為最終用戶球拦，對系統(tǒng)的底層實(shí)現(xiàn)一無所知靠闭。這種方法非常適合測試大型應(yīng)用的功能。
端到端測試適合測試頁面上的用戶交互坎炼，無需手動刷新頁面愧膀。端到端測試意義重大，因?yàn)樗成淞擞脩粼谑褂梦覀儜?yīng)用時的真實(shí)體驗(yàn)谣光。
