In fact, many other browser APIs are patched by Zone.js to transparently trigger Angular change detection, such as for example Websockets. all browser events (click, mouseover, keyup, etc.).The following frequently used browser mechanisms are patched to support change detection: Angular uses Zones internally to trigger change detection, but another possible use would be to do application profiling, or keeping track of long stack traces that run across multiple VM turns. It's a generic mechanism which we can use to add extra functionality to the browser. It's important to have an idea of what a zone is.Ī zone is nothing more than an execution context that survives multiple Javascript VM execution turns. This low-level patching of browser APIs is done by a library shipped with Angular called Zone.js. How does this low-level runtime patching work? The new version of addEventListener adds more functionality to any event handler: not only the registered callback is called, but Angular is given a chance to run change detection and update the UI. Angular will replace addEventListener with a new version that does the equivalent of this: What happens is that Angular at startup time will patch several low-level browser APIs, such as for example addEventListener, which is the browser function used to register all browser events, including click handlers. We can override functions in String or Number if we so want. To understand how this works, we need to start by realizing that in Javascript the whole runtime is overridable by design. But how can it do so after such a low-level event like the click of a button, that can happen anywhere on the page? How is change detection implemented?Īngular can detect when component data changes, and then automatically re-render the view to reflect that change. If you are looking for more information about OnPush change detection, have a look at the post Angular OnPush Change Detection and Component Design - Avoid Common Pitfalls. Using Immutable.js to simplify the building of Angular apps.What does the OnPush change detection mode actually do?.Avoiding change detection loops: Production vs Development mode.turning on/off change detection, and triggering it manually. How does the default change detection mechanism work.What does an Angular change detector look like, can I see it?.So let's dig deeper into change detection by going over the following topics: But there are still situations (like when doing performance optimizations) when we really need to know what's going on under the hood. The Angular change detection mechanism is much more transparent and easier to reason about than its equivalent in AngularJs.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |