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 構造ディレクティブ パターン
4. コンポーネントのライフサイクル フック

各ソフトウェアには独自の寿命があります。特定のコンテンツがどのように作成、レンダリング、削除されるかを決定するサイクル。 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 パッケージ

#Angular
Angular マイクロ アプリケーション
モノリシック リポジトリ

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

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

---

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

検索キーワード:

Angular プロパティ バインディング
Angular イベント バインディング
Angular 双方向バインディング、Angular 補間
Angular 受け渡し定数

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

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

---

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

検索キーワード:

##Angular 機能モジュール

• Angular の共有機能構造

• 機能モジュールプロバイダー

• 遅延読み込みルーティングおよび機能モジュール

• ##10. フォームと検証 (リアクティブ フォームとバリデータ)

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

---

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

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

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

# 検索キーワード:

Angular 形式検証

• テンプレート駆動検証

• レスポンシブ フォームの検証

• Angular の同期バリデータと非同期バリデータ

• 組み込みバリデータ

• Angular カスタム バリデータ

• クロスフィールド相互検証

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

---

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

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

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

#検索キーワード:

• ##Angular コンテンツ プロジェクション

• Angular の親子ビュー関係

• Angular ビューのデータ関係

12.onPush 変更検出

---

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

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

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

検索キーワード:

Angular onPush 変更検出

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

---

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

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

検索キーワード:

• Angular パス保護

• Angular 認証モード

• Angular Preloading および Lazy Loading モジュール

• Angular Safe Path モード

#14. 自己定義パイプ

---

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

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

検索キーワード:

Angular カスタム パイプライン

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

---

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

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

検索キーワード:

##Angular デコレータ
Angular での viewchild と contentchild
Angular コンポーネントのデータ共有

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

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

---

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

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

検索キーワード:

Angular の動的コンポーネント
動的コンポーネントと ng-template

17.@Host @Hostingbinding およびexportAs

---

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

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

検索キーワード:

• Angular ディレクティブ モード

• Angular の @Host、@Hostingbinding

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

---

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

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

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

# 検索キーワード:

##Angular RxJs

• ##Flux / Redux 原理

• Angular State Management Principles
19. 依存関係の注入とゾーン

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

---

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

検索キーワード:

Angular area

• Dependency Injection

• Angular DI
最後の言葉

Angular は大きなトピックです。 Angular アプリケーションの構築は学習プロセスに役立つかもしれませんが、何がわからないのかわからない場合もあります。初めて始めるときは、知らないことを理解するのが難しいですが、この短いガイドが通常の Angular チュートリアルを超えたインスピレーションを与え、Angular をより包括的に理解できるようになれば幸いです。

---

元のアドレス: https://medium.com/better-programming/19-things-you-need-to-learn-to-become-an-Effective-angular-developer -c0ccfa51222a

プログラミング関連の知識については、

プログラミング入門

をご覧ください。 ！

以上がAngular 開発者が学ばなければならない 19 のことの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。