Components and use of Angular modules in Angular 1.5 - angularjs

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
Modules are always the containers to which
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.