マスターしなければならない 50 の Angular 面接の質問 (コレクション)

この記事では、マスターすべき Angular 面接の質問 50 個を紹介します。この 50 個の面接質問は、初級、中級、上級の 3 つのパートに分けて分析され、徹底的に理解するのに役立ちます。

Angular の面接でよくある質問のリストを 3 つの部分に分けてまとめました:

• Angular の面接の質問 – 初級レベル
• Angular インタビューの質問 – 中級
• アングル インタビューの質問 – 上級

##[関連チュートリアルの推奨事項: "

Angular チュートリアル "]

#初心者レベル – 面接の質問

##1. Angular と AngularJS を区別します。

機能#ビルド言語式構文モバイル サポートrouting依存関係の挿入 構造 スピードサポート ##サポートや新しいアップデートはありません

2. Angular とは何ですか?

Angular は、オープンソースのフロントエンド Web フレームワークです。これは最も人気のある JavaScript フレームワークの 1 つであり、主に Google によって保守されています。 Web ベースのアプリケーションを簡単に開発するためのプラットフォームを提供し、フロントエンド開発者がクロスプラットフォーム アプリケーションを管理できるようにします。宣言型テンプレート、エンドツーエンドのツール、依存関係の注入、開発パスをよりスムーズにするその他のさまざまなベスト プラクティスなどの強力な機能が統合されています。

3. Angular を使用する利点は何ですか?

Angular フレームワークを使用する主な利点の一部を以下に示します。

• 双方向のデータ バインディングをサポートします
• MVC に準拠しています。パターン アーキテクチャ
• 静的テンプレートと Angular テンプレートをサポートします
##カスタム ディレクティブを追加できます
• #RESTfull サービスもサポート
##認証をサポート
• 顧客 クライアントとサーバー間の通信が容易になります
• 依存関係の挿入をサポートします
• イベント ハンドラー、アニメーションなどの強力な機能を備えています。

4. Angular は主に何に使用されますか?

Angular は、シングルページ アプリケーションを表す SPA の開発によく使用されます。 Angular

シングルページ アプリケーションの開発を簡素化する既製のモジュールのセットを提供します。それだけでなく、Angular はデータ フロー、タイプ セーフティ、モジュラー CLI の機能が組み込まれた成熟した Web フレームワークであると考えられています。

5. 角度式とは何ですか?

Angular 式は、JavaScript に似たコードのスニペットで、通常は {{expression}} などのバインディング内に配置されます。これらの式は、アプリケーション データを HTML

にバインドするために使用されます。 構文:

{{式}}

6. Angular のテンプレートとは何ですか?

Angular のテンプレートは、Angular 固有の要素と属性を含む HTML を使用して作成されます。これらのテンプレートは、モデルおよびコントローラーからの情報と結合され、さらにレンダリングされてユーザーに動的なビューが提供されます。

7.

Angular の文字列補間とは何ですか? Angular の文字列補間は、二重中括弧 **{{}} で囲まれたテンプレート式を使用してコンポーネント データを表示する特別な構文です。

Mustache 構文とも呼ばれます。 **JavaScript 式は中括弧で囲まれ、Angular によって実行され、相対出力が HTML コードに埋め込まれます。これらの式は通常、ダイジェスト ループの一部としてテーブルのように更新および登録されます。

8. Angular のアノテーションとデコレーターの違いは何ですか?

Reflect Metadata ライブラリを使用すると、Angular アノテーションがクラスのメタデータの「唯一の」セットになります。これらは、「注釈」配列を作成するために使用されます。一方、デコレータは、実際に元のソース コードを変更することなく、クラスを単独で装飾または変更するために使用されるデザイン パターンです。

9. Angular のコントローラーについてどのくらい知っていますか?

コントローラーは、HTML UI にデータとロジックを提供する JavaScript 関数です。名前が示すように、サーバーから HTML UI へのデータ フローを制御します。

10. Angular の範囲は何ですか?

Angular のスコープは、アプリケーション モデルを参照するオブジェクトです。これは式の実行コンテキストです。スコープは、アプリケーションの DOM 構造を模倣した階層に配置されます。スコープは式を監視し、イベントを伝播できます。

11. Angular のディレクティブとは何ですか?

Angular の中核機能はディレクティブです。ディレクティブは、アプリケーション固有の新しい HTML 構文を作成できる属性です。これらは本質的に、Angular コンパイラーが DOM 内でそれらを見つけたときに実行される関数です。 Angular ディレクティブは 3 つの部分に分かれています:

コンポーネント ディレクティブ

• 構造ディレクティブ

• 属性ディレクティブ

#12. データ バインディングとは何ですか?

Angular では、データ バインディングは、コンポーネントと DOM (ドキュメント オブジェクト モデル) 間の通信を定義できる最も強力かつ重要な機能の 1 つです。これにより、ビューやテンプレートとコンポーネント間でのデータのプッシュやプルを気にする必要がなく、対話型アプリケーションを定義するプロセスが大幅に簡素化されます。 Angular では、データ バインディングには次の 4 つの形式があります。

文字列補間

• プロパティ バインディング

• イベント バインディング

• 双方向データ バインディング

13. Angular でのフィルターの使用目的は何ですか?

Angular のフィルターは、式の値をフォーマットしてユーザーに表示できるようにするために使用されます。これらのフィルターは、テンプレート、ディレクティブ、コントローラー、またはサービスに追加できます。それだけでなく、独自のカスタム フィルターを作成することもできます。これらを使用すると、特定の条件が満たされた場合にのみデータが表示されるようにデータを簡単に整理できます。パイプ文字 | の後にフィルターを使用して、式にフィルターを追加します。

14. Angular と jQuery の違いは何ですか?

AngularJS	Angular
MVC 設計モデルのサポートコンポーネントとディレクティブの使用
推奨言語: JavaScript推奨言語: TypeScript
ピクチャ/プロパティおよびイベントには特定の ng ディレクティブが必要ですイベントをバインドするには () を使用し、[] を使用します。属性バインディングの場合
モバイル サポートを提供しませんモバイル サポートを提供します
$ Routeprovider.when() ルーティング設定用 @RouteConfig {( …)} はルーティング構成に使用されます
依存関係の挿入の概念はサポートされていません ツリーベースの一方向変更検出をサポートする階層型依存関係注入
管理が難しい簡素化された構造により、大規模なアプリケーションの開発と保守が容易になります
2 つの機能データ バインディング、開発の労力、時間が削減される方法 機能のアップグレードは AngularJS よりも速い
アクティブなサポートと頻繁な新しいアップデート

## Angular#DOM 操作 はい は いいえいいえ##ですis##15 . Angular のプロバイダーとは何ですか? プロバイダーは、Angular で構成可能なサービスです。これは、依存関係の値を取得する方法に関する情報を提供する依存関係注入システムへの指示です。 ##g

機能	jQuery
## は	#はい	##RESTful API
いいえ		アニメーションのサポート
はい		ディープリンク ルーティングです
いいえ##はい		##フォーム検証
#はい	##双方向データ バインディング
##は	##AJAX/JSONP	#is

et() メソッドを持つオブジェクトです、このメソッドサービスの新しいインスタンスを作成するために呼び出されます。プロバイダーには、サービスの新しいインスタンスを作成するために呼び出される

get() メソッドを使用して、他のメソッドやオブジェクトを含めることもできます。プロバイダーは他のメソッドを含めて $\mathrm{\#\#g}e\text{t}を使用することもできます。$方#Angular 式

JavaScript 式

1. リテラル、演算子、変数を含めることができます。 1. リテラル、演算子、変数を含めることができます。

2. HTML タグ内に記述できます。 2. HTMLタグ内には記述できません。

3. 条件、ループ、例外はサポートされません。 3. 条件、ループ、例外をサポートします。 4. フィルターはサポートされていません。

18. Angular のコア機能を使用してアプリケーション モジュール間で通信する方法をリストします。

以下は、Angular のコア機能を使用してアプリケーション モジュール間で通信する最も一般的な方法です。

• イベントの使用
• サービスの使用
• **$ rootScope** にモデルを割り当てることでコントローラ間で直接
• [$parent, $\#childHead\ast \ast ,\ast \ast$ControllerAs または他の形式の継承]
• 19.
service() と Factory() の違いは何ですか? Angular の

service() は、アプリケーションのビジネス層で使用される関数です。これはコンストラクターとして実行され、実行時に 'new' キーワードを使用して 1 回呼び出されます。 Factory() は、service() に似た関数ですが、より強力で柔軟です。 Factory() は、オブジェクトの作成に役立つデザイン パターンです。 20. $ スコープと Angular のスコープの違いは何ですか?

$ Angular の scope は、依存性注入 (DI) の概念を実装するために使用されます。一方、scope

コマンドへのリンクを使用します。

• #∗∗$scope\ast \ast は**スコープ**は$

  $\#scop\#\#\; Angular\; で\mathrm{\#e}\mathrm{オブジェクトは階層に編成され、主にビューによって使用されます。これにはルート\; スコープが含まれており、さらにサブスコープと呼ばれるスコープを含めることができます。ルート\; スコープには複数の子スコープを含めることができます。ここで、各ビューには独自の}スコープ\; オブジェクトが階層に編成され、主にビューによって使用されます。これにはルート\; スコープが含まれており、さらにサブスコープと呼ばれるスコープを含めることができます。ルート\; スコープには複数の子スコープを含めることができます。ここで、各ビューには独自の$ コントローラ '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 は、次のカスタム ディレクティブの作成をサポートします。

      • 要素ディレクティブ - 一致する要素が見つかると、ディレクティブがアクティブ化されます。
      • Attributes - ディレクティブは、一致する属性が見つかったときにアクティブになります。
      • CSS- ディレクティブは、一致する CSS スタイルが見つかったときにアクティブ化されます。
      • Comments - 一致するコメントが見つかったときにディレクティブがアクティブになります

      27. Angular のさまざまな種類のフィルターとは何ですか?

      Angular でサポートされているさまざまなフィルターは次のとおりです:

      • 通貨: 数値を通貨形式にフォーマットします。
      • 日付: 日付を指定された形式に設定します。
      • filter: 配列から項目のサブセットを選択します。
      • json: オブジェクトを JSON 文字列にフォーマットします。
      • **limit:** 配列/文字列を指定した要素/文字数に制限します。
      • 小文字: 文字列を 小文字にフォーマットします。
      • number: 数値を文字列にフォーマットします。
      • orderBy: 配列 を式 で並べ替えます。
      • 大文字: 文字列を 大文字 としてフォーマットします。

      28. Angular の依存関係注入とは何ですか?

      Dependency Injection (DI) は、オブジェクトがコンポーネントにハードコーディングされるのではなく、依存関係として渡されるソフトウェア設計パターンです。依存関係注入の概念は、オブジェクト作成のロジックをオブジェクトを使用するロジックから分離しようとする場合に役立ちます。 「config」操作では DI を使用します。DI は、モジュールをロードしてアプリケーションの要素を取得するときに事前に構成する必要があります。この機能を使用すると、ユーザーは要件に応じて依存関係を変更できます。

      29. 一方向のデータ バインディングと双方向のデータ バインディングを区別します。

      一方向データ バインディングでは、データ モデルが変更されるたびに、「ビュー」または「UI」部分は自動的に更新されません。ビューが変更されるたびにカスタム コードを更新するには、手動でカスタム コードを作成する必要があります。

      そして、双方向データ バインディングでは、データ モデルが変更されると、ビューまたは UI 部分が暗黙的に更新されます。一方向のデータ バインディングとは異なり、これは同期プロセスです。

      #30. コンポーネントとディレクティブのライフサイクル フックは何ですか?

      Angular コンポーネントには、誕生から消滅までのさまざまな移行段階を含む個別のライフサイクルがあります。これらのステージをより適切に制御するには、次を使用してステージを接続できます。

      • コンストラクター: これは、クラスで new を呼び出してコンポーネントまたはディレクティブが作成されるときに呼び出されます。
      • **ngOnChanges:** これは、コンポーネントの入力プロパティが変更または更新されるたびに呼び出されます。
      • **ngOnInit:** これは、特定のコンポーネントが初期化されるたびに呼び出されます。最初の ngOnChanges の後、フックは存続期間中に 1 回だけ呼び出されます。
      • **ngDoCheck:** これは、特定のコンポーネントの変更検出機能が呼び出されるたびに呼び出されます。これにより、提供されたコンポーネントに対して独自の変更検出アルゴリズムを実装できます。
      • ngOnDestroy: Angular がコンポーネントを破棄する直前に呼び出されます。このフックを使用すると、オブザーバブルのサブスクライブを解除し、イベント ハンドラーを切り離して、あらゆる種類のメモリ リークを回避できます。

      #31. Angular をダーティチェックすることで何がわかりますか?

      Angular では、ダイジェスト プロセスは Dirty Checking と呼ばれます。範囲全体の変更をスキャンするため、この名前が付けられます。つまり、すべての新しいスコープ モデル値を以前のスコープ値と比較します。すべての監視変数は 1 つのループ内に含まれるため、変数を変更/更新すると、DOM 内に存在する残りの監視変数が再割り当てされます。監視対象変数は 1 つのループ (要約ループ) 内にあり、変数の値が変更されると、DOM

      32 内の他の監視対象変数の値が再割り当てされます。 BOM。

	4. フィルターをサポートしています。

##部品表1. ドキュメント オブジェクト モデルを表します2. Web ページのコンテンツを表します3. すべてのオブジェクトはツリー構造に配置され、ドキュメントは、提供された API 4. HTML ドキュメントを処理します#5. W3C が推奨する標準仕様##5. 各ブラウザには独自の実装があります

DOM

1. ブラウザ オブジェクト モデルを表します

2. Web ページ上で動作し、ブラウザのプロパティが含まれます

3. すべてのグローバル JavaScript オブジェクト、変数、関数は暗黙的にウィンドウ オブジェクトのメンバーになります

4。ブラウザ ウィンドウへのアクセスと操作

33.Angular でのトランスパイルとは何ですか?

Angular におけるコンパイルとは、ソース コードをあるプログラミング言語から別のプログラミング言語に変換するプロセスを指します。通常、Angular では、この変換は TypeScript から JavaScript へ行われます。これは内部で発生する暗黙的なプロセスです。

34. 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. Angular アプリをテストするためのツールをいくつか挙げてください。

#Karma
Angular Mocks
Mocha
Browserify
#Sion

38. Angular でサービスを作成する方法?

Angular では、サービスは依存関係の注入を使用して接続される置換可能なオブジェクトです。サービスを実行するモジュールに登録してサービスを作成します。基本的に、Angular サービスは 3 つの方法で作成できます。基本的に、これらは Angular でサービスを作成する 3 つの方法です:

Factory
• Service
• Provider

##39.シングルトン パターンとは何ですか?Angular のどこで見つけることができますか? Angular の Singleton パターンは、クラスの複数回の使用を制限する優れたパターンです。 Angular のシングルトン パターンは、主に依存関係の注入とサービスに実装されます。したがって、「new Object()」をシングルトンにせずに使用すると、同じオブジェクトに対して 2 つの異なる格納場所が割り当てられることになります。一方、オブジェクトをシングルトンとして宣言した場合、そのオブジェクトがメモリ内にすでに存在していれば、単純に再利用されます。

40. Angular の REST について何を知っていますか? RESTとは、

RE

外観小小大老Niubi転送(BOT)を意味します。 REST は、HTTP リクエストの API (アプリケーション プログラミング インターフェイス) スタイルです。この場合、要求された URL は、処理する必要のあるデータを特定します。次に、HTTP メソッドは、要求されたデータに対して実行する必要がある特定の操作を識別します。したがって、このアプローチに従う API は RESTful API と呼ばれます。

41. Angular のブートストラップとは何ですか? Angular のブートストラップは、Angular アプリケーションを初期化または開始することを意味します。 Angular は自動および手動のブートストラップをサポートしています。

***Autobootstrapper:***これは、アプリケーションのルート (通常はタグまたはマークアップ) に ng-app ディレクティブを追加することで実行されます (Angular でアプリケーションを自動的に起動したい場合)。 。 Angular は ng-app ディレクティブを見つけると、それに関連付けられたモジュールをロードし、DOM をコンパイルします。

• 手動ブートストラップ:
• 手動ブートストラップを使用すると、Angular アプリケーションをいつどのように初期化するかをより詳細に制御できます。これは、Angular が起動してページをコンパイルする前に他の操作を実行したい場合に便利です。

42. Angular でのリンクとコンパイルの違いは何ですか?

コンパイル関数はテンプレート DOM 操作に使用され、すべてのディレクティブを収集します。

• リンク関数は、DOM リスナーとインスタンス DOM 操作を登録するために使用され、テンプレートの複製後に実行されます。

43. Angular の定数について何を知っていますか? Angular では、定数はグローバル データの定義に使用されるサービスに似ています。定数はキーワード「constant」を使用して宣言されます。これらは一定の依存関係を使用して作成され、コントローラーまたはサービスのどこにでも挿入できます。

44. Angular プロバイダー、サービス、ファクトリーの違いは何ですか?

#サービス#プロバイダーは、アプリケーションの一部を app.config に渡す方法です。 #サービスは、サービスの「新しい」メソッドを使用して何かを作成する方法です。キーワードによってインスタンス化されます。 これは、サービスの作成と構成に使用される方法です。ここでは、オブジェクトを作成し、それにプロパティを追加して、同じオブジェクトを返し、ファクトリ メソッドをコントローラーに渡します。

#プロバイダ	#ファクトリー

45.

Angular グローバル API とは何ですか?

Angular グローバル API は、次のようなさまざまな一般的なタスクを実行するために使用されるグローバル JavaScript 関数の組み合わせです。 オブジェクトの比較

オブジェクトの反復

データの変換
• 次のような一般的な Angular グローバル API 関数がいくつかあります。
• ** Angular。小文字: **文字列を小文字に変換します。

角がある。大文字:

文字列を大文字に変換します。
• 角がある。 isString: 現在の参照が文字列の場合は true を返します。
**角がある。 isNumber: **現在の参照が数値の場合は true を返します。
上級レベル – 面接の質問

#46. Angular で Cookie を設定、取得、クリアする方法について説明してください。

Angular で Cookie を使用するには、ngCookies angular-cookies.js というモジュールを含める必要があります。 Cookie の設定

– Cookie をキーと値の形式で設定するには、「put」メソッドを使用します。

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

**Cookie の取得 –**Cookie を取得するには、「get」メソッドを使用します。

cookie.get（"nameOfCookie"）;

**Cookie のクリア –** Cookie を削除するには、「削除」メソッドを使用します。

cookie.delete（"nameOfCookie"）;

#47. データ モデルが「エリア」外で更新された場合、そのプロセスを説明してください。ビューはどのように表示されますか?

次のいずれかを使用してビューを更新できます:

ApplicationRef.prototype.tick()

:変更検出はコンポーネント ツリー全体に対して実行されます。

• **NgZone.prototype.run(): **コンポーネント ツリー全体に対して変更検出を実行します。ここで、内部の run() はティック自体を呼び出し、パラメータはティックの前に関数を取得して実行します。

• **ChangeDetectorRef.prototype.detectChanges(): **現在のコンポーネントとそのサブコンポーネントの変更検出を開始します。

• #48. Angular の ng-app ディレクティブについて説明します。

ng-app ディレクティブは、Angular アプリケーションを定義するために使用され、Angular アプリケーションで自動ブートストラップを使用できるようにします。これは Angular アプリケーションのルート要素を表し、通常は または タグの近くで宣言されます。 HTML ドキュメントでは任意の数の ng-app ディレクティブを定義できますが、暗黙的に公式にブートストラップできるのは Angular アプリケーションのみです。残りのアプリケーションは手動で起動する必要があります。 Example

<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 要素を非表示にするにはどうすればよいですか?

HTML 要素は、ボタンがクリックされたときに HTML 要素を非表示にするコントローラーを備えた ng-hide ディレクティブを使用して簡単に非表示にすることができます。 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 中国語 Web サイトの他の関連記事を参照してください。