AngularJS面试常见问题汇总

2017-10-09 本文已影响0人霜之哀伤丶

AngularJS从出生到现在已经接近9年时间，在日新月异的互联网时代，可以称得上一位‘老将’了。

有人说，angular已经过时，时下流行的是react、vue等，但是作为曾经红极一时前端框架，他有很多特点仍然被沿用至今。尤其是面试的时候，很多技术HR都会问一些angular相关问题，即便该公司完全不会用到它。下面就是我在实际面试中遇到的关于angular的一些问题，希望能够帮助到有需要的朋友：

1.什么是MVC、MVVM？

经常有朋友问，angular到底是MVC还是MVVM模式？
这个问题在知乎上可能会给你比较好的答案。
MVC:Model-View-Controller
MVC是一种表现模式，是一种软件架构模式。其中有几个重要的概念：
M，Model，引用系统数据，管理系统功能并通知View更改用户操作。
V，View，就是用户接口，用于显示数据。
C，Controller ，将用户操作映射到Model，并操作视图。
对MVC而言，分离是最大的优点，尤其是Model将不依赖于Controller和View，对于隔离应用、进行UI测试打下很好的架构级支持。
MVVM:Model-View-ViewModel
Model就是我们常说的数据模型，用于数据的构造，数据驱动，主要提供基础实体的属性以及每个属性的验证逻辑.
View主要用于界面呈现，与用户输入设备进行交互
ViewModel是MVVM架构中最重要的部分，ViewModel中包含属性，命令，方法，事件，属性验证等逻辑，用于逻辑实现，负责View与Model之间的通信。

2.controller,service,filter,directive分别是干什么的？

controller用来把service、依赖关系、以及其它对象串联到一起，然后通过scope把它们关联到view上，并且通常在controller中处理复杂的业务逻辑。
service通常用来处理网络请求、在不同域中共享或者传递数据的。
filter是用来格式化数据用的（数据过滤）。
directive自定义指令允许你扩展HTML标签和特性并且可以复用。

3.service怎么使用？（例如：我们想要增加一个登陆服务应该怎么做？）

AngularJS 中你可以创建自己的服务，或使用内建服务。

使用Module的provider方法
使用Module的factory方法
使用Module的service方法

三种方法的比较

需要在config中进行全局配置的话，只能选择provider方法
factory和service是使用比较频繁的创建服务的方法。他们之间的唯一区别是：service方法用于注入的结果通常是new出来的对象，factory方法注入的结果通常是一系列的functions
provider是创建服务最为复杂的方法，除非你需要创建一个可以复用的代码段并且需要进行全局配置，才需要使用provider创建
所有具有特定性目的的对象都是通过factory方法去创建

4.controller怎么使用？

在定义AppController的时候，先声明方法需要注入的参数，然后再定义方法体。最后将AppController绑定到app上。
直接在app的controller属性定义，首先是controller名字，然后是方法体。
直接写方法，然后在ng-controller引用该方法

5.接口访问的代码放在哪里？

放在service里。

6.Angular多个页面之间怎么跳转？(考察ui-router的使用)

在AngularJS的app.js中用ui-router定义路由，比如现在有两个页面，一个页面（producers.html）放置了多个producers，点击其中一个目标，页面跳转到对应的producer页，同时将producerId这个参数传过去。

.state('producers', {
        url: '/producers',
        templateUrl: 'views/producers.html',
        controller: 'ProducersCtrl'
    })
    .state('producer', {
       url: '/producer/:producerId',
       templateUrl: 'views/producer.html',
       controller: 'ProducerCtrl'
    })

在producers.html中，定义点击事件，比如ng-click="toProducer(producerId)"，在ProducersCtrl中，定义页面跳转函数 (使用ui-router的$state.go接口)：

.controller('ProducersCtrl', function ($scope, $state) {
      $scope.toProducer = function (producerId) {
          $state.go('producer', {producerId: producerId});
      };
});

7.Angular中的digest周期是什么?

每个digest周期中，angular总会对比scope上model的值，一般digest周期都是自动触发的，我们也可以使用$apply进行手动触发。更深层次的研究，可以移步The Digest Loop and apply。

8.列出至少三种实现不同模块之间通信方式

Service
events,指定绑定的事件
使用 $rootScope
controller之间直接使用$parent, $$childHead等
directive 指定属性进行数据绑定

9.如何进行angular的单元测试?

使用karam＋jasmine 进行单元测试,我们通过ngMock引入angular app然后自行添加我们的测试用例。一段简单的测试代码：

describe('calculator', function () {

 beforeEach(module('calculatorApp'));

 var $controller;

 beforeEach(inject(function(_$controller_){
   $controller = _$controller_;
 }));

 describe('sum', function () {
       it('1 + 1 should equal 2', function () {
           var $scope = {};
           var controller = $controller('CalculatorController', { $scope: $scope });
           $scope.x = 1;
           $scope.y = 2;
           $scope.sum();
           expect($scope.z).toBe(3);
       });    
   });

});