Angular 開発者が学ばなければならない 19 のこと-jsチュートリアル-php.cn

この記事では、優れた Angular 開発者になるために学ぶ必要がある 19 のことを紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

Angular 開発者が学ばなければならない 19 のこと

ToDo アプリは基本的に、フロントエンド開発の「Hello world」に相当します。アプリケーション作成の CRUD の側面についても説明しますが、通常はフレームワークやライブラリでできることの表面をなぞるだけです。

Angular は常に変化し、更新されているように見えるかもしれませんが、実際には、変わらないものもいくつかあります。以下は、JavaScript フレームワークを適切に利用できるようにするために、Angular について学ぶ必要がある中心的な概念の概要です。 [関連チュートリアルの推奨事項: "angular チュートリアル"]

Angular について言えば、多くのことを学ぶ必要があります。多くの人は、学ばないという理由だけで初心者の輪に閉じ込められています。どこに行けばいいのか、どのキーワードを検索すればよいか、または検索すべきかがわかります。以下で説明するこのガイド (および Angular 自体の簡単な概要) は、実際に Angular 2 を使い始めたときにあればよかったと思うものです。

1. モジュール式 Angular アーキテクチャ

理論的には、すべての Angular コードを 1 ページに配置して 1 つの大きな関数に配置できますが、これはそうではありません。これはコードを構造化する効率的な方法ではなく、Angular の存在目的を損なうものです。

Angular は、フレームワークアーキテクチャの重要な部分としてモジュールの概念を使用します。モジュールとは、存在理由が 1 つだけあるコードのコレクションを指します。 Angular アプリは基本的にモジュールで構成されており、一部はスタンドアロン、一部は共有されます。

アプリケーションのモジュールを構造化する方法はたくさんあります。さまざまなアーキテクチャを深く理解することは、アプリケーションの成長に合わせて拡張する方法を決定するのにも役立ちます。コードを分離し、コード生成を防ぐことにも役立ちます。

検索キーワード:

Angular アーキテクチャパターン
拡張可能な Angular アプリケーションアーキテクチャ

2. 一方向のデータフローと不変性

# Angular 1 の頃から、双方向バインディングは多くのフロントエンド開発者を魅了していました。人々の。これは実際、Angular の元々のセールスポイントの 1 つでした。ただし、時間の経過とともにアプリケーションがより複雑になり始めると、パフォーマンスの面で問題が発生し始めます。

双方向バインディングはどこでも必要なわけではないことがわかりました。

双方向バインディングは Angular 2 でも引き続き可能ですが、開発者が明示的に要求した場合に限ります。これにより、コードの背後にいる人はデータの方向とデータフローについて考える必要が生じ、またアプリケーションがデータを処理できるようになります。どのように流れるかを決定することで、より柔軟に対応できます。

検索キーワード:

Angular データフローのベストプラクティス
Angular Directional フローにおける独自の機能
#一方向バインディングの利点

##3. 属性と構造の指示

##ディレクティブは、カスタム要素による HTML の拡張です。属性ディレクティブを使用すると要素のプロパティを変更でき、構造ディレクティブを使用すると DOM に要素を追加または削除してレイアウトを変更できます。

たとえば、ngSwitch と ngIf はパラメータを評価し、DOM の特定の部分が存在するかどうかを決定するため、構造ディレクティブです。

属性ディレクティブは、要素、コンポーネント、またはその他のディレクティブに関連付けられたカスタム動作です。

これら 2 つのディレクティブの使用方法を学習すると、アプリケーションの機能を拡張し、プロジェクト内の重複コードの量を減らすことができます。属性付きディレクティブは、アプリケーションのさまざまな部分で使用する特定の動作に焦点を当てるのにも役立ちます。

検索キーワード:

Angular 属性ディレクティブ

Angular 構造ディレクティブ
Angular 構造ディレクティブパターン

各ソフトウェアには独自の寿命があります。特定のコンテンツがどのように作成、レンダリング、削除されるかを決定するサイクル。 Angular のコンポーネントのライフサイクルは次のとおりです。

作成 → レンダリング → 子のレンダリング → データバインドされたプロパティが変更されたときの確認 → 破棄 → DOM からの削除

このサイクル内でこれを行うことができます。重要な瞬間を捉えて、特定の瞬間やイベントをターゲットにします。これにより、適切な応答を作成し、コンポーネントの存在のさまざまな段階に基づいて動作を構成できるようになります。

たとえば、ページをレンダリングする前にデータをロードする必要がある場合があります。これは ngOnInit() を使用して実行できます。また、データベースから切断する必要がある場合は、ngOnDestroy() を使用して実行できます。

検索キーワード:

Angular ライフサイクルフック

コンポーネントライフサイクル

5.Http と Observable Object Service

これは Angular に固有の機能ではなく、ES7 から提供されています。 Angular はこれをフレームワークのサポート機能の一部としてたまたま実装しており、これを理解しています。また、React、Vue、その他の JavaScript 関連のライブラリやフレームワークにもうまく変換できます。

監視可能なオブジェクトサービスは、データを効率的に処理できるパターンであり、イベントベースのシステムでデータを解析、変更、保守できるようになります。すべてがデータであるため、HTTP と Observable から完全に逃れることはできません。

検索キーワード:

JavaScript 監視可能なオブジェクトパターン
Angular HTTP と監視可能なオブジェクト
ES7 監視可能な関数

6.Smart/Dumb コンポーネントアーキテクチャ

Angular を記述する場合アプリケーションでは、すべてをコンポーネントに入れる傾向があります。ただし、これはベストプラクティスではありません。 Angular のスマート/ダムコンポーネントの概念については、特に初心者サークルでさらに議論する必要があります。

コンポーネントがスマートかダムかによって、アプリケーション全体の計画においてそのコンポーネントが果たす役割が決まります。ダムコンポーネントは一般にステートレスであり、その動作は簡単に予測して理解できます。したがって、コンポーネントをできるだけ愚かなものにしてください。スマートコンポーネントは入力と出力を伴うため、習得がより困難です。 Angular の力を適切に活用するには、Smart/Dumb コンポーネントアーキテクチャを学習してください。これにより、コードとその相互関係を処理する方法についてのパターンと考え方が得られます。

検索キーワード:

Smart/Dumb Angular コンポーネント
Stateless Dumb コンポーネント
デモコンポーネント
Angular のスマートコンポーネント

7. アプリケーションの構造とベストプラクティス

CLI では、構造とベストプラクティスに関しては限界があります。 Angular アプリケーション (またはアプリケーション全般) を構築することは、家を建てることに似ています。コミュニティは、最も効率的で効果的なアプリケーションを実現するために、セットアッププロセスを何年も最適化してきました。

Angular も例外ではありません。

Angular を学ぼうとしている人からの Angular に対する苦情のほとんどは、構造的な知識が不足していることが原因である傾向があり、構文は親しみやすく明確です。ただし、アプリケーションの構造的な知識には、コンテキスト、要件、およびそれらが概念レベルと実践レベルの両方でどのように組み合わされるかを理解する必要があります。 Angular のさまざまな潜在的なアプリケーション構造とそのベストプラクティスを理解すると、アプリケーションの構築方法について新しい視点が得られます。

検索キーワード:

単一リポジトリ Angular アプリ
##Angular ライブラリ、Angular パッケージ

8. テンプレートバインディング構文

バインディングは JavaScript フレームワークの結晶であり、それがそもそもの存在理由の 1 つです。テンプレートバインディングは、静的 HTML と JavaScript の間のギャップを橋渡しします。Angular のテンプレートバインディング構文は、これら 2 つのテクノロジ間の仲介役として機能します。

これらをいつどのように使用するかを学べば、静的だったページをインタラクティブなページに変換するのがはるかに簡単になり、煩わしさがなくなります。プロパティバインディング、イベント、補間、双方向バインディングなど、バインディングのさまざまなシナリオを研究します。

検索キーワード:

9. 機能モジュールとルーティング

機能モジュールの能力は、Angular では過小評価されています。これは実際、ビジネスニーズを整理して対応するための優れた方法です。長期的には、責任を制限し、コード汚染の防止に役立ちます。

機能モジュールには 5 つのタイプ (ドメイン機能モジュール、ルーテッド機能モジュール、ルーティングモジュール、サービス機能モジュール、および識別可能なコンポーネント機能モジュール) があり、それぞれが特定のタイプの機能を処理します。ルーティングで機能モジュールを使用する方法を学ぶと、個別の機能セットを作成し、アプリケーションに適切かつ明確な関心事の分離を適用するのに役立ちます。

検索キーワード:

##Angular 機能モジュール

Angular の共有機能構造
機能モジュールプロバイダー
遅延読み込みルーティングおよび機能モジュール
##10. フォームと検証 (リアクティブフォームとバリデータ)

フォームは、フロントエンド開発において避けられない部分です。

認証はフォームにも表示されます。

Angular では、スマートなデータ駆動型フォームを構築する方法がたくさんあります。最も一般的なフォームの反復はリアクティブフォームです。ただし、テンプレート駆動型フォームやカスタムバリデーターなどの他のオプションもあります。

バリデーターが CSS とどのように連携するかを理解することは、ワークフローをスピードアップし、アプリケーションを検証エラーに対応した空間に変えるのに役立ちます。

# 検索キーワード:

Angular 形式検証

テンプレート駆動検証
レスポンシブフォームの検証
Angular の同期バリデータと非同期バリデータ
組み込みバリデータ
Angular カスタムバリデータ
クロスフィールド相互検証

11. コンテンツプロジェクション

Angular には、と呼ばれる機能があります。コンテンツプロジェクションは、親コンポーネントから子コンポーネントにデータを効率的に渡すものです。これは複雑に聞こえるかもしれませんが、実際にはビュー内にビューを配置してマスタービューを生成する作業です。

私たちは通常、親ビュー内にサブビューをネストする場合など、コンテンツの投影を表面的な意味で理解します。ただし、理解を広げるには、異なるビュー間でデータがどのように受け渡されるのかを理解する必要もあります。ここで、コンテンツの投影を理解することが役立ちます。

コンテンツプロジェクションを理解すると、アプリケーションのデータフローと変動が発生する場所を特定するのに役立ちます。

#検索キーワード:

##Angular コンテンツプロジェクション
Angular の親子ビュー関係
Angular ビューのデータ関係

12.onPush 変更検出

デフォルトでは、Angular を使用します。デフォルトの変更検出戦略。これは、コンポーネントが常にチェックされることを意味します。デフォルト値を使用することに問題はありませんが、変更を検出するには非効率的な方法になる可能性があります。

小規模なアプリケーションの場合、実行速度とパフォーマンスはかなり良好です。ただし、アプリケーションが特定のサイズに達すると、特に古いブラウザーでは実行が非常に面倒になる可能性があります。

onPush 変更検出戦略は、何かが起こったかどうかを継続的に確認するのではなく、特定のトリガーに依存するため、アプリケーションの速度が大幅に向上します。

検索キーワード:

13. パス保護、プリロード、遅延ロード

何らかの種類のログインがある場合は、パス保護が必要になります。特定のビューを未承認のビューから保護できます。これは、多くのアプリケーションで必須の要件です。パス保護は、ルーターと要求ルートの間のインターフェイスとして機能します。ルートへのアクセスを許可するかどうかを決定するのは意思決定者です。パス保護の世界では、探求すべきことがたくさんあります。つまり、トークンの有効期限、ユーザー認証、パスのセキュリティなどに基づいたパスの決定です。

プリロードと遅延読み込みによって、アプリケーションの読み込み時間が短縮され、ユーザーエクスペリエンスも向上します。プリロードと遅延ロードは、特定の画像セットをロードするかどうかを決定するだけでなく、バンドルのアーキテクチャを強化し、さまざまなスコープやドメインに存在する可能性のあるアプリケーションのさまざまな部分をロードすることもできることに注意してください。

検索キーワード:

Angular パス保護
Angular 認証モード
Angular Preloading および Lazy Loading モジュール
Angular Safe Path モード

#14. 自己定義パイプ

Angular Pipes を使用すると、データの書式設定が驚くほど簡単になります。多くの事前構成済みのすぐに使用できるパイプラインは、日付、通貨、パーセンテージ、大文字小文字などの多くのことをカバーしていますが、必要なものすべてをカバーしているわけではありません。

ここでカスタムパイプが役に立ちます。独自のフィルターを簡単に作成し、好みに合わせてデータ形式を変換できます。とても簡単なのでぜひチェックしてみてください！

検索キーワード:

15.@viewChild および @ContentChild デコレータ

viewChild と contentChild は、コンポーネントが相互に通信する方法です。 Angular の重要な点は、パズルのように複数のコンポーネントをまとめてコンパイルできることですが、それらのコンポーネントが互いに分離されている場合、パズルはあまり役に立ちません。

ここで viewChild と contentChild が登場します。これら 2 つのデコレータの使い方を学習すると、関連するコンポーネントにアクセスできるようになります。これにより、データ共有のタスクが容易になり、関連コンポーネントによってトリガーされるデータとイベントの送信が可能になります。

検索キーワード:

16. 動的コンポーネントと ng-template

コンポーネントは構築物ですAngular のブロック。ただし、すべてのコンポーネントが修正されているわけではなく、一部のコンポーネントはプリコンパイルではなく動的に作成する必要があります。

動的コンポーネントを使用すると、アプリケーションは特定のコンポーネントを動的に作成できます。静的コンポーネントは、物事が変化しないことを前提としています。予想される入力と出力から予測できます。

ただし、動的コンポーネントはオンデマンドでレンダリングされます。これらは、外部ソースとその更新をリッスンしている可能性のあるアプリケーションまたはページでアクションが発生するリアクションを構築するときに非常に便利です。

検索キーワード:

17.@Host @Hostingbinding およびexportAs

@Host、@Hostingbinding、およびexportAsは、添付されたパラメータを拡張するAngularディレクティブデコレータです。また、アプリケーション内で使用するためにエクスポートできるクリーンなテンプレートを作成することもできます。

上記がわかりにくいと思われる場合は、まず Angular ディレクティブとその存在目的を調べてください。 @Host、@Hostingbinding、exportAs は、ディレクティブの実装に役立つ属性です。

検索キーワード:

Angular ディレクティブモード
Angular の @Host、@Hostingbinding

#18. 状態管理に RxJ を使用する

アプリケーションの状態によって、ユーザーに表示されるデータが最終的に決まります。スパゲッティがぐちゃぐちゃに散らかった状態の場合は、データ構造全体が変更に対して脆弱になる可能性があります。

Angular で状態がどのように機能するかを理解し始めると、データがどのように、そしてなぜ動作するのかが理解できるようになります。

Angular には独自の状態管理システムがありますが、RxJs は状態とその関連データを一元管理する優れた方法です。親子関係チェーンでデータが失われる可能性があります。 RxJs は、集中ストアを作成することで物事を分離します。

# 検索キーワード:

##Flux / Redux 原理
Angular State Management Principles

「依存関係の注入」は、通常、膨大な量ですというコンセプトなので、あまり詳しくない場合は、ぜひ調べてみる必要があります。 Angular で依存関係の注入を効率的に作成するには、主にコンストラクターを使用する方法がいくつかあります。これは、すべてをロードするのではなく、必要なものだけをインポートすることでアプリケーションをより効率的にする方法です。

「依存性注入」と同様に、「エリア」も Angular 独自の概念です。これは、アプリケーションが非同期タスクを最初から最後まで検出する方法です。これらの非同期タスクはアプリケーションの内部状態を変更し、したがってビューを変更する可能性があるため、これは重要です。「ゾーン」により、変更検出プロセスが容易になります。

検索キーワード:

Angular area