typescript - care este utilizarea Zone.js în Angular 2

În prezent învăț Angular 2.0 și am dat peste fișierul Zone.js, și aș dori să știu care este scopul fișierului Zone.js și cum va îmbunătăți aplicația mea.

Răspuns #1

O zonă este un context de execuție care persistă peste sarcini asincrone și permite creatorului zonei să observe și să controleze execuția codului din interiorul zonei.

Cred că scopul principal al utilizării zonejs în angular2 este să știm când să redăm.

Conform NgZone Primer (Capitolul 5: Cazuri de utilizare/Caz de utilizare 3: Redare automată în cadrul framework-ului)

Frameworkurile, cum ar fi Angular, trebuie să știe când toată munca aplicației s-a încheiat și să efectueze actualizarea DOM înainte ca mediul gazdă să realizeze redarea pixelilor. În practică, acest lucru înseamnă că frameworkul este interesat când sarcina principală și sarcinile micro asociate au fost executate, dar înainte ca VM-ul să predea controlul gazdei.

Angular folosește zona pentru a modifica API-urile asincrone (addEventListener, setTimeout(), ...) și folosește notificările de la aceste API-uri modificate pentru a rula detectarea schimbărilor de fiecare dată când se întâmplă un eveniment asincron.

Pentru această zonă Angular există evenimentul onMicrotaskEmpty

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

și ApplicationRef se abonează la acest eveniment pentru a declanșa detectarea schimbărilor (Application.tick)

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

De asemenea, zonejs este util pentru depanare, testare, profilare. Te ajută să vezi întreaga stivă de apeluri dacă te confrunți cu vreo eroare.

Zone parchează API-urile asincrone precum:

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

Acest articol ar putea fi util pentru a înțelege cum funcționează în Angular2

• http://blog.thoughtram.io/angular/2016/02/01/zones-in-angular-2.html
• http://blog.kwintenp.com/cum-naiba-funcționează-cuvintele-zones-în-realitate/

Răspunsul #2

Zone.js este cheia detectării modificărilor în Angular.

Zone creează un înveliș în jurul tuturor operațiunilor asincrone din browser, cum ar fi interacțiunile cu utilizatorul, HTTP, temporizatoarele și orice alte modificări care pot provoca schimbări de stare.

Zone știe când oricare dintre aceste operațiuni se termină. La rândul său, Angular se abonează la notificările de la Zone pentru ori de câte ori una dintre aceste operațiuni se termină. Acest lucru îi permite Angular să știe că poate rula algoritmii săi de detectare a schimbărilor și să reafișeze orice s-a schimbat.

Acest lucru minimizează orice fluctuație în redare și îl face eficient.

Răspunsul #3

Zonejs este una dintre bibliotecile de bază utilizate în Angularjs 2. Zonejs servește pentru a menține execuția contextuală pentru metode asincrone cu nivel unic sau multiple. Deci, asta înseamnă că ajută la urmărirea contextului părinte al metodei asincrone care se execută în prezent.

Exemplu -

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/[email ?main=browser"></script>

Notă: Vă rog, ignorați eroarea din consolă. Acest cod funcționează bine în jsfiddle - https://jsfiddle.net/subhadipghosh/0uqc9rdr/

Aici am creat un branch al Zonei noastre actuale și executarea apelează metoda din cadrul Zonei. Metoda are un apel asincron (setTimeout). Dar, fiind sub zonă, avem acces la variabila Zone. În ultima linie putem vedea că în afara zonei încercăm să accesăm aceeași variabilă, dar aceasta va fi nedefinită.

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

Angular 2 utilizează Zonejs pentru detectarea modificărilor. Ori de câte ori apare o modificare, aceasta este detectată de următorul cod din Angular 2 -

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

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

Zona Angular emite evenimentul onTurnDone pentru a începe detectarea schimbărilor în aplicație.