13个关于angular的前端面试题（总结）-木庄网络博客

本文摘自PHP中文网，作者青灯夜游，侵删。

本篇文章给大家总结分享13个关于angular的前端面试题。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

1，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，并在外层 p 中把此 model 绑定给另一个显示区域，内层改变时，外层不会同步改变，因为此时已经是两个变量了。

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

相关教程推荐：《angular教程》

ng-show 不存在此问题，因为它不自带一级作用域。

避免这类问题出现的办法是，始终将页面中的元素绑定到对象的属性（data.x）而不是直接绑定到基本变量（x）上。

2，ng-repeat迭代数组的时候，如果数组中有相同值，会有什么问题，如何解决？

会提示 Duplicates in a repeater are not allowed. 加 track by $index 可解决。当然，也可以 trace by 任何一个普通的值，只要能唯一性标识数组中的每一项即可（建立 dom 和数据之间的关联）。

3，ng-click 中写的表达式，能使用 JS 原生对象上的方法吗？

不止是 ng-click 中的表达式，只要是在页面中，都不能直接调用原生的 JS 方法，因为这些并不存在于与页面对应的 Controller 的 $scope 中。

4、factory、service 和 provider 是什么关系？

factory：把 service 的方法和数据放在一个对象里，并返回这个对象

service：通过构造函数方式创建 service，返回一个实例化对象

provider：创建一个可通过 config 配置的 service，$get 中返回的，就是用 factory 创建 service 的内容

从底层实现上来看，service 调用了 factory，返回其实例；factory 调用了 provider，返回其 $get 中定义的内容。factory 和 service 功能类似，只不过 factory 是普通 function，可以返回任何东西（return 的都可以被访问，所以那些私有变量怎么写，你懂的）；

service 是构造器，可以不返回（绑定到 this 的都可以被访问）；

provider 是加强版 factory，返回一个可配置的 factory。

5、angular 中控制器之间如何通信？

1、Service

2、events,指定绑定的事件

3、使用 $rootScope

4、controller之间直接使用$parent, $$childHead等

5、directive 指定属性进行数据绑定

6，angular 的数据绑定采用什么机制？详述原理

使用的脏检查机制，所谓的双向绑定，其实就是从界面的操作能实时反映到数据，数据的变更能实时展现到界面。AngularJS在$scope变量中使用脏值检查来实现了数据双向绑定，并且可以通过$scope.$watch来监听变化触发回调；

angular中使用的是脏检查机制，在angular中每次你绑定一些东西到你的UI上时你就会往$watch队列里插入一条$watch，当我们的模版加载完毕时，也就是在linking阶段（Angular分为compile阶段和linking阶段―译者注），Angular解释器会寻找每个directive，然后生成每个需要的$watch。

当浏览器接受到可以被angular context处理的事件时就会触发digest循环，这个循环是由两个更小的循环组合起来的，一个是$watch列表，一个是$evalAsync列表，而$watch列表在$digest循环中被“脏值检查”解析，在digest将会遍历我们的watch，然后询问它是否有属性和值的变化，直到$watch队列都检查过，在检查数据变化的时候，由于并不知道这个事件是对哪些数据进行了更改，以及这个事件有可能造成事件之外的其他任何地方的数据更改，所以必须进行一次大检查，将所有“注册”过的值全部检查一遍，一次检查称为一个周期，每次最少检查两遍，因为第二遍用来确认，前一遍的变动中是否有数据的变动，导致了其他数据的变动，如果第二次有变动的话，会再执行一遍，直到最后两次完全一致，则停止检查（其实就是个（递归（遍历））的过程），考虑到内存的消耗和死循环的风险，脏检查每个周期最多递归执行10遍，如果超过10遍就会抛出一个错误。当$digest循环结束时，DOM相应地变化。
在angular中

ng-click，ng-change，ng-blur...就是对各类用户事件的封装

$timeout，$http，$window，$location...就是对各种JS/API事件的封装

ng-model，以及控制器中的数据，就是对值的“注册”

$scope 本质是一个总的事件逻辑的封装容器，同时抽象为数据载体，实质上数据都存在于浏览器堆内存中

$scope.apply() & $scope.digest() 即Angular中的“数据大检查”的function

所以如果我们使用了非Angular封装的事件改编数据时，要手动执行一次大检查

由于Angular这种脏检查的方法效率不高，如果一个页面绑定的view超过2000个，就可能存在比较明显的性能问题，官方称之为“脏检查”

举个例子

1	`<button ng-click="val=val+1">increase 1</button>`

click 时会产生一次更新的操作（至少触发两次 $digest 循环）

按下按钮浏览器接收到一个事件，进入到angular context

$digest 循环开始执行，查询每个 $watch 是否变化

由于监视$scope.val 的 $watch 报告了变化，因此强制再执行一次 $digest 循环新的 $digest 循环未检测到变化

浏览器拿回控制器，更新 $scope.val 新值对应的 dom

$digest 循环的上限是 10 次（超过 10次后抛出一个异常，防止无限循环）。

7、一个 angular 应用应当如何良好地分层？

目录结构的划分

对于小型项目，可以按照文件类型组织，比如：

css
js
  controllers 
  models 
  services 
  filters 
templates

但是对于规模较大的项目，最好按业务模块划分，比如：

css
modules
  account 
    controllers 
    models 
    services 
    filters 
    templates 
  disk 
    controllers 
    models 
    services 
    filters 
    templates