Skip to content

Commit 7eda322

Browse files
lacolacolacolaco
authored
fix(docs): sync with angular/angular@31d3d56 (#1145)
1 parent 2b6f11f commit 7eda322

File tree

361 files changed

+11685
-9380
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

361 files changed

+11685
-9380
lines changed

‎adev-ja/src/app/features/home/components/control-flow/control-flow-example.en.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<div class="two-column-step">
2+
<div class="step-description">
3+
<div class="header">Control Flow</div>
4+
<div class="description">
5+
Angular's new control flow syntax makes templates easier to write and understand.
6+
</div>
7+
8+
<button
9+
class="docs-primary-btn"
10+
[attr.text]="'Learn more about Control Flow'"
11+
routerLink="/guide/templates/control-flow"
12+
>
13+
Learn more about Control Flow
14+
</button>
15+
</div>
16+
17+
<div class="step-code">
18+
<div class="code-block">
19+
<div class="code-header">
20+
<span>my-template.html</span>
21+
<span class="copy-icon"></span>
22+
</div>
23+
24+
<adev-code-block [code]="Example" language="angular-html" />
25+
</div>
26+
</div>
27+
</div>

‎adev-ja/src/app/features/home/components/control-flow/control-flow-example.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<div class="two-column-step">
2+
<div class="step-description">
3+
<div class="header">制御フロー</div>
4+
<div class="description">
5+
Angularの新しい制御フロー構文により、テンプレートがより書きやすく理解しやすくなります。
6+
</div>
7+
8+
<button
9+
class="docs-primary-btn"
10+
[attr.text]="'制御フローについて詳しく'"
11+
routerLink="/guide/templates/control-flow"
12+
>
13+
制御フローについて詳しく
14+
</button>
15+
</div>
16+
17+
<div class="step-code">
18+
<div class="code-block">
19+
<div class="code-header">
20+
<span>my-template.html</span>
21+
<span class="copy-icon"></span>
22+
</div>
23+
24+
<adev-code-block [code]="Example" language="angular-html" />
25+
</div>
26+
</div>
27+
</div>

‎adev-ja/src/app/features/home/components/deferrable-views-example/deferrable-views-example.en.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<div class="two-column-step">
2+
<div class="step-description">
3+
<div class="header">Deferrable Views</div>
4+
<div class="description">
5+
Deferrable views (also known as <code>&#64;defer</code> blocks) reduce the initial bundle size
6+
of your application by deferring the loading of code that is not strictly necessary for the
7+
initial rendering of a page.
8+
</div>
9+
10+
<button
11+
class="docs-primary-btn"
12+
[attr.text]="'Learn more about deferred loading'"
13+
routerLink="/guide/templates/defer"
14+
>
15+
Learn more about deferred loading
16+
</button>
17+
</div>
18+
19+
<div class="step-code">
20+
<div class="code-block">
21+
<div class="code-header">
22+
<span>data-visualization-page.html</span>
23+
<span class="copy-icon"></span>
24+
</div>
25+
26+
<adev-code-block [code]="exampleHtml" language="angular-html" />
27+
</div>
28+
29+
<div class="code-block">
30+
<div class="code-header">
31+
<span>data-visualization-page.ts</span>
32+
<span class="copy-icon"></span>
33+
</div>
34+
35+
<adev-code-block [code]="exampleTs" />
36+
</div>
37+
</div>
38+
</div>

‎adev-ja/src/app/features/home/components/deferrable-views-example/deferrable-views-example.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<div class="two-column-step">
2+
<div class="step-description">
3+
<div class="header">遅延可能ビュー</div>
4+
<div class="description">
5+
遅延可能ビュー（<code>&#64;defer</code>ブロックとも呼ばれます）は、ページの初期レンダリングに
6+
厳密には必要でないコードの読み込みを遅延させることで、アプリケーションの初期バンドルサイズを削減します。
7+
</div>
8+
9+
<button
10+
class="docs-primary-btn"
11+
[attr.text]="'遅延読み込みについて詳しく'"
12+
routerLink="/guide/templates/defer"
13+
>
14+
遅延読み込みについて詳しく
15+
</button>
16+
</div>
17+
18+
<div class="step-code">
19+
<div class="code-block">
20+
<div class="code-header">
21+
<span>data-visualization-page.html</span>
22+
<span class="copy-icon"></span>
23+
</div>
24+
25+
<adev-code-block [code]="exampleHtml" language="angular-html" />
26+
</div>
27+
28+
<div class="code-block">
29+
<div class="code-header">
30+
<span>data-visualization-page.ts</span>
31+
<span class="copy-icon"></span>
32+
</div>
33+
34+
<adev-code-block [code]="exampleTs" />
35+
</div>
36+
</div>
37+
</div>

‎adev-ja/src/app/features/home/components/hydration-example/hydration-example.en.html‎

Lines changed: 216 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,216 @@
1+
<div class="header">Hydration</div>
2+
<div class="description">
3+
Hydration is the process that restores the server-side rendered application on the client
4+
5+
<p>
6+
This demo showcases Angular's hydration strategies, allowing you to simulate network latency and
7+
observe how different components hydrate based on their configured triggers.
8+
</p>
9+
</div>
10+
11+
<div class="demo-container">
12+
<div class="max-width-wrapper">
13+
<div class="main-layout">
14+
<!-- Controls & Logs -->
15+
<div class="sidebar">
16+
<div class="card config-card">
17+
<h3 class="sidebar-title font-mono">
18+
<docs-icon>schedule</docs-icon>
19+
Simulation Config
20+
</h3>
21+
22+
<div class="config-controls">
23+
<div class="control-group">
24+
<div class="label-row">
25+
<label>Network Latency</label>
26+
<span class="latency-value font-mono">{{ latency() }}ms</span>
27+
</div>
28+
<input
29+
type="range"
30+
min="0"
31+
max="4000"
32+
step="100"
33+
[value]="latency()"
34+
(input)="updateLatency($event)"
35+
class="range-input"
36+
/>
37+
</div>
38+
39+
<button
40+
(click)="resetSimulation()"
41+
[disabled]="isSimulationRunning()"
42+
class="btn-reset"
43+
>
44+
<docs-icon>refresh</docs-icon>
45+
Reset Lifecycle
46+
</button>
47+
</div>
48+
</div>
49+
50+
<!-- Terminal Log -->
51+
<div class="terminal">
52+
<h3 class="terminal-title font-mono">Hydration Engine Log</h3>
53+
<div class="terminal-body font-mono custom-scrollbar">
54+
@for (evt of eventQueue(); track $index) {
55+
<div class="log-entry animate-in">
56+
<span class="log-index">0{{ $index + 1 }}</span>
57+
<span class="log-tag">event:</span>
58+
<span class="log-msg">{{ evt }}</span>
59+
</div>
60+
}
61+
@if (eventQueue().length === 0) {
62+
<div class="log-placeholder">Awaiting app bootstrap...</div>
63+
}
64+
</div>
65+
</div>
66+
</div>
67+
68+
<!-- Simulator Stage -->
69+
<div class="simulator-stage">
70+
<div class="browser-window">
71+
<!-- Browser UI -->
72+
<div class="browser-header">
73+
<div class="window-controls">
74+
<div class="dot-win"></div>
75+
<div class="dot-win"></div>
76+
<div class="dot-win"></div>
77+
</div>
78+
<div class="address-bar font-mono">
79+
<docs-icon>lock</docs-icon>
80+
angular.dev/hydration-strategies
81+
</div>
82+
</div>
83+
84+
<!-- Viewport Content -->
85+
<div class="viewport">
86+
@if (currentState() === 'Server-Side Rendering...') {
87+
<div class="ssr-overlay animate-fade">
88+
<div class="ssr-spinner">
89+
<div class="spinner-outer"></div>
90+
<div class="spinner-inner"></div>
91+
</div>
92+
<p class="ssr-title">Generating SSR Markup...</p>
93+
</div>
94+
}
95+
96+
<div class="viewport-flex">
97+
<div class="viewport-header">
98+
<div class="header-text">
99+
<h4 class="viewport-title">Component Strategies</h4>
100+
<p class="viewport-subtitle">Mixing eager and deferred hydration triggers.</p>
101+
</div>
102+
<div class="viewport-stats">
103+
<div class="stats-label">Main App</div>
104+
<div class="stats-value font-tabular">{{ progress() }}%</div>
105+
</div>
106+
</div>
107+
108+
<div class="component-grid">
109+
@for (card of [card1(), card2(), card3(), card4()]; track $index) {
110+
<div
111+
(click)="handleCardClick(card.id)"
112+
class="component-card transition-all"
113+
[class]="{
114+
'interactive': isInteractive() || card.strategy === 'on-interaction',
115+
'static': !isInteractive() && card.strategy !== 'on-interaction',
116+
'active-card': card.clickCount > 0,
117+
'dashed-border': !card.isHydrated,
118+
}"
119+
>
120+
<div class="card-top">
121+
<div
122+
class="icon-box transition-all"
123+
[class]="card.isHydrated ? 'icon-hydrated' : 'icon-static'"
124+
>
125+
@if (card.isHydrating) {
126+
<div class="loading-spinner"></div>
127+
} @else {
128+
<docs-icon>water_drop</docs-icon>
129+
}
130+
</div>
131+
@if (card.clickCount > 0) {
132+
<div class="click-badge font-tabular animate-zoom">
133+
<span class="badge-label">CLICKS:</span> {{ card.clickCount }}
134+
</div>
135+
}
136+
</div>
137+
138+
<div class="card-body">
139+
<h5 class="card-title">{{ card.title }}</h5>
140+
<p class="card-desc">{{ card.description }}</p>
141+
</div>
142+
143+
<div class="card-footer">
144+
@if (card.isHydrating) {
145+
<div class="tag tag-deferred animate-slide-in">
146+
<span class="tag-dot spin"></span>
147+
Hydrating...
148+
</div>
149+
} @else if (!card.isHydrated) {
150+
<div class="tag tag-deferred">
151+
<span class="tag-dot pulse"></span>
152+
Static
153+
</div>
154+
} @else {
155+
<div class="tag tag-hydrated animate-slide-in">
156+
<span class="tag-dot"></span>
157+
Hydrated
158+
</div>
159+
}
160+
</div>
161+
162+
@if (card.syntax) {
163+
<div
164+
class="syntax-badge font-mono"
165+
[class]="card.isHydrated ? 'syntax-inactive' : 'syntax-active'"
166+
>
167+
{{ card.syntax }}
168+
</div>
169+
}
170+
</div>
171+
}
172+
</div>
173+
</div>
174+
</div>
175+
176+
<!-- Main Lifecycle Progress -->
177+
<div class="lifecycle-progress-bar">
178+
<div class="progress-fill transition-all" [style.width.%]="progress()"></div>
179+
</div>
180+
</div>
181+
</div>
182+
</div>
183+
184+
<!-- Explanatory Feature Cards -->
185+
<div class="explainer-grid">
186+
<div class="explainer-item">
187+
<h5 class="explainer-title"><span class="dot-red"></span> Eager Hydration</h5>
188+
<p class="explainer-text">
189+
Essential components (like navigation or top-fold content) hydrate as soon as the main
190+
application bundle is ready.
191+
</p>
192+
</div>
193+
<div class="explainer-item">
194+
<h5 class="explainer-title"><span class="dot-violet"></span> Incremental Hydration</h5>
195+
<p class="explainer-text">
196+
Use hydration triggers like <code>on interaction</code> or <code>on timer</code> to delay
197+
JS execution for non-critical elements.
198+
</p>
199+
</div>
200+
<div class="explainer-item">
201+
<h5 class="explainer-title"><span class="dot-green"></span> Event Replay</h5>
202+
<p class="explainer-text">
203+
User clicks are never lost. Angular records events during the "Static" phase and
204+
re-dispatches them once hydrated.
205+
</p>
206+
</div>
207+
</div>
208+
</div>
209+
<button
210+
class="docs-primary-btn"
211+
[attr.text]="'Learn more about hydration'"
212+
routerLink="/guide/hydration"
213+
>
214+
Learn more about hydration
215+
</button>
216+
</div>

0 commit comments

Comments
 (0)