50個你必須掌握的Angular面試題（收藏）

這篇文章跟大家分享50個必須掌握的Angular面試題，會從初學者-中級-高級三個部分來解析這50個面試題，帶大家吃透它們！

我們整理了一份主要的Angular面試問題清單，分為三個部分：

• 角度面試問題–初學者程度
• 角度面試問題–中級
• 角度面試問題–進階

【相關教學推薦：《angular教學》】

初學者程度–面試問題

1.區分Angular和AngularJS。

##Angular#支援MVC設計模型使用元件和指令推薦語言：JavaScript推薦語言：TypeScript圖片/屬性和事件需要特定的ng指令使用（）綁定事件，使用[]進行屬性綁定#不提供任何移動支援#提供行動支援#$ routeprovider.when（）用於路由設定

	##AngularJS
建築
語言
#表達式語法
行動支援
路由
@RouteConfig {（…）}用於路由配置		#依賴注入
不支援依賴注入的概念支援基於樹的單向變更偵測的分層依賴注入		#結構體
難以管理簡化的結構，使大型應用程式的開發和維護更加容易

#透過雙向資料綁定，開發工作和時間得以減少######升級功能比AngularJS更快##################支援#### ########不再提供支援或新的更新######積極的支援和頻繁的新更新############

2.什麼是Angular？

Angular是一個開放原始碼的前端Web框架。它是最受歡迎的JavaScript框架之一，主要由Google維護。它提供了一個輕鬆開發基於Web的應用程式的平台，並使前端開發人員能夠管理跨平台應用程式。它整合了強大的功能，例如聲明性模板，端到端工具，依賴項注入以及各種其他使開發路徑更流暢的最佳實踐。

3.使用Angular有什麼優勢？

下面列出了使用Angular框架的一些主要優點：

• 支援雙向資料綁定
• 它遵循MVC模式架構
• 它支援靜態模板和Angular模板
• 您可以新增自訂指令
• #它也支援RESTfull服務
• 支援驗證
• 客戶端和伺服器之間的通訊便利
• 支援依賴注入
• 具有強大的功能，例如事件處理程序，動畫等。

4. Angular主要用於什麼？

Angular通常用於表示單頁應用程式的SPA的開發。 Angular提供了一組現成的模組，可簡化單頁應用程式的開發。不僅如此，Angular還具有內建資料流，類型安全性和模組化CLI的功能，被認為是成熟的Web框架。

5.什麼是角度表達式？

角落表達式是類似JavaScript的程式碼片段，通常放在諸如{{expression}}之類的綁定中。這些表達式用於將應用程式資料綁定到HTML

語法：{{expression}}

##6. Angular中的模板是什麼？

Angular中的模板是使用包含特定於Angular的元素和屬性的HTML編寫的。這些模板與來自模型和控制器的資訊結合在一起，進一步渲染這些資訊以向使用者提供動態視圖。

7. 在Angular中，什麼是字串插值？

Angular中的字串插值是一種特殊的語法，它在雙花括號 **{{}}

中使用模板表達式來顯示元件資料。它也稱為小鬍子語法。 **JavaScript表達式包含在花括號中，由Angular執行，然後將相對輸出嵌入HTML程式碼中。這些表達式通常像表一樣進行更新和註冊，作為摘要循環的一部分。

8. Angular中的Annotation和Decorator有什麼不同？

使用Reflect Metadata函式庫，角度註解是類別的「唯一」元資料集。它們用於建立“註釋”數組。另一方面，裝飾器是用於分離裝飾或修改類別的設計模式，而無需實際更改原始原始程式碼。

9.您對Angular中的控制器了解多少？

控制器是JavaScript函數，可為HTML UI提供資料和邏輯。顧名思義，它們控制資料如何從伺服器流到HTML UI。

10. Angular的範圍是什麼？

Angular中的範圍是一個引用應用程式模型的物件。它是表達式的執行上下文。範圍以模仿應用程式DOM結構的層次結構排列。範圍可以監視表達式並傳播事件。

11. Angular中的指令是什麼？

Angular的核心功能是指令，這些屬性可讓您編寫 特定於應用程式的新HTML語法。它們本質上是在Angular編譯器在DOM中找到它們時執行的函數。 Angular指令分為三個部分：

• 元件指令

• #結構指令

##屬性指令

12.什麼是資料綁定？ 在Angular中，資料綁定是最強大，最重要的功能之一，可讓您定義元件與DOM（文檔物件模型）之間的通訊。它從根本上簡化了定義互動式應用程式的過程，而不必擔心在視圖或模板與元件之間推送和提取資料。在Angular中，資料綁定有四種形式：

字串插值
屬性綁定
#事件綁定
雙向資料綁定

#13.在Angular中使用篩選器的目的是什麼？ Angular中的篩選器用於格式化表達式的值，以便將其顯示給使用者。這些過濾器可以添加到模板，指令，控制器或服務中。不僅如此，您還可以建立自己的自訂篩選器。使用它們，您可以輕鬆地組織數據，使數據僅在滿足特定條件時才顯示。透過使用豎線字元|，將過濾器新增到表達式中，然後是過濾器。

14. Angular和jQuery有什麼差別？

jQuery

#特徵	#jQuery
## Angular		DOM運算
是		RESTful API
沒有是		#動畫支援
是是		#深層連結路由
沒有是		#表格驗證
沒有是		#雙向資料綁定
#沒有是		#AJAX / JSONP

是

是

$g$t他方

法，

並使用

provide來註冊新的提供者。

中級–面試問題

16.17.如何區分Angular表達式與JavaScript表達式？ Angular表達式1.它們可以包含文字，運算子和變數。 2.它們不能寫在HTML標記內。

Angular是否支援巢狀控制器？	是的，Angular確實支援巢狀控制器的概念。需要以層次方式定義嵌套控制器，以便在視圖中使用它。
	#JavaScript表達式
	##1.它們可以包含文字，運算子和變數。
	2.它們可以寫在HTML標記內。

######3.它們不支援條件，循環和異常。 ######3.它們確實支援條件，循環和異常。 ############4.它們支援過濾器。 ######4.他們不支援過濾器。 ############

18.列出使用核心Angular功能在應用程式模組之間進行通訊的方式。

以下是使用核心Angular功能在應用程式模組之間進行通訊的最通用方法：

• 使用事件
• #使用服務
• 透過在**$ rootScope**上指派模型
• 直接在控制器之間[ $ parent，$chi\mathrm{\#l}d\#\#Head\ast \ast ，\text{\#\#∗}\ast childHead**，\; **$# nextSibling等]直接在控制器之間[
ControllerAs
• 或其他繼承形式]

#19. service（）和factory（）有什麼差別？ Angular中的service（）是用於應用程式業務層的函數。它作為構造函數運行，並在運行時使用'new'關鍵字調用一次。而factory（）是類似service（）的函數，但功能更強大，更靈活。 factory（）是有助於創建物件的設計模式。

20. $ scope和Angular中的scope有什麼差別？

Angular中的$

scope
• 用於實作依賴項注入（DI）的概念，另一方面，scope 用於指令連結。
• $\#\ast scope\ast \ast 是**\; scope**是$

## scopeProvider提供的服務，可以注入到控制器，指令或其他服務中，而Scope可以是任何東西，例如函數參數名稱等。

######21.解釋範圍層次的概念嗎？ ##########

Angular中的$scope物件被組織成一個層次結構，並且主要由視圖使用。它包含一個根範圍，該範圍可以進一步包含稱為子範圍的範圍。一個根作用域可以包含多個子作用域。在這裡，每個視圖都有自己的$。

在

• 這
  • 裡
    ，
  • 每

  • 視窗
    圖
  • 都
    有
  自

自己

的

####################################### ###### scope，因此由其視圖控制器設定的變數將對其他控制器隱藏。範圍層次結構通常如下所示：#########根$ scope##########控制器1的$ scope###########控制器2的$ scope############..#############控制器'n'的$ scope############ ###########22.什麼是AOT？ ##########

AOT代表Angular-Ahead-of-Time編譯器。它用於在建置過程中預先編譯應用程式元件及其模板。用AOT編譯的Angular應用程式的啟動時間更短。同樣，這些應用程式的元件可以立即執行，而無需任何客戶端編譯。這些應用程式中的模板會作為程式碼嵌入其元件中。它減少了下載Angular編譯器的需要，從而使您免於繁瑣的任務。 AOT編譯器可以丟棄未使用的指令，這些指令會使用搖樹工具進一步丟棄。

23.解釋jQLite。

jQlite也稱為 jQuery lite是jQuery的子集，包含其所有功能。預設情況下，它會打包在Angular中。它幫助Angular以相容的跨瀏覽器方式操作DOM。 jQLite基本上只實現最常用的功能，因此佔用空間小。

24.解釋Angular中的摘要循環過程？

Angular中的摘要周期是監視監視清單的過程，以追蹤監視變數的值的變化。在每個摘要循環中，Angular都會比較範圍模型值的先前版本和新版本。通常，此過程是隱式觸發的，但是您也可以使用**$ apply（）**手動將其啟動。

25.什麼是Angular模組？

所有Angular應用程式都是模組化的，並遵循稱為NgModules的模組化系統。這些容器保存著專門用於應用程式域，工作流程或一組緊密相關的功能的內聚程式碼區塊。這些模組通常包含元件，服務提供者和其他程式碼文件，其範圍由包含的NgModule定義。有了模組，程式碼變得更加可維護，可測試和易讀。同樣，應用程式的所有依賴關係通常僅在模組中定義。

26.我們可以在哪種類型的元件上建立自訂指令？

Angular支援創建以下內容的自訂指令：

• #元素指令 -當遇到匹配的元素時，指令將啟用設定.
• 屬性 -當遇到符合的屬性時，指令將會啟動。
• CSS- 指令會在遇到符合的CSS樣式時啟動。
• 註解 -遇到符合的註解時，指令會啟動

#27.Anular中有哪些不同類型的篩選器？

以下是Angular支援的各種過濾器：

• #貨幣： 將數字格式化為貨幣格式。
• #日期： 將日期格式化為指定的格式。
• filter： 從陣列中選擇項目的子集。
• json： 將物件格式化為JSON字串。
• **limit：**將陣列/字串限制為指定數量的元素/字元。
• 小寫： 將字串格式化為小寫。
• number： 將數字格式化為字串。
• orderBy： 依表達式對陣列排序。
• 大寫： 將字串格式化為大寫。

28.什麼是Angular中的依賴注入？

依賴注入（DI）是一種軟體設計模式，其中物件作為依賴關係傳遞，而不是在元件中對其進行硬編碼。當您嘗試將物件建立的邏輯與使用物件的邏輯分開時，依賴注入的概念會派上用場。 「 config」操作使用DI，在載入模組以檢索應用程式的元素時，必須預先配置DI。使用此功能，使用者可以根據自己的要求變更依賴關係。

29.區分單向綁定和雙向資料綁定。

在 單向資料綁定中，無論何時變更資料模型，「視圖」或「 UI」部分都不會自動更新。您需要手動編寫自訂程式碼，以便在每次視圖變更時對其進行更新。

而在雙向資料綁定中，一旦更改資料模型，則隱含更新View或UI部分。與單向資料綁定不同，這是一個同步過程。

30.元件和指令的生命週期掛鉤是什麼？

Angular元件具有離散的生命週期，其中包含從出生到死亡過渡的不同階段。為了更好地控制這些階段，我們可以使用以下方法將其連接：

• 建構子： 透過在類別上呼叫new建立元件或指令時將呼叫它。
• **ngOnChanges：**每當元件的任何輸入屬性發生變更或更新時，都會呼叫它。
• **ngOnInit：**每次初始化給定元件時都會呼叫它。在第一個ngOnChanges之後，該掛鉤在其生命週期中僅被呼叫一次。
• **ngDoCheck：**每當呼叫給定元件的變更偵測器時，便會呼叫它。這使您可以為提供的元件實現自己的變更檢測演算法。
• ngOnDestroy： 在Angular銷毀元件之前立即呼叫它。您可以使用此鉤子來取消訂閱可觀察物件並分離事件處理程序，以避免任何類型的記憶體洩漏。

31.透過對Angular進行髒檢查，您了解什麼？

在Angular中，摘要過程稱為髒檢查。之所以調用它，是因為它掃描整個範圍以進行更改。換句話說，它將所有新的作用域模型值與先前的作用域值進行比較。由於所有監視變數都包含在單一循環中，因此任何變數的任何變更/更新都將導致重新分配DOM中存在的其餘監視變數。被監視的變數處於單一循環（摘要循環）中，任何變數的任何值變更都會在DOM中重新分配其他被監視變數的值

32.區分DOM和BOM。

DOM	#物料清單
1.代表文件物件模型	1.代表瀏覽器物件模型
2.表示網頁的內容	2.在網頁上方工作，並包含瀏覽器屬性
3.所有物件都以樹狀結構排列，並且只能透過提供的API來操作和存取文檔	3.所有全域JavaScript對象，變數和函數都隱含地成為window對象的成員
4.處理HTML文件	4.存取和操縱瀏覽器視窗
5. W3C推薦的標準規格	5.每個瀏覽器都有自己的實作

33.什麼是Angular中的Transpiling？

Angular中的編譯是指將原始碼從一種程式語言轉換為另一種程式語言的過程。通常，在Angular中，此轉換是從TypeScript到JavaScript的。這是一個隱式過程，在內部發生。

34. How to perform animation in Angular?

為了在Angular應用程式中執行動畫，您需要包含一個稱為Animate Library的特殊Angular庫，然後將ngAnimate模組引用到您的應用程式中，或將ngAnimate作為依賴項添加到您的應用程式模組內部。

35.什麼是Angular中的包含？

Angular中的包含可讓您將指令的原始子代轉移到新範本內的特定位置。 ng指令指示正在使用包含的最近父指令的已包含DOM的插入點。諸如ng-transclude 或 ng-transclude-slot之類別的屬性指令主要用於包含。

36. Angular中的事件是什麼？

Angular中的事件是特定的指令，可協助自訂各種DOM事件的行為。以下列出了Angular支援的事件：

• ng-click
• ng-copy
• ng-cut
##ng-dblclick
• ng-keydown
• ng-keypress
• ng-keyup
• ng-mousedown
• ng-mouseenter
• ng -mouseleave
• ng-mousemove
• ng-mouseover
• #ng-mouseup
• ##ng-blur

37.列出一些用來測試角度應用的工具嗎？

Karma
#Angular Mocks
Mocha
Browserify
Sion

#38.如何在Angular中建立服務？ 在Angular中，服務是可替換對象，該物件使用依賴項注入連接在一起。透過將服務註冊到要在其中執行的模組中來建立服務。基本上，您可以透過三種方式建立角度服務。基本上，它們是在Angular中創建服務的三種方式：

Factory

• #Service
• Provider

39.什麼是單例模式，在Angular中可以找到它？ Angular中的Singleton模式是一種很棒的模式，它限制了一個類別不能被多次使用。 Angular中的Singleton模式主要在依賴項注入和服務中實作。因此，如果您不使用「 new Object（）」而未將其設為單例，則將為相同物件指派兩個不同的儲存位置。而如果將該物件宣告為單例，則如果該物件已存在於記憶體中，則將簡單地將其重複使用。

40.您對Angular中的REST了解那些？ REST表示

RE

表象小號大老牛逼轉移（BOT）。 REST是適用於HTTP請求的API（應用程式介面）樣式。在這種情況下，所請求的URL可以精確定位需要處理的資料。然後，HTTP方法將標識需要對請求的資料執行的特定操作。因此，遵循此方法的API稱為RESTful API。

41. Angular中的自舉是什麼？ 在Angular中進行引導只是初始化或啟動Angular應用程式。 Angular支援自動和手動引導。

***自動引導程式：***這是透過將ng-app指令新增至應用程式的根目錄來完成的，通常是在標記或標記上（如果您希望angular自動引導應用程式）。當Angular找到ng-app指令時，它將載入與其關聯的模組，然後編譯DOM。

• 手動引導：
• 手動引導為您提供了有關如何以及何時初始化Angular應用程式的更多控制。如果您想在Angular喚醒並編譯頁面之前執行任何其他操作，這將非常有用。

42.在Angular中連結和編譯有什麼不同？

編譯功能用於模板DOM操縱並收集所有指令。

• 連結功能用於註冊DOM偵聽器以及實例DOM操作，並在複製範本後執行。

43. 您對Angular中的常數有什麼了解？ 在Angular中，常數類似於用於定義全域資料的服務。常數使用關鍵字“ constant”聲明。它們是使用恆定依賴性創建的，可以注入控制器或服務中的任何位置。

44. Angular的提供者，服務和工廠之間有什麼區別？ #

#提供者是一種可以將應用程式的一部分傳遞到app.config中的方法服務是一種用於建立以'new'關鍵字實例化的服務的方法。 這是用於建立和配置服務的方法。在這裡，您可以建立一個對象，向其中添加屬性，然後返回相同的對象，並將工廠方法傳遞到控制器中。

提供者	服務	##廠

45. 什麼是Angular Global API？

Angular Global API是用於執行各種常見任務的全域JavaScript函數的組合，例如：

比較物件
• 迭代物件
• 轉換資料

有一些常見的Angular Global API函數，例如：

**有角的。小寫：**將字串轉換為小寫字串。
• 有角的。大寫： 將字串轉換為大寫字串。
• 有角的。 isString： 如果目前引用是字串，則傳回true。
**有角的。 isNumber：**如果目前引用為數字，則傳回true。

進階程度–面試問題

#46.在Angular中，描述如何設置，取得和清除cookie？

為了在Angular中使用cookie，您需要包含一個名為ngCookies angular-cookies.js的模組。

設定Cookies –為了以鍵值格式設定Cookies，使用「 put」方法。

cookie.set("nameOfCookie","cookieValue");

**取得Cookie –**為了取得Cookie，使用了「 get」方法。

cookie.get（"nameOfCookie"）;

**清除Cookie –**使用「刪除」方法刪除Cookie。

cookie.delete（"nameOfCookie"）;

47. 如果您的資料模型是在"區域"之外更新的，請說明該過程，您將如何查看視圖？

您可以使用以下任一來更新檢視：

• #ApplicationRef.prototype.tick（）：它將對整個組件樹執行變更檢測。

• **NgZone.prototype.run（）：**它將對整個元件樹執行變更偵測。在這裡，引擎蓋下的run（）將調用tick本身，然後參數將在tick之前獲取函數並執行它。

• **ChangeDetectorRef.prototype.detectChanges（）：**它將在目前元件及其子元件上啟動變更偵測。

48.在Angular中解釋ng-app指令。

ng-app指令用於定義Angular應用程序，使我們可以在Angular應用程式中使用自動引導。它表示Angular應用程式的根元素，通常在或標籤附近聲明。在HTML文件中可以定義任何數量的ng-app指令，但是只有一個Angular應用程式可以隱式地正式引導。其餘應用程式必須手動引導。

範例

<div ng-app=“myApp” ng-controller=“myCtrl”>
First Name :
<input type=“text” ng-model=“firstName”>
<br />
Last Name :
<input type=“text” ng-model=“lastName”>
<br>
Full Name: {{firstName + ” ” + lastName }}
</div>

49.從準備好的TemplateRef插入嵌入視圖的過程是什麼？

@Component({
    selector: 'app-root',
    template: `
        <ng-template #template let-name=&#39;fromContext&#39;><div>{{name}}</ng-template>
    `
})
export class AppComponent implements AfterViewChecked {
    @ViewChild(&#39;template&#39;, { read: TemplateRef }) _template: TemplateRef<any>;
    constructor() { }

    ngAfterViewChecked() {
        this.vc.createEmbeddedView(this._template, {fromContext: &#39;John&#39;});
    }
}

50.如何只透過點擊角形按鈕即可隱藏HTML元素？

可以使用ng-hide指令與控制器一起輕鬆隱藏HTML元素，以便在按一下按鈕時隱藏HTML元素。

View

<div ng-controller ="MyController">
  <button ng-click ="hide()">欢迎关注全栈程序员社区公众号</ button>
  <p ng-hide ="isHide">欢迎关注Java架构师社区公众号！</ p>
</ div>

Controller#

controller: function() {
    this.isHide = false;
    this.hide = function(){
        this.isHide = true; 
    }; 
}

更多程式設計相關知識，請造訪：

程式設計入門！ ！

以上是50個你必須掌握的Angular面試題（收藏）的詳細內容。更多資訊請關注PHP中文網其他相關文章！