Angular 現在最も人気のあるフロントエンド フレームワークとして、フロントエンド開発者からは一般に歓迎されています。 Angular を初めて使用する場合でも、Angular 開発経験のある開発者であっても、この記事にある 12 の古典的な面接の質問を理解することは、Angular 2 の知識と概念を深く理解し、学習するための優れた方法になります。
この記事では、Angular 2 の多くの重要な概念について説明します。また、Angular の理解を評価するための詳細な読み物と自己検査テストも添付されています。
推奨される関連チュートリアル: 「angular チュートリアル 」
Angular 2 コンポーネント/ディレクティブにはライフサイクル イベントがあり、@angular/core によって管理されます。 @angular/core はコンポーネントを作成してレンダリングし、その子孫を作成してレンダリングします。 @angular/core のデータ バインディング プロパティが変更されると、処理が変更され、DOM から削除する前にそのテンプレートが破棄されます。 Angular は、必要に応じてライフ サイクルに分岐して操作を実行できる一連のライフ サイクル フック (特別なイベント) を提供します。コンストラクターは、すべてのライフサイクル イベントの前に実行されます。各インターフェイスには、ng という接頭辞が付いたフック メソッドがあります。たとえば、ngOnint インターフェイスの OnInit メソッドは、このメソッドをコンポーネントに実装する必要があります。
一部のイベントはコンポーネント/ディレクティブに適用できますが、いくつかのイベントはコンポーネントにのみ適用できます。
コンポーネント固有のフック:
Angular 2 は単なる言語ではなくプラットフォームです
速度とパフォーマンスの向上
よりシンプルな依存関係の注入
モジュール式、クロスプラットフォーム
ES6 と Typescript の利点を備えています。
詳細情報:
Angular 2 には、Angular 1 とは異なり、双方向ダイジェスト サイクルがありません。 Angular 2 では、コンポーネントで発生した変更は常に、現在のコンポーネントからそのすべての子コンポーネントに伝播されます。子コンポーネントへの変更をその親コンポーネントの階層に反映する必要がある場合は、イベント エミッター API を使用してイベントを発行できます。
つまり、EventEmitter は @angular/core モジュールで定義されたクラスであり、カスタム イベントを発行するためにコンポーネントとディレクティブによって使用されます。
@output() somethingChanged = new EventEmitter();
somethingChanged.emit(value) メソッドを使用してイベントを発行します。これは通常、クラス内の値が変更されたときにセッターで使用されます。
サブスクリプション メソッドを使用すると、モジュールの任意のコンポーネントを通じてイベント発行サブスクリプションを実装できます。
myObj.somethingChanged.subscribe(val) => this.myLocalMethod(val));
多読:
Codelyzer は tslint 上で実行され、そのコーディング規約は通常 tslint.json ファイルで定義されます。 Codelyzer は、Angularcli または npm を通じて直接実行できます。 Visual Studio Code や Atom などのエディターも codelyzer をサポートしており、基本的なセットアップのみが必要です。
Visual Studio Code で Codelyzer をセットアップするには、[ファイル] > [オプション] > [ユーザー設定] で tslint ルールへのパスを追加します。
{
"tslint.rulesDirectory": "./node_modules/codelyzer",
"typescript.tsdk": "node_modules/typescript/lib"
}cli からコードが実行されます: ng lint。
npm からのコード実行: npm run lint
詳細情報:
遅延読み込みでは、コードを複数のパッケージに分割し、オンデマンドで読み込むことで、アプリケーションの初期読み込みプロセスを高速化します。
すべての Angular アプリケーションには、AppModule と呼ばれるメイン モジュールが必要です。コードは、アプリケーションのビジネス ケースに基づいて、さまざまなサブモジュール (NgModules) に分割する必要があります。
遅延読み込みを有効にした Plunkr の例:
API を制限し、既知または安全な環境/ブラウザを使用するアプリを選択することで、XSRF 攻撃を防ぎます。
詳細情報:https://angular.io/docs/ts/latest/guide/security.HTML#!#best -実践
最適化は、アプリケーションの種類やサイズ、その他多くの要因によって異なります。ただし、一般的に、Angular 2 アプリケーションを最適化するときは、次のことを考慮します。
AOT コンパイルを検討します。
アプリケーションがバンドル、醜化、ツリーシェイキングを経ていることを確認してください。
アプリケーションに不要な import ステートメントがないことを確認してください。
未使用のサードパーティ ライブラリがアプリケーションから削除されていることを確認してください。
すべての依存関係と開発依存関係は明確に分離されています。
アプリケーションが大きい場合は、完全にバンドルされたアプリケーションの代わりに遅延読み込みを検討します。
続きを読む:
詳細な読み方:
Shadow DOM は、開発者が独自の HTML マークアップ、CSS スタイル、JavaScript をカプセル化できる HTML 仕様の一部です。 Shadow DOM を他のテクノロジーと併用すると、開発者は独自の第 1 レベルのタグ、Web コンポーネント、
シャドウ DOM は本質的に静的であり、開発者がアクセスできないため、適切な候補です。 DOM はキャッシュされるため、ブラウザーでのレンダリングが高速になり、パフォーマンスが向上します。さらに、Shadow DOM は比較的適切に管理できる一方で、Angular 2 アプリケーションへの変更を検出し、ビューの再描画を効率的に管理できます。
詳細資料:
https://developer.mozilla.org/en-US/docs/Web /Web_Components/Shadow_DOM
https://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/
##https://code.tutsplus.com/tutorials/intro-to-shadow-dom--net-34966
AOT コンパイルは、Ahead Of Time コンパイルの略で、ビルド時に Angular コンパイラーが Angular コンポーネントとテンプレートをネイティブ JavaScript と HTML にコンパイルします。コンパイルされた HTML と JavaScript は Web サーバーにデプロイされるため、ブラウザーはコンパイルとレンダリングの時間を節約できます。 ＃＃＃＃＃＃アドバンテージ：＃＃＃
ダウンロードの高速化: アプリケーションはすでにコンパイルされているため、多くの Angular コンパイラー関連ライブラリをバンドルする必要がなくなり、アプリケーション バンドルが小さくなるため、アプリケーションのダウンロードが高速になります。
HTTP リクエストの削減: アプリケーションが遅延読み込みをサポートするようにバンドルされていない場合 (または何らかの理由で)、関連付けられた HTML および CSS ごとに個別のサーバー リクエストが発生します。ただし、プリコンパイルされたアプリケーションはすべてのテンプレートとスタイルをコンポーネントに合わせて調整するため、サーバーへの Http リクエストの数は少なくなります。
レンダリングの高速化: アプリケーションが AOT コンパイルされていない場合、アプリケーションが完全にロードされると、ブラウザーでコンパイル プロセスが実行されます。これには、必要なコンポーネントがすべてダウンロードされるのを待ってから、コンパイラーがアプリケーションをコンパイルするのに時間がかかるのを待つ必要があります。 AOT コンパイルを使用すると、最適化を実現できます。
ビルド時にエラーを検出: プリコンパイルにより、多くのコンパイル時エラーが検出され、アプリケーションの安定性が向上します。
欠点:
HTML と CSS にのみ適用され、他のファイル タイプには前のビルド手順が必要です
監視モードはありません。手動で実行し (bin/ngc-watch.js)、すべてのファイルをコンパイルする必要があります。
ブートストラップ ファイルの AOT バージョンを維持する必要があります (そうではありません) cli などのツールを使用する場合に必要です)
コンパイルする前に、クリーンアップ手順が必要です
#詳細情報: https:/ /angular.io/docs/ts/latest/cookbook/aot-compiler.HTML
Stack Overflow との違い:
Promise は、非同期操作が完了または失敗したときに単一のイベントを処理します。
Observable は (多くの言語で) Stream に似ており、各イベントに対してコールバック関数が呼び出されたときに 0 個以上のイベントを渡すことができます。 Observable は Promise の機能だけでなく他の機能も提供するため、一般に Promise よりも人気があります。 Observable を使用すると、0、1、またはそれ以上のイベントを処理できます。それぞれの場合に同じ API を使用できます。 Observable はキャンセル可能であり、これにも Promise よりも利点があります。 Observable のサブスクライバーは、サーバーへの HTTP リクエストの結果またはその他の非同期操作が不要になった場合にサブスクライブを解除でき、通知や結果が必要ない場合でも、Promise は最終的に成功または失敗のコールバックを呼び出します。それは提供します。 Observable は、map、forEach、reduce などの配列のような演算子に加えて、非常に使いやすい retry() や restart() などの強力な演算子を提供します。
Promises vs Observables
1. 戻る単一の値
2. キャンセルできません
プログラミング関連の知識について詳しくは、プログラミング教育をご覧ください。 ！
以上がAngular に関する典型的な面接の質問 12 選の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
