角度注入模块到多个模块中答案

【问题标题】：angular inject module into multiple modules角度注入模块到多个模块中
【发布时间】：2016-09-07 13:14:39
【问题描述】：

我正在我的基本 html 页面上加载一个名为 userFromServer 的模块。我想将它注入主应用程序模块和混合面板模块。但是，如果我尝试将userFromServer 注入analytics.mixpanel(angular mixpanel)，就会出现注入错误。这是循环依赖错误还是我遗漏了什么？ userFromServer 应该对所有模块都可用吗？如何将userFromServer 注入两个模块？

var app  = angular.module('App', ['userFromServer', 'analytics.mixpanel']) 
// main app with currentUser injectable
var mixp = angular.module('analytics.mixpanel', ['userFromServer'])
mixp.config(['$mixpanelProvider', 'currentUser', function($mixpanelProvider, currentUser) {
 // use currentUser here
}]);

userFromServer 模块

<body ng-app="App" ng-cloak>
  <base href="/">

  <div class="container">
    <div ng-view=""></div>
  </div>

  <script type="text/javascript">
    angular.module('userFromServer', [])
      .service('currentUser', function() {
        <% if logged_in %>
          this.name = '<%= @User.name %>';
          this.first_name = '<%= @User.first_name %>';
          this.id = '<%= @User.id %>';
          this.uuid = '<%= @User.profile.uuid %>';
        <% end %>
      })
  </script>


</body>

堆栈跟踪是：

Failed to instantiate module App due to:

Failed to instantiate module analytics.mixpanel due to:

Unknown provider: currentUser

【问题讨论】：

您遇到的错误是什么？还请包括 userFromServer 模型定义。
请提供完整的错误信息（包括调用堆栈）和相关模块的代码。列出的代码不包含任何可能导致错误的内容（除了没有 userFromServer 的事实）。此外，您将注入与加载混淆了。模块正在加载，循环依赖没有问题。依赖项被注入。
@estus 更新了代码和堆栈跟踪

标签： angularjs

【解决方案1】：

这是因为currentUser 服务实例被注入到config 块中。这里只能注入服务提供者。

由于currentUser是一个不依赖于其他服务的常量对象，它应该在配置阶段可用，它可能是constant服务：

angular.module('userFromServer', [])
  .constant('currentUser', {
    <% if logged_in %>
      name: '<%= @User.name %>',
      first_name: '<%= @User.first_name %>',
      id: '<%= @User.id %>',
      uuid: '<%= @User.profile.uuid %>'
    <% end %>
  })

【讨论】：

【解决方案2】：

由于您的父模块App 已经在其中注入了userFromServer，因此您无需在analytics.mixpanel 中再次注入它。

【讨论】：

其实，如果两个模块都依赖这个模块，你需要加载它以保持一致性。这就是模块化的意义所在。通过这种方式，模块可以彼此分开使用或测试。
@estus 父模块App 已经列出了analytics.mixpanel 和userFromServer 作为它的依赖项。因此，无需再次为子模块analytics.mixpanel 注入userFromServer 作为依赖项。我同意，如果两个完全独立的模块具有依赖关系，您可以分别注入它，但在这里它们是 not 独立的，而是第一个模块 App 已经有第二个模块 analytics.mixpanel 作为依赖项。
如果App 直接依赖于userFromServer 并且analytics.mixpanel 在某个时候从应用程序中删除，应用程序将停止工作。 Angular 允许将模块加载到多个位置以完全覆盖这种情况，这是框架的一个特性，没有必要避免这种情况。