如何在 AngularJS 应用程序中有效地使用 ES6 导入？

Question

对于 ES5，我意识到大多数人都使用 HTML 标签（例如 <script src="app/listCtrl.js"></script>）包含他们的所有组件，并将组件附加到声明的同一个文件中。

这对于 ES6 导入来说并不是那么简单，因为导入被提升了 and that causes the Angular module to be undefined when a imported file is trying to attach the component。

我所做的有效是导入组件并将它们附加到主模块文件中。

import sidebarDirective from 'app/sidebar/sidebarDirective.js';

angular.module('courseSelector')
  .directive('sidebar', sidebarDirective)
   ...

但是，这并不比仅使用 HTML 更好，如果我有一个包含多个组件的 "feature"，例如 John Papa 的示例：

有没有更优雅的解决方案，让我不必将所有组件附加到一个文件中？

_{挣扎了一段时间。谢谢}

更新

John Papa 确实倾向于 this seed. The image above is from the blog post, Angular Structure: Refactoring for growth 中较少的 Angular 个模块。然而，在那post中，他还写

When i see common functionality that can be extracted and re-used, I like to break that out into its own module. In the structure by feature notice that I have a common folder. In there I have another module named common that contains logging, progress bars, and other common features. Sometimes I break this out such that the modules are the first folder under the app folder.

Answer 1

我所做的是为每个组件创建一个自己的 angular 模块，这样它们就真正解耦了，并且在组件之间的模块级别处理依赖关系。

我在样板项目中制作了两个小示例组件 hello 和 main：https://github.com/FlorianTopf/angular-seed/tree/master/src.

查看这些演示组件和主要应用程序模块。

如何在 AngularJS 应用程序中有效地使用 ES6 导入？

How to effectively use ES6 imports in AngularJS application?

architecture

angularjs

ecmascript-6

更新