Angular

Appearance

Création d'un module fonctionnel. ​

Voir Comprendre les modules pour comprendre le rôle d'un module

Passons maintenant sur la création d'un module fonctionnel. Le principe est très similaire à un module racine.

Nous allons créer un module nommé "Navbar". C'est un module qui gère la barre de navigation. Nous créons donc un dossier nommé navbar. La structure du projet sera la suivante :

<project root>
      app
        navbar
          navbar.module.ts
          navbar.component.ts
        app.component.ts
        app.module.ts
      main.ts
      index.html
<project root>
      app
        navbar
          navbar.module.ts
          navbar.component.ts
        app.component.ts
        app.module.ts
      main.ts
      index.html

Voici le code de navbar.component.ts :

ts
import { Component } from '@angular/core'

@Component({
  selector: 'app-navbar',
  template: '<p>Barre de navigation</p>'
})
export class NavbarComponent {

}
import { Component } from '@angular/core'

@Component({
  selector: 'app-navbar',
  template: '<p>Barre de navigation</p>'
})
export class NavbarComponent {

}

Rien de particulier, passons au module dans navbar.module.ts :

ts
import { CommonModule } from '@angular/common'
import { NgModule } from '@angular/core'
import { NavbarComponent } from './navbar.component'

@NgModule({
  imports: [],
  declarations: [NavbarComponent],
  exports: [NavbarComponent]
})
export class NavbarModule {

}
import { CommonModule } from '@angular/common'
import { NgModule } from '@angular/core'
import { NavbarComponent } from './navbar.component'

@NgModule({
  imports: [],
  declarations: [NavbarComponent],
  exports: [NavbarComponent]
})
export class NavbarModule {

}

La nouveauté ? La propriété exports permet d'utiliser les éléments du module (composants, pipes, etc.) en dehors du module. Ici, notre volonté est d'afficher la barre de navigation dans le template de AppComponent

Pour bien comprendre ​

declarations permet de déclarer les éléments privés à notre module et exports indique quels éléments sont publiques.

Déclaration du module dans notre application ​

Jusqu'à maintenant, nous avons créé un module indépendant. Nous pouvons le mettre dans n'importe quelle application utilisant Angular. Et justement, nous voulons mettre cette brique dans notre application courante.

Allons dans app.module.ts :

ts
import { BrowserModule } from '@angular/platform-browser'
import { NavbarModule } from 'app/navbar/navbar.module'
import { NgModule } from '@angular/core'
import { AppComponent } from 'app/app.component'

@NgModule({
  imports: [BrowserModule, NavbarModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {

}
import { BrowserModule } from '@angular/platform-browser'
import { NavbarModule } from 'app/navbar/navbar.module'
import { NgModule } from '@angular/core'
import { AppComponent } from 'app/app.component'

@NgModule({
  imports: [BrowserModule, NavbarModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {

}

Si vous avez compris le chapitre sur les modules, ce code ne devrait pas vous surprendre. Deux points :

  1. On importe le module NavbarModule
  2. On l'ajoute dans la propriété imports

Utiliser le module Navbar dans notre application ​

Maintenant qu'on l'a importé, nous pouvons utiliser le composant dans notre application. Par exemple, allez app.component.ts et mettez le sélecteur <app-navbar> dans le template :

js
import { Component } from '@angular/core'

@Component({
  selector: 'app-root',
  template: `
    <app-navbar></app-navbar> <p>Hello World</p>
  `
})
export class AppComponent {

}
import { Component } from '@angular/core'

@Component({
  selector: 'app-root',
  template: `
    <app-navbar></app-navbar> <p>Hello World</p>
  `
})
export class AppComponent {

}