這篇文章主要介紹了關(guān)于angular的前端面試題有哪些，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),淶水企業(yè)網(wǎng)站建設(shè),淶水品牌網(wǎng)站建設(shè),網(wǎng)站定制,淶水網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷(xiāo),網(wǎng)絡(luò)優(yōu)化,淶水網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專(zhuān)業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

1，ng-if 跟 ng-show/hide 的區(qū)別有哪些？

第一點(diǎn)區(qū)別是，ng-if 在后面表達(dá)式為 true 的時(shí)候才創(chuàng)建這個(gè) dom 節(jié)點(diǎn)，ng-show 是初始時(shí)就創(chuàng)建了，用 display:block 和 display:none 來(lái)控制顯示和不顯示。

第二點(diǎn)區(qū)別是，ng-if 會(huì)（隱式地）產(chǎn)生新作用域，ng-switch 、 ng-include 等會(huì)動(dòng)態(tài)創(chuàng)建一塊界面的也是如此。

這樣會(huì)導(dǎo)致，在 ng-if 中用基本變量綁定 ng-model，并在外層 p 中把此 model 綁定給另一個(gè)顯示區(qū)域，內(nèi)層改變時(shí)，外層不會(huì)同步改變，因?yàn)榇藭r(shí)已經(jīng)是兩個(gè)變量了。

<p>{{name}}</p>
<div ng-if="true">
	<input type="text" ng-model="name">
</div>

ng-show 不存在此問(wèn)題，因?yàn)樗蛔詭б患?jí)作用域。

避免這類(lèi)問(wèn)題出現(xiàn)的辦法是，始終將頁(yè)面中的元素綁定到對(duì)象的屬性（data.x）而不是直接綁定到基本變量（x）上。

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

會(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)）。

3，ng-click 中寫(xiě)的表達(dá)式，能使用 JS 原生對(duì)象上的方法嗎？

不止是 ng-click 中的表達(dá)式，只要是在頁(yè)面中，都不能直接調(diào)用原生的 JS 方法，因?yàn)檫@些并不存在于與頁(yè)面對(duì)應(yīng)的 Controller 的 $scope 中。

4、factory、service 和 provider 是什么關(guān)系？

factory：把 service 的方法和數(shù)據(jù)放在一個(gè)對(duì)象里，并返回這個(gè)對(duì)象

service：通過(guò)構(gòu)造函數(shù)方式創(chuàng)建 service，返回一個(gè)實(shí)例化對(duì)象

provider：創(chuàng)建一個(gè)可通過(guò) config 配置的 service，$get 中返回的，就是用 factory 創(chuàng)建 service 的內(nèi)容

從底層實(shí)現(xiàn)上來(lái)看，service 調(diào)用了 factory，返回其實(shí)例；factory 調(diào)用了 provider，返回其 $get 中定義的內(nèi)容。factory 和 service 功能類(lèi)似，只不過(guò) factory 是普通 function，可以返回任何東西（return 的都可以被訪問(wèn)，所以那些私有變量怎么寫(xiě)，你懂的）；

service 是構(gòu)造器，可以不返回（綁定到 this 的都可以被訪問(wèn)）；

provider 是加強(qiáng)版 factory，返回一個(gè)可配置的 factory。

5、angular 中控制器之間如何通信？

1、Service

2、events,指定綁定的事件

3、使用 $rootScope

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

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

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

使用的臟檢查機(jī)制，所謂的雙向綁定，其實(shí)就是從界面的操作能實(shí)時(shí)反映到數(shù)據(jù)，數(shù)據(jù)的變更能實(shí)時(shí)展現(xiàn)到界面。AngularJS在$scope變量中使用臟值檢查來(lái)實(shí)現(xiàn)了數(shù)據(jù)雙向綁定，并且可以通過(guò)$scope.$watch來(lái)監(jiān)聽(tīng)變化觸發(fā)回調(diào)；

angular中使用的是臟檢查機(jī)制，在angular中每次你綁定一些東西到你的UI上時(shí)你就會(huì)往$watch隊(duì)列里插入一條$watch，當(dāng)我們的模版加載完畢時(shí)，也就是在linking階段（Angular分為compile階段和linking階段—譯者注），Angular解釋器會(huì)尋找每個(gè)directive，然后生成每個(gè)需要的$watch。

當(dāng)瀏覽器接受到可以被angular context處理的事件時(shí)就會(huì)觸發(fā)digest循環(huán)，這個(gè)循環(huán)是由兩個(gè)更小的循環(huán)組合起來(lái)的，一個(gè)是$watch列表，一個(gè)是$evalAsync列表，而$watch列表在$digest循環(huán)中被“臟值檢查”解析，在digest將會(huì)遍歷我們的watch，然后詢問(wèn)它是否有屬性和值的變化，直到$watch隊(duì)列都檢查過(guò)，在檢查數(shù)據(jù)變化的時(shí)候，由于并不知道這個(gè)事件是對(duì)哪些數(shù)據(jù)進(jìn)行了更改，以及這個(gè)事件有可能造成事件之外的其他任何地方的數(shù)據(jù)更改，所以必須進(jìn)行一次大檢查，將所有“注冊(cè)”過(guò)的值全部檢查一遍，一次檢查稱(chēng)為一個(gè)周期，每次最少檢查兩遍，因?yàn)榈诙橛脕?lái)確認(rèn)，前一遍的變動(dòng)中是否有數(shù)據(jù)的變動(dòng)，導(dǎo)致了其他數(shù)據(jù)的變動(dòng)，如果第二次有變動(dòng)的話，會(huì)再執(zhí)行一遍，直到最后兩次完全一致，則停止檢查（其實(shí)就是個(gè)（遞歸（遍歷））的過(guò)程），考慮到內(nèi)存的消耗和死循環(huán)的風(fēng)險(xiǎn)，臟檢查每個(gè)周期最多遞歸執(zhí)行10遍，如果超過(guò)10遍就會(huì)拋出一個(gè)錯(cuò)誤。當(dāng)$digest循環(huán)結(jié)束時(shí)，DOM相應(yīng)地變化。
在angular中

ng-click，ng-change，ng-blur...就是對(duì)各類(lèi)用戶事件的封裝

$timeout，$http，$window，$location...就是對(duì)各種JS/API事件的封裝

ng-model，以及控制器中的數(shù)據(jù)，就是對(duì)值的“注冊(cè)”

$scope 本質(zhì)是一個(gè)總的事件邏輯的封裝容器，同時(shí)抽象為數(shù)據(jù)載體，實(shí)質(zhì)上數(shù)據(jù)都存在于瀏覽器堆內(nèi)存中

$scope.apply() & $scope.digest() 即Angular中的“數(shù)據(jù)大檢查”的function

所以如果我們使用了非Angular封裝的事件改編數(shù)據(jù)時(shí)，要手動(dòng)執(zhí)行一次大檢查

由于Angular這種臟檢查的方法效率不高，如果一個(gè)頁(yè)面綁定的view超過(guò)2000個(gè)，就可能存在比較明顯的性能問(wèn)題，官方稱(chēng)之為“臟檢查”

舉個(gè)例子

<button ng-click="val=val+1">increase 1</button>

click 時(shí)會(huì)產(chǎn)生一次更新的操作（至少觸發(fā)兩次 $digest 循環(huán)）

按下按鈕瀏覽器接收到一個(gè)事件，進(jìn)入到angular context

$digest 循環(huán)開(kāi)始執(zhí)行，查詢每個(gè) $watch 是否變化

由于監(jiān)視$scope.val 的 $watch 報(bào)告了變化，因此強(qiáng)制再執(zhí)行一次 $digest 循環(huán) 新的 $digest 循環(huán)未檢測(cè)到變化

瀏覽器拿回控制器，更新 $scope.val 新值對(duì)應(yīng)的 dom

$digest 循環(huán)的上限是 10 次（超過(guò) 10次后拋出一個(gè)異常，防止無(wú)限循環(huán)）。

7、一個(gè) angular 應(yīng)用應(yīng)當(dāng)如何良好地分層？

目錄結(jié)構(gòu)的劃分

對(duì)于小型項(xiàng)目，可以按照文件類(lèi)型組織，比如：

css
js
  controllers 
  models 
  services 
  filters 
templates

但是對(duì)于規(guī)模較大的項(xiàng)目，最好按業(yè)務(wù)模塊劃分，比如：

css
modules
  account 
    controllers 
    models 
    services 
    filters 
    templates 
  disk 
    controllers 
    models 
    services 
    filters 
    templates

modules 下最好再有一個(gè) common 目錄來(lái)存放公共的東西。

邏輯代碼的拆分

作為一個(gè) MVVM 框架，Angular 應(yīng)用本身就應(yīng)該按照 模型，視圖模型（控制器），視圖來(lái)劃分。

這里邏輯代碼的拆分，主要是指盡量讓 controller 這一層很薄。提取共用的邏輯到 service 中 （比如后臺(tái)數(shù)據(jù)的請(qǐng)求，數(shù)據(jù)的共享和緩存，基于事件的模塊間通信等），提取共用的界面操作到 directive 中（比如將日期選擇、分頁(yè)等封裝成組件等），提取共用的格式化操作到 filter 中等等。

在復(fù)雜的應(yīng)用中，也可以為實(shí)體建立對(duì)應(yīng)的構(gòu)造函數(shù)，比如硬盤(pán)（Disk）模塊，可能有列表、新建、詳情這樣幾個(gè)視圖，并分別對(duì)應(yīng)的有 controller，那么可以建一個(gè) Disk 構(gòu)造函數(shù)，里面完成數(shù)據(jù)的增刪改查和驗(yàn)證操作，有跟 Disk 相關(guān)的 controller，就注入 Disk 構(gòu)造器并生成一個(gè)實(shí)例，這個(gè)實(shí)例就具備了增刪改查和驗(yàn)證方法。這樣既層次分明，又實(shí)現(xiàn)了復(fù)用（讓 controller 層更薄了）。

8、angular 應(yīng)用常用哪些路由庫(kù)，各自的區(qū)別是什么？

Angular1.x 中常用 ngRoute 和 ui.router，還有一種為 Angular2 設(shè)計(jì)的 new router（面向組件）。后面那個(gè)沒(méi)在實(shí)際項(xiàng)目中用過(guò)，就不講了。

無(wú)論是 ngRoute 還是 ui.router，作為框架額外的附加功能，都必須以 模塊依賴(lài) 的形式被引入。

區(qū)別

ngRoute 模塊是 Angular 自帶的路由模塊，而 ui.router 模塊是基于 ngRoute模塊開(kāi)發(fā)的第三方模塊。

ui.router 是基于 state （狀態(tài)）的， ngRoute 是基于 url 的，ui.router模塊具有更強(qiáng)大的功能，主要體現(xiàn)在視圖的嵌套方面。

使用 ui.router 能夠定義有明確父子關(guān)系的路由，并通過(guò) ui-view 指令將子路由模版插入到父路由模板的 <p ui-view></p>中去，從而實(shí)現(xiàn)視圖嵌套。而在 ngRoute 中不能這樣定義，如果同時(shí)在父子視圖中 使用了 <p ng-view></p>會(huì)陷入死循環(huán)。

分屬不同團(tuán)隊(duì)進(jìn)行開(kāi)發(fā)的 angular 應(yīng)用，如果要做整合，可能會(huì)遇到哪些問(wèn)題，如何解決？
可能會(huì)遇到不同模塊之間的沖突。

比如一個(gè)團(tuán)隊(duì)所有的開(kāi)發(fā)在 moduleA 下進(jìn)行，另一團(tuán)隊(duì)開(kāi)發(fā)的代碼在 moduleB 下

angular.module('myApp.moduleA', [])
    .factory('serviceA', function(){ 
        ... 
    }) 
angular.module('myApp.moduleB', [])
    .factory('serviceA', function(){ 
        ... 
    })    

angular.module('myApp', ['myApp.moduleA', 'myApp.moduleB'])

會(huì)導(dǎo)致兩個(gè) module 下面的 serviceA 發(fā)生了覆蓋。

貌似在 Angular1.x 中并沒(méi)有很好的解決辦法，所以最好在前期進(jìn)行統(tǒng)一規(guī)劃，做好約定，嚴(yán)格按照約定開(kāi)發(fā)，每個(gè)開(kāi)發(fā)人員只寫(xiě)特定區(qū)塊代碼。

9、angular 的缺點(diǎn)有哪些？

強(qiáng)約束

導(dǎo)致學(xué)習(xí)成本較高，對(duì)前端不友好。

但遵守 AngularJS 的約定時(shí)，生產(chǎn)力會(huì)很高，對(duì) Java 程序員友好。

不利于 SEO

因?yàn)樗袃?nèi)容都是動(dòng)態(tài)獲取并渲染生成的，搜索引擎沒(méi)法爬取。

一種解決辦法是，對(duì)于正常用戶的訪問(wèn)，服務(wù)器響應(yīng) AngularJS 應(yīng)用的內(nèi)容；對(duì)于搜索引擎的訪問(wèn)，則響應(yīng)專(zhuān)門(mén)針對(duì) SEO 的HTML頁(yè)面。

性能問(wèn)題

作為 MVVM 框架，因?yàn)閷?shí)現(xiàn)了數(shù)據(jù)的雙向綁定，對(duì)于大數(shù)組、復(fù)雜對(duì)象會(huì)存在性能問(wèn)題。

可以用來(lái) 優(yōu)化 Angular 應(yīng)用的性能 的辦法：

減少監(jiān)控項(xiàng)（比如對(duì)不會(huì)變化的數(shù)據(jù)采用單向綁定）

主動(dòng)設(shè)置索引（指定 track by，簡(jiǎn)單類(lèi)型默認(rèn)用自身當(dāng)索引，對(duì)象默認(rèn)使用 $$hashKey，比如改為 track by item.id）
降低渲染數(shù)據(jù)量（比如分頁(yè)，或者每次取一小部分?jǐn)?shù)據(jù)，根據(jù)需要再取）

數(shù)據(jù)扁平化（比如對(duì)于樹(shù)狀結(jié)構(gòu)，使用扁平化結(jié)構(gòu)，構(gòu)建一個(gè) map 和樹(shù)狀數(shù)據(jù)，對(duì)樹(shù)操作時(shí)，由于跟扁平數(shù)據(jù)同一引用，樹(shù)狀數(shù)據(jù)變更會(huì)同步到原始的扁平數(shù)據(jù)）

另外，對(duì)于Angular1.x ，存在 臟檢查和 模塊機(jī)制的問(wèn)題。

移動(dòng)端

可嘗試 Ionic，但并不完善。

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

通俗的說(shuō)$rootScrope 頁(yè)面所有$scope的父親

如何產(chǎn)生$rootScope和$scope吧。

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

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

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

**11、如何取消 $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(); 
  ... 
 }
});

12、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á)式，常見(jiàn)我們?cè)O(shè)置一些需要執(zhí)行的函數(shù)

13、$apply()和 $digest()的區(qū)別

安全性：$apply()可以接收一個(gè)參數(shù)作為function()，這個(gè) function 會(huì)被包裝到一個(gè) try … catch 塊中，所以一旦有異常發(fā)生，該異常會(huì)被 $exceptionHandler service 處理。

$apply會(huì)使ng進(jìn)入 $digest cycle , 并從$rootScope開(kāi)始遍歷(深度優(yōu)先)檢查數(shù)據(jù)變更。

$digest僅會(huì)檢查該scope和它的子scope，當(dāng)你確定當(dāng)前操作僅影響它們時(shí)，用$digest可以稍微提升性能。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“關(guān)于angular的前端面試題有哪些”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

文章名稱(chēng)：關(guān)于angular的前端面試題有哪些
文章出自：http://chinadenli.net/article24/pgpije.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、關(guān)鍵詞優(yōu)化、外貿(mào)網(wǎng)站建設(shè)、外貿(mào)建站、小程序開(kāi)發(fā)、App開(kāi)發(fā)

廣告

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