AngularJSディレクティブvsサービスvsコントローラー
社内のWebサイトに変更リクエストを実装しようとしています。これにより、一連のフィールドがチェックされ、特定のガイドラインに一致する場合は強調表示されます。たとえば、生年月日が今日の場合、そのフィールドの輪郭が表示され、ツールチップに「お誕生日おめでとうございます！」と表示されます。
仕様では、ページの残りのレンダリングが完了した後にこれをロードするように要求しているため、ロード時間が長くなることはありません。私はangularJSを初めて使用するので、これを行う「適切な」方法がわかりません。
問題：
これには、ボーダー、画像、タイトル属性（DOM操作）の追加が含まれるため、ディレクティブを使用する必要があるようです。
ただし、ほとんどのディレクティブがそうであるように、これは再利用可能または「短い」ものではありません。
チェックする必要のあるデータの半分は、ページの読み込み時に元の呼び出しで返されるので、それを保存し、別の呼び出しが再度それを取得することを無駄にしたくないので、サービスはそのすべてのデータを保存するのにいいと思います。
私はこれをすべてコントローラーで行う方法を知っていますが、それは悪い悪いコードです：P
これを行うための最良の方法についてのアイデアはありますか？基本的に、すべてのデータをチェックするには、http呼び出しが必要です。これにより、必要な「コールアウト」のタイプごとにブール値を持つオブジェクトが返されます。次に、このリストを実行し、値がtrueの場合は、境界線、画像、ツールチップテキストを追加します。
この質問が十分に明確かどうかはわかりません。詳細を追加したい場合は、お問い合わせください。ありがとうございました！
あなたが正しい、プレイには多くのオプションがあります。
コントローラーは、角度のある新しいものを書き始めるのに適した場所です。マークアップにコントローラーを関連付けると、angularの既存のディレクティブのライブラリーをangularの既存のサービスで使用できます。
これを使用してしばらくすると、コントローラーが大きくなりすぎたことがわかります。さて、今はリファクタリングする時です。以下は、私が従う傾向のある一般的なガイドラインです。
- コントローラー：コントローラーは、$ scopeに関連付けられた値/機能をアタッチおよび管理します。結局、$ scopeはプレゼンテーション主導になる傾向があります。 IEそのビューモデル。
- サービス：サービスは、インフラストラクチャ、バックエンド、またはその他のブラウザー機能に結びつく傾向があります
- ディレクティブ：ディレクティブを使用すると、既存のハンドラーでは処理されないDOMイベント/機能と統合できます。
したがって、3つの方向のいずれかにコードをプッシュする必要があります。
私のコントローラーからのコードは、本当に論理的にはプレゼンテーションデータ/ロジックの別の部分であり、別のコントローラーに分割する必要があります。 $ scopeのアイテムを操作する場合、各コントローラーが担当するパーツを$ scopeの独自のオブジェクトに分離するのが最善です。たとえば、あるコントローラーの$ scope.creditCard。[blah]と別のコントローラーの$ scope.billingAddress。[blah]これは、$ scopeでのプロトタイプ継承のAngularの使用に関する問題を防ぐのに役立ちます。
私のコントローラーからのコードは、アプリケーションインフラストラクチャまたはユーティリティコードの一部であり、アプリを通じて共有する必要がある場合があり、serviceに分割する必要があります
私のコントローラーのコードはプレゼンテーション/ DOM編成に深く関わっているため、独自のディレクティブに分割する必要があります
1.の例は、残りの支払いフォームとは別にクレジットカードの入力/検証を処理することです。コントローラーには、ユーザーがアドレスを入力できるようにするロジックとは別の一連のクレジットカードロジックがあるため、論理的に別のコントローラーになります。
2の例としては、クレジットカードのバックエンドサービスと通信する部分を移動して、支払いを承認または拒否することができます。または、別の例として、ユーザー作成APIを処理するためにバックエンドと通信するモジュールがあります。
3の例としては、クレジットカードに4つの数字を入力した後、4つの編集ボックス間でカーソルを移動する、ある種の自動タブ機能を作成することがあります。
それに応じてアプリを分割します。