Premiers pas avec Angular : présentation du flux de travail réactif moderne

$ ng generate component details

Cela générera un simple details composant dans le src/app/details annuaire.

Maintenant nous pouvons mettre à jour src/app/app.routes.ts pour inclure ce nouveau chemin. Nous ajouterons également un chemin « par défaut » qui redirige les requêtes vides vers la vue d’accueil, garantissant que l’utilisateur atterrit toujours quelque part :

import { Routes } from '@angular/router';
import { App } from './app'; // Matches src/app/app.ts
import { Details } from './details/details'; // Matches src/app/details/details.ts

export const routes: Routes = (
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: App },
  { path: 'details', component: Details },
);

Maintenant, si vous visitez localhost:4200/homevous recevrez le message du details composant : « Les détails fonctionnent ! »

Ensuite, nous utiliserons le routerLink directive pour se déplacer entre les vues sans actualiser la page. Dans src/app/app.htmlnous créons une barre de navigation qui se trouve en permanence en haut de la page (l’élément « stationnaire »), tandis que le routeur échange le contenu en dessous (l’élément « impermanent ») :

Et avec cela, l’application dispose d’un flux de navigation. L’utilisateur clique, l’URL est mise à jour et le contenu se transforme, le tout sans le scintillement discordant d’un rechargement de navigateur.

Itinéraires paramétrés

La dernière chose que nous examinerons concerne la gestion des paramètres de route, où la route accepte des variables dans le chemin. Pour gérer ce type de données dynamiques, vous définissez un itinéraire avec une variable, marquée par deux points. Ouvrir src/app/app.routes.ts et ajoutez un chemin dynamique :

export const routes: Routes = (
  // ... existing routes
  { path: 'details/:id', component: Details }, 
);

Le :id est un espace réservé. Si l’URL est /details/42 ou /details/108ce routeur le recevra car il correspond au chemin. A l’intérieur du composant détails, nous avons accès à ce paramètre (en utilisant le service ActivatedRoute ou le nouveau withComponentInputBinding). Nous pouvons utiliser cette valeur pour récupérer les données dont nous avons besoin (comme l’utiliser pour récupérer un élément de détail d’une base de données).

Conclusion

Nous avons vu les éléments fondamentaux de l’Angular moderne : configurer l’environnement, créer des composants réactifs avec des signaux, organiser la logique avec les services et lier le tout avec un routage interactif.

Déployer ces éléments ensemble est le travail de base dans Angular. Une fois que vous vous y êtes familiarisé, vous disposez d’une plateforme extrêmement puissante à portée de main. Et, lorsque vous êtes prêt à approfondir, il y a bien plus à explorer dans Angular, notamment :

• Gestion de l’état : au-delà des signaux, Angular prend en charge la gestion d’états complexes à l’échelle de l’application.
• Formulaires : Angular dispose d’un système robuste pour gérer les entrées des utilisateurs.
• Signaux : Nous n’avons fait qu’effleurer la surface des signaux ici. Les signaux offrent un moyen puissant et précis de gérer les changements d’état.
• Build : vous pouvez en savoir plus sur la production de builds de production.
• RxJS : fait passer la programmation réactive au niveau supérieur.