Components and use of Angular modules in Angular 1.5

Question

I am trying to adopt the new .component released in angular 1.5. Although I am having a tough time understanding where modules fit in now.

Before I used to separate my components into angular modules, what relationship does this have now that components are here ?

Just create one angular module and add all components under this, or continue to use angular modules as well as components ?

The documentation doesn't seem to go into this. If I am still using modules then what is the use of components, or if I am using components what is the use of more than 1 module ?

Answer 1

I'm in the same boat here... Here is what I found. Hope this helps us all
From Angular Docs:

1.Module: You can think of a module as a container for the different parts of your app – controllers, services, filters, directives, etc.

Modules Recomended Setup

"... we recommend that you break your application to multiple modules like this:

• A module for each feature
• A module for each reusable component (especially directives and filters, Please see below component definition; special kind of directive)
• And an application level module which depends on the above modules and contains any initialization code.

2.Component:In Angular a Component is a special kind of directive that uses a simpler configuration which is suitable for a component-based application structure.

Advantages of Components:

• simpler configuration than plain directives
• promote sane defaults and best practices
• optimized for component-based architecture
• writing component directives will make it easier to upgrade to Angular 2

When not to use Components:

• for directives that need to perform actions in compile and pre-link functions, because they aren't available
• when you need advanced directive definition options like priority, terminal, multi-element
• when you want a directive that is triggered by an attribute or CSS class, rather than an element

So trying to make sense of all this its seems like you need a module to organize or as a top "container" if you will and then add component/subcomponent as required.

angular.module('app',[])
 .component('component')
 .component('common')

It all comes down to componetize the app:

This image is from angular 2 patterns in angular 1 (highly recommended)

Boottom line: Angular 1's doc is not that clear on the subject but we can see it as a way of organizing modules/components

1. Modules are always the containers to which
2. We add components and subcomponents depending on the structure

ToodMottos recomendation on File Structure

"...We should ideally have three high-level modules: root, component and common..."
Here we can see how modules become components and subcomponents

├── app/
│   ├── components/
│   │  ├── calendar/
│   │  │  ├── calendar.module.js
│   │  │  ├── calendar.component.js
│   │  │  ├── calendar.service.js
│   │  │  ├── calendar.spec.js
│   │  │  ├── calendar.html
│   │  │  ├── calendar.scss
│   │  │  └── calendar-grid/
│   │  │     ├── calendar-grid.module.js
│   │  │     ├── calendar-grid.component.js
│   │  │     ├── calendar-grid.directive.js
│   │  │     ├── calendar-grid.filter.js
│   │  │     ├── calendar-grid.spec.js
│   │  │     ├── calendar-grid.html
│   │  │     └── calendar-grid.scss
│   │  ├── events/
│   │  │  ├── events.module.js
│   │  │  ├── events.component.js
│   │  │  ├── events.directive.js
│   │  │  ├── events.service.js
│   │  │  ├── events.spec.js
│   │  │  ├── events.html
│   │  │  ├── events.scss
│   │  │  └── events-signup/
│   │  │     ├── events-signup.module.js
│   │  │     ├── events-signup.component.js
│   │  │     ├── events-signup.service.js
│   │  │     ├── events-signup.spec.js
│   │  │     ├── events-signup.html
│   │  │     └── events-signup.scss
│   │  └── components.module.js
│   ├── common/
│   │  ├── nav/
│   │  │     ├── nav.module.js
│   │  │     ├── nav.component.js
│   │  │     ├── nav.service.js
│   │  │     ├── nav.spec.js
│   │  │     ├── nav.html
│   │  │     └── nav.scss
│   │  ├── footer/
│   │  │     ├── footer.module.js
│   │  │     ├── footer.component.js
│   │  │     ├── footer.service.js
│   │  │     ├── footer.spec.js
│   │  │     ├── footer.html
│   │  │     └── footer.scss
│   │  └── common.module.js
│   ├── app.module.js
│   ├── app.component.js
│   └── app.scss
└── index.html

ToodMottos style Guide: Modular Achitecture (I must Read)
Here is more info on angular Module

Answer 2

Components in Angular 1.5 are special kind of directives which are suitable for component based architecture. They are more like directives on steroids.

Before I used to separate my components into angular modules, what relationship does this have now that components are here ?

Now that the components are there you can separate related components into different modules.

Just create one angular module and add all components under this, or continue to use angular modules as well as components ?

You can use the same pattern you used before to separate out the controllers.

components in angular 1.5 help you create actual components that have their own view and bindings. They were created to allow angular 1.5 devs understand the pattern and migrate easily to Angular 2.0 later.