AngularJSディレクティブとサービスとコントローラー

会社の内部Webサイトで変更要求の実装を開始しようとしています。これにより、多くのフィールドがチェックされ、特定のガイドラインに一致する場合は強調表示されます。たとえば、生年月日が今日の場合、そのフィールドの概要が表示され、ツールチップに「お誕生日おめでとう！」と表示されます。

仕様では、ページの残りの部分のレンダリングが完了した後にこれをロードするように要求しているため、ロード時間は増加しません。angularJSは初めてなので、これを行うべき「適切な」方法がわかりません。

問題点：

これには境界線と画像およびタイトル属性の追加（DOM操作）が含まれるため、ディレクティブを使用する必要があるようです。

ただし、これは再利用できず、ほとんどのディレクティブがそうであるように「短く」なります。

チェックする必要があるデータの半分は、ページの読み込み時に元の呼び出しで返されるので、それを保存し、もう一度取得する別の呼び出しを無駄にしたくないので、すべてのデータを保存するのにサービスがいいと思います。

私はこれをすべてコントローラーで行う方法を知っていますが、それは悪い悪いコードです：P

これを行うことができる最善の方法に関するアイデアはありますか？基本的に、すべてのデータをチェックするためにhttp呼び出しが必要になります。これにより、必要な 'Call Out'の各タイプのブール値を持つオブジェクトが返されます。次に、このリストを実行し、値がtrueの場合、境界線、画像、およびツールチップテキストを追加します。

この質問が十分に明確かどうかはわかりませんので、詳細を追加してほしい場合はお問い合わせください。ありがとうございました！

あなたの言うとおり、多くの選択肢があります。

コントローラーは、新しい角度で何かを書き始めるのに適した場所です。コントローラーをマークアップの一部に結び付けることで、アンギュラーの既存のディレクティブライブラリをアンギュラーの既存のサービスで使用できます。

これと一緒に生活してから非常に短い時間の後、コントローラーが大きくなりすぎていることに気付くでしょう。リファクタリングの時間です。ここに私が従う傾向がある一般的なガイドラインがあります。

• コントローラー：コントローラーは、$ scopeに関連付けられた値/機能を付加および管理します。最終的には、$ scopeはプレゼンテーションを重視する傾向があります。IEはビューモデルです。
• サービス：サービスは、インフラストラクチャ、バックエンド、またはその他のブラウザー機能に結び付く傾向があります
• ディレクティブ：ディレクティブを使用すると、既存のハンドラーでは処理されないDOMイベント/機能と統合できます。

したがって、次の3つの方向のいずれかでコードをプッシュする必要があります。

1. 私のコントローラーからのコードは、実際には論理的に別のプレゼンテーションデータ/ロジックであり、別のコントローラーに分割する必要があります。$ scopeでアイテムを操作するときは、各コントローラーが担当するパーツを$ scope上の独自のオブジェクトに分離するのが最善です。たとえば、あるコントローラーの場合は$ scope.creditCard。[blah]、別のコントローラーの場合は$ scope.billingAddress。[blah]です。これにより、$ scopeでの角度によるプロトタイプ継承の使用に関する問題を防ぐことができます。

2. コントローラーのコードは、アプリケーションインフラストラクチャまたはユーティリティコードの一部であり、アプリを通じて共有する必要があり、サービスに分割する必要があります

3. 私のコントローラーからのコードは、プレゼンテーション/ DOMの編成に大きく関係しているため、独自のディレクティブに分割する必要があります

1.の例は、クレジットカードの入力/検証を他の支払いフォームとは別に処理する場合です。コントローラーには、ユーザーがアドレスを入力できるようにするロジックとは別のクレジットカードロジックがたくさんあるので、ユーザーは論理的に別のコントローラーになります。

2の例としては、クレジットカードバックエンドサービスと通信する部分を移動して、支払いを承認/拒否する場合があります。または、ユーザー作成APIを処理するためにバックエンドと通信するモジュールがあります。

3の例としては、クレジットカードに4つの数字を入力した後、4つの編集ボックス間でカーソルを移動する自動タブ機能を作成する場合があります。

それに応じてアプリを分割します。