18個常見angular面試題（附答案分析）

這篇文章給大家總結分享18個常見angular面試題（附答案分析）帶你梳理基礎知識，增強angular知識儲備，值得收藏，快來看看吧！

1、angular 的資料綁定採用什麼機制？詳述原理

答案：髒檢查機制。

解析：

雙向資料綁定是 AngularJS 的核心機制之一。當 view 中有任何資料變化時，會更新到 model ，當 model 中資料有變化時，view 也會同步更新，顯然，這需要一個監控。 【相關教學推薦：《angular教學》】

原理就是，Angular 在 scope 模型上設定了一個監聽佇列，用來監聽資料變更並更新 view 。每次將東西綁定到 view 上時 AngularJS 就會往 $watch 佇列插入一條 $watch ，用來偵測它監視的 model 是否有變化的東西。當瀏覽器接收到可以被 angular context 處理的事件時， $digest 循環就會觸發，遍歷所有的 $watch ，最後更新 dom。

2、AngularJS 的資料雙向綁定是怎麼實現的？

答案：

1、每個雙向綁定的元素都有一個watcher

2、在某些事件發生的時候，呼叫digest 髒數據檢測。

這些事件有：表單元素內容變化、Ajax 請求回應、點擊按鈕執行的函數等。

3、髒資料偵測會偵測 rootscope 下所有被 watcher 的元素。

$digest 函數就是髒數據監控

3、在使用angularjs 專案開發中你使用過那些第三方的外掛程式

答案：AngularUi ui-router oclazyload 等等附上一篇文章仔細去看看https://segmentfault.com/a/1190000003858219

4、ng-show/ng-hide 與ng-if 的區別？

答案：我們都知道 ng-show/ng-hide 其實是透過 display 來進行隱藏和顯示的。而 ng-if 實際上控制 dom 節點的增刪除來實現的。因此如果我們是根據不同的條件來進行dom 節點的載入的話，那麼ng-if 的效能好過ng-show.

5、解釋下什麼是r o o t S c r o p e 以及和rootScrope以及和rootScrope以及和scope 的差別？

答案：通俗的說r o o t S c r o p e 頁 面 所 有 rootScrope 頁面所有rootScrope頁所有scope 的父親。

解析：

我們來看下如何產生r o o t S c o p e 和 rootScope和rootScope和scope 吧。

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

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

step3:接著會解析帶有 ng-controller 的 div 然後指向到某個 controller 函數。這個時候在這個 controller 函數變成一個$scope 物件實例。

6、列出至少三種實作不同模組之間通訊方式？

答案：

• Service
• events,指定綁定的事件
• #使用$rootScope
• controller之間直接使用$parent, $$childHead 等
• directive 指定屬性進行資料綁定

7、表達式{{yourModel}} 是如何工作的？

#答案：

它依賴$interpolation服務，在初始化頁面html後，它會找到這些表達式，並且進行標記，於是每遇見一個{{ }} ，則會設定一個$watch 。而 $interpolation 會傳回一個帶有上下文參數的函數，最後該函數執行，則算是表達式 $parse 到那個作用域上。

8、angular 中的$http

答案：$http 是 AngularJS 中的一個核心服務，用於讀取遠端伺服器的資料。

我們可以使用內建的h t t p 服 務 直 接 同 外 部 進 行 通 信 。 http服務直接同外部進行通訊。 http服務直接同外部進行通訊。 http 服務只是簡單的封裝了瀏覽器原生的 XMLHttpRequest 物件。

9、ng-repeat 迭代數組的時候，如果數組中有相同值，會有什麼問題，如何解決？

答案：會提示 Duplicates in a repeater are not allowed. 加 track by $index 可解決。當然，也可以trace by 任何一個普通的值，只要能唯一性標識數組中的每一項即可（建立dom 和數據之間的關聯）

10、angularjs 是mvc 還是mvvm 框架

答案：mvvm

解析：

#首先闡述下你對mvc 和mvvm 的理解:

首先為什麼我們會需要MVC？因為隨著程式碼規模越來越大，切分職責是大勢所趨，還有為了後期維護方便，修改一塊功能不影響其他功能。還有為了復用，因為很多邏輯都是一樣的。而 MVC 只是手段，終極目標是模組化和重複使用。

mvvm 的優點

低耦合：View 可以獨立於Model 變化和修改，同一個ViewModel 可以被多個View 復用；並且可以做到View 和Model 的變化互不影響；

可重複使用性：可以把一些視圖的邏輯放在ViewModel，讓多個View 重複使用；

獨立開發：開發人員可以專注與業務邏輯和資料的開發（ViewModemvvmdi 計量器可以專注於UI(View)的設計；

可測試性：清晰的View 分層，使得針對錶現層業務邏輯的測試更容易，更簡單。

在angular 中MVVM 模式主要分為四部分：

View：它專注於介面的顯示和渲染，在angular 中則是包含一堆聲明式Directive 的視圖模板。

ViewModel：它是View 和Model 的黏合體，負責View 和Model 的互動和協作，它負責提供View 顯示的數據，以及提供了View 中Command 事件操作Model 的途徑；在angular 中$scope 物件充當了這個ViewModel 的角色；

Model：它是與應用程式的業務邏輯相關的資料的封裝載體，它是業務領域的對象，Model 並不關心會被如何顯示或操作，所以模型也不會包含任何介面顯示相關的邏輯。在web 頁面中，大部分Model 都是來自Ajax 的服務端回傳資料或是全域的設定物件；而angular 中的service 則是封裝和處理這些與Model 相關的業務邏輯的場所，這類的業務服務是可以被多個Controller 或者其他service 重複使用的領域服務。

Controller：這並不是MVVM 模式的核心元素，但它負責ViewModel 物件的初始化，它將組合一個或多個service 來取得業務領域Model 放在ViewModel 對象上，使得應用程式介面在啟動載入的時候達到一種可用的狀態。

mvc 的介面和邏輯關聯緊密，資料直接從資料庫讀取。mvvm 的介面與viewmode 是松耦合，介面資料從viewmodel 中獲取。所以angularjs 更傾向於mvvm

11、angularjs 中$scope，controller，directive，sevice 在mvvm 中充當什麼角色

#答案：如果你不知道，第一題的分析以及很明確，仔細再仔細的看一遍

12、在angular 項目中你如何控制靜態資源的合理加載

答案：暫無

13、在寫controlloer 邏輯的時候你需要注意什麼？

#答案：

1.簡化程式碼（這是所有開發人員都要具備的）

2.堅決無法操作dom 節點這個時候可能會問為什麼不能啊

你的答案是：DOM 操作只能出現在指令（directive）中。最不應該出現的位置就是服務（service）中。 Angular 倡導以測試驅動開發，在 service 或 controller 中出現了 DOM 操作，那麼也就意味著的測試是無法通過的。當然，這只是一點，重要的是使用 Angular 的其中一個好處是啥，那就是雙向資料綁定，這樣就能專注於處理業務邏輯，而無需關係一堆堆的 DOM 操作。如果在 Angular 的程式碼中還到處充斥著各種 DOM 操作，那為什麼不直接使用 jquery 去開發呢。

測試驅動開發是什麼呢？普及：

測試驅動開發，英文全名為 Test-Driven Development，簡稱 TDD，是一種不同於傳統軟體開發流程的新型的開發方法。它要求在編寫某個功能的程式碼之前先編寫測試程式碼，然後只編寫使測試通過的功能程式碼，透過測試來推動整個開發的進行。這有助於編寫簡潔可用且高品質的程式碼，並加速開發過程。

14、controller 之間怎麼通訊

答案：

1、event

這裡可以有兩種方式，一種是s c o p e . scope.scope.emit，然後透過監聽r o o t S c o p e 的事件取得參數； 另一種是rootScope的事件取得參數；另一種是rootScope的事件取得參數；另一種是rootScope.b r o a d c a s t ， 透過監聽broadcast，透過監聽broadcast，透過監聽scope 的事件取得參數。

這兩種方法在最新版本的 Angular 中已經沒有效能區別了，主要就是事件發送的方向不同，可以按實際情況選擇。

2、service

可以建立一個專用的事件Service，也可以依照業務邏輯切分，將資料儲存在對應的Service 中

3、$rootScope

這個方法可能會比較dirty 一點，勝在方便，也就是把資料存在r o o t S c o p e 中， 這樣各個子rootScope中，這樣各個子rootScope中，這樣各個子scope 都可以調用，不過需要注意一下生命週期

4、直接使用s c o p e . scope.scope.$nextSibling 及類似的屬性

類似的還有s c o p e . scope.scope.parent。這個方法的缺點就更多了，官方不建議使用任何$$開頭的屬性，既增加了耦合，又需要處理非同步的問題，而且 scope 的順序也不是固定的。不推薦

另外就是透過本地儲存、全域變數或現代瀏覽器的 postMessage 來傳遞參數了，除非特殊情況，請避免這類方式。

15.自訂指令的幾個參數

答案：

說幾個常用的如：

restrict:指令在dom 中的宣告形式E（元素）A（屬性）C（類別名稱）M（註解）

template：兩種形式，一種HTML 文字；一個可以接受兩個參數的函數， tElemetn 和tAttrs，並傳回一個代表模板的字串。模板字串必須存在一個根DOM 元素

templateUrl:兩種形式，一種代表外部HTML 檔案路徑的字串；一個可以接受兩個參數的函數，參數為tElement 和tAttrs，並傳回一個外部HTML 檔案路徑的字串

compile (物件或函數)：compile 選項可以傳回一個物件或函數。如果設定了 compile 函數,說明我們希望在指令和即時資料被放到 DOM 之前進行 DOM 操作,在這個函數中進行諸如添加和刪除節點等 DOM 操作是安全的。本質上,當我們設定了 link 選項,實際上是創建了一個 postLink() 連結函數,以便 compile() 函數可以定義連結函數。

然後又是傳送門：http://www.cnblogs.com/mliudong/p/4180680.html

compile 和link 的差別：

#編譯的時候，compile 轉換dom，碰到綁定監聽器的地方就先存著，有幾個存幾個，到最後匯總成一個link 函數，一併執行，提升了性能。

16.angular 和jquery 的區別

答案：

angular 是基於資料驅動，所以angular 適合做資料操作比較繁瑣的專案（這裡可以再提一下單頁應用，如果你不會福利又來了http://www.zhihu.com/question/20792064）

jquery 是基於dom 驅動，jquery 適合做dom 操作多的項目

17.對angular 中的form 表單了解多少

答案：

Angular 對input 元素的type 進行了擴展，一共提供了以下10 種類型：

• text

• number

• ##url

• #email

• radio

• #checkbox

• hidden

#button
submit
#reset

• ##Angular 為表單內建了4 中CSS 樣式。

• ng-valid 校驗合法狀態

ng-invalid 校驗非法狀態

• ng-pristine 如果要使用原生的form，需要設定這個值

• ng-dirty 表單處於髒資料狀態

• Angular 在對表單進行自動校驗的時候會校驗Model 上的屬性，如果不設定ng-model，則Angular 無法知道myForm.$invalid 這個值是否為真。
  校驗的一下內容

required 表示是否輸入內容

ng-maxlength 最大長度

• #ng-minlength 最小長度

• 範例：傳送門https://github.com/18500047564/clutter

#18. fliter 是什麼你了解的有多少？實作一個自訂fliter

• 答案：

• #date（日期）

• currency（貨幣）

• limitTo（限制陣列或字串長度）

• orderBy（排序）

• lowercase（小寫)

• uppercase（大寫）

#number（格式化數字，加上千位分隔符，並接收參數限定小數點位數）

filter（處理一個數組，過濾出含有某個子字串的元素）

json（格式化json 物件）

######filter 有兩種使用方法，######一種是直接在頁面裡：###

<p>{{now | date : ‘yyyy-MM-dd’}}</p>

###另一種是在js 裡面用：###

$filter(‘过滤器名称’)(需要过滤的对象, 参数 1, 参数 2,…)
$filter(‘date’)(now, 'yyyy-MM-dd hh:mm:ss’);

# ##自訂一個去重數組的###

app.filter("unique", function() {
  return function(arr) {
    var n = [];
    var obj = {};

    for (var i = 0; i < arr.length; i++) {
      if (!obj[arr[i]]) {
        n.push(arr[i]);
        obj[arr[i]] = 1;
      }
    }

    return n;
  };
});

###更多程式相關知識，請造訪：###程式設計教學###！ ！ ###

以上是18個常見angular面試題（附答案分析）的詳細內容。更多資訊請關注PHP中文網其他相關文章！