☰

モデルデータと動作をどこに置くか? [tl; dr; サービスの使用] 質問する

tag-icon • tag-icon javascript model-view-controller angularjs dci
モデルデータと動作をどこに置くか? [tl; dr; サービスの使用] 質問する

私は最新のプロジェクトで AngularJS を使用しています。ドキュメントとチュートリアルでは、すべてのモデル データがコントローラー スコープに配置されます。コントローラーで使用できるように、つまり対応するビュー内で使用できるようにするためには、そこに存在する必要があることは理解しています。

しかし、モデルを実際にそこに実装するべきではないと思います。複雑で、たとえばプライベート属性がある可能性があります。さらに、別のコンテキスト/アプリで再利用したい場合もあります。すべてをコントローラーに入れると、MVC パターンが完全に破綻します。

同じことは、どのモデルの動作にも当てはまります。DCIアーキテクチャデータ モデルから動作を分離するには、動作を保持するための追加のオブジェクトを導入する必要があります。これは、ロールとコンテキストを導入することによって行われます。

DCI ==データコラボレーション相互作用​

もちろん、モデル データと動作は、単純な JavaScript オブジェクトまたは任意の「クラス」パターンを使用して実装できます。しかし、AngularJS でそれを実現する方法は何でしょうか? サービスを使用するのでしょうか?

つまり、次の質問になります。

AngularJS のベスト プラクティスに従って、コントローラーから分離されたモデルをどのように実装しますか?

ベストアンサー1

複数のコントローラーで使用できるものが必要な場合は、サービスを使用する必要があります。以下は簡単な例です。

myApp.factory('ListService', function() {
  var ListService = {};
  var list = [];
  ListService.getItem = function(index) { return list[index]; }
  ListService.addItem = function(item) { list.push(item); }
  ListService.removeItem = function(item) { list.splice(list.indexOf(item), 1) }
  ListService.size = function() { return list.length; }

  return ListService;
});

function Ctrl1($scope, ListService) {
  //Can add/remove/get items from shared list
}

function Ctrl2($scope, ListService) {
  //Can add/remove/get items from shared list
}

おすすめ記事