Routage et Navigation avec Angular

Routage et Navigation avec Angular

  1. Objectifs

    • Etre capable de naviguer entre les différents itinéraires dans une application angulaire.
  2. Présentation

    • L’Angular Router permet la navigation d’une vue à l’autre pendant que les utilisateurs effectuent des tâches d’application.
    • Naviguer entre les vues ou les pages qui se déclenchent par les actions de l’utilisateur, C’est un comportement standard dans l’application Web, PWA ou Mobile Apps.
    • La navigation ou les changements de vue se produisent lorsque l’utilisateur clique sur le lien, cliquez sur le bouton ou saisissez l’URL dans la barre d’adresse du navigateur. Chaque changement de vue peut amener les paramètres des données de la vue précédente à la vue suivante.
    • Pour les exemples de routage et de navigation en utilise notre exemple crée dans le tutoriel précédent.



  3. Routage angulaire simple

    • Le routage Angular 9 simple contiendra quelques pages ou vues qui ont le même niveau. Nous décrivons ce simple routage angulaire et navigation par ce menu.
    • Routage et Navigation

    • À partir de ce menu, nous devons créer les nouveaux composants en saisissant ces commandes pour les générer à l’aide de schémas angulaires.
    • ng g c Accueil
    • ng g c ListeApprenant
    • ng g c About
    • ng g c Login
    • Maintenant, nous avons un dossier Accueil, ListeApprenant, About et Login dans le dossier app.
    • Ensuite, nous devons ajouter le routage pour ces composants en ouvrant et en éditant "src/app/app-routing.module.ts" puis en ajoutant ces importations de composants.
    • Routage et Navigation

      import { AccueilComponent } from './accueil/accueil.component';
      import { AboutComponent } from './about/about.component';
      import { ApprenantsComponent } from './apprenants/apprenants.component';
      import { LoginComponent } from './login/login.component';
      import { ContactComponent } from './contact/contact.component';
    • Ajoutez la variable constante des routes par ce tableau de routes de composants.
    • const routes: Routes = [
        { path: 'accueil', component: AccueilComponent },
        { path: 'about', component: AboutComponent },
        { path: 'login', component: LoginComponent },
        { path: 'apprenats', component: ApprenantsComponent },
        { path: 'contact', component: ContactComponent },
        { path: '', redirectTo: '/accueil', pathMatch: 'full' }
      ];
    • Notre fichier devient :"src/app/app-routing.module.ts"
    • Routage et Navigation

    • Les composants deviennent accessibles via les URLs suivants.
      • http: // localhost:4200/accueil -> accédez à AccueilComponent
      • http: // localhost:4200/about -> accédez à AboutComponent
      • http: // localhost:4200/login -> accédez à LoginComponent
      • http: // localhost:4200/apprenants -> accédez à ApprenantsComponent
      • http: // localhost:4200/ -> rediriger vers AccueilComponent

      Toutes ces routes de composants enveloppées dans app.component.html par la ligne "router-outlet> "/router-outlet>. Les vues dynamiques changent à l’intérieur de la balise de sortie du routeur.