Angular Academy · Leçon

Angular sans zone

Exécutez Angular sans Zone.js

Angular sans zone est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 3 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.

Au-delà de Zone.js

Zone.js ajoute une surcharge et modifie les API globales. Angular moderne propose un mode sans zone, dans lequel la détection des changements est pilotée par les signaux et les notifications explicites plutôt que par la modification des zones.

Activer le mode sans zone

Fournissez le fournisseur de détection des changements sans zone dans votre configuration d'amorçage.

bootstrapApplication(AppComponent, {
  providers: [
    provideExperimentalZonelessChangeDetection()
  ]
});

Supprimer Zone.js

En mode sans zone, vous supprimez également le polyfill zone.js de votre configuration de compilation, ce qui réduit la taille du paquet et le coût du démarrage.

// angular.json: remove "zone.js" from polyfills
// main.ts: do not import 'zone.js'

Qu'est-ce qui déclenche désormais la détection ?

Sans zones, Angular planifie la détection des changements lorsque : la valeur d'un signal lu dans un modèle change, un pipe async émet, une liaison d'événement est déclenchée ou markForCheck() est appelé.

Les signaux sont au cœur du système

Les applications sans zone reposent largement sur les signaux pour gérer leur état. Lire un signal dans un modèle crée une dépendance ; le mettre à jour indique à Angular d'actualiser cette vue.

count = signal(0);
// template: {{ count() }}
this.count.set(5); // schedules CD

Les événements notifient toujours Angular

Les liaisons d'événements du modèle notifient directement Angular. Les interactions de l'utilisateur continuent donc de mettre à jour l'interface sans zones.

<button (click)="count.update(c => c + 1)">+</button>

Asynchrone sans zones

Un setTimeout brut ou une opération asynchrone qui n'utilise pas de signal ne déclenche plus automatiquement la détection. Encapsulez cet état dans des signaux ou appelez markForCheck().

setTimeout(() => this.ready.set(true), 1000);

Compatibilité avec le pipe asynchrone

Le pipe async continue de fonctionner en mode sans zone, car il marque explicitement la vue pour vérification à chaque émission.

<p>{{ data$ | async }}</p>

Bibliothèques tierces

Certaines bibliothèques supposaient que Zone.js détectait automatiquement les changements. En mode sans zone, vous devrez peut-être encapsuler leurs fonctions de rappel pour mettre à jour un signal ou appeler manuellement markForCheck().

Avantages

Le mode sans zone signifie des paquets plus petits, un démarrage plus rapide, moins de cycles supplémentaires inattendus et un modèle mental plus clair : l'interface se met à jour uniquement lorsque l'état que vous suivez change réellement.

Statut expérimental

Le fournisseur s'appelle provideExperimentalZonelessChangeDetection parce que l'API est encore en cours de stabilisation. Adoptez-le pour les nouvelles applications axées sur les signaux et testez-les soigneusement.

Vérification rapide

Testez votre compréhension d'Angular sans zone.

Récapitulatif

Vous avez appris que provideExperimentalZonelessChangeDetection() supprime le besoin de Zone.js et pilote les mises à jour via les signaux, les événements, le pipe asynchrone et markForCheck(), pour des applications plus petites, plus rapides et plus prévisibles.

Questions Fréquemment Posées

La leçon « Angular sans zone » est-elle gratuite ?

Oui — le texte complet de « Angular sans zone » 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 « Angular sans zone » ?

Exécutez Angular sans Zone.js 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 3 sur 4.

Combien de temps prend la leçon « Angular sans zone » ?

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

← Retour à Angular Academy