72

Angular でのモデルの使用は混乱を招きます。Angular は、モデルを好きなものにできるというアプローチを取っているようです。IE Angular には明示的なモデル クラスが含まれておらず、標準の JavaScript オブジェクトをモデルとして使用できます。

私が見たほぼすべての Angular の例では、モデルは事実上、手動で作成されたか、リソースを介して API 呼び出しから返されたオブジェクトです。私が見たほとんどすべての Angular の例は単純であるため、通常、モデル データはコントローラーの $scope に保存され、モデルに関連する状態 (選択など) もコントローラーの $scope に保存されます。これは単純なアプリ/例では問題なく機能しますが、アプリがより複雑になると単純化しすぎているように思えます。コントローラーに格納されたモデルの状態は、コンテキストに依存するようになり、コンテキストが変更された場合に失われるリスクがあります。たとえば、次のような場合です。コントローラーを格納selectedGalleryし、globalselectedPhotoのみを格納できます。selectedImageselectedPhotoギャラリーごと。このような状況では、ギャラリーごとにコントローラーを使用すると、この問題が解消される可能性がありますが、UI の観点からは無駄であり、おそらく不適切で不必要に見えるでしょう。

Angular のモデルの定義は、サーバーとクライアントの間で渡されるダム オブジェクトである VO/DTO に近いと思われます。私の本能は、そのようなオブジェクトをモデルと見なすものにラップすることです。これは、DTO/VO に関連する状態 (選択など) を維持し、DTO/VO を操作するために必要に応じてミューテーターを提供し、残りのオブジェクトに通知するクラスです。基になるデータへの変更の適用。明らかに、この最後の部分は Angular のバインディングによって適切に処理されますが、最初の 2 つの責任については依然として強力なユースケースが見られます。

しかし、私が見た例でこのパターンが使用されているのを実際に見たことはありませんが、スケーラブルな代替手段と見なすものも見たことがありません。Angular は、Singleton を強制することで、サービスをモデルとして使用することを暗黙のうちに思いとどまらせているようです (これを回避する方法があることは知っていますが、それらは広く使用されたり承認されたりしていないようです)。

では、モデル データの状態を維持するにはどうすればよいでしょうか。

[編集]この質問の 2 番目の回答は興味深いもので、私が現在使用しているものに近いものです。

4

3 に答える 3

7

まず第一に、Angular は Web ベースのフレームワークであることを忘れないようにしましょう。オブジェクトだけで「状態を保持」すると、ユーザーがブラウザで更新を押しても生き残れません。したがって、Web ベースのアプリケーションでモデル データの状態を保持する方法を理解するということは、コードがブラウザー環境で機能するようにそれを保持する方法を理解することを意味します。

Angular を使用すると、以下を使用して状態を保持することが非常に簡単になります。

  1. RESTful $resource への呼び出し
  2. モデルのインスタンスを表す URL

あなたの簡単な例では、などのユーザーアクションの保存は、次のような URLselectedGalleryをselectedPhoto使用して表すことができます。

// List of galleries
.../gallery

// List of photos in a gallery
.../gallery/23

// A specific photo
.../gallery/23/photo/2

backユーザーがおよびforwardボタンを使用してブラウザの履歴をナビゲートできるようにするため、URL は重要です。この状態をアプリケーションの他の部分と共有したい場合、Web アプリケーションは、cookie/localStorage、非表示のフレーム/フィールド、またはサーバーへの保存を使用してそれを実現するための豊富なメソッドを提供します。

アプリケーションのさまざまな状態を永続化する方法について戦略を定義したら、これらの永続化された情報に、によって提供されるシングルトン オブジェクトを使用してアクセスする.serviceか、または を介し​​てインスタンスを使用してアクセスするかを決定しやすくなります.factory。

于 2013-05-18T10:34:13.940 に答える
1

Angular は、いわゆる「モデル オブジェクト」を格納する方法について意見を持っていません。Angular コントローラー$scopeは、UI を管理するための「ビュー モデル」としてのみ存在します。コード内でこれら 2 つの概念を分離することをお勧めします。

Angular スコープ変更通知 ( $watch) の便利さが必要な場合は、必要に応じてスコープ オブジェクトを使用してモデル データを保存できます ( var myScope = $rootScope.$new())。UI がバインドされているのと同じスコープ オブジェクトを使用しないでください。

この目的のために、カスタム サービスを作成することをお勧めします。したがって、データ フローは次のようになります。

AJAX --> カスタム サービス --> モデル スコープ オブジェクト --> コントローラ --> UI スコープ オブジェクト --> DOM

またはこれ：

AJAX --> カスタム サービス --> プレーンな古い JavaScript オブジェクト --> コントローラー --> UI スコープ オブジェクト --> DOM

于 2013-05-17T20:30:10.333 に答える