常見angular面試題實例分析

本篇內容主要講解“常見angular面試題實例分析”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“常見angular面試題實例分析”吧!

1、angular 的數據綁定采用什么機制？詳述原理

答案：臟檢查機制。

解析：

雙向數據綁定是 AngularJS 的核心機制之一。當 view 中有任何數據變化時，會更新到 model ，當 model 中數據有變化時，view 也會同步更新，顯然，這需要一個監控。

原理就是，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 等等

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() 函數可以定義鏈接函數。

compile 和 link 的區別：

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

16.angular 和 jquery 的區別

答案：

angular 是基于數據驅動，所以 angular 適合做數據操作比較繁瑣的項目

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 最小長度

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

到此，相信大家對“常見angular面試題實例分析”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！