前端面試之angular JS

1. angular的數據綁定採用什麼機制？詳述原理

angularjs的雙向數據綁定,採用髒檢查（dirty-checking）機制。ng只有在指定事件觸發後，才進入 $digest cycle ： 
- DOM事件，譬如用戶輸入文本，點擊按鈕等。( ng-click ) 
- XHR響應事件 ( $http ) 
- 瀏覽器Location變動事件 ( $location ) 
- Timer事件( $timeout , $interval ) 
- 執行 $digest() 或 $apply()

2. 依賴注入(DI)

讓咱們能夠不用本身實例化就能建立依賴對象的方法. 簡單的來講, 依賴是以注入的方式傳遞的。在Web應用中， Angular讓咱們能夠經過DI來建立像Controllers和Directives這樣的對象. 咱們還能夠建立本身的依賴對象, 當咱們要實例化它們時, Angular能自動實現注入。

3. compile和link的區別：性能和能力

編譯的時候，compile轉換dom，碰到綁定監聽器的地方就先存着，有幾個存幾個，到最後彙總成一個link函數，一併執行，提高了性能。

function compile(tElement, tAttrs, transclude) { ... }tElement爲編譯前的element function link(scope, iElement, iAttrs, controller) { ... } iElement爲編譯後的element，已經與做用域關聯起來，因此能夠數據綁定

若是指令只進行DOM的修改，不進行數據綁定，那麼配置在compile函數中，若是指令要進行數據綁定，那麼配置在link函數中。

4. $apply()和 $digest()的區別

安全性：$apply()能夠接收一個參數做爲function()，這個 function 會被包裝到一個 try … catch 塊中，因此一旦有異常發生，該異常會被 $exceptionHandler service 處理。

• $apply會使ng進入 $digest cycle , 並從$rootScope開始遍歷(深度優先)檢查數據變動。
• $digest僅會檢查該scope和它的子scope，當你肯定當前操做僅影響它們時，用$digest能夠稍微提高性能。

5.ng-if 跟 ng-show/hide 的區別有哪些？

第一點區別：ng-if 在後面表達式爲 true 的時候才建立這個 dom 節點；ng-show 是初始時就建立了，用 display:block 和display:none 來控制顯示和不顯示。

第二點區別：ng-if 會（隱式地）產生新做用域，ng-switch 、 ng-include 等會動態建立一塊界面的也是如此。

這樣會致使，在 ng-if 中用基本變量綁定 ng-model，並在外層 div 中把此 model 綁定給另外一個顯示區域，內層改變時，外層不會同步改變，由於此時已是兩個變量了。

<p>{{name}}</p> <div ng-if="true"> <input type="text" ng-model="name"> </div>

ng-show 不存在此問題，由於它不自帶一級做用域。

避免這類問題出現的辦法是，始終將頁面中的元素綁定到對象的屬性（data.x）而不是直接綁定到基本變量（x）上。

6.