Angularjs十大經典面試題__js

1. ng-show/ng-hide 與 ng-if的區別。

我們都知道ng-show/ng-hide實際上是通過display來進行隱藏和顯示的。而ng-if實際上控制dom節點的增刪除來實現的。因此如果我們是根據不同的條件來進行dom節點的載入的話，那麼ng-if的效能好過ng-show. 2.解釋下什麼是$rootScrope以及和$scope的區別。

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

我們來看下如何產生$rootScope和$scope吧。

step1:Angular解析ng-app然後在記憶體中建立$rootScope。

step2:angular回繼續解析，找到{{}}運算式，並解析成變數。

step3:接著會解析帶有ng-controller的div然後指向到某個controller函數。這個時候在這個controller函數變成一個$scope對象執行個體。 3. 運算式 {{yourModel}}是如何工作的。

它依賴於 $interpolation服務，在初始化頁面html後，它會找到這些運算式，並且進行標記，於是每遇見一個{{}}，則會設定一個$watch。而$interpolation會返回一個帶有上下文參數的函數，最後該函數執行，則算是運算式$parse到那個範圍上。 4. Angular中的digest周期是什麼。

每個digest周期中，angular總會對比scope上model的值，一般digest周期都是自動觸發的，我們也可以使用$apply進行手動觸發。更深層次的研究，可以移步The Digest Loop and apply。 5. 如何取消 $timeout, 以及停止一個$watch()?

停止 $timeout我們可以用cancel：

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

停掉一個$watch：

// .$watch() 會返回一個停止註冊的函數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 中分別可以怎樣設定。scope中@,=,&有什麼區別。

restrict中可以分別設定: A匹配屬性 E匹配標籤 C匹配class M 匹配注釋

當然你可以設定多個值比如AEC,進行多個匹配。

在scope中，@,=,&在進行值綁定時分別表示 @擷取一個設定的字串，它可以自己設定的也可以使用{{yourModel}}進行綁定的; = 雙向繫結，綁定scope上的一些屬性； & 用於執行父級scope上的一些運算式，常見我們設定一些需要執行的函數

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 < 進行單向綁定。 7. 列出至少三種實現不同模組之間通訊方式。

Service

events,指定綁定的事件

使用 $rootScope

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

directive 指定屬性進行資料繫結 8. 有哪些措施可以改善Angular 效能 官方提倡的，關閉debug,$compileProvider

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

使用一次綁定運算式即{{::yourModel}}

減少watcher數量

在無限滾動式載入中避免使用ng-repeat,關於解決方案可以參考這篇文章

使用效能測試的小工具去挖掘你的angular效能問題，我們可以使用簡單的console.time()也可以藉助開發人員工具以及Batarang

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

9. 你認為在Angular中使用jQuery好麼。

這是一個開放性的問題，儘管網上會有很多這樣的爭論，但是普遍還是認為這並不是一個特別好的嘗試。其實當我們學習Angular的時候，我們應該做到從0去接受angular的思想，資料繫結，使用angular內建的一些api，合理的路由群組織和，寫相關指令和服務等等。angular內建了很多api可以完全替代掉jQuery中常用的api，我們可以使用angular.element，$http,$timeout,ng-init等。

我們不妨再換個角度，如果業務需求，而對於一個新人（比較熟悉jQuery）的話，或許你引入jQuery可以讓它在解決問題，比如使用外掛程式上有更多的選擇，當然這是通過影響程式碼群組織來提高工作效率，隨著對於angular理解的深入，在重構時會逐漸摒棄掉當初引入jquery時的一些代碼。

所以我覺得兩種架構說完全不能一起用肯定是錯的，但是我們還是應該儘力去遵循angular的設計。 10. 如何進行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);        });        });});