[解決済み] モデルデータや振る舞いをどこに置くか?[tl; dr; サービスを利用する]
2022-03-16 23:07:08
質問
私は最新のプロジェクトでAngularJSを使用しています。ドキュメントやチュートリアルでは、すべてのモデルデータはコントローラスコープに置かれます。私は、コントローラで利用できるようにするために、そして対応するビューで利用できるようにするために、そこになければならないことを理解しています。
しかし、私はモデルを実際にそこに実装する必要はないと思っています。例えば、モデルは複雑で、プライベートな属性を持っているかもしれません。さらに、別のコンテキストやアプリでそれを再利用したいと思うかもしれません。すべてをコントローラに入れるのは、MVCパターンを完全に壊してしまいます。
どのようなモデルでも、その動作は同じです。もし、私が DCIアーキテクチャ で、データモデルから振る舞いを分離する場合、振る舞いを保持するために追加のオブジェクトを導入しなければならないだろう。これは、ロールとコンテクストを導入することで実現できるだろう。
DCI == (英語) D アト C コラボレーション I 相互作用
もちろん、モデルのデータと動作は、プレーンなjavascriptオブジェクトや任意の"class"パターンで実装することができます。しかし、それを行うためのAngularJSの方法は何でしょうか?サービスを使うのでしょうか?
つまり、この質問に行き着くわけです。
AngularJSのベストプラクティスに従って、コントローラから切り離されたモデルをどのように実装するのでしょうか?
どのように解決するのですか?
複数のコントローラで利用可能なものが欲しい場合は、サービスを利用する必要があります。ここでは、簡単な工夫をした例を紹介します。
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
}
関連
-
fetch ネットワークリクエストラッパーの説明例
-
[解決済み] 期待される代入または関数呼び出し: 未使用式なし ReactJS
-
[解決済み】ReactJSでエラー発生 Uncaught TypeError: Super expression は null か関数でなければならず、undefined ではありません。
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] HTMLマークアップのどこに<script>タグを記述すればよいですか?
-
[解決済み] varキーワードの目的と、どのような場合に使用する(または省略する)べきですか?
-
[解決済み] Node.jsのmodule.exportsの目的と使い方を教えてください。
-
[解決済み] AngularJSで$scope.$watchと$scope.$applyを使用するにはどうすればよいですか?
-
[解決済み] AngularJS 。非同期データでサービスを初期化する
-
[解決済み] MVWとは何の略ですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
fetch ネットワークリクエストラッパーの説明例
-
Vueがechartsのtooltipにクリックイベントを追加するケーススタディ
-
vue for 登録ページ効果 vue for sms 認証コードログイン
-
[解決済み】React - uncaught TypeError: 未定義のプロパティ 'setState' を読み取れない
-
[解決済み】Node.js getaddrinfo ENOTFOUND
-
[解決済み] 配列の結合時に未定義のプロパティ 'push' を読み込むことができない
-
[解決済み】awaitは非同期関数でのみ有効です。
-
[解決済み】React Nativeアプリをターミナルから実行するとエラーが発生する(iOS)
-
[解決済み】(Google Map API) Geocodeは以下の理由で成功しませんでした。REQUEST_DENIED
-
モジュールのビルドに失敗しました。Error: ENOENT: no such file or directory, scandir 'D:\.... \node_modules