72

これまで、私は主にWebアプリケーションの構築にテクノロジースタックをStruts 2使用していました。重要なのは、前述のスタックはサーバー側のパターンを使用しているということです。Webブラウザーの主な役割は、要求/応答サイクル（+クライアント側の検証）に限定されていました。データの取得、ビジネスロジック、配​​線、検証は主にサーバー側の責任でした。SpringJQueryMVC

私が読んだ次の引用に触発されたAngularJSフレームワークに関するいくつかの質問があります：

AngularJSチュートリアルから：

Angularアプリの場合、コードを分離し、関心の分離を行うために、Model-View-Controller（MVC）デザインパターンを使用することをお勧めします。

Wikipedia Model–view–controllerから：

Model–View–Controller（MVC）は、情報の表現をユーザーの操作から分離するアーキテクチャーです。モデルはアプリケーションデータとビジネスルールで構成され、コントローラーは入力を仲介し、モデルまたはビューのコマンドに変換します

AngularJSはクライアント側のMVCパターンを使用します。それで、何らかの方法でクライアント側にも検証ロジックを含める他のオプションはないと思いますか？

堅牢なAngularJSアプリケーションを作成するための最良の方法は何でしょうか？クライアント側のMVCとサーバー側のある種のMC（モデル、コントローラー）？

つまり、MODELとCONTROLLERが一方向に複製されている（クライアント/サーバー）ということですか？

私の質問がどういうわけか奇妙なことは知っていますが、その理由は、私が従来のサーバー側のMVCパターンに何らかの形で慣れているためだと思います。すでに同じ移行を行っている人がいると思います。

4

7 に答える 7

117

奇妙な質問ではありません。私はAngularを多くのJava開発者に売り込もうとしてきましたが、彼らはこれを求めています。私が学んでいたときに自分でそれを尋ねました（私はまだ学んでいます、ところで）

説明したように「従来の」JavaWebアプリを使用してAngular化する場合は、最初にサーバーを取得してRESTfulAPIにする必要があります。JSPなどを削除します。これは実際にはAngularアプリを作成する上で難しい部分であるIMOであり、RESTAPIを正しく取得します。サーバーに入るのに必要なロジックを決定するための鍵は、サーバーを純粋なAPIと見なし、フロントエンドがあることを今のところ忘れることでした。

その質問は本当に役に立ちました-誰かが特定のリソースを保存しようとし、そのリソースに有効なデータがない場合、彼らに伝えるフロントエンドはありません-彼らはAPIに直接アクセスしているので、APIはそれを拒否する必要があります。したがって、バックエンドは詳細な検証を担当します。これは、ビジネスロジックにも当てはまります。誰かがAPIだけを使用していると仮定すると、サーバーが何をする必要があるかが明らかになります。

サーバーは（おそらく）json形式（私はSpring MVC + Jacksonを使用）でデータを販売する必要もあるため、モデルをAngularに公開し、データベースと通信する役割を果たします。

では、Angular側のMVCとは何ですか？

  • モデル：RESTAPIから取得するデータ。APIがJSONを販売している場合、これらのオブジェクトはすでにファーストクラスのJavaScriptオブジェクトになります。
  • ビュー：HTML、およびDOMを操作する必要がある場合のディレクティブ
  • コントローラー:(およびコントローラーから除外したカスタムサービス..）
    • REST APIを照会し、ビューに必要なものを$scopeに配置します
    • サーバーへのコールバックが必要になる可能性のあるイベントに応答するためのディレクティブのコールバックを提供します。
    • 検証：通常、ディレクティブへのコールバックを介して。 すでにサーバーに設定した検証の一部と重複する可能性がありますが、サーバーがすべてを検証するのをユーザーが待たないようにする必要があります。クライアントは、検証について何かを知って、ユーザーに即座にフィードバックを提供する必要があります。
    • ビジネスロジック：検証とほぼ同じ話。

しかし、なぜクライアントとサーバーでロジックが重複しているのでしょうか。主に1つのアプリを作成していないため、2つの独立したものを作成しています。

  1. フロントエンドなしで堅牢で使用可能である必要があるRESTAPI
  2. ユーザーに即座にフィードバックを提供する必要があり、必ずしもサーバーを待つ必要のないGUI。

つまり、簡単な答えです。UIがあることを忘れて、REST APIを正しく取得してください。そうすれば、Angularに何が入るのかがはるかに明確になります。

于 2012-10-25T13:47:21.997 に答える
13

ここでは、「ビジネスロジック」という用語は少し誤称だと思います。クライアントサイドアプリの「ビジネス」は、ユーザーインターフェイスを処理するビジネスです。セキュリティルールや独自のロジック、その他の機密性の高い知的財産のようなものにはなりません。

したがって、Angularでは分割は（一般的に）次のようになります。

  • コントローラー（コントローラー）：UIの背後にあるデータ（スコープ）を操作するため。
  • ディレクティブ：スコープを介してコントローラーと通信するようにDOMを設定し、DOMを操作します。
  • テンプレート（ビュー）：DOMの要素にディレクティブを割り当てます。
  • スコープ（モデルまたはビューモデル）：システムのすべての部分の間でデータを伝送するため。
  • サービス：注入可能で再利用可能なコードのビット。通常、Ajax、Cookie、またはその他のI/Oの処理などの依存関係に使用されます。

それは実際にはほとんどMVVMであり、MVCではありません。

「ビジネス」ロジックまたはルールに関しては、セキュリティが必要なものはすべてサーバーレベルで常に保護する必要があります。

于 2012-10-25T13:55:29.067 に答える
8

MVCパターンの一部のバージョンでは、データとデータを操作するロジックの両方が「モデル」レイヤーに存在することを理解することが重要です（「コントローラー」レイヤーはバインディングのみを実行します）。ただし、AngularJSでは、データ（$ scope）のみが「モデル」レイヤーに存在し、データを操作するロジック（$ scope）は「コントローラー」レイヤーに存在します。

AngularJS

于 2014-08-18T18:43:11.003 に答える
3

@RoyTrueLoveの言うことが大好きです。しかし、これがangularjsを使用する究極の方法であると言わせてください。もちろん、Angularのメリットを最大限に活用したい場合は、この方法でアプリケーションを実行する方法を学ぶ必要があります。いつかそこにいることを祈っています。

その間、学習中、およびクライアント側の主な方法としてangularjsを完全に使用するように移行する際に、あちこちで小さなミッションに使用し始め、徐々にそれに慣れることができます。考え。

私はそれを徐々に受け入れ、ゆっくりとゆっくりと進むことをお勧めしますが、確かに、私は確かに保証します。

Angularjsは、最大のタスクを実行できるのと同じくらい最小のタスクでも機能できるため、このアプローチを提供するように設計されています。たとえば、Angularを初めて使用したのは、ユーザーがIDを入力しているときに名前を表示するためだけでした。

于 2012-10-28T09:49:48.933 に答える
3

ここでの答えに同意します。もう少しコメント。アプリケーションを作成するときは、最初に問題のドメインに集中する必要があります。そして、実際のビジネスのソフトウェアモデルを作成します。たとえば、問題のドメインがショッピングである場合、モデル化する必要のある要件には次のものがあります。

  • クレジットカードは有効である必要があります。
  • ブランドXのクレジットカードでお支払いの場合、10％の割引が受けられます。
  • ショップカートには、チェックアウトを実行するために少なくとも1つのアイテムが含まれている必要があります
  • ユーザーが商品をショップカートに追加できるようにするには、商品に在庫が必要です。

これらの要件の実装は、問題のドメインをモデル化します。これがビジネスロジックです。

Angularはフロントエンドフレームワークおよびツールキットです。これはWebフロントエンドです。これをWebフロントエンドに実装すると、モバイルやデスクトップアプリケーションなど、他のフロントエンドやインターフェイスからモデルを再利用する機会を逃してしまいます。したがって、理想的には、ビジネスロジックの実装をユーザーインターフェイスフレームワークから切り離し、永続的なフレームワークからも切り離す必要があります。次に、ユーザーインターフェイスの問題を処理し、ビジネスロジックオブジェクトと通信するインターフェイスオブジェクトを作成します。これは、Spring MVCコントローラー、および/またはAngularコントローラーまたはサービスである可能性があります。

ここに記載されている原則に従う、ご覧になるサンプルアプリケーションがあります。

于 2012-11-10T13:00:54.137 に答える
3

一部の組織は新しいテクノロジーに夢中になっているので、私もこの質問をしているようです。「クラウドが欲しい...待って、軽量が欲しい」、それがより軽いフレームワークへの切り替えに値するかどうかを正当化するのは難しい。

私はSpring/JBoss seam/JSFとMVCフレームワークを常に使用してWebアプリケーションを開発しています。ほとんどの場合、Javaスクリプトはプレゼンテーション層の検証用に常駐し、主要なアクションクラス/エンティティとビジネスロジックはJavaコードに常駐します。Angularの基本的な実践の後、フロントエンドに独自のビューとコントローラーを配置できるプレゼンテーション層の別のレベルを抽象化することで、MVCの意味を理解し始めました。あなたの質問に答えるには、みんなのコメントと同じように、それをプレゼンテーション層に置くのが最善の方法です。

セキュリティの観点からは、サーバー側に重いビジネスルールや機密性の高いビジネスルールを配置する必要があると思います。これは、サーバー側に公開したくないためです。ビジネスロジックの開発が不十分な場合、コードの弱点を簡単に見つけて悪用することができます。

Angularのようなフレームワークについての私の考えは、小さなショップ/ SOHOが顧客を処理するようなものであり、数人で非常に効率的かつ高速です。ビジネスに直面している顧客や商品の効率的な配達/受け取り（REST、JSON）に適しています。彼らには指定された役割とタスクがありますが、一部のワーカーはタスク以上のものを実行します。店はまた、通常、彼らが重いセキュリティを強調しないので、泥棒や強盗に対して脆弱です。

Spring / Struts 2のようなサーバー側フレームワークについては、管理レベルが異なり、より大きなビジネス（バッチジョブ、Webサービス、エンタープライズバス）を処理できる現代の企業（CMMレベル5）を想像してみてください。彼らは顧客を処理しますが、直接ではなく、しばしばブローカーや小売店を経由します。セキュリティ面では、企業はより堅牢であり、多くの場合、玄関先のセキュリティ、または重要な情報が金庫で保護されています（暗号化/サインオン）。

于 2013-06-21T00:50:12.900 に答える
2

私のアプローチは常にボトムアップアプローチです。データベース設計から始めて、適切に構築された/関連するテーブル、必要に応じてストアドプロシージャを使用し、エンティティフレームワークをソリューションに追加するか、EFがオプションでない場合はADO.Netを使用します。次に、ビジネスロジックとモデルを開発して、データベースにデータを出し入れします。

モデルが確立されたら、MVCコントローラーの開発とWebAPIコントローラーの開発の2つのルートに進むことができます。両方のコントローラーがモデルにアクセスできます。クラスをインスタンス化してメソッドを呼び出すだけです。

MVCコントローラーによって制御されるMVCビューを設定するオプション、またはHTMLページまたはSPA（NodeJSでホストされるシングルページアプリケーション）の完全に別個のセットを設定するオプションがあります。

完全に別個のHTMLページのセットでは、Get、Post、Put、およびDeleteメソッドでWebAPIコントローラーを使用する必要があります。また、クライアントを識別するためにトークンを前後に含め、CORSを有効にする必要があります（クロスオリジンリクエストの場合） ）。

MVCビューを使用すると、コントローラー属性やセッションを使用してクライアントを識別でき、CORSについて心配する必要はありません。また、必要に応じてビューを強い型にすることもできます。残念ながら、UI開発者のセットがある場合、彼らは同じMVCソリューションで作業する必要があります。

どちらの場合も、AngularJSを使用して、コントローラーとの間でデータをやり取りできます。

IMHO AngularJSコントローラーの概念は、C＃MVCまたはC＃WebAPIコントローラーと同じではありません。AngularJSコントローラーは、すべてのjavascriptロジックと、「ApiFactory」を介したエンドポイントへの呼び出しを格納しますが、C＃コントローラーは、UI要求を受け入れて応答するサーバー側のエンドポイントに他なりません。

于 2015-11-19T06:45:38.397 に答える