📢 Je vous présente le livre Angular

  • 1) Il offre un contenu clair et concis, tout en couvrant une multitude de concepts d'Angular.
  • 2) Le livre est structuré en trois niveaux : débutant, intermédiaire et avancé
  • 3) traite des pratiques les plus récentes d'Angular, comme les signaux, les vues différées, la gestion des flux, entre autres
  • 4) De plus, vous y trouverez plusieurs liens vers des exemples de code source pour approfondir vos connaissances en pratique.
Consulter un extrait

Skip to content

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

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 {

}

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 {

}

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 {

}

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 {

}

Chaque mois, recevez en avant-première notre newsletter avec les dernières actualités, tutoriels, astuces et ressources Angular directement par email !