Aller au contenu principal

8-7 Définir une seconde route (nouveau projet)

Nous aurons éventuellement besoin d'une page pour créer un nouveau projet. Cette page contiendra un formulaire permettant d'entrer les différentes informations du projet, comme le nom et la description par exemple.

Nous verrons les formulaires plus loin, mais afin de voir les bénéfices du routing, créons une page qui sera responsable de créer un nouveau projet en affichant un formulaire de création. Le formulaire sera créé plus tard.

Créer le composant de page ProjetCreer​

Via Angular CLI, créez un nouveau composant dans le dossier features/projets/pages:

ng g component features/projets/pages/projet-creer

Vous aurez une nouvelle page sous votre dossier src/app/features/projets/pages: img

Modifier le gabarit de la page​

Modifiez le gabarit de la page pour à tout de moins afficher un titre et un peu de texte. Nous aurons éventuellement un formulaire de création de projets dans cette page.

src/app/features/projets/pages/projet-creer.ts
@Component({
  selector: 'app-projet-creer',
  imports: [],
  template: `
    <h1>Créer un nouveau projet</h1>
    <p>Éventuellement, vous aurez un formulaire ici.</p>
  `,
  styles: ``
})
export class CreerProjet {

}

Associer la page à un chemin (route)​

Dans le fichier src/app/app.routes.ts, ajoutez une nouvelle route:

src/app/app.routes.ts
export const routes: Routes = [
  {
    path: '',
    redirectTo: 'projets',
    pathMatch: 'full'
  },
  {
    path: 'projets',
    component: ProjetsIndex
  },
  {
    path: 'projets/creer',
    component: ProjetCreer
  }
];
info

En définissant une nouvelle route, on indique que le chemin (path) /projets/creer doit charger la page (composant) ProjetCreer

Tester la route​

Pour tester si votre route fonctionne comme attendu, vous pouvez allez manuellement sur la page à l'aide de votre navigateur: http://localhost:4200/projets/creer.

Vous devriez voir la page apparaître!

http://localhost:4200/projets/creer