Mastering Angular: Data Binding, DI, Lazy Loading, and AOT Explained

Talking About Angular

This article follows the evolution of Angular, sharing basic introductions and personal insights.

Content Overview

Data Binding (updated)

Modular Organization (new)

Dependency Injection

Routing and lazyload (new)

Rxjs (new)

Pre‑compilation AOT (new)

Embracing change, facing the future

updated: existing feature, updated new: newly added

Data Binding

Common Template Binding

Common Template Engines

1. String‑based templating

Parse and compile based on strings:

String templates rely heavily on innerHTML because the output is a string.

2. Living templating

Parse strings and compile based on DOM:

In fact, the compile process of a Living template is purer than DOM‑based because it generates an AST instead of rewriting the original DOM.

We first use a built‑in DSL to parse the template string into an AST, then traverse the AST with a specific data model to recursively generate DOM nodes (without innerHTML). At the same time, directives, events and interpolations are bound, producing an active DOM linked to the model.

3. DOM‑based templating

Link or compile based on DOM:

DOM‑based templating does not have a full parse step; to create a view from a string you must use innerHTML to obtain the initial DOM, then the engine extracts directives, events, etc., from the DOM attributes and binds data to the view, making it “live”.

Thus DOM‑based templating is more like a link and rewrite process between data and DOM.

Reference: “A Comprehensive Summary of Front‑End Template Technologies”.

Data Update Diff

Framework data update mechanisms:

React → Virtual DOM

Vue → getter/setter

Angular → dirty checking

React

Uses a virtual DOM for diffing. The virtual DOM caches the DOM structure in JavaScript objects.

Virtual DOM algorithm:

Represent the DOM tree with JavaScript objects.

Compare two virtual DOM trees to find differences.

Apply the differences to the real DOM.

Reference: “Deep Dive: Implementing a Virtual DOM Algorithm”.

Vue

1. Vue 1 uses getter/setter Proxy for updates, employing a publish‑subscribe pattern for point‑to‑point data binding.

2. Vue 2 adopts virtual DOM diffing, similar to React.

Angular

Core: dirty checking (new/old value comparison) diff.

When the model changes, Angular checks all bound views and updates them.

Zone.js (monkey patch for runtime).

Wraps asynchronous tasks in a zone, providing hooks for each task.

Angular 2+ changes:

Modular Organization

Angular Modules

Angular modules package components, directives, and pipes into cohesive feature blocks, each focusing on a specific domain or workflow.

Modular Thinking

Functional modules are layered and abstracted throughout the application.

The modular concept extends from module organization to dependency injection.

Module Decorators

A decorator is a function that modifies a class’s behavior.

Note: Decorators are an ES6 feature, not a TypeScript‑only feature. ES2017 introduced them and Babel now supports them.

Dependency Injection

Angular’s dependency injection is a core feature.

What Is Dependency Injection

DI provides a mechanism where services are supplied by one part of the project and consumed by another, abstracting creation and initialization.

Consumers receive fully usable services without needing to know their internal implementation or further dependencies.

DI and State Management

State management:

Angular: uses DI services to share state.

Other frameworks (React/Vue): use component passing, event bus, Redux/Flux/Vuex, etc.

Designing a project often requires DI to instantiate and share components and services.

Services can be stateful or stateless; improper design can cause state‑management headaches, which is why Redux, Flux, MobX exist.

In Angular, shared state is typically handled by services injected via DI.

DI also simplifies unit testing because required services can be injected directly.

Multi‑Level DI

Multi‑level DI: the component tree runs parallel to the injector tree.

Each component instance has its own injector; if a dependency isn’t found locally, Angular climbs to the parent injector.

When a component requests a dependency, Angular first checks the component’s own injector; if not found, it delegates to the parent injector.

Routing and Lazy Loading

When bundling, a single bundle.js is loaded for every page. With Webpack you can split code, but the whole bundle may still be requested.

Lazy‑loaded routes allow each module to be packaged into its own bundle, which is fetched only when the route is activated, improving first‑page performance for large applications.

RxJS

RxJS is often compared with Promise, but they differ fundamentally.

Core Idea: Reactive Data

Promise → a single fulfillment.

RxJS → publish/subscribe model.

Execution and Response

1. Promise requires then() or catch() to execute and is single‑shot.

2. RxJS streams data regardless of subscription; an observable can emit before being subscribed, though earlier emissions are not replayed unless a replay strategy is used.

Data Source and Consumers

1. Promise has no fixed consumer; each then acts as both consumer and potential source, suitable for linear pipelines.

Promises resolve once; after resolution they cannot emit further values.

2. RxJS has explicit producers and consumers; an observable can emit many onNext events until onComplete or onError.

RxJS Example

Ahead‑of‑Time (AOT) Compilation

JIT

Just‑in‑time compilation incurs runtime performance overhead and increases bundle size because the compiler and unused libraries are shipped to the browser.

AOT

Pre‑compiling templates at build time catches errors early, reduces bundle size, and speeds up initial rendering.

AOT vs JIT

Both use the same Angular compiler; the difference lies in when the compilation occurs and which libraries are used.

With AOT the compiler runs once during build with a minimal set of libraries.

With JIT the compiler runs in each user’s browser on every load.

Embracing Change, Facing the Future

Angular, React, and Vue each have strengths and trade‑offs; the best choice depends on product design, use case, and team context.

Angular’s frequent breaking changes can be unfriendly, yet its willingness to adopt new ideas makes it a forward‑looking framework.

We should stay open‑minded, embrace change, and move forward together.