現在、JSP + JS ページで構成され、カスタム サーブレットによって提供される、かなり巨大なアプリケーションの新しいバージョンを開発しています。アプリケーションが大量のデータを処理する場合、ほとんどのビジネス ロジックはストアド プロシージャとしてデータベースに実装されます。このアプリケーションの主なセールス ポイントは、保存されたデータの視覚的な表現です。基本的に何でもモデル化して視覚化できます。現在のバージョンは Silverlight で視覚化されています。Silverlight は IE で最適に動作し、そのプラグインを必要としますが、これは明らかに悪いことです。私たちの目標は、可能な限りブラウザーに依存しないようにすることであり、主な問題は図の描画です。そこで、AngularJS+SVG を試してみることにしました。開発は、まったく新しいプロジェクト、Spring MVC REST バックエンド、単一ページの AngularJS アプリケーションから始まりました。数か月後、それが良い選択であることがわかりました。すべての機能を実装できます。次のメジャー バージョンをできるだけ早くリリースするために、古い JSP フォーム (ビジュアライゼーション以外の部分) を今のところ保持し、ビジュアライゼーションを Angular で書き直すことにしました。したがって、視覚化コンポーネントは、jsp または html での実行から独立している必要があり、フレームワークから独立している必要があります (iframe としてタブがあります: 1 つのダイアグラム エディター画面は iframe 内の jsp であり、現在は完全な angular アプリです。バックエンドはサーブレットベースであり、多くの機能が JS 関数で実装されています)。私の質問は、アプリケーションをできるだけ効果的にモジュール化するにはどうすればよいかということです。私はこれに触発されました したがって、視覚化コンポーネントは、jsp または html での実行から独立している必要があり、フレームワークから独立している必要があります (iframe としてタブがあります: 1 つのダイアグラム エディター画面は iframe 内の jsp であり、現在は完全な angular アプリです。バックエンドはサーブレットベースであり、多くの機能が JS 関数で実装されています)。私の質問は、アプリケーションをできるだけ効果的にモジュール化するにはどうすればよいかということです。私はこれに触発されました したがって、視覚化コンポーネントは、jsp または html での実行から独立している必要があり、フレームワークから独立している必要があります (iframe としてタブがあります: 1 つのダイアグラム エディター画面は iframe 内の jsp であり、現在は完全な angular アプリです。バックエンドはサーブレットベースであり、多くの機能が JS 関数で実装されています)。私の質問は、アプリケーションをできるだけ効果的にモジュール化するにはどうすればよいかということです。私はこれに触発されましたAngularJS+SVG のフローチャート アプリに関する記事で、Snap.SVG を使用して SVG 操作を行っています。
現在、これらは主要な部分です (個別の .js ファイル内):
- コントローラーで基本的なイベント処理を行うダイアグラム ディレクティブ。これには、DiagramViewModel への参照が含まれます。
- FlowChart アプリと同様に、指定された DiagramDataModel (バックエンドから受信した JSON オブジェクト) から構築された DiagramViewModel JS クラス
- ダイアグラムを編集するためのメソッドを含むDiagramEdit JSクラス（読み取り専用ユーザーがいます）、それが行うことは何でも、DiagramViewModelを含むため、それへの参照があります
- 基本的なナビゲーション (ズーム、パンなど) を行う DiagramNavigation JS クラス
- バックエンドとフレームワークの JS メソッド (ファクトリー) をラップするための angular モジュール
- 別のファイルの他のサービス (ロガー モジュール、エラー ハンドラー モジュールなど)
その際のポイントは、ディレクティブのコントローラーを薄くすることでした。そのため、ロジックは ViewModel クラスと DiagramEdit クラスで分離されています。このアプローチに関する私の主な関心事は、ViewModel または Edit クラスのいずれかのメソッドがフレームワーク呼び出しを必要とする場合、ViewModel のコンストラクター内の Controller によって ViewModel に与えられる参照を通じてそれを行う必要があるということです。したがって、基本的に角度の依存性注入を手動で行っています (フレームワーク/バックエンド ラッパー ファクトリはディレクティブのコントローラーに注入され、ViewModel コンストラクターへの参照を渡しています)。すべての魔法を実行する ViewModel を 1 つだけ持つ必要があります (たとえそれが非常に大きく、3K 行を超える場合でも)? または、AngularJS ファクトリを ViewModel として使用して、bakcend とフレームワークを使用する必要があります。のファクトリを ViewModel ファクトリに注入できますか? 機能グループごとに個別の Angular モジュールを使用する必要がありますか? もしそうなら、彼らはどのようにDiagramオブジェクトを共有できますか? $scopeで共有するだけですか？
私の懸念の非常に良い例: ツールバーにオートコンプリート入力フィールドがあります。変更されると、DiagramEdit はバックエンド呼び出しを行い、オブジェクトを検索します。呼び出しが戻ると、編集モジュールは結果を繰り返し処理し、SVG 表現をオブジェクトに追加します。そのためには、Angular によって挿入された $sce モジュールが必要です。次に、このリストは ng-repeat で視覚化され、編集モジュールの変数にバインドされます。
このリリースの後、他のページとフレームワークの開発を継続し、バックエンド側で Spring に切り替えます。したがって、このダイアグラム モジュールには、バックエンド呼び出しやクライアント アプリケーションの他の部分から独立した、明確に定義されたインターフェイスが必要です。
大規模な Angular 開発に関するもう 1 つの優れた記事は、これです。