# Définition d'un Module

Angular propose un concept de modules afin de mieux structurer le code et faciliter la réutilisation et le partage.

{% hint style="warning" %}
Attention à ne pas confondre les **modules Angular** avec les **modules ES2015 / TypeScript**.
{% endhint %}

Un module Angular est un mécanisme permettant de :

* regrouper des composants *(mais aussi des services, directives, pipes etc...),*
* définir leurs dépendances,
* et définir leur visibilité.

Un module Angular est défini simplement avec une classe *(généralement vide)* et le décorateur `NgModule`.

{% tabs %}
{% tab title="src/app/book/book.module.ts" %}

```typescript
import { NgModule } from '@angular/core';

import { PictureModule } from '../picture/picture.module';
import { BookPreviewComponent } from './book-preview/book-preview.component';

@NgModule({
    declarations: [
        BookPreviewComponent
    ],
    exports: [
        BookPreviewComponent
    ],
    imports: [
        HttpModule,
        PictureModule
    ]
})
export class BookModule {
}
```

{% endtab %}
{% endtabs %}

## `declarations`

Définit la liste des composants *(ou directives, pipes etc...)* contenus dans ce module.

## `exports`

Définit la liste des composants pouvant être utilisés par les modules qui importent celui-ci.

{% hint style="warning" %}
Les composants non-exportés ne peuvent être utilisés que par les composants contenus dans le module.
{% endhint %}

{% hint style="success" %}
Pour exporter un composant lors de sa génération par Angular CLI, il faut ajouter l'option `--export` : `yarn ng generate component --export book/book-preview`.

Pour éviter de lutter contre les oublis, une astuce consiste à **ajouter un "script" à votre fichier `package.json`** pour **unifier la façon de générer vos composants**.
{% endhint %}

{% tabs %}
{% tab title="package.json" %}

```javascript
{
    "scripts": {
        "generate:component": "ng generate component --export"
    }
}
```

{% endtab %}
{% endtabs %}

```bash
yarn generate:component book/book-preview
```

## `imports`

Définit la liste des dépendances du module. Il s'agit généralement de la liste des modules contenant les composants utilisés par les composants de la section [`declarations`](#declarations).

![Angular Modules](https://4009647861-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9vDDYxu6nH7FVBtFFS%2F-LBvB_WpCSzgVF0c4R9W%2F-LBvCVC22B-3Ls3_nyuC%2Fangular-modules.jpg?alt=media\&token=624c03ca-e24f-457d-8aa7-591d159e573c)

## Bonnes Pratiques

{% hint style="success" %}
La convention est de regrouper tous les composants dans le même dossier que le module.

```
book/
    book.module.ts
    book-preview/
        book-preview.component.ts
        book-preview.component.html
    ...
```

{% endhint %}

{% hint style="success" %}
Evitez les sous-arborescences *(définition de modules à l'intérieur d'autres modules etc...).*

**Flat is better than nested.**
{% endhint %}

## Angular CLI - Generate Module

Vous pouvez générer un module avec la commande suivante :

```bash
yarn ng generate module book
```

## Live Template

Pensez à utiliser des "live templates" sur votre IDE !

![Angular Module Live Template](https://4009647861-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9vDDYxu6nH7FVBtFFS%2F-LBvPe8ex1oyYoyCLCG9%2F-LBvPr3qq28Zh4aJpoMi%2Fangular-module-live-template.gif?alt=media\&token=e36d5803-0bcd-4972-ac89-1e2471352e73)