ホームページ > 記事 > ウェブフロントエンド > マスターしなければならない 50 の Angular 面接の質問 (コレクション)

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

青灯夜游転載: 2021-07-23 10:12:509685ブラウズ

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

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

##g e t を使用することもできます。 （ ）

#Angular 式

JavaScript 式

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

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

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

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

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

イベントの使用
サービスの使用
**$ rootScope** にモデルを割り当てることでコントローラ間で直接
[$parent, $#c h i l d H e a d ∗ ∗, ∗ ∗ childHead**、**$
19.

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

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

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

#∗
∗ $s c o p e ∗ ∗ は **スコープ**は ##∗$ ∗## です#scope##∗##∗ は scopeProvider によって提供されるサービスは、コントローラー、命令、またはその他のサービスに挿入できます。Scope には、関数パラメーター名など、任意のものを指定できます。 #21.スコープ階層の概念について説明してください。
$#s c o p## Angular で #e オブジェクトは階層に編成され、主にビューによって使用されます。これにはルートスコープが含まれており、さらにサブスコープと呼ばれるスコープを含めることができます。ルートスコープには複数の子スコープを含めることができます。ここで、各ビューには独自のスコープオブジェクトが階層に編成され、主にビューによって使用されます。これにはルートスコープが含まれており、さらにサブスコープと呼ばれるスコープを含めることができます。ルートスコープには複数の子スコープを含めることができます。ここで、各ビューには独自の$
- - 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-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 アプリをテストするためのツールをいくつか挙げてください。

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

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

Service
Provider

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

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

外観小小大老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 を返します。

#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: &#39;app-root&#39;,
    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 サイトの他の関連記事を参照してください。

声明：

この記事は掘金--Java架构师社区で複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

前の記事：Node.jsを使用して画像を圧縮するにはどうすればよいですか?手法の紹介次の記事：Node.jsを使用して画像を圧縮するにはどうすればよいですか?手法の紹介

続きを見る