【17】進大廠必須掌握的面試題-50個Angular面試

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

• 角度面試問題–初學者水平
• 角度面試問題–中級
• 角度面試問題–高級

初學者水平–面試問題

1.區分Angular和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指令分為三部分：

1. 組件指令
2. 結構指令
3. 屬性指令

12.什么是資料系結？

在Angular中，資料系結是最強大，最重要的功能之一，可讓您定義組件與DOM（檔案物件模型）之間的通信，它從根本上簡化了定義互動式應用程式的程序，而不必擔心在視圖或模板與組件之間推送和提取資料，在Angular中，資料系結有四種形式：

1. 字串插值
2. 屬性系結
3. 事件系結
4. 雙向資料系結

13.在Angular中使用過濾器的目的是什么？

Angular中的過濾器用于格式化運算式的值，以便將其顯示給用戶，這些過濾器可以添加到模板，指令，控制器或服務中，不僅如此，您還可以創建自己的自定義過濾器，使用它們，您可以輕松地組織資料，使資料僅在滿足特定條件時才顯示，通過使用豎線字符|，將過濾器添加到運算式中，然后是過濾器，

14. Angular和jQuery有什么區別？

15. Angular中的提供程式是什么？

提供程式是Angular中的可配置服務，這是對依賴關系注入系統的一條指令，它提供有關獲取依賴關系值的方式的資訊，它是一個具有$ get（）方法的物件，該方法被呼叫以創建服務的新實體，提供者還可以包含其他方法，并使用$ provide來注冊新的提供者，

中級–面試問題

16. Angular是否支持嵌套控制器？

是的，Angular確實支持嵌套控制器的概念，需要以層次方式定義嵌套控制器，以便在視圖中使用它，

17.如何區分Angular運算式和JavaScript運算式？

18.列出使用核心Angular功能在應用程式模塊之間進行通信的方式，

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

• 使用事件
• 使用服務
• 通過在$ rootScope上分配模型
• 直接在控制器之間[ $ parent， $$ childHead， $$ nextSibling等]
• 直接在控制器之間[ ControllerAs或其他繼承形式]

19. service（）和factory（）有什么區別？

Angular中的service（）是用于應用程式業務層的函式，它作為建構式運行，并在運行時使用'new'關鍵字呼叫一次，而factory（）是一個類似于service（）的函式，但功能更強大，更靈活，factory（）是有助于創建物件的設計模式，

20. $ scope和Angular中的scope有什么區別？

• Angular中的$ scope用于實作依賴項注入（DI）的概念，另一方面，scope 用于指令鏈接，
• $ 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. Angular中有哪些不同型別的過濾器？

以下是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，

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.列出一些用于測驗角度應用的工具嗎？

1. Karma
2. Angular Mocks
3. Mocha
4. Browserify
5. 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的提供者，服務和工廠之間有什么區別？

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. 如果您的資料模型是在"區域"之外更新的，請說明該程序，您將如何查看視圖？

您可以使用以下任意一種來更新視圖：

1. ApplicationRef.prototype.tick（）：它將對整個組件樹執行更改檢測，
2. NgZone.prototype.run（）：它將對整個組件樹執行更改檢測，在這里，引擎蓋下的run（）將呼叫tick本身，然后引數將在tick之前獲取函式并執行它，
3. 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='fromContext'><div>{{name}}</ng-template>
    `
})
export class AppComponent implements AfterViewChecked {
    @ViewChild('template', { read: TemplateRef }) _template: TemplateRef<any>;
    constructor() { }

    ngAfterViewChecked() {
        this.vc.createEmbeddedView(this._template, {fromContext: 'John'});
    }
}

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

歡迎關注 Java架構師社區公眾號.
本文轉載自Java架構師必看 ,更多內容點擊查看！

標籤：其他

上一篇：060_例外機制

下一篇：spring boot 圖片上傳