Granularity of Modules

[tobiasbueschel]

Thanks for the style guide 👍

When designing the component architecture of my app, the style guide recommends that every component should be bound to a module as shown below:

---

Approach 1

• components.module
  • calendar.module
    • button.module
    • slider.module

import angular from 'angular';
import { ButtonModule } from './components/calendar/button.module';
import { SliderModule2 } from './components/calendar/slider.module';

export const CalendarModule = angular
  .module('calendar', [])
    ButtonModule,
    SliderModule
  ])
  .name;

---

However, when I have small components such as a button or slider it feels a bit heavy to tie them to their own modules especially if they do not have sub components. In fact, one could achieve the same effect as above using the following approach:

---

Approach 2

• components.module
  • calendar.module
    • button
    • slider

---

import angular from 'angular';
import { Button } from './component/calendar/button';
import { Slider } from './component/calendar/slider';

export const CalendarModule = angular
  .module('calendar', [])
  .component('button', Button)
  .component('slider', Slider)
  .name;

---

• Question 1: When should I use Approach 1 and when Approach 2 and why is one favoured over the other?
• Questions 2: How granular should modules & components be?

[AkosLukacs]

Well, is there any known and measured impact of having hundreds of angular modules? (defined by app code, in addition to ng and libraries that do define their own)

It's funny that I'm doing something like your second approach, but don't have a clear explanation of why :)

On 31 Mar 2017 21:53, "Tobias Büschel" [email protected] wrote:

Thanks for the style guide 👍

When designing the component architecture of my app, the style guide recommends that every component should be bound to a module as shown below:

Approach 1

• components.module
  • calendar.module
    • button.module
    • slider.module

import angular from 'angular';import { ButtonModule } from './components/calendar/button.module';import { SliderModule2 } from './components/calendar/slider.module'; export const CalendarModule = angular .module('calendar', []) ButtonModule, SliderModule ]) .name;

---

However, when I have small components such as a button or slider it feels a bit heavy to tie them to their own modules especially if they do not have sub components. In fact, one could achieve the same effect as above using the following approach:

Approach 2

• components.module
  • calendar.module
    • button
    • slider

---

import angular from 'angular';import { Button } from './component/calendar/button';import { Slider } from './component/calendar/slider'; export const CalendarModule = angular .module('calendar', []) .component('button', Button) .component('slider', Slider) .name;

---

• Question 1: When should I use Approach 1 and when Approach 2 and why is one favoured over the other?
• Questions 2: How granular should modules & components be?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/toddmotto/angular-styleguide/issues/158, or mute the thread https://github.com/notifications/unsubscribe-auth/AAziK82JgXtVNK8BUh9CuT971a0XGwzVks5rrVm1gaJpZM4MwFqq .