Aller au contenu principal

8-6 Définir une première route (/projets)

Il nous reste à associer la page ProjetsIndex avec le chemin d'accès représentant la liste de projets, soit /projets.

Cette association se fait dans le fichier src/app/app.routes.ts.

La ligne importante de ce fichier est la ligne contenant le tableau de routes:

src/app/app-routing.module.ts
import { Routes } from '@angular/router';

export const routes: Routes = [];

Définir une route​

On définit une route à l'aide d'un objet ({ }) associant le chemin (path) et le composant (component) devant être chargé pour la route. Par exemple:

  {
    path: 'projets',
    component: ProjetsIndex
  }
info

Une telle route aurait comme effet d'associer le chemin /projets (path: 'projets') au composant ProjetsIndex

Lors de la définition d'une route, on peut ignorer le préfixe / dans la portion path. Ce préfixe est implicite.

On doit mettre cette route dans le tableau routes. Ainsi, modifiez le tableau routes afin d'y ajouter la route suivante:

src/app/app.routes.ts
export const routes: Routes = [
  {
    path: 'projets',
    component: ProjetsIndex
  }
];

Consulter la page d'accueil du site​

Vous pouvez maintenant consulter la page d'accueil du site, mais malheureusement cette dernière sera toujours vide!

http://localhost:4200
info

Aucun chemin, ni composant n'est associé à la page d'accueil, c'est pourquoi Angular ne sait pas quelle page charger.

Si vous naviguez manuellement vers la page projets, en tapant directement l'URL http://localhost:4200/projets dans votre navigateur, vous obtiendrez la page.

http://localhost:4200/projets

Cependant, il serait bien d'y arriver automatiquement! 🙂

Rediriger l'accueil vers /projets​

Pour pallier à la situation décrite précédemment, on peut utiliser la fonctionnalité de redirection du système de routing d'Angular.

Nous pourrions faire du composant ProjetsIndex l'accueil du site en le liant au chemin /, mais c'est une belle occasion de montrer la fonctionnalité de redirection 😉

En effet, il ne suffit que de définir une route de redirection. Cette dernière sera responsable de rediriger l'utilisateur de la racine du site à la page /projets automatiquement.

src/app/app-routing.module.ts
export const routes: Routes = [
  { 
    path: '',
    redirectTo: 'projets',
    pathMatch: 'full'
  },
  {
    path: 'projets',
    component: ProjetsIndex
  }
];
info
  • path est le chemin ('' étant la racine du site pour Angular).
  • redirectTo est le chemin vers lequel rediriger (projets)
  • pathMatch peut prendre plusieurs valeurs dans le cas où on voudrait rediriger un chemin partiel, mais dans notre cas full signifie qu'on veut détecter si toute l'URL correspond à celle spécifiée (/) afin de procéder à la redirection.

Test de la redirection​

Vous pouvez maintenant aller à la page d'accueil et vous obtiendrez votre page Projets! Vous devriez en effet être redirigé automatiquement.

http://localhost:4200/projets

Récupérer le composant de liste de projets​

Avec cette manipulation, nous avons en quelque sorte perdu la liste de projets étant affichée sur la page d'accueil. Bien que cette liste était statique et avait comme but de découvrir quelques notions Angular, nous pourrions la ramener dans la page des projets!

Créer un dossier pour les composants de la fonctionnalité​

Pour accueillir le composant projets-liste, on créera un nouveau dossier sous notre dossier de "feature" de projets. En effet, nous avons pour le moment le dossier pages pour les pages, créons le dossier components pour les composants d'interface utilisateur.

  1. Sous le dossier src/app/features/projets, créez un dossier components img

  2. Déplacez le fichier (glisser-déposer) projets-liste dans le nouveau dossier src/app/features/projets/components Lorsque Webstorm vous demandera si vous voulez "Refactor", appuyez sur Refactor. WebStorm s'occupera de mettre à jour les références vers ce fichier dans le code s'il y en a. img

    Votre dossier devrait ressembler à ceci: img

Ajouter la référence au composant de liste de projets​

Maintenant, il ne suffit que d'inclure le composant de liste de projets dans la page ProjetsIndex!

src/app/features/projets/pages/projets-index.ts
@Component({
  selector: 'app-projets-index',
  imports: [
    ProjetsListe
  ],
  template: `
    <h1>Projets</h1>
    <app-projets-liste></app-projets-liste>
  `,
  styles: ``
})
http://localhost:4200/projets

img

info

Un composant peut faire référence à d'autres composants. Par exemple, ici nous avons un composant de page ProjetsIndex qui utilise le composant ProjetsListe.