AngularJS從出生到現(xiàn)在已經(jīng)接近9年時間邮破，在日新月異的互聯(lián)網(wǎng)時代诈豌，可以稱得上一位‘老將’了。
有人說抒和，angular已經(jīng)過時矫渔，時下流行的是react、vue等摧莽，但是作為曾經(jīng)紅極一時前端框架庙洼，他有很多特點仍然被沿用至今。尤其是面試的時候范嘱，很多技術(shù)HR都會問一些angular相關(guān)問題送膳，即便該公司完全不會用到它。下面就是我在實際面試中遇到的關(guān)于angular的一些問題丑蛤，希望能夠幫助到有需要的朋友：
1.什么是MVC、MVVM撕阎？
經(jīng)常有朋友問受裹，angular到底是MVC還是MVVM模式？
這個問題在知乎上可能會給你比較好的答案虏束。
MVC:Model-View-Controller
MVC是一種表現(xiàn)模式棉饶，是一種軟件架構(gòu)模式。其中有幾個重要的概念：
M镇匀，Model照藻， 引用系統(tǒng)數(shù)據(jù)，管理系統(tǒng)功能并通知View更改用戶操作汗侵。
V幸缕，View，就是用戶接口晰韵，用于顯示數(shù)據(jù)发乔。
C，Controller 雪猪，將用戶操作映射到Model栏尚，并操作視圖。
對MVC而言只恨，分離是最大的優(yōu)點译仗，尤其是Model將不依賴于Controller和View抬虽，對于隔離應(yīng)用、進行UI測試打下很好的架構(gòu)級支持纵菌。
MVVM:Model-View-ViewModel
Model就是我們常說的數(shù)據(jù)模型斥赋，用于數(shù)據(jù)的構(gòu)造，數(shù)據(jù)驅(qū)動产艾， 主要提供基礎(chǔ)實體的屬性以及每個屬性的驗證邏輯.
View主要用于界面呈現(xiàn)疤剑，與用戶輸入設(shè)備進行交互
ViewModel是MVVM架構(gòu)中最重要的部分，ViewModel中包含屬性闷堡，命令隘膘，方法，事件杠览，屬性驗證等邏輯弯菊，用于邏輯實現(xiàn)，負責View與Model之間的通信踱阿。
2.controller,service,filter,directive分別是干什么的管钳？
controller用來把service、依賴關(guān)系软舌、以及其它對象串聯(lián)到一起才漆，然后通過scope把它們關(guān)聯(lián)到view上，并且通常在controller中處理復雜的業(yè)務(wù)邏輯佛点。
service通常用來處理網(wǎng)絡(luò)請求醇滥、在不同域中共享或者傳遞數(shù)據(jù)的。
filter是用來格式化數(shù)據(jù)用的（數(shù)據(jù)過濾）超营。
directive自定義指令允許你擴展HTML標簽和特性并且可以復用鸳玩。
3.service怎么使用？（例如：我們想要增加一個登陸服務(wù)應(yīng)該怎么做演闭？）
AngularJS 中你可以創(chuàng)建自己的服務(wù)不跟，或使用內(nèi)建服務(wù)。
- 使用Module的provider方法
- 使用Module的factory方法
- 使用Module的service方法
三種方法的比較
- 需要在config中進行全局配置的話米碰，只能選擇provider方法
- factory和service是使用比較頻繁的創(chuàng)建服務(wù)的方法窝革。他們之間的唯一區(qū)別是：service方法用于注入的結(jié)果通常是new出來的對象，factory方法注入的結(jié)果通常是一系列的functions
- provider是創(chuàng)建服務(wù)最為復雜的方法见间，除非你需要創(chuàng)建一個可以復用的代碼段并且需要進行全局配置聊闯，才需要使用provider創(chuàng)建
- 所有具有特定性目的的對象都是通過factory方法去創(chuàng)建
4.controller怎么使用？
- 在定義AppController的時候米诉，先聲明方法需要注入的參數(shù)菱蔬，然后再定義方法體。最后將AppController綁定到app上。
- 直接在app的controller屬性定義拴泌，首先是controller名字魏身，然后是方法體。
- 直接寫方法蚪腐，然后在ng-controller引用該方法
5.接口訪問的代碼放在哪里箭昵？
放在service里。
6.Angular多個頁面之間怎么跳轉(zhuǎn)回季？(考察ui-router的使用)
- 在AngularJS的app.js中用ui-router定義路由家制，比如現(xiàn)在有兩個頁面，一個頁面（producers.html）放置了多個producers泡一，點擊其中一個目標颤殴，頁面跳轉(zhuǎn)到對應(yīng)的producer頁，同時將producerId這個參數(shù)傳過去鼻忠。
.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中矮瘟，定義頁面跳轉(zhuǎn)函數(shù) (使用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周期都是自動觸發(fā)的澈侠，我們也可以使用$apply進行手動觸發(fā)。更深層次的研究钝吮，可以移步The Digest Loop and apply埋涧。
8.列出至少三種實現(xiàn)不同模塊之間通信方式
- Service
- events,指定綁定的事件
- 使用 $rootScope
- controller之間直接使用$parent, $$childHead等
- directive 指定屬性進行數(shù)據(jù)綁定
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);
});
});
});
