摘要：綜上所述兩者是出于不同的目的被創建的，解決的也是不同的問題。檢測模型變化的過程稱為循環。由指令注冊的事件處理函數執行。該回調函數會更新插值表達式所在的屬性。模塊主要關系腳本加載問題。

AngularJS面試題

jQuery

js函數庫
封裝簡化dom操作

使用jquery的思想是：我擁有一個DOM元素并且想讓它去做某件事。也就是命令式編程思想。
angular
JS結構化框架
主體不再是DOM, 而是頁面中的動態數據
使用angular的思想是：我需要完成什么任務，然后接著設計你的應用，最后再去設計你的視圖view層。也就是聲明式編程思想。

jQuery是一個非常優秀的JS框架。其宗旨是寫更少的代碼，做更多的事情。
它是輕量級的JS庫（壓縮后不到30kb），這是其他js庫所不能及的；它還有出色的兼容性，能兼容CSS3，能兼容各種瀏覽器；能使用戶更方便的操作dom，進行事件處理，實現動畫效果和Ajax交互；jQuery還有個很大的優勢是開源，發展好，文檔很齊全，各種應用說的很詳細，并且還有很多成熟的插件可供選擇。最主要的是使得html頁面行為層和結構層分離，便于維護和調試。

優點：

模板功能強大豐富，并且是聲明式的，自帶了豐富的Ag指令；

是一個比較完善的MVC框架，包括模板，數據雙向綁定，路由，模塊化，服務，過濾器等

自定義指令，比jQuery插件還靈活，但需要深入了解指令的特性

Ng模塊化引入了依賴注入，能很容易寫出可服用的代碼，敏捷開發比較方便。
缺點

驗證功能比較薄弱

Ng-view只能有一個，不能嵌套多個視圖，然有 angular-ui/ui-router · GitHub 解決，但是貌似ui-router 對于URL的控制不是很靈活，必須是嵌套式的；

對于特別復雜的應用場景，貌似性能有點問題

Angular 太笨重了，沒有讓用戶選擇一個輕量級的版本

不利于SEO。因為所有內容都是動態獲取并渲染生成的，搜索引擎沒法爬取

1、DOM不是第一優先級的時候。
2、考慮到效率的問題，在框架內它就支持單元測試，簡化了測試上的麻煩。另外，降低模塊間的耦合度也有利于程序員梳理項目邏輯，便于維護和調試。
3、考慮到聲明式語言的優勢。
4、高度復雜對象模型的單頁面。適合CURD類型的應用。

兩者是出于不同的目的被創建的，解決的也是不同的問題。當一個項目的重點是數據展示和執行，而不是分析，此時可能AngularJS就會更勝一籌。對于框架的選擇，你要考慮到很多因素，需要整體的構思。AngularJS總體上還是一個不錯的選擇，可以提高程序員的效率，相對減少Web開發中的維護成本。

jQuery的一個常見問題就是它是命令式編程，就意味著你要告訴計算機如何達成某項目的，其實你想要的就是程序運行的結果。而聲明式編程則轉移了重點，它只是告訴機器你想要的結果，讓機器自己實現這個結果。javascript就是一種命令式語言，但HTML，和它指導的AngularJS就是聲明式的，只需要告訴計算機你需要的展現形式，至于細節就由機器處理了。這樣，完成一個任務的代碼就大幅縮減了，代碼質量也更高了。

當view中有數據變化時會更新到model，當model中數據有變化時，view也會同步更新。

Ag通過不同指令注冊的DOM事件監視器來將DOM樹的變化傳播給模型，事件監視器的代碼通過修改$scope暴露的變量來更新模型。

Ag只會在被明確告知的情況下才會啟動它的模型監控機制。也就是執行scope對象上的$apply方法。
檢測模型變化的過程稱為$digest循環。$digest從根作用域檢查，只有有一個監視器的一個變化都能使$digest循環變臟，迫使Ag進入又一輪循環。每一個被監視的表達式在每個$digest循環中都會被運算兩次。（因為兩個模型值間可能存在一個依賴關系，一個模型變化時可能會讓另一個已被認為穩定的模型值也發生變化）

以input元素如何將模型變化傳播給DOM的例子說明：
1.DOM中的input事件被觸發。瀏覽器進入JS執行環境。
2.由input指令注冊的DOM事件處理函數執行。該處理函數會更新模型值，然后在作用域實例上調用scope.$apply方法。
3.js執行進入ag世界，$digest循環啟動。第一次$digest循環中發現有個監視表達式是“臟”的，此時需要再來一次循環。
4.一旦檢查出一個模型變化，就會觸發一個$watch的回調函數。該回調函數會更新插值表達式所在的text屬性。
5.第二次$digest循環重新運算了所有監視表達式，但這次沒發現任何變化。Ag宣布該模型“穩定”，然后退出$digest循環。
6.Js執行上下文處理其他任何非Ag代碼。大多數沒有這類代碼，之后瀏覽器退出JS執行環境。
7.UI線程切換到DOM渲染環境，瀏覽器重繪那個text屬性發生變化的DOM節點。
8.在重繪完成之后，瀏覽器回到守株待兔的狀態。

DOM事件

XHR相應觸發回調

瀏覽器的地址變化

計時器觸發回調

AngularJS 是通過構造函數的參數名字來推斷依賴服務名稱的。具體來說：將函數體通過 toString()轉換為一個字符串之后，通過正則表達式匹配來解析出參數的名稱，進而找出依賴服務的名稱。
通過構造函數的參數名字來推斷依賴服務名稱的，通過 toString() 來找到這個定義的 function 對應的字符串，然后用正則解析出其中的參數（依賴項），再去依賴映射中取到對應的依賴，實例化之后傳入。
**

**
因為 AngularJS 的 injector 是假設函數的參數名就是依賴的名字，然后去查找依賴項，那如果按前面栗子中那樣注入依賴，代碼壓縮后（參數被重命名了），就無法查找到依賴項了。
所以，通常會使用下面兩種方式注入依賴（對依賴添加的順序有要求）。
數組風格依賴注入
myApp.controller("myCtrl", ["$scope", "$http", function($scope, $http){

...

}])
缺點：重構有點棘手。因為函數參數，在函數定義時寫一遍，在數組中再寫一遍。把參數弄錯了就是問題。
顯式調用 $inject
myApp.controller("myCtrl", myCtrl);
function myCtrl = ($scope, $http){

...

}
myCtrl.$inject = ["$scope", "$http"];

異步模塊定義(AMD)，是由Require.js和類似的JS庫推行一種規范，其目標是為異步加載的可復用JS模塊制定的一套通用規則。AMD模塊可以按需加載，并能實現各模塊之間的相互依賴。另外，AMD模塊定義還可以被離線構建腳本用來合并特定應用功能所需的所有模塊。
AMD模塊的功能：

異步加載腳本文件，這樣瀏覽器不會被阻塞，可以同時并行加載若干其他資源文件。

根據用戶使用應用的場景，按需加載JS代碼。這點有效地消除了提前加載應用程序代碼的需求。

用模塊定義來指定模塊之間的依賴關系，還可設定生產環境中打包所需的模塊。

Ag和AMD定義都使用了同一個單詞“module”，但是他們不一樣，具體如下：

ag模塊用于定義不同的JS類和對象在運行時應如何組合在一起。Ag模塊不會執行任何腳本加載操作。相反，Ag期望在應用啟動之前所有的模塊已經全部加載到瀏覽器中。

AMD模塊主要關系腳本加載問題。AMD定義允許將應用拆分成若干個更小的文件，然后在需要是僅一步加載你所需的那部分文件。

https://wenku.baidu.com/view/...
使用Ag2的原因

現在出到Ag4了
http://www.jb51.net/article/1...

主要分為編譯、鏈接、注冊監視、模型變化、觀察、摧毀6個階段。
編譯：ag會遍歷瀏覽器提供的dom樹，嘗試參照已注冊的指令集來匹配每個元素、屬性、注釋和css類。每當匹配一個指令時，ag就會調用該指令的編譯函數，該函數返回一個連接函數，ag會收集所有的連接函數。
鏈接：一旦所有指令被編譯完成，ag就會創建作用域，然后通過調用每個指令對應的鏈接函數將指令和作用域連接起來。同時注冊監視：作用域一旦生成，指令就會在它身上注冊一個監視，就是我們平時用到的$scope.$watch()，顧名思義監視數據有沒有變化
模型變化：這個時候一旦模型發生了變化，會執行用戶自己定義的回調函數。其中關鍵的是，在模型發生變化時，如何從瀏覽器的js環境進入到angular的環境中操作在ag模型上的數據，此時，ag會調用一個內置指令$scope.$apply，這樣就能進去ag的環境。
觀察：在這個階段會啟動臟檢測機制，先檢測根scope，然后傳播到所有的子作用域上，這個時候檢測到變化就會執行監聽函數$watch的回調函數。
摧毀：當我們不需要一個作用域，需要將它移除掉。原則是誰創建的誰摧毀，使用的方法是$scope.$destroy()。

---------持續更新中--------------