quelle est l'utilité de Zone.js dans Angular 2

Question

J'apprends actuellement Angulaire 2.0 et je suis tombé sur le fichier Zone.js J'aimerais savoir à quoi sert le fichier Zone.js et comment il peut améliorer mon application.

Answer 1

Une zone est un contexte d'exécution qui persiste à travers les tâches asynchrones et permet au créateur de la zone d'observer et de contrôler l'exécution du code dans la zone.

Je pense que l'objectif principal de l'utilisation de zonejs dans angular2 est pour savoir quand rendre .

Selon L'abécédaire de NgZone (Chapitre 5 : Cas d'utilisation/Cas d'utilisation 3 : Framework Auto Render)

Les frameworks, tels qu'Angular, doivent savoir quand tous les éléments de l'application l'application est terminée et effectuer la mise à jour du DOM avant que l'environnement hôte n'effectue le rendu des pixels. En pratique, cela signifie que le framework s'intéresse à l'exécution de la tâche principale et des micro tâches associées ont été exécutées, mais avant que la VM ne transmette le contrôle à l'hôte. hôte.

Angular utilise la zone pour patcher les API asynchrones (addEventListener, setTimeout(), ...) et utilise les notifications de ces API patchées pour lancer la détection des changements chaque fois qu'un événement asynchrone se produit.

Pour cette zone angulaire a onMicrotaskEmpty événement

https://github.com/angular/angular/blob/2.2.4/modules/%40angular/core/src/zone/ng_zone.ts#L199

et ApplicationRef souscrit à cet événement pour déclencher la détection des changements ( Application.tick )

https://github.com/angular/angular/blob/2.2.4/modules/%40angular/core/src/application_ref.ts#L405-L406

Zonejs est également utile pour le débogage, les tests et le profilage. Il vous aide à voir toute la pile d'appels si vous êtes confronté à une erreur.

La zone corrige les API asynchrones comme :

Promise
XHR
fetch
Error
addEventListener
removeEventListener
FileReader
WebSocket
MutationObserver
WebKitMutationObserver
document.registerElement
navigator.geolocation.getCurrentPosition
navigator.geolocation.watchPosition

copy cut paste abort blur focus canplay canplaythrough change click contextmenu 
dblclick drag dragend dragenter dragleave dragover dragstart drop 
durationchange emptied ended input invalid keydown keypress keyup 
load loadeddata loadedmetadata loadstart message 
mousedown mouseenter mouseleave mousemove mouseout mouseover mouseup 
pause play playing progress ratechange reset scroll 
seeked seeking select show stalled submit suspend 
timeupdate volumechange waiting 
mozfullscreenchange mozfullscreenerror mozpointerlockchange 
mozpointerlockerror error webglcontextrestored webglcontextlost webglcontextcreationerror

setTimeout/clearTimeout
setInterval/clearInterval
setImmediate/clearImmediate

requestAnimationFrame/cancelAnimationFrame
mozRequestAnimationFrame/mozCancelAnimationFrame
webkitRequestAnimationFrame/webkitCancelAnimationFrame

alert
prompt
confirm

Cet article peut être utile pour comprendre comment cela fonctionne dans angular2.

• http://blog.thoughtram.io/angular/2016/02/01/zones-in-angular-2.html
• http://blog.kwintenp.com/how-the-hell-do-zones-really-work/

Answer 2

Zonejs est l'une des principales bibliothèques utilisées dans Angularjs 2. Zonejs permet de maintenir une exécution contextuelle pour les méthodes asynchrones à un ou plusieurs niveaux. Cela signifie donc qu'elle permet de conserver la trace du contexte parent de la méthode asynchrone en cours d'exécution.

Exemple -

Zone.current.fork({}).run(function(){
 Zone.current.myZoneVar = true;
 console.log('Assigned myZoneVar');
 setTimeout(()=>{
   console.log('In timeout', Zone.current.myZoneVar);
 },1000);
});
console.log('Out side', Zone.current.myZoneVar);

<script src="https://unpkg.com/zone.js@0.8.4?main=browser"></script>

Note : Ignorez l'erreur de la console. Ce code fonctionne très bien dans jsfiddle. https://jsfiddle.net/subhadipghosh/0uqc9rdr/

Ici, nous avons créé un fork de notre zone actuelle et le run invoque la méthode sous la zone. La méthode a un appel asynchrone (setTimeout). Mais comme elle est sous la zone, nous avons accès à la variable Zone. Dans la dernière ligne, nous pouvons voir qu'en dehors de la zone, nous essayons d'accéder à la même variable, mais elle sera indéfinie.

Poste original - http://technobelities.blogspot.in/2017/03/zonejs-overview-with-example.html

Angular 2 utilise Zonejs pour la détection des changements. Chaque fois qu'un changement se produit, il est détecté par le code suivant dans Angular 2 -

ObservableWrapper.subscribe(this.zone.onTurnDone, () => {
  this.zone.run(() => {
    this.tick();
  });
});

tick() {
  // perform change detection
  this.changeDetectorRefs.forEach((detector) => {
    detector.detectChanges();
  });
}

La zone Angular émet l'événement onTurnDone pour lancer la détection des changements dans l'application.

Answer 3

Zone.js est la clé de la détection des changements dans Angular.

La zone crée une enveloppe autour de toutes les opérations asynchrones dans le navigateur, comme interactions avec les utilisateurs, HTTP, temporisations et tout autre changement pouvant entraîner des changements d'état.

La zone sait quand l'une de ces opérations est terminée. Angulaire à son tour, s'abonne aux notifications de la zone pour chaque fois que l'une de ces opérations se termine. Cela permet à Angular de savoir qu'il peut exécuter son programme détection des changements algorithmes et rendre à nouveau tout ce qui a changé.

Cela permet de réduire au minimum la rotation du rendu et de le rendre efficace.

Answer 4

En langage simple, Zone.js est un api ou un ensemble de programmes utilisés par Angular 2 pour mettre à jour la vue de l'application lorsqu'un changement se produit.

Une zone est un contexte d'exécution qui persiste à travers une tâche asynchrone. par exemple :Events, XMLHttpRequests et Timers(setTimeout(), setInterval()) etc.

Answer 5

Zone.js utilise pour les appels asynchrones et en interne pour l'erreur et la trace de pile angular 2 l'utilise. Donc vous ne pouvez pas ignorer ce script.