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);
});
});
});
网友评论