Notions de base angulaires : vue d’ensemble du lien du routeur

Apprenez à utiliser le routeur angulaire pour ajouter des routes et des liens qui restituent le contenu que nous voulons lorsque nous naviguons vers les routes.

Angular est un framework qui nous permet de créer des interfaces Web interactives pour les utilisateurs. Cela nous permet d’écrire des applications frontales d’une seule page qui peuvent nous permettre d’afficher différentes choses en fonction de l’URL à laquelle nous allons.

Pour ce faire, il fournit une bibliothèque de routage qui nous permet de mapper les URL aux composants. Ensuite, lorsque nous allons sur une URL, nous voyons le composant que nous voulons rendre.

Dans cet article, nous verrons comment utiliser le routeur angulaire pour ajouter des itinéraires et des liens qui restituent le contenu souhaité lorsque nous naviguons vers les itinéraires.

Routeur angulaire

Les applications angulaires sont principalement des applications d’une seule page, mais nous souhaitons rendre plusieurs pages. Par conséquent, nous avons besoin d’un routage côté client dans notre application.

Angular est livré avec sa propre bibliothèque de routage côté client pour nous permettre de rendre le composant que nous voulons en fonction de l’URL vers laquelle nous allons. Nous pouvons ajouter des liens qui ont les URL de route comme destination afin que lorsque nous cliquons sur le lien, nous verrons le contenu que nous attendons.

Pour l’utiliser, nous devons d’abord importer le AppRouting module que nous allons créer qui inclut le code de routage.

Nous écrivons:

app.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { FooComponent } from "./foo/foo.component";
import { BarComponent } from "./bar/bar.component";

@NgModule({
  declarations: [AppComponent, FooComponent, BarComponent],
  imports: [BrowserModule, AppRoutingModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

pour importer le AppRoutingModule composant afin que nous puissions utiliser le routage dans AppModule.

Nous ajoutons également FooComponent et BarComponent pour enregistrer les deux composants dans AppModule afin qu’ils puissent être rendus.

Ensuite, nous exécutons:

ng g component Foo

et

ng g component Bar

pour créer le Foo et Bar composants qui seront nos composants de route.

Ensuite, nous mappons les URL aux composants de route que nous venons de créer dans app-routing.module.ts en écrivant:

app-routing.module.ts

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { BarComponent } from "./bar/bar.component";
import { FooComponent } from "./foo/foo.component";

const routes: Routes = [
  { path: "foo", component: FooComponent },
  { path: "bar", component: BarComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

La path propriété est le chemin d’URL relatif à l’URL de base. Et le component La propriété est définie sur le composant qui sera rendu lorsque nous accéderons à l’URL.

Nous ajoutons RouterModule.forRoot(routes) au imports tableau pour enregistrer les routes.

Et nous ajoutons RouterModule au exports tableau afin que nous puissions importer RouterModule de même que AppRoutingModule afin qu’Angular utilise les routes sur ce module lorsque nous l’importerons dans un autre module.

Nous pouvons également ajouter des redirections facilement avec le routeur d’Angular. Par exemple, nous mettons à jour app-routing.module.ts à ce qui suit :

app-routing.module.ts

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { BarComponent } from "./bar/bar.component";
import { FooComponent } from "./foo/foo.component";
import { PageNotFoundComponent } from "./page-not-found/page-not-found.component";

const routes: Routes = [
  { path: "foo", component: FooComponent },
  { path: "bar", component: BarComponent },
  { path: "", redirectTo: "/foo", pathMatch: "full" },
  { path: "**", component: PageNotFoundComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Nous avons ajouté { path: "", redirectTo: "/foo", pathMatch: "full" }, rediriger / à /foo. La pathMatch la propriété est définie sur 'full' de sorte que le chemin complet doit correspondre avant que la redirection n’ait lieu.

Aussi, nous avons ajouté { path: "**", component: PageNotFoundComponent } pour ajouter un itinéraire générique qui est rendu lorsqu’aucune route de la liste au-dessus ne correspond.

Par conséquent, la PageNotFoundComponentLe contenu de est rendu lorsque nous naviguons vers une URL autre que /foo, /barou /.

De plus, nous pouvons facilement définir le titre de chaque itinéraire. Il ne nous reste plus qu’à ajouter le title propriété aux objets route.

Par exemple, nous remplaçons par nous avons dans app-routing.module.ts avec:

app-routing.module.ts

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { BarComponent } from "./bar/bar.component";
import { FooComponent } from "./foo/foo.component";
import { PageNotFoundComponent } from "./page-not-found/page-not-found.component";

const routes: Routes = [
  { path: "foo", title: "Foo", component: FooComponent },
  { path: "bar", title: "Bar", component: BarComponent },
  { path: "", redirectTo: "/foo", pathMatch: "full" },
  { path: "**", component: PageNotFoundComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Nous venons de définir le title propriété à la valeur que nous voulons et ils seront affichés comme titre de chaque itinéraire dans le navigateur.

Pour rendre le titre dynamique, nous créons une classe qui étend le TitleStrategy classer.

Par exemple, nous remplaçons par nous avons dans app-routing.module.ts avec:

app-routing.module.ts

import { Injectable, NgModule } from "@angular/core";
import { Title } from "@angular/platform-browser";
import {
  Routes,
  RouterModule,
  TitleStrategy,
  RouterStateSnapshot,
} from "@angular/router";
import { BarComponent } from "./bar/bar.component";
import { FooComponent } from "./foo/foo.component";
import { PageNotFoundComponent } from "./page-not-found/page-not-found.component";

const routes: Routes = [
  { path: "foo", title: "Foo", component: FooComponent },
  { path: "bar", title: "Bar", component: BarComponent },
  { path: "", redirectTo: "/foo", pathMatch: "full" },
  { path: "**", component: PageNotFoundComponent },
];

@Injectable()
export class TemplatePageTitleStrategy extends TitleStrategy {
  constructor(private readonly title: Title) {
    super();
  }

  override updateTitle(routerState: RouterStateSnapshot) {
    const title = this.buildTitle(routerState);
    if (title !== undefined) {
      this.title.setTitle(`App | ${title}`);
    }
  }
}

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [{ provide: TitleStrategy, useClass: TemplatePageTitleStrategy }],
})
export class AppRoutingModule {}

pour ajouter le TemplatePageTitleStrategy classe dans app-routing.module.ts dossier. Nous le rendons injectable avec le injectable décorateur.

Dans la classe, on ajoute le updateTitle méthode qui remplace le titre par défaut par notre propre texte. Nous utilisons buildTitle pour retourner le title valeur de propriété de l’itinéraire. Puis nous appelons this.title.setTitle avec le titre que nous voulons, qui comprend la valeur de title que nous avons obtenu de buildTitle.

En conséquence, nous voyons que le titre est App | Foo quand on va à /foo et est App | Bar quand on va à /bar.

Liens de routeur angulaires

Maintenant que nous avons ajouté et enregistré les composants de route, nous pouvons ajouter des liens qui nous permettent d’accéder aux pages.

Dans app.component.htmlnous remplaçons le contenu existant par :

app.component.html

<nav>
  <ul>
    <li>
      <a
        routerLink="/foo"
        routerLinkActive="active"
        ariaCurrentWhenActive="page"
        >Foo</a
      >
    </li>
    <li>
      <a
        routerLink="/bar"
        routerLinkActive="active"
        ariaCurrentWhenActive="page"
        >Bar</a
      >
    </li>
  </ul>
</nav>

<router-outlet></router-outlet>

Nous ajoutons deux a éléments qui sont rendus sous forme de liens. Nous voulons qu’ils rendent les composants que nous avons enregistrés, nous définissons donc le routerLink attribuer à /foo et /bar respectivement.

La router-outlet component nous permet de restituer le contenu du composant auquel nous avons mappé l’URL. Par conséquent, nous voyons les liens en haut de la page avec le contenu de la Foo et Bar routes en dessous en fonction de l’URL sur laquelle nous nous trouvons.

Cela nous permettra de voir le contenu de la Foo et Bar composants respectivement depuis que nous avons cartographié /foo au Foo composant et /bar au Bar composant avec :

const routes: Routes = [
  { path: "foo", component: FooComponent },
  { path: "bar", component: BarComponent },
];

routerLinkActive est réglé sur le active classe donc les styles pour le active La classe sera rendue lorsque l’URL du lien correspond à l’URL de la page sur laquelle nous nous trouvons.

Pour ajouter des styles pour le active classe, on écrit :

app.component.css

.active {
  font-weight: bold;
}

pour mettre le texte du lien en gras lorsque l’URL du lien correspond à l’URL de la page sur laquelle nous nous trouvons.

Si nous sommes sur /fooalors Foo est mis en évidence. Et si nous sommes sur /baralors Bar est mis en évidence.

Conclusion

Angular nous permet d’écrire des applications frontales d’une seule page qui peuvent nous permettre d’afficher différentes choses en fonction de l’URL à laquelle nous allons. Pour ce faire, il fournit une bibliothèque de routage qui nous permet de mapper les URL aux composants.

Ensuite, lorsque nous allons sur une URL, nous voyons le composant que nous voulons rendre. Nous pouvons utiliser Angular Router pour enregistrer les routes en mappant les URL aux composants de route.

De plus, nous pouvons configurer des redirections et ajouter des routes génériques qui restituent un composant avec le contenu que nous voulons afficher lorsque rien d’autre sur la liste de routes ne correspond aux URL répertoriées.

Et nous pouvons facilement ajouter des liens de routeur afin que nous puissions ajouter des liens qui rendent les composants que nous voulons en ajoutant quelques attributs au HTML normal a éléments.

La router-outlet Le composant est utilisé pour restituer le contenu du composant de route.