前端面试之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.