03. Premier module et mise en place du router
L’application sera divisée en deux modules: le module home, une simple page d’accueil et le module show , cœur de notre application, qui permettra de gérer nos séries. Ce découpage par module laisse les diverses briques de l’application indépendantes. Nous pourrions par la suite ajouter d’autres modules.
Le module Home
Chaque module possédera un répertoire dédié. Créons donc nos deux répertoires dans src : home et show. Puis, comme pour AppModule, pour créer un nouveau module il faut faire une class et la décorer avec NgModule. Notre module sera composé d’un seul component. Créons le dans un sous répertoire components
// src/home/components/home.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'home',
templateUrl: './app/home/components/home.component.html'
})
export class HomeComponent {}
Comme pour AppComponent il suffit de créer une class et de la décorer avec @Component. Créons ensuite sa vue associée:
<!--src/home/components/home.component.html-->
<div class="row">
<div class="column">
<h1><i class="fa fa-home"></i> Home</h1>
</div>
</div>
<div class="row">
<div class="column">
<div class="secondary callout">
<h4>Managing TV Show with Angular 2</h4>
</div>
</div>
</div>
Nous utilisons le système de grille de foundation pour créer un titre et un message de présentation. Il faut maintenant créer le module home pour y injecter ce composant:
// src/home/home.module.ts
import { NgModule } from '@angular/core';
// pour pouvoir utiliser les directives de base d'Angular 2 (ngIf, ngFor, ...)
import { CommonModule } from '@angular/common';
// pour configurer le routing de ce module
import { Routes, RouterModule } from '@angular/router';
// import du composant créé
import { HomeComponent } from './components/home.component';
// définition de la route
const homeRoutes: Routes = [
{
path: 'home', // le chemin
component: HomeComponent // le composant à lancer pour le chemin
}
];
@NgModule({
imports:[CommonModule, RouterModule.forChild(homeRoutes)], // injection de notre route
declarations:[HomeComponent] // injection des composants de notre module
})
export class HomeModule{}
Ne reste plus qu'à déclarer ce nouveau module dans le module central de l’application AppModule
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Routes, RouterModule } from '@angular/router';
// import du module home
import { HomeModule } from './home/home.module';
import { AppComponent } from './app.component';
// déclaration de la route au niveau global => redirection vers /home
const appRoutes: Routes = [
{
path:'',
redirectTo:'/home',
pathMatch: 'full'
}
];
@NgModule({
// injection du module home et de la route
imports: [BrowserModule, HomeModule, RouterModule.forRoot(appRoutes)],
declarations: [AppComponent],
providers:[],
bootstrap: [AppComponent]
})
export class AppModule {}
Configuration du router dans le HTML
Nous avons configuré les routes au niveau des modules, reste maintenant à définir l’emplacement pour injecter les composants. Pour ce faire, nous allons utiliser la directive router-outlet dans le AppComponent qui sera le composant parent.
<!--src/app.component.html-->
<h1>Menu</h1>
<router-outlet></router-outlet>
Enfin pour terminer, il convient de définir le chemin de base de notre application pour le router avec la balise base dans le index.html. Etant donné que le server et l’application sont à la racine de notre projet, ce chemin de base sera /.
<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/" />
<meta charset="UTF-8">
<title>ShowTheque Angular 2</title>
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<!-- [...] -->
</body>
</html>
Conclusion
Si on retourne dans le navigateur, le composant home est affiché dans l’application et nous sommes sur la route home, ce qui donne comme URL : http://localhost:3000/home