reference-core

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Angular Core (

packages/core

) Mental Model

Angular Core（

packages/core

）思维模型

This document outlines the architecture and mental model for

packages/core

, the heart of the Angular framework.

本文档概述了Angular框架核心部分

packages/core

的架构与思维模型。

1. High-Level Architecture

1. 高层架构

packages/core

contains the runtime logic for Angular. Its primary responsibilities are:

Rendering (Ivy/Render3): Transforming templates into DOM updates.
Dependency Injection (DI): Managing object creation and lifetime.
Change Detection: Synchronizing the model with the view.
Reactivity: Signals and Zone.js integration.

packages/core

包含Angular的运行时逻辑。其主要职责包括：

渲染（Ivy/Render3）：将模板转换为DOM更新。
依赖注入（DI）：管理对象的创建与生命周期。
变更检测：同步模型与视图。
响应式：Signals与Zone.js集成。

2. Rendering Engine (Ivy / Render3)

2. 渲染引擎（Ivy / Render3）

The rendering engine (located in

packages/core/src/render3

) uses an instruction-based approach.

渲染引擎位于

packages/core/src/render3

目录下，采用基于指令的实现方式。

Key Concepts

核心概念

Instructions: The Angular compiler transforms templates into a sequence of instruction calls (e.g.,
```
ɵɵelementStart
```
,
```
ɵɵtext
```
,
```
ɵɵproperty
```
). These instructions are executed at runtime to create and update the view.
- Location:
```
packages/core/src/render3/instructions
```
LView (Logical View): An array containing the state of a specific view instance. It holds:
- DOM nodes (
```
RElement
```
  ,
```
RText
```
  ).
- Binding values (for change detection).
- Directive/Component instances.
- Context:
```
packages/core/src/render3/interfaces/view.ts
```
TView (Template View): An array containing the static structure of a view. It is shared across all instances (
```
LView
```
s) of the same component/template. It holds:
- Property names for bindings.
- Node relationship information.
- Compiled directive definitions.
- Context:
```
packages/core/src/render3/interfaces/view.ts
```
Memory Layout:
```
LView
```
and
```
TView
```
are parallel arrays. Index
```
i
```
in
```
LView
```
corresponds to metadata at index
```
i
```
in
```
TView
```
.
- ```
HEADER
```
  : Fixed size, contains context (Parent, Host, etc.).
- ```
DECLS
```
  : Static nodes (elements, text, pipes).
- ```
VARS
```
  : Binding values.
- ```
EXPANDO
```
  : Dynamic data (host bindings, injectors).

指令（Instructions）：Angular编译器会将模板转换为一系列指令调用（例如
```
ɵɵelementStart
```
、
```
ɵɵtext
```
、
```
ɵɵproperty
```
）。这些指令在运行时执行，用于创建和更新视图。
- 位置：
```
packages/core/src/render3/instructions
```
LView（逻辑视图）：一个数组，存储特定视图实例的状态。其中包含：
- DOM节点（
```
RElement
```
  、
```
RText
```
  ）。
- 绑定值（用于变更检测）。
- 指令/组件实例。
- 定义文件：
```
packages/core/src/render3/interfaces/view.ts
```
TView（模板视图）：一个数组，存储视图的静态结构。它会被同一组件/模板的所有
```
LView
```
实例共享。其中包含：
- 绑定的属性名称。
- 节点关系信息。
- 编译后的指令定义。
- 定义文件：
```
packages/core/src/render3/interfaces/view.ts
```
内存布局：
```
LView
```
与
```
TView
```
是并行数组。
```
LView
```
中的索引
```
i
```
对应
```
TView
```
中索引
```
i
```
的元数据。
- ```
HEADER
```
  ：固定大小，包含上下文信息（父视图、宿主视图等）。
- ```
DECLS
```
  ：静态节点（元素、文本、管道）。
- ```
VARS
```
  ：绑定值。
- ```
EXPANDO
```
  ：动态数据（宿主绑定、注入器）。

The Render Cycle

渲染周期

Creation Mode: Instructions create DOM nodes and store them in
```
LView
```
.
Update Mode: Instructions check current values against previous values stored in
```
LView
```
. If changed, they update the DOM.

创建模式：指令创建DOM节点并存储到
```
LView
```
中。
更新模式：指令检查当前值与
```
LView
```
中存储的旧值是否不同，若有变化则更新DOM。

3. Dependency Injection (DI)

3. 依赖注入（DI）

DI in Angular is hierarchical and split into two systems that interact:

Angular中的DI是分层结构，分为两个相互作用的系统：

Module Injector (

R3Injector

)

模块注入器（

R3Injector

）

Configured via
```
@NgModule.providers
```
or
```
providedIn: 'root'
```
.
Stored in a hierarchy of
```
R3Injector
```
instances.
Location:
```
packages/core/src/di/r3_injector.ts
```

通过
```
@NgModule.providers
```
或
```
providedIn: 'root'
```
配置。
存储在
```
R3Injector
```
实例的层级结构中。
位置：
```
packages/core/src/di/r3_injector.ts
```

Node Injector

节点注入器

Configured via

@Component.providers

@Directive.providers

Not a class, but a data structure embedded in the
```
LView
```
("Expando" section).
Uses Bloom Filters (
```
TView.data
```
) to quickly check if a token is present at a specific node index before traversing up the tree.
Resolves tokens starting from the current node, walking up the view tree (Element Injector hierarchy), and falling back to the Module Injector if not found.

通过

@Component.providers

或

@Directive.providers

配置。

并非类，而是嵌入在
```
LView
```
（"Expando"区域）中的数据结构。
使用布隆过滤器（
```
TView.data
```
）在遍历树之前快速检查特定节点索引处是否存在令牌。
从当前节点开始解析令牌，向上遍历视图树（元素注入器层级），如果未找到则回退到模块注入器。

4. Change Detection

4. 变更检测

Dirty Checking: Angular checks if values bound in templates have changed.
Strategies:
- ```
Default
```
  : Checks everything.
- ```
OnPush
```
  : Checks only if inputs change, events fire, or signals update.
Signals: The new reactivity primitive. Signals notify the scheduler when they change, potentially allowing for fine-grained updates (Zoneless).

脏检查：Angular检查模板中绑定的值是否发生变化。
策略：
- ```
Default
```
  ：检查所有内容。
- ```
OnPush
```
  ：仅在输入变更、事件触发或Signals更新时检查。
Signals：新的响应式原语。Signals在变化时通知调度器，可能支持细粒度更新（无Zone.js）。

5. Key Directories to Know

5. 关键目录说明

```
src/render3
```
: The Ivy rendering engine.
- ```
instructions
```
  : The runtime instructions called by compiled code.
- ```
interfaces
```
  :
```
LView
```
  ,
```
TView
```
  ,
```
TNode
```
  definitions.
```
src/di
```
: Dependency injection system.
```
src/change_detection
```
: Change detection logic.
```
src/zone
```
: Zone.js integration.
```
src/signal
```
: Signals implementation (if present in this version, otherwise likely in
```
primitives
```
).

```
src/render3
```
：Ivy渲染引擎。
- ```
instructions
```
  ：编译代码调用的运行时指令。
- ```
interfaces
```
  ：
```
LView
```
  、
```
TView
```
  、
```
TNode
```
  的定义。
```
src/di
```
：依赖注入系统。
```
src/change_detection
```
：变更检测逻辑。
```
src/zone
```
：Zone.js集成代码。
```
src/signal
```
：Signals实现（若当前版本包含，否则可能位于
```
primitives
```
目录）。

6. Conventions & Gotchas

6. 约定与注意事项

Prefixes: Private/Internal exports often start with
```
ɵ
```
.
Global State: Ivy relies heavily on global state (e.g.,
```
getLView()
```
) during instruction execution to avoid passing context arguments everywhere. This is for performance and code size.
Performance: The code is highly optimized for performance and memory. You will see arrays used instead of objects, bitmasks, and manual memory management patterns. Respect these patterns.

前缀：私有/内部导出通常以
```
ɵ
```
开头。
全局状态：Ivy在指令执行期间严重依赖全局状态（例如
```
getLView()
```
），以避免传递上下文参数，这是为了性能和代码体积优化。
性能：代码经过高度优化以提升性能和内存效率。你会看到使用数组而非对象、位掩码、手动内存管理等模式。请遵循这些模式。

7. How to Modify Core

7. 如何修改Core代码

Understand the Instruction: If modifying runtime behavior, find the corresponding instruction in
```
src/render3/instructions
```
.
Check
LView
/
TView
Impact: If adding state, understand where it fits in the
```
LView
```
array.
Tests: Core has extensive tests. Run them using Bazel.

理解指令：如果修改运行时行为，请在
```
src/render3/instructions
```
中找到对应的指令。
检查
LView
/
TView
影响：如果添加状态，请了解它在
```
LView
```
数组中的位置。
测试：Core有大量测试用例，使用Bazel运行测试。

reference-core

Original

Translation

Angular Core (
`packages/core`
) Mental Model

Angular Core（
`packages/core`
）思维模型

1. High-Level Architecture

1. 高层架构

2. Rendering Engine (Ivy / Render3)

2. 渲染引擎（Ivy / Render3）

Key Concepts

核心概念

The Render Cycle

渲染周期

3. Dependency Injection (DI)

3. 依赖注入（DI）

Module Injector (
`R3Injector`
)

模块注入器（
`R3Injector`
）

Node Injector

节点注入器

4. Change Detection

4. 变更检测

5. Key Directories to Know

5. 关键目录说明

6. Conventions & Gotchas

6. 约定与注意事项

7. How to Modify Core

7. 如何修改Core代码

reference-core

Original

Translation

Angular Core (packages/core) Mental Model

Angular Core（packages/core）思维模型

1. High-Level Architecture

1. 高层架构

2. Rendering Engine (Ivy / Render3)

2. 渲染引擎（Ivy / Render3）

Key Concepts

核心概念

The Render Cycle

渲染周期

3. Dependency Injection (DI)

3. 依赖注入（DI）

Module Injector (R3Injector)

模块注入器（R3Injector）

Node Injector

节点注入器

4. Change Detection

4. 变更检测

5. Key Directories to Know

5. 关键目录说明

6. Conventions & Gotchas

6. 约定与注意事项

7. How to Modify Core

7. 如何修改Core代码

Angular Core (
`packages/core`
) Mental Model

Angular Core（
`packages/core`
）思维模型

Module Injector (
`R3Injector`
)

模块注入器（
`R3Injector`
）