0

With ES5, I realize that most people include all their components with HTML tags like <script src="app/listCtrl.js"></script> and attach the component in the same file it is declared.

This is not so straightforward with ES6 imports because imports are hoisted and that causes the Angular module to be undefined when a imported file is trying to attach the component.

What I have done that works is to import the components and attach them components in main module file. 

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

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

However, this is no better than just using HTML, if I have a "feature" that is multiple components, such as in John Papa's example:

File Structure

Is there a more elegant solution, which allows me to not have to attach all the components with one file?

been struggling for a while. Thanks


UPDATE

John Papa does tend to lean towards fewer Angular modules in this seed. The image above is from the blog post, Angular Structure: Refactoring for growth. However, in that post, he also writes

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.

Community
  • 1
  • 1

1 Answers1

1

What I did was to create for each component an own angular module, so that they are really decoupled and dependencies are handled on module level between components.

I made two little example components hello and main in my boilerplate project: https://github.com/FlorianTopf/angular-seed/tree/master/src.

Have a look into these demo components and the main application module.

FlorianTopf
  • 938
  • 6
  • 10
  • Seems very nice. So you would not agree with Papa in this matter. –  Dec 29 '15 at 23:48
  • I personally prefer this solution because I see immediately which services, directives, controllers etc. are part of a component. I also don't spoil my ES6 classes with angular.module stuff. However to be able to compare I would need to look into John Papa's example. Can you point me there? – FlorianTopf Dec 30 '15 at 11:02
  • I added John Papa's example to my question –  Dec 30 '15 at 19:10