在 AngularJS 中从另一个模块导入组件的最佳方法是什么？答案

【问题标题】：What is the best way to import a component from another module, in AngularJS?在 AngularJS 中从另一个模块导入组件的最佳方法是什么？
【发布时间】：2020-06-03 01:19:52
【问题描述】：

我的 AngularJS (v1.7) 应用程序中有 2 个子模块，我们称它们为 A 和 B。我正在尝试从模块 B (componentB) 导入一个组件（带有 html 模板和控制器），将在模块 A (componentA) 中的组件模板内使用。

阅读Reuse AngularJS Component in another Module (Dependency Injection)后，我首先尝试通过将componentB指定为componentA的依赖项，然后在componentA的模板中使用它。

componentA.js

angular.module('A', ['componentB']).component('componentA', {...});

组件A.html

<div>
   <componentB></componentB>
</div>

不幸的是，这不起作用，即使 componentB 已正确定义并在模块 B 中成功使用。我还尝试通过修改 app.js 将模块 B 指定为模块 A 的依赖项，如下所示：

angular.module('A', ['B'])
.config(...

在这两种情况下，我都会得到一个

未捕获的错误：[$injector:modulerr]

我很难找到与 AngularJS 相关的类似问题/文章，而不是较新的 Angular。我对 AngularJS 也很生疏，所以任何帮助都将不胜感激，在此先感谢。

【问题讨论】：

标签： angularjs components

【解决方案1】：

这很简单：

angular.module("moduleB",[])
.component("componentB", {
     template: "<div>This is Component B from Module B</div>"
});

angular.module("moduleA",["moduleB"])

<div ng-app="moduleA">
    <component-b></component-b>
</div>

moduleA 通过将 moduleB 声明为依赖项来从 moduleB 导入组件。

模块创建与检索

只有第一个模块声明应该指定依赖项。

错误

angular.module('moduleA', [])
.controller('ctrl', /* ... */) 

angular.module('moduleA', ['moduleB'])
.service('serviceA', /* ... */)

再次声明依赖会导致控制器被注销。

更好

angular.module('moduleA', ['moduleB'])

angular.module('moduleA')
.controller('ctrl', /* ... */) 

angular.module('moduleA')
.service('serviceA', /* ... */)

有关详细信息，请参阅

【讨论】：

谢谢！我以为它不起作用，但后来在模块依赖项中发现了一个小错字。感谢您的意见。