AngularJS：使用多个ng-apps构建Web应用程序

Blogosphere上有许多关于AngularJS应用程序结构准则的文章，例如：

• http://www.johnpapa.net/angular-app-structuring-guidelines/
• http://codingsmackdown.tv/blog/2013/04/19/angularjs-modules-for-great-justice/
• http://danorlando.com/angularjs-architecture-understanding-modules/
• http://henriquat.re/modularizing-angularjs/modularizing-angular-applications/modularizing-angular-applications.html

但是，对于指导原则和最佳实践，我尚未遇到的一种情况是，您有一个包含多个“迷你spa”应用程序的大型Web应用程序，而迷你spa应用程序都共享一定数量的代码。

我并不是指试图ng-app在同一页面上有多个声明的情况；相反，我的意思是大型站点的不同部分具有自己的唯一ng-app声明。

正如Scott Allen在他的OdeToCode博客中写道：

我还没有找到一种很好解决的方案，即在同一更大的Web应用程序中存在多个应用程序，并且需要客户端上一些共享代码的情况。

您是否可以建议任何建议的方法，应避免的陷阱或该场景的良好样本结构？

更新
-9/10/2015一个具有有趣组织策略的项目是MEAN.JS及其modules文件夹。
https://github.com/meanjs/mean
https://github.com/meanjs/mean/tree/master/modules

另一个示例来自ASP.NET Music Store SPA示例。 https://github.com/aspnet/MusicStore https://github.com/aspnet/MusicStore/tree/master/src/MusicStore.Spa/ng-apps

这是我使用的设计。我发现它对我建立的两个较大的项目很有用，到目前为止，还没有遇到任何障碍。

资料夹结构

your-project/
  apps/
    global.html
    app1/
      index.html
      app1.module.js
      app1.js
      parts/
        foo.js
        foo.html
        ...
    app2/
  libs
    lib1/
      lib1.module.js
      parts/
        directive1.js
        directive1.html
    lib2/
  third-party/

• 配置您的服务器Web框架以查找apps/app1/index.html何时发出请求/app1。使用友好的URL（例如，the-first-application/代替URL ，app1/并根据需要使用服务器技术进行映射。
• 您的服务器技术必须包含global.html在其中，index.html因为它包含供应商提供的内容（请参阅下文）。
• 包括相应应用程序所需的资产index.html（请参见下文）。
• 将ng-app和的根<div ui-view></div>放在index.html。
• 每个应用程序和库都是一个单独的角度模块。
• 每个应用程序都会获取一个<app-name>.module.js文件，其中包含angular模块定义和依赖项列表。
• 每个应用程序都会获取一个<app-name>.js文件，其中包含模块的配置和运行块，以及路由配置。
• 每个应用程序都有一个parts文件夹，该文件夹包含对特定应用程序有意义的结构，其中包含应用程序的控制器，视图，服务和指令。我不认为子文件夹一样controllers/，views/等有帮助的，因为他们没有规模，但情况因人而异。
• 库遵循与应用相同的结构，但是遗漏了它们不需要的东西（显然）。

从使用它们的应用程序中的服务和指令开始。一旦您还需要其他应用程序中的某些内容，就可以重构为库。尝试创建功能一致的库，而不仅仅是所有指令库或所有服务库。

资产

我最小化了JS和CSS文件的发行版本，但在开发过程中使用了未最小化的文件。这是支持此设置的设置：

• 在中全局管理供应商global.html。这样，在SPA之间导航时，可以从缓存中加载繁重的内容。确保缓存工作正常。
• 每个SPA资产在中定义index.html。这应仅包括特定于应用程序的文件以及使用的库。

上面的文件夹结构使查找最小化构建步骤所需的文件变得容易。

单页应用程序（SPA）并不是真正按照您建议的方式使用，而实际上是一个大型应用程序和主要应用程序中的多个mini-SPA。最大的问题是页面加载时间，因为所有内容都必须预先加载。

解决此问题的一种方法是使用导航页面，该页面将带您进入各个SPA。导航页面非常轻巧，然后您将仅根据所选内容一次加载一个SPA。您可以在每个SPA中提供一个带有导航链接的链接栏，以便用户在需要转到另一个区域时不必总是返回到导航页面。

使用这种方法可能会给跨SPA的信息持久化带来一些挑战。但是，我们谈论的是SPA不想做的事情。有一些框架可以帮助客户端数据持久化。微风是我想到的第一个，但还有其他。

关于布局-根据您的特殊需求，一些程序员问题可以解决大型项目的布局。我遇到了这个和那个。除了这些问题已经回答的内容，SPA不会影响您的应用程序布局，这没有什么神奇的。

也就是说，有不同的方法最适合不同的项目。我建议坚持使用有角种子项目提供的基本布局。从提供的文件夹中为您的自定义软件包和源代码创建单独的文件夹。在源文件夹中，使用适合您需求的项目布局。

如果您的应用程序在同一页面上需要多个ng-app声明，则需要通过注入模块名称来手动引导AngularJS模块，如下所示：

angular.element(document).ready(function() {
  angular.bootstrap(document, ['TodoApp']);
});

这个 笨拙的人详细说明了如何手动引导AngularJS。