ホームページ > 記事 > ウェブフロントエンド > Angular 開発者が学ばなければならない 19 のこと
Angular 開発者が学ばなければならない 19 のこと
- 青灯夜游転載
- 2021-04-20 10:21:472820ブラウズ
この記事では、優れた 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 フローにおける独自の機能
- #一方向バインディングの利点
##ディレクティブは、カスタム要素による HTML の拡張です。属性ディレクティブを使用すると要素のプロパティを変更でき、構造ディレクティブを使用すると DOM に要素を追加または削除してレイアウトを変更できます。
たとえば、ngSwitch と ngIf はパラメータを評価し、DOM の特定の部分が存在するかどうかを決定するため、構造ディレクティブです。
検索キーワード:
Angular 属性ディレクティブ
- Angular 構造ディレクティブ
- Angular 構造ディレクティブ パターン
- 4. コンポーネントのライフサイクル フック
各ソフトウェアには独自の寿命があります。特定のコンテンツがどのように作成、レンダリング、削除されるかを決定するサイクル。 Angular のコンポーネントのライフ サイクルは次のとおりです。
作成 → レンダリング → 子のレンダリング → データ バインドされたプロパティが変更されたときの確認 → 破棄 → DOM からの削除このサイクル内でこれを行うことができます。重要な瞬間を捉えて、特定の瞬間やイベントをターゲットにします。これにより、適切な応答を作成し、コンポーネントの存在のさまざまな段階に基づいて動作を構成できるようになります。
検索キーワード:
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 マイクロ アプリケーション
- モノリシック リポジトリ
バインディングは JavaScript フレームワークの結晶であり、それがそもそもの存在理由の 1 つです。テンプレート バインディングは、静的 HTML と JavaScript の間のギャップを橋渡しします。Angular のテンプレート バインディング構文は、これら 2 つのテクノロジ間の仲介役として機能します。
これらをいつどのように使用するかを学べば、静的だったページをインタラクティブなページに変換するのがはるかに簡単になり、煩わしさがなくなります。プロパティ バインディング、イベント、補間、双方向バインディングなど、バインディングのさまざまなシナリオを研究します。
- Angular プロパティ バインディング
- Angular イベント バインディング
- Angular 双方向バインディング、Angular 補間
- Angular 受け渡し定数
機能モジュールの能力は、Angular では過小評価されています。これは実際、ビジネス ニーズを整理して対応するための優れた方法です。長期的には、責任を制限し、コード汚染の防止に役立ちます。
機能モジュールには 5 つのタイプ (ドメイン機能モジュール、ルーテッド機能モジュール、ルーティング モジュール、サービス機能モジュール、および識別可能なコンポーネント機能モジュール) があり、それぞれが特定のタイプの機能を処理します。ルーティングで機能モジュールを使用する方法を学ぶと、個別の機能セットを作成し、アプリケーションに適切かつ明確な関心事の分離を適用するのに役立ちます。
##Angular 機能モジュール
- Angular の共有機能構造
- 機能モジュールプロバイダー
- 遅延読み込みルーティングおよび機能モジュール
- ##10. フォームと検証 (リアクティブ フォームとバリデータ)
フォームは、フロントエンド開発において避けられない部分です。
認証はフォームにも表示されます。
Angular では、スマートなデータ駆動型フォームを構築する方法がたくさんあります。最も一般的なフォームの反復はリアクティブ フォームです。ただし、テンプレート駆動型フォームやカスタム バリデーターなどの他のオプションもあります。
バリデーターが CSS とどのように連携するかを理解することは、ワークフローをスピードアップし、アプリケーションを検証エラーに対応した空間に変えるのに役立ちます。
# 検索キーワード:
Angular 形式検証
- テンプレート駆動検証
- レスポンシブ フォームの検証
Angular の同期バリデータと非同期バリデータ
組み込みバリデータ
Angular カスタム バリデータ
クロスフィールド相互検証
11. コンテンツ プロジェクション
Angular には、と呼ばれる機能があります。コンテンツ プロジェクションは、親コンポーネントから子コンポーネントにデータを効率的に渡すものです。これは複雑に聞こえるかもしれませんが、実際にはビュー内にビューを配置してマスター ビューを生成する作業です。
私たちは通常、親ビュー内にサブビューをネストする場合など、コンテンツの投影を表面的な意味で理解します。ただし、理解を広げるには、異なるビュー間でデータがどのように受け渡されるのかを理解する必要もあります。ここで、コンテンツの投影を理解することが役立ちます。
コンテンツ プロジェクションを理解すると、アプリケーションのデータ フローと変動が発生する場所を特定するのに役立ちます。
#検索キーワード:
- ##Angular コンテンツ プロジェクション
- Angular の親子ビュー関係
- Angular ビューのデータ関係
12.onPush 変更検出
デフォルトでは、Angular を使用します。デフォルトの変更検出戦略。これは、コンポーネントが常にチェックされることを意味します。デフォルト値を使用することに問題はありませんが、変更を検出するには非効率的な方法になる可能性があります。
検索キーワード:
- Angular onPush 変更検出
13. パス保護、プリロード、遅延ロード
何らかの種類のログインがある場合は、パス保護が必要になります。特定のビューを未承認のビューから保護できます。これは、多くのアプリケーションで必須の要件です。パス保護は、ルーターと要求ルートの間のインターフェイスとして機能します。ルートへのアクセスを許可するかどうかを決定するのは意思決定者です。パス保護の世界では、探求すべきことがたくさんあります。つまり、トークンの有効期限、ユーザー認証、パスのセキュリティなどに基づいたパスの決定です。
検索キーワード:
- Angular パス保護
- Angular 認証モード
- Angular Preloading および Lazy Loading モジュール
- Angular Safe Path モード
#14. 自己定義パイプ
Angular Pipes を使用すると、データの書式設定が驚くほど簡単になります。多くの事前構成済みのすぐに使用できるパイプラインは、日付、通貨、パーセンテージ、大文字小文字などの多くのことをカバーしていますが、必要なものすべてをカバーしているわけではありません。
検索キーワード:
- Angular カスタム パイプライン
15.@viewChild および @ContentChild デコレータ
viewChild と contentChild は、コンポーネントが相互に通信する方法です。 Angular の重要な点は、パズルのように複数のコンポーネントをまとめてコンパイルできることですが、それらのコンポーネントが互いに分離されている場合、パズルはあまり役に立ちません。
検索キーワード:
- ##Angular デコレータ
- Angular での viewchild と contentchild
- Angular コンポーネントのデータ共有
コンポーネントは構築物ですAngular のブロック。ただし、すべてのコンポーネントが修正されているわけではなく、一部のコンポーネントはプリコンパイルではなく動的に作成する必要があります。
動的コンポーネントを使用すると、アプリケーションは特定のコンポーネントを動的に作成できます。静的コンポーネントは、物事が変化しないことを前提としています。予想される入力と出力から予測できます。
ただし、動的コンポーネントはオンデマンドでレンダリングされます。これらは、外部ソースとその更新をリッスンしている可能性のあるアプリケーションまたはページでアクションが発生するリアクションを構築するときに非常に便利です。
検索キーワード:
- Angular の動的コンポーネント
- 動的コンポーネントと ng-template
17.@Host @Hostingbinding およびexportAs
@Host、@Hostingbinding、およびexportAsは、添付されたパラメータを拡張するAngularディレクティブデコレータです。また、アプリケーション内で使用するためにエクスポートできるクリーンなテンプレートを作成することもできます。
上記がわかりにくいと思われる場合は、まず Angular ディレクティブとその存在目的を調べてください。 @Host、@Hostingbinding、exportAs は、ディレクティブの実装に役立つ属性です。
検索キーワード:
Angular ディレクティブ モード
Angular の @Host、@Hostingbinding
#18. 状態管理に RxJ を使用する
アプリケーションの状態によって、ユーザーに表示されるデータが最終的に決まります。スパゲッティがぐちゃぐちゃに散らかった状態の場合は、データ構造全体が変更に対して脆弱になる可能性があります。
# 検索キーワード:
- ##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 サイトの他の関連記事を参照してください。