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

Question

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

对于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)
   ...

然而，如果我有一个多功能组件的“功能”，例如在John Papa的例子中，这并不比仅仅使用HTML更好：

是否有更优雅的解决方案，这使我无需将所有组件附加到一个文件中？

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

的更新

John Papa倾向于倾向于this seed中更少的Angular模块。上图来自博客文章Angular Structure: Refactoring for growth。但是，在那篇文章中，他也写了

  

当我看到可以提取和重用的常用功能时，我喜欢将其分解为自己的模块。在结构中通过功能通知我有一个共同的文件夹。在那里，我有另一个名为common的模块，它包含日志记录，进度条和其他常用功能。有时我会将其分解为模块是app文件夹下的第一个文件夹。

Answer 1

我所做的是为每个组件创建一个自己的角度模块，以便它们真正解耦，并在组件之间的模块级别处理依赖关系。

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

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