AngularJS 模块架构

Question

我计划在我公司的应用程序中创建几个模块，但我在设计模块架构时遇到了麻烦。我已经进行了研究，似乎您应该每页使用一个模块，或者创建一个依赖于所有其他模块的“主”模块。我不喜欢这种方法，因为这意味着我必须为每个页面的应用程序的各个方面加载所有 javascript。这似乎本质上是错误的，但如果我需要在页面的多个位置使用一个模块，我似乎也无法弄清楚如何以另一种方式处理它。例如，我有一个会员模块，我将其附加到网页的标题部分。这将用于登录、注册和执行“忘记密码”类型的工作流程。

在另一个专门用于更改密码（来自重置链接）的页面上，标题也存在，但我想在会员模块中包含密码重置功能。我读过设计应用程序的一种方法是按功能/特性。我认为会员资格是一个合适的应用程序，但现在我不确定，因为我无法在任何特定页面上多次应用会员资格模块。

我是在正确的轨道上，还是有一个首选的方法？我应该为页眉设置一个单独的模块，为页面的其余部分设置一个模块吗？我应该硬着头皮把所有东西都装上吗？ （希望不会……）

我还应该注意，这是一个 ASP.Net MVC 应用程序，我们仍然严重依赖 MVC 来提供视图和部分视图。因此，我想使用渲染 javascript 部分来动态加载该页面运行所需的 javascript。这是闹剧吗？

<header ng-app="membership">
    //stuff for header membership functions
</header>

<div ng-app="membership">
    //somewhere else that needs membership, outside of header
</div>

Answer 1

我个人喜欢 Mini SPA (Silos) 而不是 full SPA .您可以观看Miguel A Castro's video，并在他的website 下载源代码。

它的作用是当请求进来时，它首先进入 ASP.Net MVC Route。然后，Angular Route 接管了其余的工作。这是一个非常巧妙的设计。

仅供参考：Angular 2 指日可待，所以我继续更新到 Angular 1.5 Compotent，以便以后可以轻松转换到 Angular 2。

如果你愿意，你可以停在那里。我向前迈了一步，并使用 Matt Honeycutt's Building Strongly-typed AngularJS Apps with ASP.NET MVC 5 方法使用强类型视图。

然后我实现了像 Axel Zarate's ANGULAR.NET – HELPERS FOR ASP .NET MVC 4 这样的 Angular Helpers。

Answer 2

在 Angular 应用程序上，因为它是单页应用程序，是的，您的所有 javascript 都必须加载。这是您的应用程序的代码，它是必要的。这仅在第一页加载时完成一次。 你们总是在同一个页面上，但处于不同的状态。

一个好的方法是定义一个包含所有其他模块的主模块。这些模块还可以包含他们需要的其他“子模块”。

angular.module('App', [
  'App.Membership'
  // ...
  // All others modules you need, including 3rd party modules
])

然后，在每个模块上，您可以定义关联的不同状态及其控制器

angular.module('App.Membership', [
  // Module dependencies
])
.config(['$stateProvider', function($stateProvider) {

  //State definition
  $stateProvider.state('membership', {
    parent: 'app',
    url: '/member',
    controller: 'MembershipCtrl',
    template: '<ui-view/>'
  });
}]);

您还可以添加一个全局控制器来处理始终存在的元素，例如标题。

希望对你有帮助