Pourquoi utiliser des composants autonomes
Découvrez comment les composants autonomes simplifient Angular.
Pourquoi utiliser des composants autonomes est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.
Pourquoi des composants autonomes ?
Les composants autonomes vous permettent de créer des applications Angular sans NgModules. Un composant déclare ses propres dépendances, ce qui rend les éléments constitutifs autonomes et plus faciles à comprendre.
L’ère des NgModules
Traditionnellement, chaque composant, directive et pipe devait être déclaré dans un @NgModule. Les modules regroupaient les déclarations et géraient les imports et les exports.
Cela ajoutait du code répétitif et un niveau d’indirection supplémentaire.
Les problèmes causés par les NgModules
Les NgModules ont introduit des difficultés courantes : oublier de déclarer un composant, le déclarer dans deux modules, confondre les imports et les déclarations, ainsi que créer de grands modules partagés qui chargeaient trop d’éléments.
Le principe des composants autonomes
Avec les composants autonomes, chaque composant indique exactement ce dont il a besoin dans son propre tableau imports. Il n’existe aucun module central qui doive le connaître.
import { Component } from '@angular/core';
@Component({
selector: 'app-hello',
standalone: true,
template: '<p>Hello</p>'
})
export class HelloComponent {}Dépendances autonomes
Comme un composant autonome déclare ses propres dépendances, vous pouvez lire un seul fichier et savoir tout ce sur quoi il repose. Cela améliore la clarté et les outils de développement.
Moins de code répétitif
Il n’est plus nécessaire de faire correspondre les déclarations et les exports entre les modules. Vous importez directement un composant là où vous l’utilisez, comme avec les modules ES.
Meilleure élimination du code inutilisé
Les composants autonomes rendent le graphe des dépendances explicite, ce qui aide les outils de regroupement à supprimer le code inutilisé et peut produire des ensembles de fichiers plus légers.
Chargement différé simplifié
Les routes peuvent charger directement et de manière différée un composant autonome à l’aide d’un import dynamique, sans nécessiter de module fonctionnel intermédiaire.
// route: loadComponent: () => import('./page.component').then(m => m.PageComponent)La nouvelle valeur par défaut
Dans les versions récentes d’Angular, autonome est la valeur par défaut pour les composants nouvellement générés. Les NgModules fonctionnent toujours, mais l’approche autonome est recommandée pour la suite.
Interopérabilité avec les NgModules
Le code autonome et le code fondé sur des modules sont interopérables. Un composant autonome peut être importé dans un NgModule, et un composant fondé sur un NgModule peut utiliser des imports autonomes, ce qui facilite la migration.
Ce que vous devez toujours configurer
La configuration à l’échelle de l’application, comme le routeur ou le client HTTP, est fournie par les fournisseurs de bootstrapApplication au lieu d’un module racine, comme vous le verrez plus tard.
Vérification rapide : pourquoi l’approche autonome ?
Quel est le principal avantage des composants autonomes ?
Récapitulatif : pourquoi l’approche autonome ?
Les composants autonomes éliminent le code répétitif des NgModules en permettant à chaque composant de déclarer ses propres dépendances. Le code est ainsi plus clair, le chargement différé plus simple et l’élimination du code inutilisé plus efficace. L’approche autonome est désormais la valeur par défaut. Ensuite : en créer un.
Questions Fréquemment Posées
La leçon « Pourquoi utiliser des composants autonomes » est-elle gratuite ?
Oui — le texte complet de « Pourquoi utiliser des composants autonomes » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Pourquoi utiliser des composants autonomes » ?
Découvrez comment les composants autonomes simplifient Angular. Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Angular Academy ?
Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « Pourquoi utiliser des composants autonomes » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?
Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Pourquoi utiliser des composants autonomes
- Créer des composants autonomes
- Importer directement les dépendances
- Amorcer une application autonome