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