雖然只有10個(gè)問題，但是覆蓋了angular開發(fā)中的各個(gè)方面，有基本的知識(shí)點(diǎn)，也有在開發(fā)過程中遇見的問題，同時(shí)也有較為開放性的問題去辨別面試者的基礎(chǔ)水準(zhǔn)和項(xiàng)目經(jīng)驗(yàn)如果自己一年前面試肯定是喜劇到悲劇的轉(zhuǎn)變?。（PS:答案僅供參考～）。

創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：做網(wǎng)站、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的寶塔網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

相關(guān)教程推薦：《angular教程》

1. ng-show/ng-hide與 ng-if的區(qū)別？

我們都知道ng-show/ng-hide實(shí)際上是通過display來進(jìn)行隱藏和顯示的。而ng-if實(shí)際上控制dom節(jié)點(diǎn)的增刪除來實(shí)現(xiàn)的。因此如果我們是根據(jù)不同的條件來進(jìn)行dom節(jié)點(diǎn)的加載的話，那么ng-if的性能好過ng-show.

2.解釋下什么是$rootScrope以及和$scope的區(qū)別？

通俗的說$rootScrope頁面所有$scope的父親。

我們來看下如何產(chǎn)生$rootScope和$scope吧。

step1:Angular解析ng-app然后在內(nèi)存中創(chuàng)建$rootScope。

step2:angular回繼續(xù)解析，找到{{}}表達(dá)式，并解析成變量。

step3:接著會(huì)解析帶有ng-controller的div然后指向到某個(gè)controller函數(shù)。這個(gè)時(shí)候在這個(gè)controller函數(shù)變成一個(gè)$scope對(duì)象實(shí)例。

3. 表達(dá)式 {{yourModel}}是如何工作的？

它依賴于 $interpolation服務(wù)，在初始化頁面html后，它會(huì)找到這些表達(dá)式，并且進(jìn)行標(biāo)記，于是每遇見一個(gè){{}}，則會(huì)設(shè)置一個(gè)$watch。而$interpolation會(huì)返回一個(gè)帶有上下文參數(shù)的函數(shù)，最后該函數(shù)執(zhí)行，則算是表達(dá)式$parse到那個(gè)作用域上。

4. Angular中的digest周期是什么？

每個(gè)digest周期中，angular總會(huì)對(duì)比scope上model的值，一般digest周期都是自動(dòng)觸發(fā)的，我們也可以使用$apply進(jìn)行手動(dòng)觸發(fā)。更深層次的研究，可以移步The Digest Loop and apply。

5. 如何取消 $timeout, 以及停止一個(gè)$watch()?

停止 $timeout我們可以用cancel：

var customTimeout = $timeout(function () {
  // your code
}, 1000);

$timeout.cancel(customTimeout);

停掉一個(gè)$watch：

// .$watch() 會(huì)返回一個(gè)停止注冊(cè)的函數(shù)
function that we store to a variable
var deregisterWatchFn = $rootScope.$watch(‘someGloballyAvailableProperty’, function (newVal) {
  if (newVal) {
    // we invoke that deregistration function, to disable the watch
    deregisterWatchFn();
    ...
  }
});

6. Angular Directive中restrict 中分別可以怎樣設(shè)置？scope中@,=,&有什么區(qū)別？

restrict中可以分別設(shè)置:

A匹配屬性

E匹配標(biāo)簽

C匹配class

M匹配注釋

當(dāng)然你可以設(shè)置多個(gè)值比如AEC,進(jìn)行多個(gè)匹配。

在scope中，@,=,&在進(jìn)行值綁定時(shí)分別表示

@獲取一個(gè)設(shè)置的字符串，它可以自己設(shè)置的也可以使用{{yourModel}}進(jìn)行綁定的;

=雙向綁定，綁定scope上的一些屬性；

&用于執(zhí)行父級(jí)scope上的一些表達(dá)式，常見我們?cè)O(shè)置一些需要執(zhí)行的函數(shù)

angular.module('docsIsolationExample', [])
.controller('Controller', ['$scope', function($scope) {
  $scope.alertName = function() {
      alert('directive scope &');
  }
}])
.directive('myCustomer', function() {
  return {
    restrict: 'E',
    scope: {
      clickHandle: '&'
    },
    template: '<button ng-click="testClick()">Click Me</button>',
    controller: function($scope) {
      $scope.testClick = function() {
        $scope.clickHandle();
        }}
  };
});

<div ng-app="docsIsolationExample">
<div ng-controller="Controller">
  <my-customer click-handle="alertName()"></my-customer>
</div>
 </div>

Codepen Demo：https://codepen.io/Jack_Pu/pen/NrpRBK

<進(jìn)行單向綁定。

7. 列出至少三種實(shí)現(xiàn)不同模塊之間通信方式？

Service

events,指定綁定的事件

使用 $rootScope

controller之間直接使用$parent, $$childHead等

directive 指定屬性進(jìn)行數(shù)據(jù)綁定

8. 有哪些措施可以改善Angular 性能

官方提倡的，關(guān)閉debug,$compileProvider

myApp.config(function ($compileProvider) {
  $compileProvider.debugInfoEnabled(false);
});

使用一次綁定表達(dá)式即{{::yourModel}}

減少watcher數(shù)量

在無限滾動(dòng)加載中避免使用ng-repeat,關(guān)于解決方法可以參考這篇文章

使用性能測(cè)試的小工具去挖掘你的angular性能問題，我們可以使用簡單的console.time()也可以借助開發(fā)者工具以及Batarang

console.time("TimerName");
//your code
console.timeEnd("TimerName");

9. 你認(rèn)為在Angular中使用jQuery好么？

這是一個(gè)開放性的問題，盡管網(wǎng)上會(huì)有很多這樣的爭論，但是普遍還是認(rèn)為這并不是一個(gè)特別好的嘗試。其實(shí)當(dāng)我們學(xué)習(xí)Angular的時(shí)候，我們應(yīng)該做到從0去接受angular的思想，數(shù)據(jù)綁定，使用angular自帶的一些api，合理的路由組織和，寫相關(guān)指令和服務(wù)等等。angular自帶了很多api可以完全替代掉jquery中常用的api，我們可以使用angular.element，$http,$timeout,ng-init等。

我們不妨再換個(gè)角度，如果業(yè)務(wù)需求，而對(duì)于一個(gè)新人（比較熟悉jQuery）的話，或許你引入jQuery可以讓它在解決問題，比如使用插件上有更多的選擇，當(dāng)然這是通過影響代碼組織來提高工作效率，隨著對(duì)于angular理解的深入，在重構(gòu)時(shí)會(huì)逐漸摒棄掉當(dāng)初引入jquery時(shí)的一些代碼。(?Po主就是這樣的人，希望不要被嘲笑，業(yè)務(wù)卻是趕著走)

所以我覺得兩種框架說完全不能一起用肯定是錯(cuò)的，但是我們還是應(yīng)該盡力去遵循angular的設(shè)計(jì)。

10. 如何進(jìn)行angular的單元測(cè)試

我們可以使用karam＋jasmine 進(jìn)行單元測(cè)試,我們通過ngMock引入angular app然后自行添加我們的測(cè)試用例。
一段簡單的測(cè)試代碼：

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);
        });  });

});

關(guān)于測(cè)試，大家可以看下使用karma進(jìn)行angular測(cè)試

除了Karam , Angular.js團(tuán)隊(duì)推出了一款e2e(end-to-end)的測(cè)試框架protractor

參考

11 Essential AngularJS Interview Questions

11 Tips to Improve AngularJS Performance

AngularJS: My solution to the ng-repeat performance problem

29 AngularJS Interview Questions – Can You Answer Them All?

The Digest Loop and $apply

What is the difference between '@' and '=' in directive scope

Angular compile

相關(guān)推薦：編程教學(xué)

分享文章：10個(gè)從喜到悲的Angular面試題
分享地址：http://m.rwnh.cn/article22/cgigjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、云服務(wù)器、建站公司、小程序開發(fā)、網(wǎng)站內(nèi)鏈、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)