Skip to content

Zone_js_Integration.md

Latest commit

 

History

History
51 lines (29 loc) · 3.77 KB

Zone_js_Integration.md

File metadata and controls

51 lines (29 loc) · 3.77 KB
Raw
graph LR
    NgZone["NgZone"]
    ZoneImpl["ZoneImpl"]
    Patching_Modules["Patching Modules"]
    NgZone -- "utilizes" --> ZoneImpl
    ZoneImpl -- "provides context to" --> NgZone
    Patching_Modules -- "modifies" --> ZoneImpl
Loading

CodeBoardingDemoContact

Details

The core interaction revolves around NgZone leveraging ZoneImpl to manage asynchronous operations and trigger Angular's change detection. ZoneImpl acts as the central runtime, intercepting asynchronous tasks through the modifications applied by Patching Modules. These modules are crucial as they instrument the native APIs, allowing ZoneImpl to track and propagate execution contexts across asynchronous boundaries. NgZone then uses this contextual information from ZoneImpl to determine when to run Angular's change detection cycle, ensuring the UI remains synchronized with the application state.

The Angular application's responsiveness and efficient change detection are largely facilitated by the integration of NgZone with Zone.js. At the heart of this integration is ZoneImpl, the runtime that intercepts and tracks asynchronous operations across the application. This interception is made possible by various Patching Modules that instrument native browser and Node.js APIs, ensuring that all asynchronous tasks are wrapped within a Zone. NgZone then acts as the bridge, leveraging ZoneImpl's capabilities to be notified of asynchronous task completions, thereby intelligently triggering Angular's change detection cycle and maintaining a synchronized application state.

NgZone

Angular's primary interface to Zone.js. It provides a controlled environment for executing code within or outside Angular's change detection zone, notifying Angular when asynchronous operations complete to trigger change detection.

Related Classes/Methods:

ZoneImpl

The foundational runtime of Zone.js. It intercepts and tracks asynchronous operations across various JavaScript APIs (e.g., setTimeout, Promise, DOM events), propagating execution context across asynchronous boundaries.

Related Classes/Methods:

Patching Modules

A collection of modules within Zone.js that modify (patch) native browser and Node.js APIs (like setTimeout, Promise, XMLHttpRequest) to integrate them with the Zone.js tracking mechanism, ensuring that asynchronous operations are properly captured and managed by ZoneImpl.

Related Classes/Methods:

FAQ