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

公司主營業(yè)務(wù)：成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出蓮湖免費(fèi)做網(wǎng)站回饋大家。

1、angular 的數(shù)據(jù)綁定采用什么機(jī)制？詳述原理

答案：臟檢查機(jī)制。

解析：

雙向數(shù)據(jù)綁定是 AngularJS 的核心機(jī)制之一。當(dāng) view 中有任何數(shù)據(jù)變化時(shí)，會(huì)更新到 model ，當(dāng) model 中數(shù)據(jù)有變化時(shí)，view 也會(huì)同步更新，顯然，這需要一個(gè)監(jiān)控。

原理就是，Angular 在 scope 模型上設(shè)置了一個(gè)監(jiān)聽隊(duì)列，用來監(jiān)聽數(shù)據(jù)變化并更新 view 。每次綁定一個(gè)東西到 view 上時(shí) AngularJS 就會(huì)往 $watch 隊(duì)列里插入一條 $watch ，用來檢測它監(jiān)視的 model 里是否有變化的東西。當(dāng)瀏覽器接收到可以被 angular context 處理的事件時(shí)， $digest 循環(huán)就會(huì)觸發(fā)，遍歷所有的 $watch ，最后更新 dom。

2、AngularJS 的數(shù)據(jù)雙向綁定是怎么實(shí)現(xiàn)的？

答案：

1、每個(gè)雙向綁定的元素都有一個(gè) watcher

2、在某些事件發(fā)生的時(shí)候，調(diào)用 digest 臟數(shù)據(jù)檢測。

這些事件有：表單元素內(nèi)容變化、Ajax 請求響應(yīng)、點(diǎn)擊按鈕執(zhí)行的函數(shù)等。

3、臟數(shù)據(jù)檢測會(huì)檢測 rootscope 下所有被 watcher 的元素。

$digest 函數(shù)就是臟數(shù)據(jù)監(jiān)測

3、在使用 angularjs 項(xiàng)目開發(fā)中 你使用過那些第三方的插件

答案：AngularUi ui-router oclazyload 等等

4、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.

5、解釋下什么是r o o t S c r o p e 以 及 和 rootScrope以及和rootScrope以及和scope 的區(qū)別？

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

解析：

我們來看下如何產(chǎn)生r o o t S c o p e 和 rootScope和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 對象實(shí)例。

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

答案：

• Service

• events,指定綁定的事件

• 使用 $rootScope

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

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

7、表達(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è)作用域上。

8、angular 中的$http

答案：$http 是 AngularJS 中的一個(gè)核心服務(wù)，用于讀取遠(yuǎn)程服務(wù)器的數(shù)據(jù)。

我們可以使用內(nèi)置的h t t p 服 務(wù) 直 接 同 外 部 進(jìn) 行 通 信 。 http服務(wù)直接同外部進(jìn)行通信。http服務(wù)直接同外部進(jìn)行通信。http 服務(wù)只是簡單的封裝了瀏覽器原生的 XMLHttpRequest 對象。

9、ng-repeat 迭代數(shù)組的時(shí)候，如果數(shù)組中有相同值，會(huì)有什么問題，如何解決？

答案：會(huì)提示 Duplicates in a repeater are not allowed. 加 track by $index 可解決。當(dāng)然，也可以 trace by 任何一個(gè)普通的值，只要能唯一性標(biāo)識(shí)數(shù)組中的每一項(xiàng)即可（建立 dom 和數(shù)據(jù)之間的關(guān)聯(lián)）

10、angularjs 是 mvc 還是 mvvm 框架

答案：mvvm

解析：

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

首先為什么我們會(huì)需要 MVC？因?yàn)殡S著代碼規(guī)模越來越大，切分職責(zé)是大勢所趨，還有為了后期維護(hù)方便，修改一塊功能不影響其他功能。還有為了復(fù)用，因?yàn)楹芏噙壿嬍且粯拥?。?MVC 只是手段，終極目標(biāo)是模塊化和復(fù)用。

mvvm 的優(yōu)點(diǎn)

低耦合：View 可以獨(dú)立于 Model 變化和修改，同一個(gè) ViewModel 可以被多個(gè) View 復(fù)用；并且可以做到 View 和 Model 的變化互不影響；

可重用性：可以把一些視圖的邏輯放在 ViewModel，讓多個(gè) View 復(fù)用；

獨(dú)立開發(fā)：開發(fā)人員可以專注與業(yè)務(wù)邏輯和數(shù)據(jù)的開發(fā)（ViewModemvvmdi 計(jì)人員可以專注于 UI(View)的設(shè)計(jì)；

可測試性：清晰的 View 分層，使得針對表現(xiàn)層業(yè)務(wù)邏輯的測試更容易，更簡單。

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

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

ViewModel：它是 View 和 Model 的粘合體，負(fù)責(zé) View 和 Model 的交互和協(xié)作，它負(fù)責(zé)給 View 提供顯示的數(shù)據(jù)，以及提供了 View 中 Command 事件操作 Model 的途徑；在 angular 中$scope 對象充當(dāng)了這個(gè) ViewModel 的角色；

Model：它是與應(yīng)用程序的業(yè)務(wù)邏輯相關(guān)的數(shù)據(jù)的封裝載體，它是業(yè)務(wù)領(lǐng)域的對象，Model 并不關(guān)心會(huì)被如何顯示或操作，所以模型也不會(huì)包含任何界面顯示相關(guān)的邏輯。在 web 頁面中，大部分 Model 都是來自 Ajax 的服務(wù)端返回?cái)?shù)據(jù)或者是全局的配置對象；而 angular 中的 service 則是封裝和處理這些與 Model 相關(guān)的業(yè)務(wù)邏輯的場所，這類的業(yè)務(wù)服務(wù)是可以被多個(gè) Controller 或者其他 service 復(fù)用的領(lǐng)域服務(wù)。

Controller：這并不是 MVVM 模式的核心元素，但它負(fù)責(zé) ViewModel 對象的初始化，它將組合一個(gè)或者多個(gè) service 來獲取業(yè)務(wù)領(lǐng)域 Model 放在 ViewModel 對象上，使得應(yīng)用界面在啟動(dòng)加載的時(shí)候達(dá)到一種可用的狀態(tài)。

mvc 的界面和邏輯關(guān)聯(lián)緊密，數(shù)據(jù)直接從數(shù)據(jù)庫讀取。mvvm 的界面與 viewmode 是松耦合，界面數(shù)據(jù)從 viewmodel 中獲取。所以 angularjs 更傾向于 mvvm

11、angularjs 中$scope，controller，directive，sevice 在 mvvm 中充當(dāng)什么角色

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

12、在 angular 項(xiàng)目中你如何控制靜態(tài)資源的合理加載

答案：暫無

13、在寫 controlloer 邏輯的時(shí)候 你需要注意什么？

答案：

1.簡化代碼（這個(gè)是所有開發(fā)人員都要具備的）

2.堅(jiān)決不能操作 dom 節(jié)點(diǎn) 這個(gè)時(shí)候可能會(huì)問 為什么不能啊

你的回答是：DOM 操作只能出現(xiàn)在指令（directive）中。最不應(yīng)該出現(xiàn)的位置就是服務(wù)（service）中。Angular 倡導(dǎo)以測試驅(qū)動(dòng)開發(fā)，在 service 或者 controller 中出現(xiàn)了 DOM 操作，那么也就意味著的測試是無法通過的。當(dāng)然，這只是一點(diǎn)，重要的是使用 Angular 的其中一個(gè)好處是啥，那就是雙向數(shù)據(jù)綁定，這樣就能專注于處理業(yè)務(wù)邏輯，無需關(guān)系一堆堆的 DOM 操作。如果在 Angular 的代碼中還到處充斥著各種 DOM 操作，那為什么不直接使用 jquery 去開發(fā)呢。

測試驅(qū)動(dòng)開發(fā)是什么呢？普及一下：

測試驅(qū)動(dòng)開發(fā)，英文全稱 Test-Driven Development，簡稱 TDD，是一種不同于傳統(tǒng)軟件開發(fā)流程的新型的開發(fā)方法。它要求在編寫某個(gè)功能的代碼之前先編寫測試代碼，然后只編寫使測試通過的功能代碼，通過測試來推動(dòng)整個(gè)開發(fā)的進(jìn)行。這有助于編寫簡潔可用和高質(zhì)量的代碼，并加速開發(fā)過程。

14、controller 之間怎么通訊

答案：

1、event

這里可以有兩種方式，一種是s c o p e . scope.scope.emit，然后通過監(jiān)聽r o o t S c o p e 的 事 件 獲 取 參 數(shù) ； 另 一 種 是 rootScope的事件獲取參數(shù)；另一種是rootScope的事件獲取參數(shù)；另一種是rootScope.b r o a d c a s t ， 通 過 監(jiān) 聽 broadcast，通過監(jiān)聽broadcast，通過監(jiān)聽scope 的事件獲取參數(shù)。

這兩種方法在最新版本的 Angular 中已經(jīng)沒有性能區(qū)別了，主要就是事件發(fā)送的方向不同，可以按實(shí)際情況選擇。

2、service

可以創(chuàng)建一個(gè)專用的事件 Service，也可以按照業(yè)務(wù)邏輯切分，將數(shù)據(jù)存儲(chǔ)在相應(yīng)的 Service 中

3、$rootScope

這個(gè)方法可能會(huì)比較 dirty 一點(diǎn)，勝在方便，也就是把數(shù)據(jù)存在r o o t S c o p e 中 ， 這 樣 各 個(gè) 子 rootScope中，這樣各個(gè)子rootScope中，這樣各個(gè)子scope 都可以調(diào)用，不過需要注意一下生命周期

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

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

另外就是通過本地存儲(chǔ)、全局變量或者現(xiàn)代瀏覽器的 postMessage 來傳遞參數(shù)了，除非特殊情況，請避免這類方式。

15.自定義指令的幾個(gè)參數(shù)

答案：

說幾個(gè)常用的如：

restrict:指令在 dom 中的聲明形式 E（元素）A（屬性）C（類名）M（注釋）

template：兩種形式，一種 HTML 文本；一個(gè)可以接受兩個(gè)參數(shù)的函數(shù)，tElemetn 和 tAttrs，并返回一個(gè)代表模板的字符串。模板字符串必須存在一個(gè)根 DOM 元素

templateUrl:兩種形式，一種代表外部 HTML 文件路徑的字符串；一個(gè)可以接受兩個(gè)參數(shù)的函數(shù)，參數(shù)為 tElement 和 tAttrs，并返回一個(gè)外部 HTML 文件路徑的字符串

compile (對象或函數(shù))：compile 選項(xiàng)可以返回一個(gè)對象或函數(shù)。如果設(shè)置了 compile 函數(shù),說明我們希望在指令和實(shí)時(shí)數(shù)據(jù)被放到 DOM 中之前進(jìn)行 DOM 操作,在這個(gè)函數(shù)中進(jìn)行諸如添加和刪除節(jié)點(diǎn)等 DOM 操作是安全的。本質(zhì)上,當(dāng)我們設(shè)置了 link 選項(xiàng),實(shí)際上是創(chuàng)建了一個(gè) postLink() 鏈接函數(shù),以便 compile() 函數(shù)可以定義鏈接函數(shù)。

compile 和 link 的區(qū)別：

編譯的時(shí)候，compile 轉(zhuǎn)換 dom，碰到綁定監(jiān)聽器的地方就先存著，有幾個(gè)存幾個(gè)，到最后匯總成一個(gè) link 函數(shù)，一并執(zhí)行，提升了性能。

16.angular 和 jquery 的區(qū)別

答案：

angular 是基于數(shù)據(jù)驅(qū)動(dòng)，所以 angular 適合做數(shù)據(jù)操作比較繁瑣的項(xiàng)目

jquery 是基于 dom 驅(qū)動(dòng)，jquery 適合做 dom 操作多的項(xiàng)目

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

答案：

Angular 對 input 元素的 type 進(jìn)行了擴(kuò)展，一共提供了以下 10 種類型：

• text

• number

• url

• email

• radio

• checkbox

• hidden

• button

• submit

• reset

Angular 為表單內(nèi)置了 4 中 CSS 樣式。

• ng-valid 校驗(yàn)合法狀態(tài)

• ng-invalid 校驗(yàn)非法狀態(tài)

• ng-pristine 如果要使用原生的 form，需要設(shè)置這個(gè)值

• ng-dirty 表單處于臟數(shù)據(jù)狀態(tài)

Angular 在對表單進(jìn)行自動(dòng)校驗(yàn)的時(shí)候會(huì)校驗(yàn) Model 上的屬性，如果不設(shè)置 ng-model，則 Angular 無法知道 myForm.$invalid 這個(gè)值是否為真。

校驗(yàn)的一下內(nèi)容

• required 表示是否輸入內(nèi)容

• ng-maxlength 最大長度

• ng-minlength 最小長度

18.fliter 是什么你了解的有多少？實(shí)現(xiàn)一個(gè)自定義 fliter

答案：

• date（日期）

• currency（貨幣）

• limitTo（限制數(shù)組或字符串長度）

• orderBy（排序）

• lowercase（小寫）

• uppercase（大寫）

• number（格式化數(shù)字，加上千位分隔符，并接收參數(shù)限定小數(shù)點(diǎn)位數(shù)）

• filter（處理一個(gè)數(shù)組，過濾出含有某個(gè)子串的元素）

• json（格式化 json 對象）

filter 有兩種使用方法，

一種是直接在頁面里：

{{now | date : ‘yyyy-MM-dd’}}

另一種是在 js 里面用：

$filter(‘過濾器名稱’)(需要過濾的對象, 參數(shù) 1, 參數(shù) 2,…)
$filter(‘date’)(now, 'yyyy-MM-dd hh:mm:ss’);

自定義一個(gè)去重?cái)?shù)組的

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面試題實(shí)例分析”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！