我们正在开发一个非常庞大的应用程序的新版本，该应用程序目前由 JSP+JS 页面组成，由自定义 Servlet 提供服务。鉴于应用程序处理大量数据，大部分业务逻辑在数据库中实现为存储过程。该应用程序的主要卖点是其存储数据的可视化表示。基本上任何东西都可以建模和可视化。当前版本在Silverlight中可视化，在IE中效果最好，需要它的插件，这显然是一件坏事。我们的目标是尽可能独立于浏览器，主要问题是图表绘制。所以我们决定试试 AngularJS+SVG。开发始于一个全新的项目，Spring MVC REST 后端，单页 AngularJS 应用程序。几个月后，我们现在看到这是一个不错的选择，每个功能都可以实现。为了尽快发布下一个主要版本，我们决定暂时保留旧的 JSP 表单（除可视化之外的其他部分），并用 Angular 重写可视化。所以可视化组件需要独立于在jsp或html中运行，并且需要独立于我们的框架（有标签作为iframe：一个图表编辑器屏幕是一个iframe中的jsp，现在是一个完整的角度应用程序；后端是基于servlet的，很多特性都是在JS函数中实现的）。我的问题是，我们如何才能尽可能有效地模块化应用程序？我受此启发 所以可视化组件需要独立于在jsp或html中运行，并且需要独立于我们的框架（有标签作为iframe：一个图表编辑器屏幕是一个iframe中的jsp，现在是一个完整的角度应用程序；后端是基于servlet的，很多特性都是在JS函数中实现的）。我的问题是，我们如何才能尽可能有效地模块化应用程序？我受此启发 所以可视化组件需要独立于在jsp或html中运行，并且需要独立于我们的框架（有标签作为iframe：一个图表编辑器屏幕是一个iframe中的jsp，现在是一个完整的角度应用程序；后端是基于servlet的，很多特性都是在JS函数中实现的）。我的问题是，我们如何才能尽可能有效地模块化应用程序？我受此启发关于 AngularJS+SVG 中的流程图应用程序的文章，我们正在使用 Snap.SVG 进行 SVG 操作。
现在这些是主要部分（在单独的 .js 文件中）：
- 具有控制器中基本事件处理的图表指令，其中包含对 DiagramViewModel 的引用
- DiagramViewModel JS 类，它是从给定的 DiagramDataModel（它是从后端接收的 JSON 对象）构造的，就像在 FlowChart 应用程序中一样
- DiagramEdit JS 类，其中包含用于编辑图表的方法（有只读用户），它所做的任何事情都涉及 DiagramViewModel，因此它具有对它的引用
- 执行基本导航（缩放、平移等）的 DiagramNavigation JS 类
- 用于包装后端和框架 JS 方法（工厂）的 Angular 模块
- 单独文件中的其他服务（记录器模块、错误处理程序模块等）
这样做的重点是指令的控制器应该很薄，因此逻辑在 ViewModel 和 DiagramEdit 类中是分开的。我对这种方法的主要担忧是，如果 ViewModel 或 Edit 类中的任何方法想要进行框架调用，它应该通过 ViewModel 构造函数中的 Controller 给 ViewModel 的引用来实现。所以我基本上是手动进行 Angular 的依赖注入（框架/后端包装器工厂被注入到指令的控制器中，并且我将引用传递给 ViewModel 构造函数）。我是否应该只有一个 ViewModel 来完成所有的魔法（即使它非常大，超过 3K 行）？或者我应该使用 angularJS 工厂作为 ViewModel 所以 bakcend 和框架' s 工厂可以注入 ViewModel 工厂吗？我应该为功能组设置单独的 Angular 模块吗？如果是这样，他们如何共享图表对象？它应该只在 $scope 中共享吗？
我关心的一个很好的例子：工具栏上有一个自动完成输入字段。当它发生变化时，DiagramEdit 会进行后端调用以在对象中进行搜索。当调用返回时，Edit 模块迭代结果并将 SVG 表示添加到对象。为此，我需要由 Angular 注入的 $sce 模块。然后这个列表在一个 ng-repeat 中可视化，绑定到 Edit 模块中的一个变量。
此版本发布后，我们将继续开发其他页面和框架，并在后端切换到 Spring。所以这个图表模块需要有一个定义良好的接口，独立于后端调用和客户端应用程序的其他部分。
关于更大规模 Angular 开发的另一篇很棒的文章是这个。