diff --git a/adev-ja/src/app/features/home/components/control-flow/control-flow-example.en.html b/adev-ja/src/app/features/home/components/control-flow/control-flow-example.en.html new file mode 100644 index 0000000000..0222cc26e2 --- /dev/null +++ b/adev-ja/src/app/features/home/components/control-flow/control-flow-example.en.html @@ -0,0 +1,27 @@ +
+
+
Control Flow
+
+ Angular's new control flow syntax makes templates easier to write and understand. +
+ + +
+ +
+
+
+ my-template.html + +
+ + +
+
+
diff --git a/adev-ja/src/app/features/home/components/control-flow/control-flow-example.html b/adev-ja/src/app/features/home/components/control-flow/control-flow-example.html new file mode 100644 index 0000000000..fd30694a6c --- /dev/null +++ b/adev-ja/src/app/features/home/components/control-flow/control-flow-example.html @@ -0,0 +1,27 @@ +
+
+
制御フロー
+
+ Angularの新しい制御フロー構文により、テンプレートがより書きやすく理解しやすくなります。 +
+ + +
+ +
+
+
+ my-template.html + +
+ + +
+
+
diff --git a/adev-ja/src/app/features/home/components/deferrable-views-example/deferrable-views-example.en.html b/adev-ja/src/app/features/home/components/deferrable-views-example/deferrable-views-example.en.html new file mode 100644 index 0000000000..819ce423bb --- /dev/null +++ b/adev-ja/src/app/features/home/components/deferrable-views-example/deferrable-views-example.en.html @@ -0,0 +1,38 @@ +
+
+
Deferrable Views
+
+ Deferrable views (also known as @defer blocks) reduce the initial bundle size + of your application by deferring the loading of code that is not strictly necessary for the + initial rendering of a page. +
+ + +
+ +
+
+
+ data-visualization-page.html + +
+ + +
+ +
+
+ data-visualization-page.ts + +
+ + +
+
+
diff --git a/adev-ja/src/app/features/home/components/deferrable-views-example/deferrable-views-example.html b/adev-ja/src/app/features/home/components/deferrable-views-example/deferrable-views-example.html new file mode 100644 index 0000000000..8753b0d41b --- /dev/null +++ b/adev-ja/src/app/features/home/components/deferrable-views-example/deferrable-views-example.html @@ -0,0 +1,37 @@ +
+
+
遅延可能ビュー
+
+ 遅延可能ビュー（@deferブロックとも呼ばれます）は、ページの初期レンダリングに + 厳密には必要でないコードの読み込みを遅延させることで、アプリケーションの初期バンドルサイズを削減します。 +
+ + +
+ +
+
+
+ data-visualization-page.html + +
+ + +
+ +
+
+ data-visualization-page.ts + +
+ + +
+
+
diff --git a/adev-ja/src/app/features/home/components/hydration-example/hydration-example.en.html b/adev-ja/src/app/features/home/components/hydration-example/hydration-example.en.html new file mode 100644 index 0000000000..24af1eda1a --- /dev/null +++ b/adev-ja/src/app/features/home/components/hydration-example/hydration-example.en.html @@ -0,0 +1,216 @@ +
Hydration
+
+ Hydration is the process that restores the server-side rendered application on the client + +

+ This demo showcases Angular's hydration strategies, allowing you to simulate network latency and + observe how different components hydrate based on their configured triggers. +

+
+ +
+
+
+ +
+
+

+ schedule + Simulation Config +

+ +
+
+
+ + {{ latency() }}ms +
+ +
+ + +
+
+ + +
+

Hydration Engine Log

+
+ @for (evt of eventQueue(); track $index) { +
+ 0{{ $index + 1 }} + event: + {{ evt }} +
+ } + @if (eventQueue().length === 0) { +
Awaiting app bootstrap...
+ } +
+
+
+ + +
+
+ +
+
+
+
+
+
+
+ lock + angular.dev/hydration-strategies +
+
+ + +
+ @if (currentState() === 'Server-Side Rendering...') { +
+ +

Generating SSR Markup...

+
+ } + +
+
+
+

Component Strategies

+

Mixing eager and deferred hydration triggers.

+
+
+
Main App
+
{{ progress() }}%
+
+
+ +
+ @for (card of [card1(), card2(), card3(), card4()]; track $index) { +
+
+
+ @if (card.isHydrating) { + + } @else { + water_drop + } +
+ @if (card.clickCount > 0) { +
+ CLICKS: {{ card.clickCount }} +
+ } +
+ +
+
{{ card.title }}
+

{{ card.description }}

+
+ +
+ @if (card.isHydrating) { +
+ + Hydrating... +
+ } @else if (!card.isHydrated) { +
+ + Static +
+ } @else { +
+ + Hydrated +
+ } +
+ + @if (card.syntax) { +
+ {{ card.syntax }} +
+ } +
+ } +
+
+
+ + +
+
+
+
+
+
+ + +
+
+
Eager Hydration
+

+ Essential components (like navigation or top-fold content) hydrate as soon as the main + application bundle is ready. +

+
+
+
Incremental Hydration
+

+ Use hydration triggers like on interaction or on timer to delay + JS execution for non-critical elements. +

+
+
+
Event Replay
+

+ User clicks are never lost. Angular records events during the "Static" phase and + re-dispatches them once hydrated. +

+
+
+
+ +
diff --git a/adev-ja/src/app/features/home/components/hydration-example/hydration-example.html b/adev-ja/src/app/features/home/components/hydration-example/hydration-example.html new file mode 100644 index 0000000000..1133d9f577 --- /dev/null +++ b/adev-ja/src/app/features/home/components/hydration-example/hydration-example.html @@ -0,0 +1,216 @@ +
ハイドレーション
+
+ ハイドレーションは、サーバーサイドでレンダリングされたアプリケーションをクライアント上で復元するプロセスです + +

+ このデモでは、Angularのハイドレーション戦略を紹介します。ネットワーク遅延をシミュレートし、 + 設定されたトリガーに基づいて各コンポーネントがどのようにハイドレートされるかを観察できます。 +

+
+ +
+
+
+ +
+
+

+ schedule + シミュレーション設定 +

+ +
+
+
+ + {{ latency() }}ms +
+ +
+ + +
+
+ + +
+

ハイドレーションエンジンログ

+
+ @for (evt of eventQueue(); track $index) { +
+ 0{{ $index + 1 }} + event: + {{ evt }} +
+ } + @if (eventQueue().length === 0) { +
アプリのブートストラップを待機中...
+ } +
+
+
+ + +
+
+ +
+
+
+
+
+
+
+ lock + angular.dev/hydration-strategies +
+
+ + +
+ @if (currentState() === 'Server-Side Rendering...') { +
+ +

SSRマークアップを生成中...

+
+ } + +
+
+
+

コンポーネント戦略

+

即時ハイドレーションと遅延ハイドレーションの組み合わせ

+
+
+
メインアプリ
+
{{ progress() }}%
+
+
+ +
+ @for (card of [card1(), card2(), card3(), card4()]; track $index) { +
+
+
+ @if (card.isHydrating) { + + } @else { + water_drop + } +
+ @if (card.clickCount > 0) { +
+ クリック: {{ card.clickCount }} +
+ } +
+ +
+
{{ card.title }}
+

{{ card.description }}

+
+ +
+ @if (card.isHydrating) { +
+ + ハイドレート中... +
+ } @else if (!card.isHydrated) { +
+ + 静的 +
+ } @else { +
+ + ハイドレート済み +
+ } +
+ + @if (card.syntax) { +
+ {{ card.syntax }} +
+ } +
+ } +
+
+
+ + +
+
+
+
+
+
+ + +
+
+
即時ハイドレーション
+

+ ナビゲーションやファーストビューのコンテンツなど、重要なコンポーネントは + メインアプリケーションバンドルの準備が完了するとすぐにハイドレートされます。 +

+
+
+
インクリメンタルハイドレーション
+

+ on interactionやon timerなどのハイドレーショントリガーを使用して、 + 重要度の低い要素のJS実行を遅延させます。 +

+
+
+
イベントリプレイ
+

+ ユーザーのクリックは失われません。Angularは「静的」フェーズ中のイベントを記録し、 + ハイドレート後に再ディスパッチします。 +

+
+
+
+ +
diff --git a/adev-ja/src/app/features/home/components/signals-demo/signals-demo.en.html b/adev-ja/src/app/features/home/components/signals-demo/signals-demo.en.html new file mode 100644 index 0000000000..19575c5c4d --- /dev/null +++ b/adev-ja/src/app/features/home/components/signals-demo/signals-demo.en.html @@ -0,0 +1,51 @@ +
+
+
Signals: Fine-Grained Reactivity
+
+ Type in the search box to filter the list. A + computed signal automatically recalculates the + filteredItems whenever the searchTerm signal changes. +
+ +
+ +
+ @for (item of filteredItems(); track item) { +
{{ item }}
+ } +
+
+ + +
+ +
+
+
+ component.ts + +
+ + +
+ +
+
+ component.html + +
+ +
+
+
diff --git a/adev-ja/src/app/features/home/components/signals-demo/signals-demo.html b/adev-ja/src/app/features/home/components/signals-demo/signals-demo.html new file mode 100644 index 0000000000..7422c01a9a --- /dev/null +++ b/adev-ja/src/app/features/home/components/signals-demo/signals-demo.html @@ -0,0 +1,51 @@ +
+
+
シグナル: きめ細やかなリアクティビティ
+
+ 検索ボックスに入力してリストをフィルタリングしてみましょう。 + computedシグナルは、searchTermシグナルが変更されるたびに + filteredItemsを自動的に再計算します。 +
+ +
+ +
+ @for (item of filteredItems(); track item) { +
{{ item }}
+ } +
+
+ + +
+ +
+
+
+ component.ts + +
+ + +
+ +
+
+ component.html + +
+ +
+
+
diff --git a/adev-ja/src/app/features/home/home.component.en.html b/adev-ja/src/app/features/home/home.component.en.html index f13d163ce0..7510cd9f83 100644 --- a/adev-ja/src/app/features/home/home.component.en.html +++ b/adev-ja/src/app/features/home/home.component.en.html @@ -1,489 +1,242 @@
-
-
- -

Angular v21 is here!

-

🕹️ Start your adventure

- -
-
- @if (!isUwu) { - -
- - - - - - - - - - - - - - - -

The framework for building scalable web apps with confidence

-
- } @else { - -
- Angular logo +
+
+
+ +

Angular v21 is here!

+

🕹️ Start your adventure

+ + +
+ +
- } -
- - - -
+ @if (!isUwu) { +
+

Productivity
Meets scalability

+

The framework for building scalable web apps with confidence

+
+ } @else { + +
+ Angular logo +
+ } + +
+ + + +
+
-
-

Productivity meets scalability

-
-
- - - - - - - - - - -

AI-forward

-

Resources and integrations to supercharge your development with AI

-
-
- - - -

Opinionated & versatile

-

Organized yet modular thanks to Angular components and dependency injection

-
-
- - - -

Reactive

-

Fast state updates with fine-grained reactivity based on Angular Signals

+
+

Features that actually
help you solve problems

+ +
+
+
+
Signals
+
Control Flow
+
Deferrable Views
+
Hydration
-
- - - -

Fully featured

-

- Everything works together with Angular's first-party modules for forms, routing, and more -

+ +
+
+ @defer (on idle) { + + + + } +
+ +
+ @defer (on idle) { + + + + } +
+ +
+ @defer (on idle) { + + + + } +
+ +
+ @defer (on idle) { + + + + } +
- +
+

Enabling you to build
smarter and faster

+
+ +
+ auto_awesome +
+
+

+ AI-forward resources and integrations to supercharge your development + with AI +

+
+ + + +
+ grid_view +
+
+

+ Opinionated & versatile, organized yet modular thanks to Angular + components and dependency injection +

+
+ + + +
+ sensors +
+
+

+ Reactive and fast state updates with fine-grained reactivity based on + Angular Signals +

+
+ + + +
+ layers +
+
+

+ Fully featured platform where everything works together with Angular's + first-party modules for forms, routing, and more +

+
+ +
+
-
-
-
-

When performance matters

-

+

+
+
+
+

Where performance matters

+

Trusted by millions to build fast, reliable applications that scale with the size of your team -

-
- - - - -
-

Reactivity with signals makes it a breeze to manage your state

-
- Explore signals - - - - - -
-

- Meet your performance targets with SSR, SSG, hydration, and next generation deferred - loading -

-
- Learn about rendering strategies - -
-

-
- + + + Get started +
- +
+
+

What to learn more about Angular?

+
+
-
-
-

Want to learn more?

-
- - - - -
-

New to Angular?

-

- Try our completely in browser tutorial lessons designed to give you hands on - experience with Angular. -

-

- Recommended for developers new to Angular looking to dive right into the code -

- Start coding -
- - - - - -
-

More of a reader?

-

- Our essentials guides are designed to help you understand Angular fundamentals in the - time it would take to finish a cup of coffee (or tea). -

-

- Recommended for developers with framework experience but want quick overview of - concepts -

- Angular concepts -
- - - -
-

Why Angular?

-

Learn about Angular, its benefits, and if it's right for you.

-

- Recommended for developers seeking to learn more about the Angular framework -

- About Angular -
- - - - - - - - - -
-

Are you an LLM or curious about AI in Angular?

-

- Head over to our AI section to find prompts, strategies, best practices, examples, and - more. -

-

- Recommended for robots... and developers who want to get the most out of Angular and - AI -

- Angular + AI +
+ + +
+

+ New to Angular? + Try our completely in browser tutorial lessons designed to give you hands on experience + with Angular. +

+ Start coding arrow_forward +
+
+ + + + +
+

+ Are you an LLM or curious about AI in Angular? + Head over to our AI section to find prompts, strategies, best practices, examples, and + more. +

+ Angular + AI arrow_forward +
+
+
Angular MCP
+
+ get_best_practices + ai_tutor + find_examples +
+
- -
+
+ + + + +
+

+ Why Angular? + Learn about Angular, its benefits, and if it's right for you. +

+
+
+ + + + +
+

+ More of a reader? + Our essentials guides are designed to help you understand Angular fundamentals in the + time it would take to finish a cup of coffee (or a tea). +

+ Angular concepts arrow_forward +
+ +
+
+ +
+
+
+

Want to learn more about Angular ?

+
diff --git a/adev-ja/src/app/features/home/home.component.html b/adev-ja/src/app/features/home/home.component.html index c1931ceb0a..2d03a0c2fe 100644 --- a/adev-ja/src/app/features/home/home.component.html +++ b/adev-ja/src/app/features/home/home.component.html @@ -1,487 +1,242 @@
-
-
- -

Angular v21がリリースされました！

-

🕹️ 冒険を始めよう

- -
-
- @if (!isUwu) { - -
- - - - - - - - - - - - - - - -

スケーラブルなWebアプリを自信を持って構築するフレームワーク

-
- } @else { - -
- Angular logo +
+
+
+ +

Angular v21がリリースされました！

+

🕹️ 冒険を始めよう

+ + +
+ +
- } -
- - - -
+ @if (!isUwu) { +
+

開発効率と
スケーラビリティの融合

+

スケーラブルなWebアプリを確信を持って構築できるフレームワーク

+
+ } @else { + +
+ Angular logo +
+ } + +
+ + + +
+
-
-

開発効率とスケーラビリティを両立

-
-
- - - - - - - - - - -

AI志向

-

AIで開発を加速させるリソースと統合機能が充実

-
-
- - - -

堅牢かつ柔軟

-

Angularコンポーネントと依存性注入で、構造化と柔軟性を実現

-
-
- - - -

リアクティブ

-

Angular Signalsで実現する高速で細やかな状態管理

+
+

問題解決に役立つ機能

+ +
+
+
+
シグナル
+
制御フロー
+
遅延可能ビュー
+
ハイドレーション
-
- - - -

オールインワン

-

- フォーム、ルーティングなど、Angularの公式モジュールがシームレスに連携 -

+ +
+
+ @defer (on idle) { + + + + } +
+ +
+ @defer (on idle) { + + + + } +
+ +
+ @defer (on idle) { + + + + } +
+ +
+ @defer (on idle) { + + + + } +
- +
+

よりスマートに、より速い構築

+
+ +
+ auto_awesome +
+
+

+ AI志向のリソースと統合機能で、 + AI活用の開発を加速 +

+
+ -
-
-
-

パフォーマンスが決め手のプロジェクトに

-

- チーム規模に応じてスケールする高速で信頼性の高いアプリケーション構築で世界中の何百万もの開発者に選ばれています。 + +

+ grid_view +
+
+

+ 堅牢かつ柔軟。Angularコンポーネントと依存性の注入による + 構造化されたモジュラー設計 +

+
+ -

-
- - - - -
-

シグナルのリアクティビティで状態管理がとても簡単に

-
- シグナルを詳しく見る - - - - - -
-

- SSR、SSG、ハイドレーション、次世代の遅延ロードでパフォーマンス目標を確実に達成 + +

+ sensors +
+
+

+ リアクティブ。Angular Signalsの細やかなリアクティビティによる + 高速な状態更新 +

+
+ -

-
- レンダリング戦略を学ぶ - + +
+ layers
-
-
- +

+ フル機能プラットフォーム。フォームやルーティングなど + Angular公式モジュールがシームレスに連携 +

+
+ +
+
+ +
+
+
+
+

パフォーマンスが重要な場面

+

+ チームの成長に合わせてスケールする高速で信頼性の高いアプリケーション構築。 + 数百万の開発者が信頼 +

+
- +
+
+

Angularについてもっと学ぶには

+
+
-
-
-

さあ、Angularを始めよう

-
- - - - -
-

Angular初心者の方へ

-

- ブラウザ上で完結するインタラクティブなチュートリアルで、Angularの実践的なスキルを身につけましょう。 +

+ + +
+

+ Angularは初めてですか？ + Angularの実践的な経験を積むために設計された、完全にブラウザ内で完結するチュートリアルレッスンを + お試しください。 +

+ コーディングを始める arrow_forward +
+
+ -

-

- Angularが初めてで、まずはコードを書いて学びたい開発者におすすめ -

- コーディングを始める + + +
+

+ LLMですか、それともAngularでのAIに興味がありますか？ + AIセクションにアクセスして、プロンプト、戦略、ベストプラクティス、実例などを + ご覧ください。 +

+ Angular + AI arrow_forward +
+
+
Angular MCP
+
+ get_best_practices + ai_tutor + find_examples +
+
- - - - - -
-

じっくり読んで学びたい方へ

-

- コーヒー一杯分の時間で、Angularの基本概念を効率よく理解できるガイドをご用意しています。 +

+ -

-

- 他のフレームワーク経験があり、Angularの概要を素早く把握したい開発者におすすめ -

- 基本概念を学ぶ -
- - - -
-

なぜAngularを選ぶのか？

-

Angularの特徴や利点を知り、あなたのプロジェクトに最適かどうか確認してみましょう。

-

- Angularフレームワークについて詳しく知りたい開発者におすすめ -

- Angularについて学ぶ -
- - - - - - - - - -
-

AIとAngularの組み合わせに興味がありますか？

-

- 効果的なプロンプト、開発戦略、ベストプラクティス、実践例など、AIとAngularを組み合わせた開発に役立つ情報が満載です。 + + +

+

+ なぜAngularなのか？ + Angularについて、その利点、そしてあなたに適しているかどうかを学びましょう。 +

+
+
+ -

-

- ロボット用...そしてAngularとAIを最大限活用したい開発者におすすめ -

- Angular + AI -
- -
+ + +
+

+ じっくり読んで学びたいですか？ + コーヒー（または紅茶）を飲み終わる時間で、Angularの基礎を理解できるように設計された基本ガイドを + ご用意しています。 +

+ Angularの概念 arrow_forward +
+ +
+
+ +
+
+
+

Angularについてもっと学びたい？

+
diff --git a/adev-ja/src/app/features/update/recommendations.en.ts b/adev-ja/src/app/features/update/recommendations.en.ts index a198a77cf8..36286a3c4b 100644 --- a/adev-ja/src/app/features/update/recommendations.en.ts +++ b/adev-ja/src/app/features/update/recommendations.en.ts @@ -208,7 +208,7 @@ export const RECOMMENDATIONS: Step[] = [ level: ApplicationComplexity.Basic, step: 'Http', action: - "If you use the legacy `HttpModule` and the `Http` service, switch to `HttpClientModule` and the `HttpClient` service. HttpClient simplifies the default ergonomics (you don't need to map to JSON anymore) and now supports typed return values and interceptors. Read more on [angular.dev](https://angular.io/guide/http).", + "If you use the legacy `HttpModule` and the `Http` service, switch to `HttpClientModule` and the `HttpClient` service. HttpClient simplifies the default ergonomics (you don't need to map to JSON anymore) and now supports typed return values and interceptors. Read more on [angular.dev](https://angular.dev/guide/http).", }, { possibleIn: 430, diff --git a/adev-ja/src/app/features/update/recommendations.ts b/adev-ja/src/app/features/update/recommendations.ts index a9ed688f97..c35e86ca49 100644 --- a/adev-ja/src/app/features/update/recommendations.ts +++ b/adev-ja/src/app/features/update/recommendations.ts @@ -208,7 +208,7 @@ export const RECOMMENDATIONS: Step[] = [ level: ApplicationComplexity.Basic, step: 'Http', action: - 'レガシーな`HttpModule`と`Http`サービスを使用している場合は、`HttpClientModule`と`HttpClient`サービスに切り替えてください。`HttpClient`はデフォルトの人間工学を簡素化し（JSONにマップする必要がなくなりました）、型付きの戻り値とインターセプターをサポートしています。詳細については、[angular.dev](https://angular.io/guide/http)を参照してください。', + 'レガシーな`HttpModule`と`Http`サービスを使用している場合は、`HttpClientModule`と`HttpClient`サービスに切り替えてください。`HttpClient`はデフォルトの人間工学を簡素化し（JSONにマップする必要がなくなりました）、型付きの戻り値とインターセプターをサポートしています。詳細については、[angular.dev](https://angular.dev/guide/http)を参照してください。', }, { possibleIn: 430, diff --git a/adev-ja/src/app/features/update/update.component.en.ts b/adev-ja/src/app/features/update/update.component.en.ts index 0b3539986f..29ddd1423d 100644 --- a/adev-ja/src/app/features/update/update.component.en.ts +++ b/adev-ja/src/app/features/update/update.component.en.ts @@ -9,12 +9,9 @@ import {ChangeDetectionStrategy, Component, inject, signal} from '@angular/core'; import {Step, RECOMMENDATIONS, ApplicationComplexity} from './recommendations'; import {Clipboard} from '@angular/cdk/clipboard'; -import {CdkMenuModule} from '@angular/cdk/menu'; -import {MatCheckboxModule} from '@angular/material/checkbox'; -import {MatInputModule} from '@angular/material/input'; -import {MatCardModule} from '@angular/material/card'; -import {MatGridListModule} from '@angular/material/grid-list'; -import {MatButtonToggleModule} from '@angular/material/button-toggle'; +import {CdkMenu, CdkMenuItem, CdkMenuTrigger} from '@angular/cdk/menu'; +import {MatCheckbox} from '@angular/material/checkbox'; +import {MatButtonToggleGroup, MatButtonToggle} from '@angular/material/button-toggle'; import {IconComponent} from '@angular/docs'; import {ActivatedRoute, Router} from '@angular/router'; import {marked} from 'marked'; @@ -33,12 +30,12 @@ const isWindows = typeof window !== 'undefined' && window.navigator.userAgent.in templateUrl: './update.component.html', styleUrl: './update.component.scss', imports: [ - MatCheckboxModule, - MatInputModule, - MatCardModule, - MatGridListModule, - MatButtonToggleModule, - CdkMenuModule, + MatCheckbox, + MatButtonToggleGroup, + MatButtonToggle, + CdkMenuTrigger, + CdkMenu, + CdkMenuItem, IconComponent, ], changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/adev-ja/src/app/features/update/update.component.ts b/adev-ja/src/app/features/update/update.component.ts index d33bf4df63..f6094276b5 100644 --- a/adev-ja/src/app/features/update/update.component.ts +++ b/adev-ja/src/app/features/update/update.component.ts @@ -9,12 +9,9 @@ import {ChangeDetectionStrategy, Component, inject, signal} from '@angular/core'; import {Step, RECOMMENDATIONS, ApplicationComplexity} from './recommendations'; import {Clipboard} from '@angular/cdk/clipboard'; -import {CdkMenuModule} from '@angular/cdk/menu'; -import {MatCheckboxModule} from '@angular/material/checkbox'; -import {MatInputModule} from '@angular/material/input'; -import {MatCardModule} from '@angular/material/card'; -import {MatGridListModule} from '@angular/material/grid-list'; -import {MatButtonToggleModule} from '@angular/material/button-toggle'; +import {CdkMenu, CdkMenuItem, CdkMenuTrigger} from '@angular/cdk/menu'; +import {MatCheckbox} from '@angular/material/checkbox'; +import {MatButtonToggleGroup, MatButtonToggle} from '@angular/material/button-toggle'; import {IconComponent} from '@angular/docs'; import {ActivatedRoute, Router} from '@angular/router'; import {marked} from 'marked'; @@ -33,12 +30,12 @@ const isWindows = typeof window !== 'undefined' && window.navigator.userAgent.in templateUrl: './update.component.html', styleUrl: './update.component.scss', imports: [ - MatCheckboxModule, - MatInputModule, - MatCardModule, - MatGridListModule, - MatButtonToggleModule, - CdkMenuModule, + MatCheckbox, + MatButtonToggleGroup, + MatButtonToggle, + CdkMenuTrigger, + CdkMenu, + CdkMenuItem, IconComponent, ], changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/adev-ja/src/app/routing/navigation-entries/index.en.ts b/adev-ja/src/app/routing/navigation-entries/index.en.ts new file mode 100644 index 0000000000..35be26c71a --- /dev/null +++ b/adev-ja/src/app/routing/navigation-entries/index.en.ts @@ -0,0 +1,1761 @@ +/*! + * @license + * Copyright Google LLC All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.dev/license + */ + +import {isDevMode} from '@angular/core'; +import type {NavigationItem} from '@angular/docs'; +// These imports are expected to be red because they are generated a build time +// @ts-ignore +import ERRORS_NAV_DATA from '../../../content/reference/errors/routes.json' with {type: 'json'}; +// @ts-ignore +import EXT_DIAGNOSTICS_NAV_DATA from '../../../content/reference/extended-diagnostics/routes.json' with {type: 'json'}; +// @ts-ignore +import FIRST_APP_TUTORIAL_NAV_DATA from '../../../content/tutorials/first-app/first-app/routes.json' with {type: 'json'}; +// @ts-ignore +import LEARN_ANGULAR_TUTORIAL_NAV_DATA from '../../../content/tutorials/learn-angular/learn-angular/routes.json' with {type: 'json'}; +// @ts-ignore +import DEFERRABLE_VIEWS_TUTORIAL_NAV_DATA from '../../../content/tutorials/deferrable-views/deferrable-views/routes.json' with {type: 'json'}; +// @ts-ignore +import SIGNALS_TUTORIAL_NAV_DATA from '../../../content/tutorials/signals/signals/routes.json' with {type: 'json'}; +// @ts-ignore +import SIGNAL_FORMS_TUTORIAL_NAV_DATA from '../../../content/tutorials/signal-forms/signal-forms/routes.json' with {type: 'json'}; +// @ts-ignore +import API_MANIFEST_JSON from '../../../assets/manifest.json' with {type: 'json'}; + +interface SubNavigationData { + docs: NavigationItem[]; + reference: NavigationItem[]; + tutorials: NavigationItem[]; + footer: NavigationItem[]; +} + +export const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [ + { + label: 'Introduction', + children: [ + { + label: 'What is Angular?', + path: 'overview', + contentPath: 'introduction/what-is-angular', + }, + { + label: 'Installation', + path: 'installation', + contentPath: 'introduction/installation', + }, + { + label: 'Essentials', + children: [ + { + label: 'Overview', + path: 'essentials', + contentPath: 'introduction/essentials/overview', + }, + { + label: 'Composition with components', + path: 'essentials/components', + contentPath: 'introduction/essentials/components', + }, + { + label: 'Reactivity with signals', + path: 'essentials/signals', + contentPath: 'introduction/essentials/signals', + }, + { + label: 'Dynamic interfaces with templates', + path: 'essentials/templates', + contentPath: 'introduction/essentials/templates', + }, + { + label: 'Forms with signals', + path: 'essentials/signal-forms', + contentPath: 'introduction/essentials/signal-forms', + status: 'new', + }, + { + label: 'Modular design with dependency injection', + path: 'essentials/dependency-injection', + contentPath: 'introduction/essentials/dependency-injection', + }, + { + label: 'Next Steps', + path: 'essentials/next-steps', + contentPath: 'introduction/essentials/next-steps', + }, + ], + }, + { + label: 'Start coding! 🚀', + path: 'tutorials/learn-angular', + }, + ], + }, + { + label: 'In-depth Guides', + children: [ + { + label: 'Signals', + status: 'updated', + children: [ + { + label: 'Overview', + path: 'guide/signals', + contentPath: 'guide/signals/overview', + }, + { + label: 'Dependent state with linkedSignal', + path: 'guide/signals/linked-signal', + contentPath: 'guide/signals/linked-signal', + }, + { + label: 'Async reactivity with resources', + path: 'guide/signals/resource', + contentPath: 'guide/signals/resource', + }, + { + label: 'Side effects for non-reactives APIs', + path: 'guide/signals/effect', + contentPath: 'guide/signals/effect', + status: 'new', + }, + ], + }, + { + label: 'Components', + children: [ + { + label: 'Anatomy of components', + path: 'guide/components', + contentPath: 'guide/components/anatomy-of-components', + }, + { + label: 'Selectors', + path: 'guide/components/selectors', + contentPath: 'guide/components/selectors', + }, + { + label: 'Styling', + path: 'guide/components/styling', + contentPath: 'guide/components/styling', + }, + { + label: 'Accepting data with input properties', + path: 'guide/components/inputs', + contentPath: 'guide/components/inputs', + }, + { + label: 'Custom events with outputs', + path: 'guide/components/outputs', + contentPath: 'guide/components/outputs', + }, + { + label: 'Content projection with ng-content', + path: 'guide/components/content-projection', + contentPath: 'guide/components/content-projection', + }, + { + label: 'Host elements', + path: 'guide/components/host-elements', + contentPath: 'guide/components/host-elements', + }, + { + label: 'Lifecycle', + path: 'guide/components/lifecycle', + contentPath: 'guide/components/lifecycle', + }, + { + label: 'Referencing component children with queries', + path: 'guide/components/queries', + contentPath: 'guide/components/queries', + }, + { + label: 'Using DOM APIs', + path: 'guide/components/dom-apis', + contentPath: 'guide/components/dom-apis', + }, + { + label: 'Inheritance', + path: 'guide/components/inheritance', + contentPath: 'guide/components/inheritance', + }, + { + label: 'Programmatically rendering components', + path: 'guide/components/programmatic-rendering', + contentPath: 'guide/components/programmatic-rendering', + }, + { + label: 'Advanced configuration', + path: 'guide/components/advanced-configuration', + contentPath: 'guide/components/advanced-configuration', + }, + { + label: 'Custom Elements', + path: 'guide/elements', + contentPath: 'guide/elements', + }, + ], + }, + { + label: 'Templates', + children: [ + { + label: 'Overview', + path: 'guide/templates', + contentPath: 'guide/templates/overview', + }, + { + label: 'Binding dynamic text, properties and attributes', + path: 'guide/templates/binding', + contentPath: 'guide/templates/binding', + }, + { + label: 'Adding event listeners', + path: 'guide/templates/event-listeners', + contentPath: 'guide/templates/event-listeners', + }, + { + label: 'Two-way binding', + path: 'guide/templates/two-way-binding', + contentPath: 'guide/templates/two-way-binding', + }, + { + label: 'Control flow', + path: 'guide/templates/control-flow', + contentPath: 'guide/templates/control-flow', + }, + { + label: 'Pipes', + path: 'guide/templates/pipes', + contentPath: 'guide/templates/pipes', + }, + { + label: 'Slotting child content with ng-content', + path: 'guide/templates/ng-content', + contentPath: 'guide/templates/ng-content', + }, + { + label: 'Create template fragments with ng-template', + path: 'guide/templates/ng-template', + contentPath: 'guide/templates/ng-template', + }, + { + label: 'Grouping elements with ng-container', + path: 'guide/templates/ng-container', + contentPath: 'guide/templates/ng-container', + }, + { + label: 'Variables in templates', + path: 'guide/templates/variables', + contentPath: 'guide/templates/variables', + }, + { + label: 'Deferred loading with @defer', + path: 'guide/templates/defer', + contentPath: 'guide/templates/defer', + }, + { + label: 'Expression syntax', + path: 'guide/templates/expression-syntax', + contentPath: 'guide/templates/expression-syntax', + }, + { + label: 'Whitespace in templates', + path: 'guide/templates/whitespace', + contentPath: 'guide/templates/whitespace', + }, + ], + }, + { + label: 'Directives', + children: [ + { + label: 'Overview', + path: 'guide/directives', + contentPath: 'guide/directives/overview', + }, + { + label: 'Attribute directives', + path: 'guide/directives/attribute-directives', + contentPath: 'guide/directives/attribute-directives', + }, + { + label: 'Structural directives', + path: 'guide/directives/structural-directives', + contentPath: 'guide/directives/structural-directives', + }, + { + label: 'Directive composition API', + path: 'guide/directives/directive-composition-api', + contentPath: 'guide/directives/directive-composition-api', + }, + { + label: 'Optimizing images with NgOptimizedImage', + path: 'guide/image-optimization', + contentPath: 'guide/image-optimization', + }, + ], + }, + { + label: 'Dependency Injection', + status: 'updated', + children: [ + { + label: 'Overview', + path: 'guide/di', + contentPath: 'guide/di/overview', + status: 'updated', + }, + { + label: 'Creating and using services', + path: 'guide/di/creating-and-using-services', + contentPath: 'guide/di/creating-and-using-services', + status: 'updated', + }, + { + label: 'Defining dependency providers', + path: 'guide/di/defining-dependency-providers', + contentPath: 'guide/di/defining-dependency-providers', + status: 'updated', + }, + { + label: 'Injection context', + path: 'guide/di/dependency-injection-context', + contentPath: 'guide/di/dependency-injection-context', + }, + { + label: 'Hierarchical injectors', + path: 'guide/di/hierarchical-dependency-injection', + contentPath: 'guide/di/hierarchical-dependency-injection', + }, + { + label: 'Optimizing injection tokens', + path: 'guide/di/lightweight-injection-tokens', + contentPath: 'guide/di/lightweight-injection-tokens', + }, + { + label: 'DI in action', + path: 'guide/di/di-in-action', + contentPath: 'guide/di/di-in-action', + }, + { + label: 'Debugging and troubleshooting DI', + path: 'guide/di/debugging-and-troubleshooting-di', + contentPath: 'guide/di/debugging-and-troubleshooting-di', + status: 'new', + }, + ], + }, + { + label: 'Routing', + status: 'updated', + children: [ + { + label: 'Overview', + path: 'guide/routing', + contentPath: 'guide/routing/overview', + }, + { + label: 'Define routes', + path: 'guide/routing/define-routes', + contentPath: 'guide/routing/define-routes', + }, + { + label: 'Show routes with Outlets', + path: 'guide/routing/show-routes-with-outlets', + contentPath: 'guide/routing/show-routes-with-outlets', + }, + { + label: 'Navigate to routes', + path: 'guide/routing/navigate-to-routes', + contentPath: 'guide/routing/navigate-to-routes', + }, + { + label: 'Read route state', + path: 'guide/routing/read-route-state', + contentPath: 'guide/routing/read-route-state', + }, + { + label: 'Redirecting routes', + path: 'guide/routing/redirecting-routes', + contentPath: 'guide/routing/redirecting-routes', + }, + { + label: 'Control route access with guards', + path: 'guide/routing/route-guards', + contentPath: 'guide/routing/route-guards', + }, + { + label: 'Route data resolvers', + path: 'guide/routing/data-resolvers', + contentPath: 'guide/routing/data-resolvers', + }, + { + label: 'Lifecycle and events', + path: 'guide/routing/lifecycle-and-events', + contentPath: 'guide/routing/lifecycle-and-events', + }, + { + label: 'Testing routing and navigation', + path: 'guide/routing/testing', + contentPath: 'guide/routing/testing', + status: 'new', + }, + { + label: 'Other routing tasks', + path: 'guide/routing/common-router-tasks', + contentPath: 'guide/routing/common-router-tasks', + }, + { + label: 'Creating custom route matches', + path: 'guide/routing/routing-with-urlmatcher', + contentPath: 'guide/routing/routing-with-urlmatcher', + }, + { + label: 'Rendering strategies', + path: 'guide/routing/rendering-strategies', + contentPath: 'guide/routing/rendering-strategies', + status: 'new', + }, + { + label: 'Customizing route behavior', + path: 'guide/routing/customizing-route-behavior', + contentPath: 'guide/routing/customizing-route-behavior', + status: 'new', + }, + { + label: 'Router reference', + path: 'guide/routing/router-reference', + contentPath: 'guide/routing/router-reference', + }, + { + label: 'Route transition animations', + path: 'guide/routing/route-transition-animations', + contentPath: 'guide/routing/route-transition-animations', + }, + ], + }, + { + label: 'Forms', + status: 'updated', + preserveOtherCategoryOrder: true, + children: [ + { + label: 'Overview', + path: 'guide/forms', + contentPath: 'guide/forms/overview', + }, + + { + label: 'Overview', + path: 'guide/forms/signals/overview', + contentPath: 'guide/forms/signals/overview', + category: 'Signal Forms', + status: 'new', + }, + { + label: 'Form models', + path: 'guide/forms/signals/models', + contentPath: 'guide/forms/signals/models', + category: 'Signal Forms', + status: 'new', + }, + { + label: 'Form model design', + path: 'guide/forms/signals/model-design', + contentPath: 'guide/forms/signals/designing-your-form-model', + category: 'Signal Forms', + status: 'new', + }, + { + label: 'Field state management', + path: 'guide/forms/signals/field-state-management', + contentPath: 'guide/forms/signals/field-state-management', + category: 'Signal Forms', + status: 'new', + }, + { + label: 'Validation', + path: 'guide/forms/signals/validation', + contentPath: 'guide/forms/signals/validation', + category: 'Signal Forms', + status: 'new', + }, + { + label: 'Form logic', + path: 'guide/forms/signals/form-logic', + contentPath: 'guide/forms/signals/form-logic', + category: 'Signal Forms', + status: 'new', + }, + { + label: 'Async operations', + path: 'guide/forms/signals/async-operations', + contentPath: 'guide/forms/signals/async-operations', + category: 'Signal Forms', + status: 'new', + }, + { + label: 'Custom controls', + path: 'guide/forms/signals/custom-controls', + contentPath: 'guide/forms/signals/custom-controls', + category: 'Signal Forms', + status: 'new', + }, + { + label: 'Comparison with other form systems', + path: 'guide/forms/signals/comparison', + contentPath: 'guide/forms/signals/comparison', + category: 'Signal Forms', + status: 'new', + }, + { + label: 'Migrating from Reactive Forms', + path: 'guide/forms/signals/migration', + contentPath: 'guide/forms/signals/migration', + category: 'Signal Forms', + status: 'new', + }, + { + label: 'Reactive forms', + path: 'guide/forms/reactive-forms', + contentPath: 'guide/forms/reactive-forms', + category: 'Reactive Forms', + }, + { + label: 'Strictly typed reactive forms', + path: 'guide/forms/typed-forms', + contentPath: 'guide/forms/typed-forms', + category: 'Reactive Forms', + }, + { + label: 'Template-driven forms', + path: 'guide/forms/template-driven-forms', + contentPath: 'guide/forms/template-driven-forms', + category: 'Template driven Forms', + }, + { + label: 'Validate form input', + path: 'guide/forms/form-validation', + contentPath: 'guide/forms/form-validation', + category: 'Reactive Forms', + }, + { + label: 'Validate form input', + path: 'guide/forms/form-validation', + contentPath: 'guide/forms/form-validation', + category: 'Template driven Forms', + }, + { + label: 'Building dynamic forms', + path: 'guide/forms/dynamic-forms', + contentPath: 'guide/forms/dynamic-forms', + category: 'Reactive Forms', + }, + ], + }, + { + label: 'HTTP Client', + children: [ + { + label: 'Overview', + path: 'guide/http', + contentPath: 'guide/http/overview', + }, + { + label: 'Setting up HttpClient', + path: 'guide/http/setup', + contentPath: 'guide/http/setup', + }, + { + label: 'Making requests', + path: 'guide/http/making-requests', + contentPath: 'guide/http/making-requests', + }, + { + label: 'Reactive data fetching with httpResource', + path: 'guide/http/http-resource', + contentPath: 'guide/http/http-resource', + }, + { + label: 'Intercepting requests and responses', + path: 'guide/http/interceptors', + contentPath: 'guide/http/interceptors', + }, + { + label: 'Testing', + path: 'guide/http/testing', + contentPath: 'guide/http/testing', + }, + ], + }, + { + label: 'Server-side & hybrid-rendering', + children: [ + { + label: 'Overview', + path: 'guide/performance', + contentPath: 'guide/performance/overview', + }, + { + label: 'Server-side and hybrid-rendering', + path: 'guide/ssr', + contentPath: 'guide/ssr', + }, + { + label: 'Hydration', + path: 'guide/hydration', + contentPath: 'guide/hydration', + }, + { + label: 'Incremental Hydration', + path: 'guide/incremental-hydration', + contentPath: 'guide/incremental-hydration', + }, + ], + }, + { + label: 'Testing', + children: [ + { + label: 'Overview', + path: 'guide/testing', + contentPath: 'guide/testing/overview', + }, + { + label: 'Basics of testing components', + path: 'guide/testing/components-basics', + contentPath: 'guide/testing/components-basics', + }, + { + label: 'Component testing scenarios', + path: 'guide/testing/components-scenarios', + contentPath: 'guide/testing/components-scenarios', + }, + { + label: 'Testing services', + path: 'guide/testing/services', + contentPath: 'guide/testing/services', + }, + { + label: 'Testing attribute directives', + path: 'guide/testing/attribute-directives', + contentPath: 'guide/testing/attribute-directives', + }, + { + label: 'Testing pipes', + path: 'guide/testing/pipes', + contentPath: 'guide/testing/pipes', + }, + { + label: 'Testing routing and navigation', + path: 'guide/routing/testing', + contentPath: 'guide/routing/testing', + status: 'new', + }, + { + label: 'Debugging tests', + path: 'guide/testing/debugging', + contentPath: 'guide/testing/debugging', + }, + { + label: 'Code coverage', + path: 'guide/testing/code-coverage', + contentPath: 'guide/testing/code-coverage', + }, + { + label: 'Testing utility APIs', + path: 'guide/testing/utility-apis', + contentPath: 'guide/testing/utility-apis', + }, + { + label: 'Component harnesses overview', + path: 'guide/testing/component-harnesses-overview', + contentPath: 'guide/testing/component-harnesses-overview', + }, + { + label: 'Using component harnesses in tests', + path: 'guide/testing/using-component-harnesses', + contentPath: 'guide/testing/using-component-harnesses', + }, + { + label: 'Creating harnesses for your components', + path: 'guide/testing/creating-component-harnesses', + contentPath: 'guide/testing/creating-component-harnesses', + }, + { + label: 'Adding harness support for additional testing environments', + path: 'guide/testing/component-harnesses-testing-environments', + contentPath: 'guide/testing/component-harnesses-testing-environments', + }, + { + label: 'Migrating from Karma to Vitest', + path: 'guide/testing/migrating-to-vitest', + contentPath: 'guide/testing/migrating-to-vitest', + }, + { + label: 'Testing with Karma and Jasmine', + path: 'guide/testing/karma', + contentPath: 'guide/testing/karma', + }, + { + label: 'Zone.js Testing Utilities', + path: 'guide/testing/zone-js-testing-utilities', + contentPath: 'guide/testing/zone-js-testing-utilities', + }, + ], + }, + { + label: 'Angular Aria', + status: 'new', + children: [ + { + label: 'Overview', + path: 'guide/aria/overview', + contentPath: 'guide/aria/overview', + }, + { + label: 'Accordion', + path: 'guide/aria/accordion', + contentPath: 'guide/aria/accordion', + }, + { + label: 'Autocomplete', + path: 'guide/aria/autocomplete', + contentPath: 'guide/aria/autocomplete', + }, + { + label: 'Combobox', + path: 'guide/aria/combobox', + contentPath: 'guide/aria/combobox', + }, + { + label: 'Grid', + path: 'guide/aria/grid', + contentPath: 'guide/aria/grid', + }, + { + label: 'Listbox', + path: 'guide/aria/listbox', + contentPath: 'guide/aria/listbox', + }, + { + label: 'Menu', + path: 'guide/aria/menu', + contentPath: 'guide/aria/menu', + }, + { + label: 'Menubar', + path: 'guide/aria/menubar', + contentPath: 'guide/aria/menubar', + }, + { + label: 'Multiselect', + path: 'guide/aria/multiselect', + contentPath: 'guide/aria/multiselect', + }, + { + label: 'Select', + path: 'guide/aria/select', + contentPath: 'guide/aria/select', + }, + { + label: 'Tabs', + path: 'guide/aria/tabs', + contentPath: 'guide/aria/tabs', + }, + { + label: 'Toolbar', + path: 'guide/aria/toolbar', + contentPath: 'guide/aria/toolbar', + }, + { + label: 'Tree', + path: 'guide/aria/tree', + contentPath: 'guide/aria/tree', + }, + ], + }, + { + label: 'Internationalization', + children: [ + { + label: 'Overview', + path: 'guide/i18n', + contentPath: 'guide/i18n/overview', + }, + { + label: 'Add the localize package', + path: 'guide/i18n/add-package', + contentPath: 'guide/i18n/add-package', + }, + { + label: 'Refer to locales by ID', + path: 'guide/i18n/locale-id', + contentPath: 'guide/i18n/locale-id', + }, + { + label: 'Format data based on locale', + path: 'guide/i18n/format-data-locale', + contentPath: 'guide/i18n/format-data-locale', + }, + { + label: 'Prepare component for translation', + path: 'guide/i18n/prepare', + contentPath: 'guide/i18n/prepare', + }, + { + label: 'Work with translation files', + path: 'guide/i18n/translation-files', + contentPath: 'guide/i18n/translation-files', + }, + { + label: 'Merge translations into the app', + path: 'guide/i18n/merge', + contentPath: 'guide/i18n/merge', + }, + { + label: 'Deploy multiple locales', + path: 'guide/i18n/deploy', + contentPath: 'guide/i18n/deploy', + }, + { + label: 'Import global variants of the locale data', + path: 'guide/i18n/import-global-variants', + contentPath: 'guide/i18n/import-global-variants', + }, + { + label: 'Manage marked text with custom IDs', + path: 'guide/i18n/manage-marked-text', + contentPath: 'guide/i18n/manage-marked-text', + }, + { + label: 'Example Angular application', + path: 'guide/i18n/example', + contentPath: 'guide/i18n/example', + }, + ], + }, + { + label: 'Animations', + status: 'updated', + children: [ + { + label: 'Enter and Leave animations', + path: 'guide/animations', + contentPath: 'guide/animations/enter-and-leave', + status: 'new', + }, + { + label: 'Complex Animations with CSS', + path: 'guide/animations/css', + contentPath: 'guide/animations/css', + }, + { + label: 'Route transition animations', + path: 'guide/routing/route-transition-animations', + contentPath: 'guide/routing/route-transition-animations', + }, + ], + }, + { + label: 'Drag and drop', + path: 'guide/drag-drop', + contentPath: 'guide/drag-drop', + }, + ], + }, + { + label: 'Build with AI', + status: 'new', + children: [ + { + label: 'Get Started', + path: 'ai', + contentPath: 'ai/overview', + }, + { + label: 'LLM prompts and AI IDE setup', + path: 'ai/develop-with-ai', + contentPath: 'ai/develop-with-ai', + }, + { + label: 'Design Patterns', + path: 'ai/design-patterns', + contentPath: 'ai/design-patterns', + }, + { + label: 'Angular CLI MCP Server setup', + path: 'ai/mcp', + contentPath: 'ai/mcp-server-setup', + }, + { + label: 'Angular AI Tutor', + path: 'ai/ai-tutor', + contentPath: 'ai/ai-tutor', + }, + ], + }, + { + label: 'Developer Tools', + children: [ + { + label: 'Angular CLI', + children: [ + { + label: 'Overview', + path: 'tools/cli', + contentPath: 'tools/cli/overview', + }, + { + label: 'Local set-up', + path: 'tools/cli/setup-local', + contentPath: 'tools/cli/setup-local', + }, + { + label: 'Building Angular apps', + path: 'tools/cli/build', + contentPath: 'tools/cli/build', + }, + { + label: 'Serving Angular apps for development', + path: 'tools/cli/serve', + contentPath: 'tools/cli/serve', + }, + { + label: 'Deployment', + path: 'tools/cli/deployment', + contentPath: 'tools/cli/deployment', + }, + { + label: 'End-to-End Testing', + path: 'tools/cli/end-to-end', + contentPath: 'tools/cli/end-to-end', + }, + { + label: 'Migrating to new build system', + path: 'tools/cli/build-system-migration', + contentPath: 'tools/cli/build-system-migration', + }, + { + label: 'Build environments', + path: 'tools/cli/environments', + contentPath: 'tools/cli/environments', + }, + { + label: 'Angular CLI builders', + path: 'tools/cli/cli-builder', + contentPath: 'tools/cli/cli-builder', + }, + { + label: 'Generating code using schematics', + path: 'tools/cli/schematics', + contentPath: 'tools/cli/schematics', + }, + { + label: 'Authoring schematics', + path: 'tools/cli/schematics-authoring', + contentPath: 'tools/cli/schematics-authoring', + }, + { + label: 'Schematics for libraries', + path: 'tools/cli/schematics-for-libraries', + contentPath: 'tools/cli/schematics-for-libraries', + }, + { + label: 'Template type checking', + path: 'tools/cli/template-typecheck', + contentPath: 'tools/cli/template-typecheck', + }, + { + label: 'Ahead-of-time (AOT) compilation', + path: 'tools/cli/aot-compiler', + contentPath: 'tools/cli/aot-compiler', + }, + { + label: 'AOT metadata errors', + path: 'tools/cli/aot-metadata-errors', + contentPath: 'tools/cli/aot-metadata-errors', + }, + ], + }, + { + label: 'Libraries', + children: [ + { + label: 'Overview', + path: 'tools/libraries', + contentPath: 'tools/libraries/overview', + }, + { + label: 'Creating Libraries', + path: 'tools/libraries/creating-libraries', + contentPath: 'tools/libraries/creating-libraries', + }, + { + label: 'Using Libraries', + path: 'tools/libraries/using-libraries', + contentPath: 'tools/libraries/using-libraries', + }, + { + label: 'Angular Package Format', + path: 'tools/libraries/angular-package-format', + contentPath: 'tools/libraries/angular-package-format', + }, + ], + }, + { + label: 'DevTools', + children: [ + { + label: 'Overview', + path: 'tools/devtools', + contentPath: 'tools/devtools/overview', + }, + { + label: 'Components', + path: 'tools/devtools/component', + contentPath: 'tools/devtools/component', + }, + { + label: 'Profiler', + path: 'tools/devtools/profiler', + contentPath: 'tools/devtools/profiler', + }, + { + label: 'Injectors', + path: 'tools/devtools/injectors', + contentPath: 'tools/devtools/injectors', + }, + // TODO: create those guides + // The signal debugging docs should also be added to the signal section + // { + // label: 'Signals', + // path: 'tools/devtools/signals', + // contentPath: 'tools/devtools/signals', + // }, + // { + // label: 'Router', + // path: 'tools/devtools/router', + // contentPath: 'tools/devtools/router', + // } + ], + }, + { + label: 'Language Service', + path: 'tools/language-service', + contentPath: 'tools/language-service', + }, + ], + }, + { + label: 'Best Practices', + children: [ + { + label: 'Style Guide', + path: 'style-guide', + contentPath: 'best-practices/style-guide', + status: 'updated', + }, + { + label: 'Security', + path: 'best-practices/security', + contentPath: 'guide/security', // Have not refactored due to build issues + }, + { + label: 'Accessibility', + path: 'best-practices/a11y', + contentPath: 'best-practices/a11y', + }, + { + label: 'Unhandled errors in Angular', + path: 'best-practices/error-handling', + contentPath: 'best-practices/error-handling', + }, + { + label: 'Performance', + preserveOtherCategoryOrder: true, + children: [ + { + label: 'Overview', + path: 'best-practices/performance', + contentPath: 'best-practices/performance/overview', + }, + + // Loading Performance + { + label: 'Deferred loading with @defer', + path: 'best-practices/performance/defer', + contentPath: 'guide/templates/defer', + category: 'Loading Performance', + }, + { + label: 'Image optimization', + path: 'best-practices/performance/image-optimization', + contentPath: 'guide/image-optimization', + category: 'Loading Performance', + }, + { + label: 'Server-side rendering', + path: 'best-practices/performance/ssr', + contentPath: 'guide/ssr', + category: 'Loading Performance', + }, + + // Runtime Performance + { + label: 'Overview', + path: 'best-practices/runtime-performance', + contentPath: 'best-practices/runtime-performance/overview', + category: 'Runtime Performance', + }, + { + label: 'Zoneless', + path: 'guide/zoneless', + contentPath: 'guide/zoneless', + category: 'Runtime Performance', + }, + { + label: 'Slow computations', + path: 'best-practices/slow-computations', + contentPath: 'best-practices/runtime-performance/slow-computations', + category: 'Runtime Performance', + }, + { + label: 'Skipping component subtrees', + path: 'best-practices/skipping-subtrees', + contentPath: 'best-practices/runtime-performance/skipping-subtrees', + category: 'Runtime Performance', + }, + { + label: 'Zone pollution', + path: 'best-practices/zone-pollution', + contentPath: 'best-practices/runtime-performance/zone-pollution', + category: 'Runtime Performance', + }, + + { + label: 'Chrome DevTools profiling', + path: 'best-practices/profiling-with-chrome-devtools', + contentPath: 'best-practices/runtime-performance/profiling-with-chrome-devtools', + category: 'Runtime Performance', + }, + ], + }, + { + label: 'Keeping up-to-date', + path: 'update', + contentPath: 'best-practices/update', + }, + ], + }, + { + label: 'Developer Events', + children: [ + { + label: 'Angular v21 Release', + path: 'events/v21', + contentPath: 'events/v21', + status: 'new', + }, + ], + }, + { + label: 'Extended Ecosystem', + children: [ + { + label: 'NgModules', + path: 'guide/ngmodules/overview', + contentPath: 'guide/ngmodules/overview', + }, + { + label: 'Legacy Animations', + children: [ + { + label: 'Overview', + path: 'guide/legacy-animations', + contentPath: 'guide/animations/overview', + }, + { + label: 'Transition and Triggers', + path: 'guide/legacy-animations/transition-and-triggers', + contentPath: 'guide/animations/transition-and-triggers', + }, + { + label: 'Complex Sequences', + path: 'guide/legacy-animations/complex-sequences', + contentPath: 'guide/animations/complex-sequences', + }, + { + label: 'Reusable Animations', + path: 'guide/legacy-animations/reusable-animations', + contentPath: 'guide/animations/reusable-animations', + }, + { + label: 'Migrating to Native CSS Animations', + path: 'guide/animations/migration', + contentPath: 'guide/animations/migration', + }, + ], + }, + { + label: 'Using RxJS with Angular', + children: [ + { + label: 'Signals interop', + path: 'ecosystem/rxjs-interop', + contentPath: 'ecosystem/rxjs-interop/signals-interop', + }, + { + label: 'Component output interop', + path: 'ecosystem/rxjs-interop/output-interop', + contentPath: 'ecosystem/rxjs-interop/output-interop', + }, + { + label: 'Unsubscribing with takeUntilDestroyed', + path: 'ecosystem/rxjs-interop/take-until-destroyed', + contentPath: 'ecosystem/rxjs-interop/take-until-destroyed', + }, + ], + }, + { + label: 'Service Workers & PWAs', + children: [ + { + label: 'Overview', + path: 'ecosystem/service-workers', + contentPath: 'ecosystem/service-workers/overview', + }, + { + label: 'Getting started', + path: 'ecosystem/service-workers/getting-started', + contentPath: 'ecosystem/service-workers/getting-started', + }, + { + label: 'Custom service worker scripts', + path: 'ecosystem/service-workers/custom-service-worker-scripts', + contentPath: 'ecosystem/service-workers/custom-service-worker-scripts', + }, + { + label: 'Configuration file', + path: 'ecosystem/service-workers/config', + contentPath: 'ecosystem/service-workers/config', + }, + { + label: 'Communicating with the service worker', + path: 'ecosystem/service-workers/communications', + contentPath: 'ecosystem/service-workers/communications', + }, + { + label: 'Push notifications', + path: 'ecosystem/service-workers/push-notifications', + contentPath: 'ecosystem/service-workers/push-notifications', + }, + { + label: 'Service worker devops', + path: 'ecosystem/service-workers/devops', + contentPath: 'ecosystem/service-workers/devops', + }, + { + label: 'App shell pattern', + path: 'ecosystem/service-workers/app-shell', + contentPath: 'ecosystem/service-workers/app-shell', + }, + ], + }, + { + label: 'Web workers', + path: 'ecosystem/web-workers', + contentPath: 'ecosystem/web-workers', + }, + { + label: 'Custom build pipeline', + path: 'ecosystem/custom-build-pipeline', + contentPath: 'ecosystem/custom-build-pipeline', + }, + { + label: 'Tailwind', + path: 'guide/tailwind', + contentPath: 'guide/tailwind', + status: 'new', + }, + { + label: 'Angular Fire', + path: 'https://github.com/angular/angularfire#readme', + }, + { + label: 'Google Maps', + path: 'https://github.com/angular/components/tree/main/src/google-maps#readme', + }, + { + label: 'Google Pay', + path: 'https://github.com/google-pay/google-pay-button#angular', + }, + { + label: 'YouTube player', + path: 'https://github.com/angular/components/blob/main/src/youtube-player/README.md', + }, + { + label: 'Angular CDK', + path: 'https://material.angular.dev/cdk/categories', + }, + { + label: 'Angular Material', + path: 'https://material.angular.dev/', + }, + ], + }, + ...(isDevMode() + ? [ + { + label: 'Adev Dev Guide', + children: [ + { + label: 'Kitchen Sink', + path: 'kitchen-sink', + contentPath: 'kitchen-sink', + }, + ], + }, + ] + : []), +]; + +export const TUTORIALS_SUB_NAVIGATION_DATA: NavigationItem[] = [ + FIRST_APP_TUTORIAL_NAV_DATA, + LEARN_ANGULAR_TUTORIAL_NAV_DATA, + DEFERRABLE_VIEWS_TUTORIAL_NAV_DATA, + SIGNALS_TUTORIAL_NAV_DATA, + SIGNAL_FORMS_TUTORIAL_NAV_DATA, + { + path: 'tutorials', + contentPath: 'tutorials/home', + label: 'Tutorials', + }, +]; + +export const REFERENCE_SUB_NAVIGATION_DATA: NavigationItem[] = [ + { + label: 'Roadmap', + path: 'roadmap', + contentPath: 'reference/roadmap', + }, + { + label: 'Get involved', + path: 'https://github.com/angular/angular/blob/main/CONTRIBUTING.md', + }, + { + label: 'API Reference', + preserveOtherCategoryOrder: true, + children: [ + { + label: 'Overview', + path: 'api', + }, + ...getApiNavigationItems(), + ], + }, + { + label: 'CLI Reference', + children: [ + { + label: 'Overview', + path: 'cli', + contentPath: 'reference/cli', + }, + { + label: 'ng add', + path: 'cli/add', + }, + { + label: 'ng analytics', + children: [ + { + label: 'Overview', + path: 'cli/analytics', + }, + { + label: 'disable', + path: 'cli/analytics/disable', + }, + { + label: 'enable', + path: 'cli/analytics/enable', + }, + { + label: 'info', + path: 'cli/analytics/info', + }, + { + label: 'prompt', + path: 'cli/analytics/prompt', + }, + ], + }, + { + label: 'ng build', + path: 'cli/build', + }, + { + label: 'ng cache', + children: [ + { + label: 'Overview', + path: 'cli/cache', + }, + { + label: 'clean', + path: 'cli/cache/clean', + }, + { + label: 'disable', + path: 'cli/cache/disable', + }, + { + label: 'enable', + path: 'cli/cache/enable', + }, + { + label: 'info', + path: 'cli/cache/info', + }, + ], + }, + { + label: 'ng completion', + children: [ + { + label: 'Overview', + path: 'cli/completion', + }, + { + label: 'script', + path: 'cli/completion/script', + }, + ], + }, + { + label: 'ng config', + path: 'cli/config', + }, + { + label: 'ng deploy', + path: 'cli/deploy', + }, + { + label: 'ng e2e', + path: 'cli/e2e', + }, + { + label: 'ng extract-i18n', + path: 'cli/extract-i18n', + }, + { + label: 'ng generate', + children: [ + { + label: 'Overview', + path: 'cli/generate', + }, + { + label: 'ai-config', + path: 'cli/generate/ai-config', + }, + { + label: 'app-shell', + path: 'cli/generate/app-shell', + }, + { + label: 'application', + path: 'cli/generate/application', + }, + { + label: 'class', + path: 'cli/generate/class', + }, + { + label: 'component', + path: 'cli/generate/component', + }, + { + label: 'config', + path: 'cli/generate/config', + }, + { + label: 'directive', + path: 'cli/generate/directive', + }, + { + label: 'enum', + path: 'cli/generate/enum', + }, + { + label: 'environments', + path: 'cli/generate/environments', + }, + { + label: 'guard', + path: 'cli/generate/guard', + }, + { + label: 'interceptor', + path: 'cli/generate/interceptor', + }, + { + label: 'interface', + path: 'cli/generate/interface', + }, + { + label: 'library', + path: 'cli/generate/library', + }, + { + label: 'module', + path: 'cli/generate/module', + }, + { + label: 'pipe', + path: 'cli/generate/pipe', + }, + { + label: 'resolver', + path: 'cli/generate/resolver', + }, + { + label: 'service-worker', + path: 'cli/generate/service-worker', + }, + { + label: 'service', + path: 'cli/generate/service', + }, + { + label: 'web-worker', + path: 'cli/generate/web-worker', + }, + ], + }, + { + label: 'ng lint', + path: 'cli/lint', + }, + { + label: 'ng new', + path: 'cli/new', + }, + { + label: 'ng run', + path: 'cli/run', + }, + { + label: 'ng serve', + path: 'cli/serve', + }, + { + label: 'ng test', + path: 'cli/test', + }, + { + label: 'ng update', + path: 'cli/update', + }, + { + label: 'ng version', + path: 'cli/version', + }, + ], + }, + { + label: 'Error Encyclopedia', + children: [ + { + label: 'Overview', + path: 'errors', + contentPath: 'reference/errors/overview', + }, + ...ERRORS_NAV_DATA, + ], + }, + { + label: 'Extended Diagnostics', + children: [ + { + label: 'Overview', + path: 'extended-diagnostics', + contentPath: 'reference/extended-diagnostics/overview', + }, + ...EXT_DIAGNOSTICS_NAV_DATA, + ], + }, + { + label: 'Versioning and releases', + path: 'reference/releases', + contentPath: 'reference/releases', + }, + { + label: 'Version compatibility', + path: 'reference/versions', + contentPath: 'reference/versions', + }, + { + label: 'Update guide', + path: 'update-guide', + }, + { + label: 'Configurations', + children: [ + { + label: 'File structure', + path: 'reference/configs/file-structure', + contentPath: 'reference/configs/file-structure', + }, + { + label: 'Workspace configuration', + path: 'reference/configs/workspace-config', + contentPath: 'reference/configs/workspace-config', + }, + { + label: 'Angular compiler options', + path: 'reference/configs/angular-compiler-options', + contentPath: 'reference/configs/angular-compiler-options', + }, + { + label: 'npm dependencies', + path: 'reference/configs/npm-packages', + contentPath: 'reference/configs/npm-packages', + }, + ], + }, + { + label: 'Migrations', + children: [ + { + label: 'Overview', + path: 'reference/migrations', + contentPath: 'reference/migrations/overview', + }, + { + label: 'Standalone', + path: 'reference/migrations/standalone', + contentPath: 'reference/migrations/standalone', + }, + { + label: 'Control Flow Syntax', + path: 'reference/migrations/control-flow', + contentPath: 'reference/migrations/control-flow', + }, + { + label: 'inject() Function', + path: 'reference/migrations/inject-function', + contentPath: 'reference/migrations/inject-function', + }, + { + label: 'Lazy-loaded routes', + path: 'reference/migrations/route-lazy-loading', + contentPath: 'reference/migrations/route-lazy-loading', + }, + { + label: 'Signal inputs', + path: 'reference/migrations/signal-inputs', + contentPath: 'reference/migrations/signal-inputs', + }, + { + label: 'Outputs', + path: 'reference/migrations/outputs', + contentPath: 'reference/migrations/outputs', + }, + { + label: 'Signal queries', + path: 'reference/migrations/signal-queries', + contentPath: 'reference/migrations/signal-queries', + }, + { + label: 'Clean up unused imports', + path: 'reference/migrations/cleanup-unused-imports', + contentPath: 'reference/migrations/cleanup-unused-imports', + }, + { + label: 'Self-closing tags', + path: 'reference/migrations/self-closing-tags', + contentPath: 'reference/migrations/self-closing-tags', + }, + { + label: 'NgClass to Class', + path: 'reference/migrations/ngclass-to-class', + contentPath: 'reference/migrations/ngclass-to-class', + status: 'new', + }, + { + label: 'NgStyle to Style', + path: 'reference/migrations/ngstyle-to-style', + contentPath: 'reference/migrations/ngstyle-to-style', + status: 'new', + }, + { + label: 'Router Testing Module Migration', + path: 'reference/migrations/router-testing-module-migration', + contentPath: 'reference/migrations/router-testing-module-migration', + status: 'new', + }, + { + label: 'CommonModule to Standalone', + path: 'reference/migrations/common-to-standalone', + contentPath: 'reference/migrations/common-to-standalone', + status: 'new', + }, + ], + }, +]; + +export const FOOTER_NAVIGATION_DATA: NavigationItem[] = [ + { + label: 'Press Kit', + path: 'press-kit', + contentPath: 'reference/press-kit', + }, + { + label: 'License', + path: 'license', + contentPath: 'reference/license', + }, +]; + +export const ALL_ITEMS = [ + ...DOCS_SUB_NAVIGATION_DATA, + ...REFERENCE_SUB_NAVIGATION_DATA, + ...FOOTER_NAVIGATION_DATA, + ...TUTORIALS_SUB_NAVIGATION_DATA, +]; + +function getApiNavigationItems(): NavigationItem[] { + const manifest = API_MANIFEST_JSON as any; // TODO(mri): Use proper type when the refactoring of #66252 gets in. + + const apiNavigationItems: NavigationItem[] = []; + + for (const packageEntry of manifest) { + const packageNavigationItem: NavigationItem = { + label: packageEntry.moduleLabel, + children: packageEntry.entries.map((api: any) => ({ + path: getApiUrl(packageEntry, api.name), + label: api.name, + category: api.category, + })), + }; + + apiNavigationItems.push(packageNavigationItem); + } + + return apiNavigationItems; +} + +function getApiUrl(packageEntry: any, apiName: string): string { + const packageName = packageEntry.normalizedModuleName + // packages like `angular_core` should be `core` + // packages like `angular_animation_browser` should be `animation/browser` + .replace('angular_', '') + .replaceAll('_', '/'); + return `api/${packageName}/${apiName}`; +} diff --git a/adev-ja/src/app/routing/navigation-entries/index.ts b/adev-ja/src/app/routing/navigation-entries/index.ts new file mode 100644 index 0000000000..76d484fad9 --- /dev/null +++ b/adev-ja/src/app/routing/navigation-entries/index.ts @@ -0,0 +1,1761 @@ +/*! + * @license + * Copyright Google LLC All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.dev/license + */ + +import {isDevMode} from '@angular/core'; +import type {NavigationItem} from '@angular/docs'; +// These imports are expected to be red because they are generated a build time +// @ts-ignore +import ERRORS_NAV_DATA from '../../../content/reference/errors/routes.json' with {type: 'json'}; +// @ts-ignore +import EXT_DIAGNOSTICS_NAV_DATA from '../../../content/reference/extended-diagnostics/routes.json' with {type: 'json'}; +// @ts-ignore +import FIRST_APP_TUTORIAL_NAV_DATA from '../../../content/tutorials/first-app/first-app/routes.json' with {type: 'json'}; +// @ts-ignore +import LEARN_ANGULAR_TUTORIAL_NAV_DATA from '../../../content/tutorials/learn-angular/learn-angular/routes.json' with {type: 'json'}; +// @ts-ignore +import DEFERRABLE_VIEWS_TUTORIAL_NAV_DATA from '../../../content/tutorials/deferrable-views/deferrable-views/routes.json' with {type: 'json'}; +// @ts-ignore +import SIGNALS_TUTORIAL_NAV_DATA from '../../../content/tutorials/signals/signals/routes.json' with {type: 'json'}; +// @ts-ignore +import SIGNAL_FORMS_TUTORIAL_NAV_DATA from '../../../content/tutorials/signal-forms/signal-forms/routes.json' with {type: 'json'}; +// @ts-ignore +import API_MANIFEST_JSON from '../../../assets/manifest.json' with {type: 'json'}; + +interface SubNavigationData { + docs: NavigationItem[]; + reference: NavigationItem[]; + tutorials: NavigationItem[]; + footer: NavigationItem[]; +} + +export const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [ + { + label: '入門', + children: [ + { + label: 'Angularとは？', + path: 'overview', + contentPath: 'introduction/what-is-angular', + }, + { + label: 'インストール', + path: 'installation', + contentPath: 'introduction/installation', + }, + { + label: '基本概念', + children: [ + { + label: '概要', + path: 'essentials', + contentPath: 'introduction/essentials/overview', + }, + { + label: 'コンポーネントによる構築', + path: 'essentials/components', + contentPath: 'introduction/essentials/components', + }, + { + label: 'リアクティビティとシグナル', + path: 'essentials/signals', + contentPath: 'introduction/essentials/signals', + }, + { + label: 'テンプレートによる動的なインターフェース', + path: 'essentials/templates', + contentPath: 'introduction/essentials/templates', + }, + { + label: 'シグナルを使ったフォーム', + path: 'essentials/signal-forms', + contentPath: 'introduction/essentials/signal-forms', + status: 'new', + }, + { + label: '依存性の注入によるモジュール設計', + path: 'essentials/dependency-injection', + contentPath: 'introduction/essentials/dependency-injection', + }, + { + label: '次のステップ', + path: 'essentials/next-steps', + contentPath: 'introduction/essentials/next-steps', + }, + ], + }, + { + label: '作ってみよう！ 🚀', + path: 'tutorials/learn-angular', + }, + ], + }, + { + label: '詳細ガイド', + children: [ + { + label: 'シグナル', + status: 'updated', + children: [ + { + label: '概要', + path: 'guide/signals', + contentPath: 'guide/signals/overview', + }, + { + label: 'linkedSignalによる派生状態', + path: 'guide/signals/linked-signal', + contentPath: 'guide/signals/linked-signal', + }, + { + label: 'resourceによる非同期リアクティビティ', + path: 'guide/signals/resource', + contentPath: 'guide/signals/resource', + }, + { + label: '非リアクティブAPIのための副作用', + path: 'guide/signals/effect', + contentPath: 'guide/signals/effect', + status: 'new', + }, + ], + }, + { + label: 'コンポーネント', + children: [ + { + label: 'コンポーネントの構造', + path: 'guide/components', + contentPath: 'guide/components/anatomy-of-components', + }, + { + label: 'セレクター', + path: 'guide/components/selectors', + contentPath: 'guide/components/selectors', + }, + { + label: 'スタイリング', + path: 'guide/components/styling', + contentPath: 'guide/components/styling', + }, + { + label: '入力プロパティによるデータ受け入れ', + path: 'guide/components/inputs', + contentPath: 'guide/components/inputs', + }, + { + label: '出力によるカスタムイベント', + path: 'guide/components/outputs', + contentPath: 'guide/components/outputs', + }, + { + label: 'ng-contentによるコンテンツ投影', + path: 'guide/components/content-projection', + contentPath: 'guide/components/content-projection', + }, + { + label: 'ホスト要素', + path: 'guide/components/host-elements', + contentPath: 'guide/components/host-elements', + }, + { + label: 'ライフサイクル', + path: 'guide/components/lifecycle', + contentPath: 'guide/components/lifecycle', + }, + { + label: 'クエリによるコンポーネントの子への参照', + path: 'guide/components/queries', + contentPath: 'guide/components/queries', + }, + { + label: 'DOM APIの使用', + path: 'guide/components/dom-apis', + contentPath: 'guide/components/dom-apis', + }, + { + label: '継承', + path: 'guide/components/inheritance', + contentPath: 'guide/components/inheritance', + }, + { + label: 'プログラムによるコンポーネントレンダリング', + path: 'guide/components/programmatic-rendering', + contentPath: 'guide/components/programmatic-rendering', + }, + { + label: '高度な設定', + path: 'guide/components/advanced-configuration', + contentPath: 'guide/components/advanced-configuration', + }, + { + label: 'カスタム要素', + path: 'guide/elements', + contentPath: 'guide/elements', + }, + ], + }, + { + label: 'テンプレート', + children: [ + { + label: '概要', + path: 'guide/templates', + contentPath: 'guide/templates/overview', + }, + { + label: '動的テキスト、プロパティ、属性のバインディング', + path: 'guide/templates/binding', + contentPath: 'guide/templates/binding', + }, + { + label: 'イベントリスナーの追加', + path: 'guide/templates/event-listeners', + contentPath: 'guide/templates/event-listeners', + }, + { + label: '双方向バインディング', + path: 'guide/templates/two-way-binding', + contentPath: 'guide/templates/two-way-binding', + }, + { + label: '制御フロー', + path: 'guide/templates/control-flow', + contentPath: 'guide/templates/control-flow', + }, + { + label: 'パイプ', + path: 'guide/templates/pipes', + contentPath: 'guide/templates/pipes', + }, + { + label: 'ng-contentによる子コンテンツのスロット化', + path: 'guide/templates/ng-content', + contentPath: 'guide/templates/ng-content', + }, + { + label: 'ng-templateによるテンプレートフラグメントの作成', + path: 'guide/templates/ng-template', + contentPath: 'guide/templates/ng-template', + }, + { + label: 'ng-containerによる要素のグループ化', + path: 'guide/templates/ng-container', + contentPath: 'guide/templates/ng-container', + }, + { + label: 'テンプレート内の変数', + path: 'guide/templates/variables', + contentPath: 'guide/templates/variables', + }, + { + label: '@deferによる遅延読み込み', + path: 'guide/templates/defer', + contentPath: 'guide/templates/defer', + }, + { + label: '式の構文', + path: 'guide/templates/expression-syntax', + contentPath: 'guide/templates/expression-syntax', + }, + { + label: 'テンプレート内の空白', + path: 'guide/templates/whitespace', + contentPath: 'guide/templates/whitespace', + }, + ], + }, + { + label: 'ディレクティブ', + children: [ + { + label: '概要', + path: 'guide/directives', + contentPath: 'guide/directives/overview', + }, + { + label: '属性ディレクティブ', + path: 'guide/directives/attribute-directives', + contentPath: 'guide/directives/attribute-directives', + }, + { + label: '構造ディレクティブ', + path: 'guide/directives/structural-directives', + contentPath: 'guide/directives/structural-directives', + }, + { + label: 'ディレクティブコンポジションAPI', + path: 'guide/directives/directive-composition-api', + contentPath: 'guide/directives/directive-composition-api', + }, + { + label: 'NgOptimizedImageによる画像の最適化', + path: 'guide/image-optimization', + contentPath: 'guide/image-optimization', + }, + ], + }, + { + label: '依存性の注入', + status: 'updated', + children: [ + { + label: '概要', + path: 'guide/di', + contentPath: 'guide/di/overview', + status: 'updated', + }, + { + label: 'サービスの作成と使用', + path: 'guide/di/creating-and-using-services', + contentPath: 'guide/di/creating-and-using-services', + status: 'updated', + }, + { + label: '依存性プロバイダーの定義', + path: 'guide/di/defining-dependency-providers', + contentPath: 'guide/di/defining-dependency-providers', + status: 'updated', + }, + { + label: '注入コンテキスト', + path: 'guide/di/dependency-injection-context', + contentPath: 'guide/di/dependency-injection-context', + }, + { + label: '階層的なインジェクター', + path: 'guide/di/hierarchical-dependency-injection', + contentPath: 'guide/di/hierarchical-dependency-injection', + }, + { + label: 'インジェクショントークンの最適化', + path: 'guide/di/lightweight-injection-tokens', + contentPath: 'guide/di/lightweight-injection-tokens', + }, + { + label: 'DIの実践', + path: 'guide/di/di-in-action', + contentPath: 'guide/di/di-in-action', + }, + { + label: 'Debugging and troubleshooting DI', + path: 'guide/di/debugging-and-troubleshooting-di', + contentPath: 'guide/di/debugging-and-troubleshooting-di', + status: 'new', + }, + ], + }, + { + label: 'ルーティング', + status: 'updated', + children: [ + { + label: '概要', + path: 'guide/routing', + contentPath: 'guide/routing/overview', + }, + { + label: 'ルートを定義する', + path: 'guide/routing/define-routes', + contentPath: 'guide/routing/define-routes', + }, + { + label: 'アウトレットにルートを表示する', + path: 'guide/routing/show-routes-with-outlets', + contentPath: 'guide/routing/show-routes-with-outlets', + }, + { + label: 'ルートへのナビゲーション', + path: 'guide/routing/navigate-to-routes', + contentPath: 'guide/routing/navigate-to-routes', + }, + { + label: 'ルートの状態を読み取る', + path: 'guide/routing/read-route-state', + contentPath: 'guide/routing/read-route-state', + }, + { + label: 'ルートのリダイレクト', + path: 'guide/routing/redirecting-routes', + contentPath: 'guide/routing/redirecting-routes', + }, + { + label: 'ガードによるルートアクセスの制御', + path: 'guide/routing/route-guards', + contentPath: 'guide/routing/route-guards', + }, + { + label: 'ルートデータリゾルバー', + path: 'guide/routing/data-resolvers', + contentPath: 'guide/routing/data-resolvers', + }, + { + label: 'ライフサイクルとイベント', + path: 'guide/routing/lifecycle-and-events', + contentPath: 'guide/routing/lifecycle-and-events', + }, + { + label: 'ルーティングとナビゲーションのテスト', + path: 'guide/routing/testing', + contentPath: 'guide/routing/testing', + status: 'new', + }, + { + label: 'その他のルーティングタスク', + path: 'guide/routing/common-router-tasks', + contentPath: 'guide/routing/common-router-tasks', + }, + { + label: 'カスタムルートマッチの作成', + path: 'guide/routing/routing-with-urlmatcher', + contentPath: 'guide/routing/routing-with-urlmatcher', + }, + { + label: 'レンダリング戦略', + path: 'guide/routing/rendering-strategies', + contentPath: 'guide/routing/rendering-strategies', + status: 'new', + }, + { + label: 'ルートの動作のカスタマイズ', + path: 'guide/routing/customizing-route-behavior', + contentPath: 'guide/routing/customizing-route-behavior', + status: 'new', + }, + { + label: 'ルーターリファレンス', + path: 'guide/routing/router-reference', + contentPath: 'guide/routing/router-reference', + }, + { + label: 'ルート遷移アニメーション', + path: 'guide/routing/route-transition-animations', + contentPath: 'guide/routing/route-transition-animations', + }, + ], + }, + { + label: 'フォーム', + status: 'updated', + preserveOtherCategoryOrder: true, + children: [ + { + label: '概要', + path: 'guide/forms', + contentPath: 'guide/forms/overview', + }, + + { + label: '概要', + path: 'guide/forms/signals/overview', + contentPath: 'guide/forms/signals/overview', + category: 'Signal Forms', + status: 'new', + }, + { + label: 'フォームモデル', + path: 'guide/forms/signals/models', + contentPath: 'guide/forms/signals/models', + category: 'Signal Forms', + status: 'new', + }, + { + label: 'フォームモデルの設計', + path: 'guide/forms/signals/model-design', + contentPath: 'guide/forms/signals/designing-your-form-model', + category: 'Signal Forms', + status: 'new', + }, + { + label: 'フィールド状態管理', + path: 'guide/forms/signals/field-state-management', + contentPath: 'guide/forms/signals/field-state-management', + category: 'Signal Forms', + status: 'new', + }, + { + label: 'バリデーション', + path: 'guide/forms/signals/validation', + contentPath: 'guide/forms/signals/validation', + category: 'Signal Forms', + status: 'new', + }, + { + label: 'Form logic', + path: 'guide/forms/signals/form-logic', + contentPath: 'guide/forms/signals/form-logic', + category: 'Signal Forms', + status: 'new', + }, + { + label: 'Async operations', + path: 'guide/forms/signals/async-operations', + contentPath: 'guide/forms/signals/async-operations', + category: 'Signal Forms', + status: 'new', + }, + { + label: 'カスタムコントロール', + path: 'guide/forms/signals/custom-controls', + contentPath: 'guide/forms/signals/custom-controls', + category: 'Signal Forms', + status: 'new', + }, + { + label: '他のフォームシステムとの比較', + path: 'guide/forms/signals/comparison', + contentPath: 'guide/forms/signals/comparison', + category: 'Signal Forms', + status: 'new', + }, + { + label: 'Migrating from Reactive Forms', + path: 'guide/forms/signals/migration', + contentPath: 'guide/forms/signals/migration', + category: 'Signal Forms', + status: 'new', + }, + { + label: 'リアクティブフォーム', + path: 'guide/forms/reactive-forms', + contentPath: 'guide/forms/reactive-forms', + category: 'Reactive Forms', + }, + { + label: '厳密に型付けされたリアクティブフォーム', + path: 'guide/forms/typed-forms', + contentPath: 'guide/forms/typed-forms', + category: 'Reactive Forms', + }, + { + label: 'テンプレート駆動型フォーム', + path: 'guide/forms/template-driven-forms', + contentPath: 'guide/forms/template-driven-forms', + category: 'Template driven Forms', + }, + { + label: 'フォーム入力の検証', + path: 'guide/forms/form-validation', + contentPath: 'guide/forms/form-validation', + category: 'Reactive Forms', + }, + { + label: 'フォーム入力の検証', + path: 'guide/forms/form-validation', + contentPath: 'guide/forms/form-validation', + category: 'Template driven Forms', + }, + { + label: '動的フォームの構築', + path: 'guide/forms/dynamic-forms', + contentPath: 'guide/forms/dynamic-forms', + category: 'Reactive Forms', + }, + ], + }, + { + label: 'HTTPクライアント', + children: [ + { + label: '概要', + path: 'guide/http', + contentPath: 'guide/http/overview', + }, + { + label: 'HttpClientの設定', + path: 'guide/http/setup', + contentPath: 'guide/http/setup', + }, + { + label: 'リクエストの実行', + path: 'guide/http/making-requests', + contentPath: 'guide/http/making-requests', + }, + { + label: 'httpResourceを使ったリアクティブなデータ取得', + path: 'guide/http/http-resource', + contentPath: 'guide/http/http-resource', + }, + { + label: 'リクエストとレスポンスへの介入', + path: 'guide/http/interceptors', + contentPath: 'guide/http/interceptors', + }, + { + label: 'テスト', + path: 'guide/http/testing', + contentPath: 'guide/http/testing', + }, + ], + }, + { + label: 'サーバーサイド・ハイブリッドレンダリング', + children: [ + { + label: '概要', + path: 'guide/performance', + contentPath: 'guide/performance/overview', + }, + { + label: 'サーバーサイド・ハイブリッドレンダリング', + path: 'guide/ssr', + contentPath: 'guide/ssr', + }, + { + label: 'ハイドレーション', + path: 'guide/hydration', + contentPath: 'guide/hydration', + }, + { + label: 'インクリメンタルハイドレーション', + path: 'guide/incremental-hydration', + contentPath: 'guide/incremental-hydration', + }, + ], + }, + { + label: 'テスト', + children: [ + { + label: '概要', + path: 'guide/testing', + contentPath: 'guide/testing/overview', + }, + { + label: 'コンポーネントのテストの基本', + path: 'guide/testing/components-basics', + contentPath: 'guide/testing/components-basics', + }, + { + label: 'コンポーネントのテストシナリオ', + path: 'guide/testing/components-scenarios', + contentPath: 'guide/testing/components-scenarios', + }, + { + label: 'サービスのテスト', + path: 'guide/testing/services', + contentPath: 'guide/testing/services', + }, + { + label: '属性ディレクティブのテスト', + path: 'guide/testing/attribute-directives', + contentPath: 'guide/testing/attribute-directives', + }, + { + label: 'パイプのテスト', + path: 'guide/testing/pipes', + contentPath: 'guide/testing/pipes', + }, + { + label: 'ルーティングとナビゲーションのテスト', + path: 'guide/routing/testing', + contentPath: 'guide/routing/testing', + status: 'new', + }, + { + label: 'テストのデバッグ', + path: 'guide/testing/debugging', + contentPath: 'guide/testing/debugging', + }, + { + label: 'コードカバレッジ', + path: 'guide/testing/code-coverage', + contentPath: 'guide/testing/code-coverage', + }, + { + label: 'テストユーティリティAPI', + path: 'guide/testing/utility-apis', + contentPath: 'guide/testing/utility-apis', + }, + { + label: 'コンポーネントハーネスの概要', + path: 'guide/testing/component-harnesses-overview', + contentPath: 'guide/testing/component-harnesses-overview', + }, + { + label: 'テストでコンポーネントハーネスを使う', + path: 'guide/testing/using-component-harnesses', + contentPath: 'guide/testing/using-component-harnesses', + }, + { + label: 'コンポーネントハーネスを作成する', + path: 'guide/testing/creating-component-harnesses', + contentPath: 'guide/testing/creating-component-harnesses', + }, + { + label: 'テスト環境にハーネスサポートを追加する', + path: 'guide/testing/component-harnesses-testing-environments', + contentPath: 'guide/testing/component-harnesses-testing-environments', + }, + { + label: 'KarmaからVitestへの移行', + path: 'guide/testing/migrating-to-vitest', + contentPath: 'guide/testing/migrating-to-vitest', + }, + { + label: 'KarmaとJasmineによるテスト', + path: 'guide/testing/karma', + contentPath: 'guide/testing/karma', + }, + { + label: 'Zone.jsテストユーティリティ', + path: 'guide/testing/zone-js-testing-utilities', + contentPath: 'guide/testing/zone-js-testing-utilities', + }, + ], + }, + { + label: 'Angular Aria', + status: 'new', + children: [ + { + label: '概要', + path: 'guide/aria/overview', + contentPath: 'guide/aria/overview', + }, + { + label: 'アコーディオン', + path: 'guide/aria/accordion', + contentPath: 'guide/aria/accordion', + }, + { + label: 'オートコンプリート', + path: 'guide/aria/autocomplete', + contentPath: 'guide/aria/autocomplete', + }, + { + label: 'コンボボックス', + path: 'guide/aria/combobox', + contentPath: 'guide/aria/combobox', + }, + { + label: 'グリッド', + path: 'guide/aria/grid', + contentPath: 'guide/aria/grid', + }, + { + label: 'リストボックス', + path: 'guide/aria/listbox', + contentPath: 'guide/aria/listbox', + }, + { + label: 'メニュー', + path: 'guide/aria/menu', + contentPath: 'guide/aria/menu', + }, + { + label: 'メニューバー', + path: 'guide/aria/menubar', + contentPath: 'guide/aria/menubar', + }, + { + label: 'マルチセレクト', + path: 'guide/aria/multiselect', + contentPath: 'guide/aria/multiselect', + }, + { + label: 'セレクト', + path: 'guide/aria/select', + contentPath: 'guide/aria/select', + }, + { + label: 'タブ', + path: 'guide/aria/tabs', + contentPath: 'guide/aria/tabs', + }, + { + label: 'ツールバー', + path: 'guide/aria/toolbar', + contentPath: 'guide/aria/toolbar', + }, + { + label: 'ツリー', + path: 'guide/aria/tree', + contentPath: 'guide/aria/tree', + }, + ], + }, + { + label: '国際化', + children: [ + { + label: '概要', + path: 'guide/i18n', + contentPath: 'guide/i18n/overview', + }, + { + label: 'localizeパッケージの追加', + path: 'guide/i18n/add-package', + contentPath: 'guide/i18n/add-package', + }, + { + label: 'IDによるロケールの参照', + path: 'guide/i18n/locale-id', + contentPath: 'guide/i18n/locale-id', + }, + { + label: 'ロケールに基づいたデータのフォーマット', + path: 'guide/i18n/format-data-locale', + contentPath: 'guide/i18n/format-data-locale', + }, + { + label: '翻訳のためのコンポーネントの準備', + path: 'guide/i18n/prepare', + contentPath: 'guide/i18n/prepare', + }, + { + label: '翻訳ファイルの操作', + path: 'guide/i18n/translation-files', + contentPath: 'guide/i18n/translation-files', + }, + { + label: 'アプリへの翻訳の統合', + path: 'guide/i18n/merge', + contentPath: 'guide/i18n/merge', + }, + { + label: '複数のロケールのデプロイ', + path: 'guide/i18n/deploy', + contentPath: 'guide/i18n/deploy', + }, + { + label: 'ロケールデータのグローバルバリアントのインポート', + path: 'guide/i18n/import-global-variants', + contentPath: 'guide/i18n/import-global-variants', + }, + { + label: 'カスタムIDによるマークされたテキストの管理', + path: 'guide/i18n/manage-marked-text', + contentPath: 'guide/i18n/manage-marked-text', + }, + { + label: 'Angularアプリケーションの例', + path: 'guide/i18n/example', + contentPath: 'guide/i18n/example', + }, + ], + }, + { + label: 'アニメーション', + status: 'updated', + children: [ + { + label: 'Enter and Leave アニメーション', + path: 'guide/animations', + contentPath: 'guide/animations/enter-and-leave', + status: 'new', + }, + { + label: '複雑なCSSアニメーション', + path: 'guide/animations/css', + contentPath: 'guide/animations/css', + }, + { + label: 'ルート遷移アニメーション', + path: 'guide/routing/route-transition-animations', + contentPath: 'guide/routing/route-transition-animations', + }, + ], + }, + { + label: 'Drag and drop', + path: 'guide/drag-drop', + contentPath: 'guide/drag-drop', + }, + ], + }, + { + label: 'Build with AI', + status: 'new', + children: [ + { + label: 'はじめよう', + path: 'ai', + contentPath: 'ai/overview', + }, + { + label: 'LLMプロンプトとAI IDEセットアップ', + path: 'ai/develop-with-ai', + contentPath: 'ai/develop-with-ai', + }, + { + label: '設計パターン', + path: 'ai/design-patterns', + contentPath: 'ai/design-patterns', + }, + { + label: 'Angular CLI MCPサーバーセットアップ', + path: 'ai/mcp', + contentPath: 'ai/mcp-server-setup', + }, + { + label: 'Angular AI Tutor', + path: 'ai/ai-tutor', + contentPath: 'ai/ai-tutor', + }, + ], + }, + { + label: '開発者ツール', + children: [ + { + label: 'Angular CLI', + children: [ + { + label: '概要', + path: 'tools/cli', + contentPath: 'tools/cli/overview', + }, + { + label: 'ローカル設定', + path: 'tools/cli/setup-local', + contentPath: 'tools/cli/setup-local', + }, + { + label: 'Angularアプリのビルド', + path: 'tools/cli/build', + contentPath: 'tools/cli/build', + }, + { + label: '開発用ローカルサーバー', + path: 'tools/cli/serve', + contentPath: 'tools/cli/serve', + }, + { + label: 'デプロイメント', + path: 'tools/cli/deployment', + contentPath: 'tools/cli/deployment', + }, + { + label: 'エンドツーエンドテスト', + path: 'tools/cli/end-to-end', + contentPath: 'tools/cli/end-to-end', + }, + { + label: '新しいビルドシステムへの移行', + path: 'tools/cli/build-system-migration', + contentPath: 'tools/cli/build-system-migration', + }, + { + label: 'ビルド環境', + path: 'tools/cli/environments', + contentPath: 'tools/cli/environments', + }, + { + label: 'Angular CLIビルダー', + path: 'tools/cli/cli-builder', + contentPath: 'tools/cli/cli-builder', + }, + { + label: 'Schematicsによるコードの生成', + path: 'tools/cli/schematics', + contentPath: 'tools/cli/schematics', + }, + { + label: 'Schematicsの作成', + path: 'tools/cli/schematics-authoring', + contentPath: 'tools/cli/schematics-authoring', + }, + { + label: 'ライブラリのSchematics', + path: 'tools/cli/schematics-for-libraries', + contentPath: 'tools/cli/schematics-for-libraries', + }, + { + label: 'テンプレート型チェック', + path: 'tools/cli/template-typecheck', + contentPath: 'tools/cli/template-typecheck', + }, + { + label: '事前コンパイル (AOT) コンパイル', + path: 'tools/cli/aot-compiler', + contentPath: 'tools/cli/aot-compiler', + }, + { + label: 'AOTメタデータエラー', + path: 'tools/cli/aot-metadata-errors', + contentPath: 'tools/cli/aot-metadata-errors', + }, + ], + }, + { + label: 'ライブラリ', + children: [ + { + label: '概要', + path: 'tools/libraries', + contentPath: 'tools/libraries/overview', + }, + { + label: 'ライブラリの作成', + path: 'tools/libraries/creating-libraries', + contentPath: 'tools/libraries/creating-libraries', + }, + { + label: 'ライブラリの使用', + path: 'tools/libraries/using-libraries', + contentPath: 'tools/libraries/using-libraries', + }, + { + label: 'Angularパッケージフォーマット', + path: 'tools/libraries/angular-package-format', + contentPath: 'tools/libraries/angular-package-format', + }, + ], + }, + { + label: 'DevTools', + children: [ + { + label: '概要', + path: 'tools/devtools', + contentPath: 'tools/devtools/overview', + }, + { + label: 'コンポーネント', + path: 'tools/devtools/component', + contentPath: 'tools/devtools/component', + }, + { + label: 'プロファイラー', + path: 'tools/devtools/profiler', + contentPath: 'tools/devtools/profiler', + }, + { + label: 'インジェクター', + path: 'tools/devtools/injectors', + contentPath: 'tools/devtools/injectors', + }, + // TODO: create those guides + // The signal debugging docs should also be added to the signal section + // { + // label: 'Signals', + // path: 'tools/devtools/signals', + // contentPath: 'tools/devtools/signals', + // }, + // { + // label: 'Router', + // path: 'tools/devtools/router', + // contentPath: 'tools/devtools/router', + // } + ], + }, + { + label: '言語サービス', + path: 'tools/language-service', + contentPath: 'tools/language-service', + }, + ], + }, + { + label: 'ベストプラクティス', + children: [ + { + label: 'スタイルガイド', + path: 'style-guide', + contentPath: 'best-practices/style-guide', + status: 'updated', + }, + { + label: 'セキュリティ', + path: 'best-practices/security', + contentPath: 'guide/security', // Have not refactored due to build issues + }, + { + label: 'アクセシビリティ', + path: 'best-practices/a11y', + contentPath: 'best-practices/a11y', + }, + { + label: 'Angularにおける未処理エラー', + path: 'best-practices/error-handling', + contentPath: 'best-practices/error-handling', + }, + { + label: 'パフォーマンス', + preserveOtherCategoryOrder: true, + children: [ + { + label: '概要', + path: 'best-practices/performance', + contentPath: 'best-practices/performance/overview', + }, + + // Loading Performance + { + label: '@deferによる遅延読み込み', + path: 'best-practices/performance/defer', + contentPath: 'guide/templates/defer', + category: 'Loading Performance', + }, + { + label: '画像の最適化', + path: 'best-practices/performance/image-optimization', + contentPath: 'guide/image-optimization', + category: 'Loading Performance', + }, + { + label: 'サーバーサイドレンダリング', + path: 'best-practices/performance/ssr', + contentPath: 'guide/ssr', + category: 'Loading Performance', + }, + + // Runtime Performance + { + label: '概要', + path: 'best-practices/runtime-performance', + contentPath: 'best-practices/runtime-performance/overview', + category: 'Runtime Performance', + }, + { + label: 'Zoneless', + path: 'guide/zoneless', + contentPath: 'guide/zoneless', + category: 'Runtime Performance', + }, + { + label: '遅い計算', + path: 'best-practices/slow-computations', + contentPath: 'best-practices/runtime-performance/slow-computations', + category: 'Runtime Performance', + }, + { + label: 'コンポーネントサブツリーのスキップ', + path: 'best-practices/skipping-subtrees', + contentPath: 'best-practices/runtime-performance/skipping-subtrees', + category: 'Runtime Performance', + }, + { + label: 'ゾーンの汚染', + path: 'best-practices/zone-pollution', + contentPath: 'best-practices/runtime-performance/zone-pollution', + category: 'Runtime Performance', + }, + + { + label: 'Chrome DevToolsでのプロファイリング', + path: 'best-practices/profiling-with-chrome-devtools', + contentPath: 'best-practices/runtime-performance/profiling-with-chrome-devtools', + category: 'Runtime Performance', + }, + ], + }, + { + label: 'アップデートに追従する', + path: 'update', + contentPath: 'best-practices/update', + }, + ], + }, + { + label: '開発者向けイベント', + children: [ + { + label: 'Angular v21 Release', + path: 'events/v21', + contentPath: 'events/v21', + status: 'new', + }, + ], + }, + { + label: '拡張エコシステム', + children: [ + { + label: 'NgModule', + path: 'guide/ngmodules/overview', + contentPath: 'guide/ngmodules/overview', + }, + { + label: 'レガシーアニメーション', + children: [ + { + label: '概要', + path: 'guide/legacy-animations', + contentPath: 'guide/animations/overview', + }, + { + label: 'トランジションとトリガー', + path: 'guide/legacy-animations/transition-and-triggers', + contentPath: 'guide/animations/transition-and-triggers', + }, + { + label: '複雑なシーケンス', + path: 'guide/legacy-animations/complex-sequences', + contentPath: 'guide/animations/complex-sequences', + }, + { + label: '再利用可能なアニメーション', + path: 'guide/legacy-animations/reusable-animations', + contentPath: 'guide/animations/reusable-animations', + }, + { + label: 'ネイティブCSSアニメーションへの移行', + path: 'guide/animations/migration', + contentPath: 'guide/animations/migration', + }, + ], + }, + { + label: 'RxJSとの併用', + children: [ + { + label: 'Signalとの相互運用', + path: 'ecosystem/rxjs-interop', + contentPath: 'ecosystem/rxjs-interop/signals-interop', + }, + { + label: 'コンポーネント出力との相互接続', + path: 'ecosystem/rxjs-interop/output-interop', + contentPath: 'ecosystem/rxjs-interop/output-interop', + }, + { + label: 'takeUntilDestroyedでの購読解除', + path: 'ecosystem/rxjs-interop/take-until-destroyed', + contentPath: 'ecosystem/rxjs-interop/take-until-destroyed', + }, + ], + }, + { + label: 'Service WorkerとPWA', + children: [ + { + label: '概要', + path: 'ecosystem/service-workers', + contentPath: 'ecosystem/service-workers/overview', + }, + { + label: 'はじめに', + path: 'ecosystem/service-workers/getting-started', + contentPath: 'ecosystem/service-workers/getting-started', + }, + { + label: '独自のService Workerスクリプト', + path: 'ecosystem/service-workers/custom-service-worker-scripts', + contentPath: 'ecosystem/service-workers/custom-service-worker-scripts', + }, + { + label: '設定ファイル', + path: 'ecosystem/service-workers/config', + contentPath: 'ecosystem/service-workers/config', + }, + { + label: 'Service Workerとの通信', + path: 'ecosystem/service-workers/communications', + contentPath: 'ecosystem/service-workers/communications', + }, + { + label: 'プッシュ通知', + path: 'ecosystem/service-workers/push-notifications', + contentPath: 'ecosystem/service-workers/push-notifications', + }, + { + label: 'Service WorkerのDevOps', + path: 'ecosystem/service-workers/devops', + contentPath: 'ecosystem/service-workers/devops', + }, + { + label: 'App Shellパターン', + path: 'ecosystem/service-workers/app-shell', + contentPath: 'ecosystem/service-workers/app-shell', + }, + ], + }, + { + label: 'Web Worker', + path: 'ecosystem/web-workers', + contentPath: 'ecosystem/web-workers', + }, + { + label: 'カスタムビルドパイプライン', + path: 'ecosystem/custom-build-pipeline', + contentPath: 'ecosystem/custom-build-pipeline', + }, + { + label: 'Tailwind', + path: 'guide/tailwind', + contentPath: 'guide/tailwind', + status: 'new', + }, + { + label: 'Angular Fire', + path: 'https://github.com/angular/angularfire#readme', + }, + { + label: 'Google Maps', + path: 'https://github.com/angular/components/tree/main/src/google-maps#readme', + }, + { + label: 'Google Pay', + path: 'https://github.com/google-pay/google-pay-button#angular', + }, + { + label: 'YouTubeプレーヤー', + path: 'https://github.com/angular/components/blob/main/src/youtube-player/README.md', + }, + { + label: 'Angular CDK', + path: 'https://material.angular.dev/cdk/categories', + }, + { + label: 'Angular Material', + path: 'https://material.angular.dev/', + }, + ], + }, + ...(isDevMode() + ? [ + { + label: 'Adev Dev Guide', + children: [ + { + label: 'Kitchen Sink', + path: 'kitchen-sink', + contentPath: 'kitchen-sink', + }, + ], + }, + ] + : []), +]; + +export const TUTORIALS_SUB_NAVIGATION_DATA: NavigationItem[] = [ + FIRST_APP_TUTORIAL_NAV_DATA, + LEARN_ANGULAR_TUTORIAL_NAV_DATA, + DEFERRABLE_VIEWS_TUTORIAL_NAV_DATA, + SIGNALS_TUTORIAL_NAV_DATA, + SIGNAL_FORMS_TUTORIAL_NAV_DATA, + { + path: 'tutorials', + contentPath: 'tutorials/home', + label: 'チュートリアル', + }, +]; + +export const REFERENCE_SUB_NAVIGATION_DATA: NavigationItem[] = [ + { + label: 'ロードマップ', + path: 'roadmap', + contentPath: 'reference/roadmap', + }, + { + label: '開発に参加する', + path: 'https://github.com/angular/angular/blob/main/CONTRIBUTING.md', + }, + { + label: 'APIリファレンス', + preserveOtherCategoryOrder: true, + children: [ + { + label: '概要', + path: 'api', + }, + ...getApiNavigationItems(), + ], + }, + { + label: 'CLIリファレンス', + children: [ + { + label: '概要', + path: 'cli', + contentPath: 'reference/cli', + }, + { + label: 'ng add', + path: 'cli/add', + }, + { + label: 'ng analytics', + children: [ + { + label: '概要', + path: 'cli/analytics', + }, + { + label: 'disable', + path: 'cli/analytics/disable', + }, + { + label: 'enable', + path: 'cli/analytics/enable', + }, + { + label: 'info', + path: 'cli/analytics/info', + }, + { + label: 'prompt', + path: 'cli/analytics/prompt', + }, + ], + }, + { + label: 'ng build', + path: 'cli/build', + }, + { + label: 'ng cache', + children: [ + { + label: '概要', + path: 'cli/cache', + }, + { + label: 'clean', + path: 'cli/cache/clean', + }, + { + label: 'disable', + path: 'cli/cache/disable', + }, + { + label: 'enable', + path: 'cli/cache/enable', + }, + { + label: 'info', + path: 'cli/cache/info', + }, + ], + }, + { + label: 'ng completion', + children: [ + { + label: '概要', + path: 'cli/completion', + }, + { + label: 'script', + path: 'cli/completion/script', + }, + ], + }, + { + label: 'ng config', + path: 'cli/config', + }, + { + label: 'ng deploy', + path: 'cli/deploy', + }, + { + label: 'ng e2e', + path: 'cli/e2e', + }, + { + label: 'ng extract-i18n', + path: 'cli/extract-i18n', + }, + { + label: 'ng generate', + children: [ + { + label: '概要', + path: 'cli/generate', + }, + { + label: 'ai-config', + path: 'cli/generate/ai-config', + }, + { + label: 'app-shell', + path: 'cli/generate/app-shell', + }, + { + label: 'application', + path: 'cli/generate/application', + }, + { + label: 'class', + path: 'cli/generate/class', + }, + { + label: 'component', + path: 'cli/generate/component', + }, + { + label: 'config', + path: 'cli/generate/config', + }, + { + label: 'directive', + path: 'cli/generate/directive', + }, + { + label: 'enum', + path: 'cli/generate/enum', + }, + { + label: 'environments', + path: 'cli/generate/environments', + }, + { + label: 'guard', + path: 'cli/generate/guard', + }, + { + label: 'interceptor', + path: 'cli/generate/interceptor', + }, + { + label: 'interface', + path: 'cli/generate/interface', + }, + { + label: 'library', + path: 'cli/generate/library', + }, + { + label: 'module', + path: 'cli/generate/module', + }, + { + label: 'pipe', + path: 'cli/generate/pipe', + }, + { + label: 'resolver', + path: 'cli/generate/resolver', + }, + { + label: 'service-worker', + path: 'cli/generate/service-worker', + }, + { + label: 'service', + path: 'cli/generate/service', + }, + { + label: 'web-worker', + path: 'cli/generate/web-worker', + }, + ], + }, + { + label: 'ng lint', + path: 'cli/lint', + }, + { + label: 'ng new', + path: 'cli/new', + }, + { + label: 'ng run', + path: 'cli/run', + }, + { + label: 'ng serve', + path: 'cli/serve', + }, + { + label: 'ng test', + path: 'cli/test', + }, + { + label: 'ng update', + path: 'cli/update', + }, + { + label: 'ng version', + path: 'cli/version', + }, + ], + }, + { + label: 'エラー百科辞典', + children: [ + { + label: '概要', + path: 'errors', + contentPath: 'reference/errors/overview', + }, + ...ERRORS_NAV_DATA, + ], + }, + { + label: '拡張診断', + children: [ + { + label: '概要', + path: 'extended-diagnostics', + contentPath: 'reference/extended-diagnostics/overview', + }, + ...EXT_DIAGNOSTICS_NAV_DATA, + ], + }, + { + label: 'バージョニングとリリース', + path: 'reference/releases', + contentPath: 'reference/releases', + }, + { + label: 'バージョン互換性', + path: 'reference/versions', + contentPath: 'reference/versions', + }, + { + label: 'アップデートガイド', + path: 'update-guide', + }, + { + label: '設定', + children: [ + { + label: 'ファイル構造', + path: 'reference/configs/file-structure', + contentPath: 'reference/configs/file-structure', + }, + { + label: 'ワークスペース設定', + path: 'reference/configs/workspace-config', + contentPath: 'reference/configs/workspace-config', + }, + { + label: 'Angularコンパイラオプション', + path: 'reference/configs/angular-compiler-options', + contentPath: 'reference/configs/angular-compiler-options', + }, + { + label: 'npmの依存関係', + path: 'reference/configs/npm-packages', + contentPath: 'reference/configs/npm-packages', + }, + ], + }, + { + label: 'マイグレーション', + children: [ + { + label: '概要', + path: 'reference/migrations', + contentPath: 'reference/migrations/overview', + }, + { + label: 'スタンドアロン', + path: 'reference/migrations/standalone', + contentPath: 'reference/migrations/standalone', + }, + { + label: '制御フロー構文', + path: 'reference/migrations/control-flow', + contentPath: 'reference/migrations/control-flow', + }, + { + label: 'inject() 関数', + path: 'reference/migrations/inject-function', + contentPath: 'reference/migrations/inject-function', + }, + { + label: '遅延読み込みルート', + path: 'reference/migrations/route-lazy-loading', + contentPath: 'reference/migrations/route-lazy-loading', + }, + { + label: 'Signal入力', + path: 'reference/migrations/signal-inputs', + contentPath: 'reference/migrations/signal-inputs', + }, + { + label: '出力', + path: 'reference/migrations/outputs', + contentPath: 'reference/migrations/outputs', + }, + { + label: 'Signalクエリ', + path: 'reference/migrations/signal-queries', + contentPath: 'reference/migrations/signal-queries', + }, + { + label: '未使用のインポートのクリーンアップ', + path: 'reference/migrations/cleanup-unused-imports', + contentPath: 'reference/migrations/cleanup-unused-imports', + }, + { + label: '自己閉鎖タグ', + path: 'reference/migrations/self-closing-tags', + contentPath: 'reference/migrations/self-closing-tags', + }, + { + label: 'NgClassからClassへ', + path: 'reference/migrations/ngclass-to-class', + contentPath: 'reference/migrations/ngclass-to-class', + status: 'new', + }, + { + label: 'NgStyleからStyleへ', + path: 'reference/migrations/ngstyle-to-style', + contentPath: 'reference/migrations/ngstyle-to-style', + status: 'new', + }, + { + label: 'Routerテストモジュールのマイグレーション', + path: 'reference/migrations/router-testing-module-migration', + contentPath: 'reference/migrations/router-testing-module-migration', + status: 'new', + }, + { + label: 'CommonModuleからスタンドアロンへ', + path: 'reference/migrations/common-to-standalone', + contentPath: 'reference/migrations/common-to-standalone', + status: 'new', + }, + ], + }, +]; + +export const FOOTER_NAVIGATION_DATA: NavigationItem[] = [ + { + label: 'プレスキット', + path: 'press-kit', + contentPath: 'reference/press-kit', + }, + { + label: 'ライセンス', + path: 'license', + contentPath: 'reference/license', + }, +]; + +export const ALL_ITEMS = [ + ...DOCS_SUB_NAVIGATION_DATA, + ...REFERENCE_SUB_NAVIGATION_DATA, + ...FOOTER_NAVIGATION_DATA, + ...TUTORIALS_SUB_NAVIGATION_DATA, +]; + +function getApiNavigationItems(): NavigationItem[] { + const manifest = API_MANIFEST_JSON as any; // TODO(mri): Use proper type when the refactoring of #66252 gets in. + + const apiNavigationItems: NavigationItem[] = []; + + for (const packageEntry of manifest) { + const packageNavigationItem: NavigationItem = { + label: packageEntry.moduleLabel, + children: packageEntry.entries.map((api: any) => ({ + path: getApiUrl(packageEntry, api.name), + label: api.name, + category: api.category, + })), + }; + + apiNavigationItems.push(packageNavigationItem); + } + + return apiNavigationItems; +} + +function getApiUrl(packageEntry: any, apiName: string): string { + const packageName = packageEntry.normalizedModuleName + // packages like `angular_core` should be `core` + // packages like `angular_animation_browser` should be `animation/browser` + .replace('angular_', '') + .replaceAll('_', '/'); + return `api/${packageName}/${apiName}`; +} diff --git a/adev-ja/src/app/routing/sub-navigation-data.en.ts b/adev-ja/src/app/routing/sub-navigation-data.en.ts index 2ebf4da2c0..43f27a2578 100644 --- a/adev-ja/src/app/routing/sub-navigation-data.en.ts +++ b/adev-ja/src/app/routing/sub-navigation-data.en.ts @@ -6,20 +6,14 @@ * found in the LICENSE file at https://angular.dev/license */ -import {isDevMode} from '@angular/core'; import {NavigationItem} from '@angular/docs'; -// These imports are expected to be red because they are generated a build time -import FIRST_APP_TUTORIAL_NAV_DATA from '../../../src/assets/tutorials/first-app/routes.json'; -import LEARN_ANGULAR_TUTORIAL_NAV_DATA from '../../../src/assets/tutorials/learn-angular/routes.json'; -import DEFERRABLE_VIEWS_TUTORIAL_NAV_DATA from '../../../src/assets/tutorials/deferrable-views/routes.json'; -import SIGNALS_TUTORIAL_NAV_DATA from '../../../src/assets/tutorials/signals/routes.json'; -import SIGNAL_FORMS_TUTORIAL_NAV_DATA from '../../../src/assets/tutorials/signal-forms/routes.json'; -import ERRORS_NAV_DATA from '../../../src/assets/content/reference/errors/routes.json'; -import EXT_DIAGNOSTICS_NAV_DATA from '../../../src/assets/content/reference/extended-diagnostics/routes.json'; - -import {getApiNavigationItems} from '../features/references/helpers/manifest.helper'; -import {DEFAULT_PAGES} from '../core/constants/pages'; +import { + DOCS_SUB_NAVIGATION_DATA, + FOOTER_NAVIGATION_DATA, + REFERENCE_SUB_NAVIGATION_DATA, + TUTORIALS_SUB_NAVIGATION_DATA, +} from './navigation-entries'; interface SubNavigationData { docs: NavigationItem[]; @@ -28,1613 +22,6 @@ interface SubNavigationData { footer: NavigationItem[]; } -const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [ - { - label: 'Introduction', - children: [ - { - label: 'What is Angular?', - path: 'overview', - contentPath: 'introduction/what-is-angular', - }, - { - label: 'Installation', - path: 'installation', - contentPath: 'introduction/installation', - }, - { - label: 'Essentials', - children: [ - { - label: 'Overview', - path: 'essentials', - contentPath: 'introduction/essentials/overview', - }, - { - label: 'Composition with components', - path: 'essentials/components', - contentPath: 'introduction/essentials/components', - }, - { - label: 'Reactivity with signals', - path: 'essentials/signals', - contentPath: 'introduction/essentials/signals', - }, - { - label: 'Dynamic interfaces with templates', - path: 'essentials/templates', - contentPath: 'introduction/essentials/templates', - }, - { - label: 'Forms with signals', - path: 'essentials/signal-forms', - contentPath: 'introduction/essentials/signal-forms', - status: 'new', - }, - { - label: 'Modular design with dependency injection', - path: 'essentials/dependency-injection', - contentPath: 'introduction/essentials/dependency-injection', - }, - { - label: 'Next Steps', - path: 'essentials/next-steps', - contentPath: 'introduction/essentials/next-steps', - }, - ], - }, - { - label: 'Start coding! 🚀', - path: 'tutorials/learn-angular', - }, - ], - }, - { - label: 'In-depth Guides', - children: [ - { - label: 'Signals', - status: 'updated', - children: [ - { - label: 'Overview', - path: 'guide/signals', - contentPath: 'guide/signals/overview', - }, - { - label: 'Dependent state with linkedSignal', - path: 'guide/signals/linked-signal', - contentPath: 'guide/signals/linked-signal', - }, - { - label: 'Async reactivity with resources', - path: 'guide/signals/resource', - contentPath: 'guide/signals/resource', - }, - { - label: 'Side effects for non-reactives APIs', - path: 'guide/signals/effect', - contentPath: 'guide/signals/effect', - status: 'new', - }, - ], - }, - { - label: 'Components', - children: [ - { - label: 'Anatomy of components', - path: 'guide/components', - contentPath: 'guide/components/anatomy-of-components', - }, - { - label: 'Selectors', - path: 'guide/components/selectors', - contentPath: 'guide/components/selectors', - }, - { - label: 'Styling', - path: 'guide/components/styling', - contentPath: 'guide/components/styling', - }, - { - label: 'Accepting data with input properties', - path: 'guide/components/inputs', - contentPath: 'guide/components/inputs', - }, - { - label: 'Custom events with outputs', - path: 'guide/components/outputs', - contentPath: 'guide/components/outputs', - }, - { - label: 'Content projection with ng-content', - path: 'guide/components/content-projection', - contentPath: 'guide/components/content-projection', - }, - { - label: 'Host elements', - path: 'guide/components/host-elements', - contentPath: 'guide/components/host-elements', - }, - { - label: 'Lifecycle', - path: 'guide/components/lifecycle', - contentPath: 'guide/components/lifecycle', - }, - { - label: 'Referencing component children with queries', - path: 'guide/components/queries', - contentPath: 'guide/components/queries', - }, - { - label: 'Using DOM APIs', - path: 'guide/components/dom-apis', - contentPath: 'guide/components/dom-apis', - }, - { - label: 'Inheritance', - path: 'guide/components/inheritance', - contentPath: 'guide/components/inheritance', - }, - { - label: 'Programmatically rendering components', - path: 'guide/components/programmatic-rendering', - contentPath: 'guide/components/programmatic-rendering', - }, - { - label: 'Advanced configuration', - path: 'guide/components/advanced-configuration', - contentPath: 'guide/components/advanced-configuration', - }, - { - label: 'Custom Elements', - path: 'guide/elements', - contentPath: 'guide/elements', - }, - ], - }, - { - label: 'Templates', - children: [ - { - label: 'Overview', - path: 'guide/templates', - contentPath: 'guide/templates/overview', - }, - { - label: 'Binding dynamic text, properties and attributes', - path: 'guide/templates/binding', - contentPath: 'guide/templates/binding', - }, - { - label: 'Adding event listeners', - path: 'guide/templates/event-listeners', - contentPath: 'guide/templates/event-listeners', - }, - { - label: 'Two-way binding', - path: 'guide/templates/two-way-binding', - contentPath: 'guide/templates/two-way-binding', - }, - { - label: 'Control flow', - path: 'guide/templates/control-flow', - contentPath: 'guide/templates/control-flow', - }, - { - label: 'Pipes', - path: 'guide/templates/pipes', - contentPath: 'guide/templates/pipes', - }, - { - label: 'Slotting child content with ng-content', - path: 'guide/templates/ng-content', - contentPath: 'guide/templates/ng-content', - }, - { - label: 'Create template fragments with ng-template', - path: 'guide/templates/ng-template', - contentPath: 'guide/templates/ng-template', - }, - { - label: 'Grouping elements with ng-container', - path: 'guide/templates/ng-container', - contentPath: 'guide/templates/ng-container', - }, - { - label: 'Variables in templates', - path: 'guide/templates/variables', - contentPath: 'guide/templates/variables', - }, - { - label: 'Deferred loading with @defer', - path: 'guide/templates/defer', - contentPath: 'guide/templates/defer', - }, - { - label: 'Expression syntax', - path: 'guide/templates/expression-syntax', - contentPath: 'guide/templates/expression-syntax', - }, - { - label: 'Whitespace in templates', - path: 'guide/templates/whitespace', - contentPath: 'guide/templates/whitespace', - }, - ], - }, - { - label: 'Directives', - children: [ - { - label: 'Overview', - path: 'guide/directives', - contentPath: 'guide/directives/overview', - }, - { - label: 'Attribute directives', - path: 'guide/directives/attribute-directives', - contentPath: 'guide/directives/attribute-directives', - }, - { - label: 'Structural directives', - path: 'guide/directives/structural-directives', - contentPath: 'guide/directives/structural-directives', - }, - { - label: 'Directive composition API', - path: 'guide/directives/directive-composition-api', - contentPath: 'guide/directives/directive-composition-api', - }, - { - label: 'Optimizing images with NgOptimizedImage', - path: 'guide/image-optimization', - contentPath: 'guide/image-optimization', - }, - ], - }, - { - label: 'Dependency Injection', - status: 'updated', - children: [ - { - label: 'Overview', - path: 'guide/di', - contentPath: 'guide/di/overview', - status: 'updated', - }, - { - label: 'Creating and using services', - path: 'guide/di/creating-and-using-services', - contentPath: 'guide/di/creating-and-using-services', - status: 'updated', - }, - { - label: 'Defining dependency providers', - path: 'guide/di/defining-dependency-providers', - contentPath: 'guide/di/defining-dependency-providers', - status: 'updated', - }, - { - label: 'Injection context', - path: 'guide/di/dependency-injection-context', - contentPath: 'guide/di/dependency-injection-context', - }, - { - label: 'Hierarchical injectors', - path: 'guide/di/hierarchical-dependency-injection', - contentPath: 'guide/di/hierarchical-dependency-injection', - }, - { - label: 'Optimizing injection tokens', - path: 'guide/di/lightweight-injection-tokens', - contentPath: 'guide/di/lightweight-injection-tokens', - }, - { - label: 'DI in action', - path: 'guide/di/di-in-action', - contentPath: 'guide/di/di-in-action', - }, - ], - }, - { - label: 'Routing', - status: 'updated', - children: [ - { - label: 'Overview', - path: 'guide/routing', - contentPath: 'guide/routing/overview', - }, - { - label: 'Define routes', - path: 'guide/routing/define-routes', - contentPath: 'guide/routing/define-routes', - }, - { - label: 'Show routes with Outlets', - path: 'guide/routing/show-routes-with-outlets', - contentPath: 'guide/routing/show-routes-with-outlets', - }, - { - label: 'Navigate to routes', - path: 'guide/routing/navigate-to-routes', - contentPath: 'guide/routing/navigate-to-routes', - }, - { - label: 'Read route state', - path: 'guide/routing/read-route-state', - contentPath: 'guide/routing/read-route-state', - }, - { - label: 'Redirecting routes', - path: 'guide/routing/redirecting-routes', - contentPath: 'guide/routing/redirecting-routes', - }, - { - label: 'Control route access with guards', - path: 'guide/routing/route-guards', - contentPath: 'guide/routing/route-guards', - }, - { - label: 'Route data resolvers', - path: 'guide/routing/data-resolvers', - contentPath: 'guide/routing/data-resolvers', - }, - { - label: 'Lifecycle and events', - path: 'guide/routing/lifecycle-and-events', - contentPath: 'guide/routing/lifecycle-and-events', - }, - { - label: 'Testing routing and navigation', - path: 'guide/routing/testing', - contentPath: 'guide/routing/testing', - status: 'new', - }, - { - label: 'Other routing tasks', - path: 'guide/routing/common-router-tasks', - contentPath: 'guide/routing/common-router-tasks', - }, - { - label: 'Creating custom route matches', - path: 'guide/routing/routing-with-urlmatcher', - contentPath: 'guide/routing/routing-with-urlmatcher', - }, - { - label: 'Rendering strategies', - path: 'guide/routing/rendering-strategies', - contentPath: 'guide/routing/rendering-strategies', - status: 'new', - }, - { - label: 'Customizing route behavior', - path: 'guide/routing/customizing-route-behavior', - contentPath: 'guide/routing/customizing-route-behavior', - status: 'new', - }, - { - label: 'Router reference', - path: 'guide/routing/router-reference', - contentPath: 'guide/routing/router-reference', - }, - { - label: 'Route transition animations', - path: 'guide/routing/route-transition-animations', - contentPath: 'guide/routing/route-transition-animations', - }, - ], - }, - { - label: 'Forms', - status: 'updated', - children: [ - { - label: 'Overview', - path: 'guide/forms', - contentPath: 'guide/forms/overview', - }, - { - label: 'Signal forms', - status: 'new', - children: [ - { - label: 'Overview', - path: 'guide/forms/signals/overview', - contentPath: 'guide/forms/signals/overview', - }, - { - label: 'Form models', - path: 'guide/forms/signals/models', - contentPath: 'guide/forms/signals/models', - }, - { - label: 'Form model design', - path: 'guide/forms/signals/model-design', - contentPath: 'guide/forms/signals/designing-your-form-model', - }, - { - label: 'Field state management', - path: 'guide/forms/signals/field-state-management', - contentPath: 'guide/forms/signals/field-state-management', - }, - { - label: 'Validation', - path: 'guide/forms/signals/validation', - contentPath: 'guide/forms/signals/validation', - }, - { - label: 'Custom controls', - path: 'guide/forms/signals/custom-controls', - contentPath: 'guide/forms/signals/custom-controls', - }, - { - label: 'Comparison with other form systems', - path: 'guide/forms/signals/comparison', - contentPath: 'guide/forms/signals/comparison', - }, - { - label: 'Migrating from Legacy Forms', - path: 'guide/forms/signals/migration', - contentPath: 'guide/forms/signals/migration', - }, - ], - }, - { - label: 'Reactive forms', - path: 'guide/forms/reactive-forms', - contentPath: 'guide/forms/reactive-forms', - }, - { - label: 'Strictly typed reactive forms', - path: 'guide/forms/typed-forms', - contentPath: 'guide/forms/typed-forms', - }, - { - label: 'Template-driven forms', - path: 'guide/forms/template-driven-forms', - contentPath: 'guide/forms/template-driven-forms', - }, - { - label: 'Validate form input', - path: 'guide/forms/form-validation', - contentPath: 'guide/forms/form-validation', - }, - { - label: 'Building dynamic forms', - path: 'guide/forms/dynamic-forms', - contentPath: 'guide/forms/dynamic-forms', - }, - ], - }, - { - label: 'HTTP Client', - children: [ - { - label: 'Overview', - path: 'guide/http', - contentPath: 'guide/http/overview', - }, - { - label: 'Setting up HttpClient', - path: 'guide/http/setup', - contentPath: 'guide/http/setup', - }, - { - label: 'Making requests', - path: 'guide/http/making-requests', - contentPath: 'guide/http/making-requests', - }, - { - label: 'Reactive data fetching with httpResource', - path: 'guide/http/http-resource', - contentPath: 'guide/http/http-resource', - }, - { - label: 'Intercepting requests and responses', - path: 'guide/http/interceptors', - contentPath: 'guide/http/interceptors', - }, - { - label: 'Testing', - path: 'guide/http/testing', - contentPath: 'guide/http/testing', - }, - ], - }, - { - label: 'Server-side & hybrid-rendering', - children: [ - { - label: 'Overview', - path: 'guide/performance', - contentPath: 'guide/performance/overview', - }, - { - label: 'Server-side and hybrid-rendering', - path: 'guide/ssr', - contentPath: 'guide/ssr', - }, - { - label: 'Hydration', - path: 'guide/hydration', - contentPath: 'guide/hydration', - }, - { - label: 'Incremental Hydration', - path: 'guide/incremental-hydration', - contentPath: 'guide/incremental-hydration', - }, - ], - }, - { - label: 'Testing', - children: [ - { - label: 'Overview', - path: 'guide/testing', - contentPath: 'guide/testing/overview', - }, - { - label: 'Basics of testing components', - path: 'guide/testing/components-basics', - contentPath: 'guide/testing/components-basics', - }, - { - label: 'Component testing scenarios', - path: 'guide/testing/components-scenarios', - contentPath: 'guide/testing/components-scenarios', - }, - { - label: 'Testing services', - path: 'guide/testing/services', - contentPath: 'guide/testing/services', - }, - { - label: 'Testing attribute directives', - path: 'guide/testing/attribute-directives', - contentPath: 'guide/testing/attribute-directives', - }, - { - label: 'Testing pipes', - path: 'guide/testing/pipes', - contentPath: 'guide/testing/pipes', - }, - { - label: 'Testing routing and navigation', - path: 'guide/routing/testing', - contentPath: 'guide/routing/testing', - status: 'new', - }, - { - label: 'Debugging tests', - path: 'guide/testing/debugging', - contentPath: 'guide/testing/debugging', - }, - { - label: 'Code coverage', - path: 'guide/testing/code-coverage', - contentPath: 'guide/testing/code-coverage', - }, - { - label: 'Testing utility APIs', - path: 'guide/testing/utility-apis', - contentPath: 'guide/testing/utility-apis', - }, - { - label: 'Component harnesses overview', - path: 'guide/testing/component-harnesses-overview', - contentPath: 'guide/testing/component-harnesses-overview', - }, - { - label: 'Using component harnesses in tests', - path: 'guide/testing/using-component-harnesses', - contentPath: 'guide/testing/using-component-harnesses', - }, - { - label: 'Creating harnesses for your components', - path: 'guide/testing/creating-component-harnesses', - contentPath: 'guide/testing/creating-component-harnesses', - }, - { - label: 'Adding harness support for additional testing environments', - path: 'guide/testing/component-harnesses-testing-environments', - contentPath: 'guide/testing/component-harnesses-testing-environments', - }, - { - label: 'Migrating from Karma to Vitest', - path: 'guide/testing/migrating-to-vitest', - contentPath: 'guide/testing/migrating-to-vitest', - }, - { - label: 'Testing with Karma and Jasmine', - path: 'guide/testing/karma', - contentPath: 'guide/testing/karma', - }, - { - label: 'Zone.js Testing Utilities', - path: 'guide/testing/zone-js-testing-utilities', - contentPath: 'guide/testing/zone-js-testing-utilities', - }, - ], - }, - { - label: 'Angular Aria', - status: 'new', - children: [ - { - label: 'Overview', - path: 'guide/aria/overview', - contentPath: 'guide/aria/overview', - }, - { - label: 'Accordion', - path: 'guide/aria/accordion', - contentPath: 'guide/aria/accordion', - }, - { - label: 'Autocomplete', - path: 'guide/aria/autocomplete', - contentPath: 'guide/aria/autocomplete', - }, - { - label: 'Combobox', - path: 'guide/aria/combobox', - contentPath: 'guide/aria/combobox', - }, - { - label: 'Grid', - path: 'guide/aria/grid', - contentPath: 'guide/aria/grid', - }, - { - label: 'Listbox', - path: 'guide/aria/listbox', - contentPath: 'guide/aria/listbox', - }, - { - label: 'Menu', - path: 'guide/aria/menu', - contentPath: 'guide/aria/menu', - }, - { - label: 'Menubar', - path: 'guide/aria/menubar', - contentPath: 'guide/aria/menubar', - }, - { - label: 'Multiselect', - path: 'guide/aria/multiselect', - contentPath: 'guide/aria/multiselect', - }, - { - label: 'Select', - path: 'guide/aria/select', - contentPath: 'guide/aria/select', - }, - { - label: 'Tabs', - path: 'guide/aria/tabs', - contentPath: 'guide/aria/tabs', - }, - { - label: 'Toolbar', - path: 'guide/aria/toolbar', - contentPath: 'guide/aria/toolbar', - }, - { - label: 'Tree', - path: 'guide/aria/tree', - contentPath: 'guide/aria/tree', - }, - ], - }, - { - label: 'Internationalization', - children: [ - { - label: 'Overview', - path: 'guide/i18n', - contentPath: 'guide/i18n/overview', - }, - { - label: 'Add the localize package', - path: 'guide/i18n/add-package', - contentPath: 'guide/i18n/add-package', - }, - { - label: 'Refer to locales by ID', - path: 'guide/i18n/locale-id', - contentPath: 'guide/i18n/locale-id', - }, - { - label: 'Format data based on locale', - path: 'guide/i18n/format-data-locale', - contentPath: 'guide/i18n/format-data-locale', - }, - { - label: 'Prepare component for translation', - path: 'guide/i18n/prepare', - contentPath: 'guide/i18n/prepare', - }, - { - label: 'Work with translation files', - path: 'guide/i18n/translation-files', - contentPath: 'guide/i18n/translation-files', - }, - { - label: 'Merge translations into the app', - path: 'guide/i18n/merge', - contentPath: 'guide/i18n/merge', - }, - { - label: 'Deploy multiple locales', - path: 'guide/i18n/deploy', - contentPath: 'guide/i18n/deploy', - }, - { - label: 'Import global variants of the locale data', - path: 'guide/i18n/import-global-variants', - contentPath: 'guide/i18n/import-global-variants', - }, - { - label: 'Manage marked text with custom IDs', - path: 'guide/i18n/manage-marked-text', - contentPath: 'guide/i18n/manage-marked-text', - }, - { - label: 'Example Angular application', - path: 'guide/i18n/example', - contentPath: 'guide/i18n/example', - }, - ], - }, - { - label: 'Animations', - status: 'updated', - children: [ - { - label: 'Enter and Leave animations', - path: 'guide/animations', - contentPath: 'guide/animations/enter-and-leave', - status: 'new', - }, - { - label: 'Complex Animations with CSS', - path: 'guide/animations/css', - contentPath: 'guide/animations/css', - }, - { - label: 'Route transition animations', - path: 'guide/routing/route-transition-animations', - contentPath: 'guide/routing/route-transition-animations', - }, - ], - }, - { - label: 'Drag and drop', - path: 'guide/drag-drop', - contentPath: 'guide/drag-drop', - }, - ], - }, - { - label: 'Build with AI', - status: 'new', - children: [ - { - label: 'Get Started', - path: 'ai', - contentPath: 'ai/overview', - }, - { - label: 'LLM prompts and AI IDE setup', - path: 'ai/develop-with-ai', - contentPath: 'ai/develop-with-ai', - }, - { - label: 'Design Patterns', - path: 'ai/design-patterns', - contentPath: 'ai/design-patterns', - }, - { - label: 'Angular CLI MCP Server setup', - path: 'ai/mcp', - contentPath: 'ai/mcp-server-setup', - }, - { - label: 'Angular AI Tutor', - path: 'ai/ai-tutor', - contentPath: 'ai/ai-tutor', - }, - ], - }, - { - label: 'Developer Tools', - children: [ - { - label: 'Angular CLI', - children: [ - { - label: 'Overview', - path: 'tools/cli', - contentPath: 'tools/cli/overview', - }, - { - label: 'Local set-up', - path: 'tools/cli/setup-local', - contentPath: 'tools/cli/setup-local', - }, - { - label: 'Building Angular apps', - path: 'tools/cli/build', - contentPath: 'tools/cli/build', - }, - { - label: 'Serving Angular apps for development', - path: 'tools/cli/serve', - contentPath: 'tools/cli/serve', - }, - { - label: 'Deployment', - path: 'tools/cli/deployment', - contentPath: 'tools/cli/deployment', - }, - { - label: 'End-to-End Testing', - path: 'tools/cli/end-to-end', - contentPath: 'tools/cli/end-to-end', - }, - { - label: 'Migrating to new build system', - path: 'tools/cli/build-system-migration', - contentPath: 'tools/cli/build-system-migration', - }, - { - label: 'Build environments', - path: 'tools/cli/environments', - contentPath: 'tools/cli/environments', - }, - { - label: 'Angular CLI builders', - path: 'tools/cli/cli-builder', - contentPath: 'tools/cli/cli-builder', - }, - { - label: 'Generating code using schematics', - path: 'tools/cli/schematics', - contentPath: 'tools/cli/schematics', - }, - { - label: 'Authoring schematics', - path: 'tools/cli/schematics-authoring', - contentPath: 'tools/cli/schematics-authoring', - }, - { - label: 'Schematics for libraries', - path: 'tools/cli/schematics-for-libraries', - contentPath: 'tools/cli/schematics-for-libraries', - }, - { - label: 'Template type checking', - path: 'tools/cli/template-typecheck', - contentPath: 'tools/cli/template-typecheck', - }, - { - label: 'Ahead-of-time (AOT) compilation', - path: 'tools/cli/aot-compiler', - contentPath: 'tools/cli/aot-compiler', - }, - { - label: 'AOT metadata errors', - path: 'tools/cli/aot-metadata-errors', - contentPath: 'tools/cli/aot-metadata-errors', - }, - ], - }, - { - label: 'Libraries', - children: [ - { - label: 'Overview', - path: 'tools/libraries', - contentPath: 'tools/libraries/overview', - }, - { - label: 'Creating Libraries', - path: 'tools/libraries/creating-libraries', - contentPath: 'tools/libraries/creating-libraries', - }, - { - label: 'Using Libraries', - path: 'tools/libraries/using-libraries', - contentPath: 'tools/libraries/using-libraries', - }, - { - label: 'Angular Package Format', - path: 'tools/libraries/angular-package-format', - contentPath: 'tools/libraries/angular-package-format', - }, - ], - }, - { - label: 'DevTools', - children: [ - { - label: 'Overview', - path: 'tools/devtools', - contentPath: 'tools/devtools/overview', - }, - { - label: 'Components', - path: 'tools/devtools/component', - contentPath: 'tools/devtools/component', - }, - { - label: 'Profiler', - path: 'tools/devtools/profiler', - contentPath: 'tools/devtools/profiler', - }, - { - label: 'Injectors', - path: 'tools/devtools/injectors', - contentPath: 'tools/devtools/injectors', - }, - // TODO: create those guides - // The signal debugging docs should also be added to the signal section - // { - // label: 'Signals', - // path: 'tools/devtools/signals', - // contentPath: 'tools/devtools/signals', - // }, - // { - // label: 'Router', - // path: 'tools/devtools/router', - // contentPath: 'tools/devtools/router', - // } - ], - }, - { - label: 'Language Service', - path: 'tools/language-service', - contentPath: 'tools/language-service', - }, - ], - }, - { - label: 'Best Practices', - children: [ - { - label: 'Style Guide', - path: 'style-guide', - contentPath: 'best-practices/style-guide', - status: 'updated', - }, - { - label: 'Security', - path: 'best-practices/security', - contentPath: 'guide/security', // Have not refactored due to build issues - }, - { - label: 'Accessibility', - path: 'best-practices/a11y', - contentPath: 'best-practices/a11y', - }, - { - label: 'Unhandled errors in Angular', - path: 'best-practices/error-handling', - contentPath: 'best-practices/error-handling', - }, - { - label: 'Performance', - children: [ - { - label: 'Overview', - path: 'best-practices/runtime-performance', - contentPath: 'best-practices/runtime-performance/overview', - }, - { - label: 'Zone pollution', - path: 'best-practices/zone-pollution', - contentPath: 'best-practices/runtime-performance/zone-pollution', - }, - { - label: 'Slow computations', - path: 'best-practices/slow-computations', - contentPath: 'best-practices/runtime-performance/slow-computations', - }, - { - label: 'Skipping component subtrees', - path: 'best-practices/skipping-subtrees', - contentPath: 'best-practices/runtime-performance/skipping-subtrees', - }, - { - label: 'Profiling with the Chrome DevTools', - path: 'best-practices/profiling-with-chrome-devtools', - contentPath: 'best-practices/runtime-performance/profiling-with-chrome-devtools', - }, - {label: 'Zoneless', path: 'guide/zoneless', contentPath: 'guide/zoneless'}, - ], - }, - { - label: 'Keeping up-to-date', - path: 'update', - contentPath: 'best-practices/update', - }, - ], - }, - { - label: 'Developer Events', - children: [ - { - label: 'Angular v21 Release', - path: 'events/v21', - contentPath: 'events/v21', - status: 'new', - }, - ], - }, - { - label: 'Extended Ecosystem', - children: [ - { - label: 'NgModules', - path: 'guide/ngmodules/overview', - contentPath: 'guide/ngmodules/overview', - }, - { - label: 'Legacy Animations', - children: [ - { - label: 'Overview', - path: 'guide/legacy-animations', - contentPath: 'guide/animations/overview', - }, - { - label: 'Transition and Triggers', - path: 'guide/legacy-animations/transition-and-triggers', - contentPath: 'guide/animations/transition-and-triggers', - }, - { - label: 'Complex Sequences', - path: 'guide/legacy-animations/complex-sequences', - contentPath: 'guide/animations/complex-sequences', - }, - { - label: 'Reusable Animations', - path: 'guide/legacy-animations/reusable-animations', - contentPath: 'guide/animations/reusable-animations', - }, - { - label: 'Migrating to Native CSS Animations', - path: 'guide/animations/migration', - contentPath: 'guide/animations/migration', - }, - ], - }, - { - label: 'Using RxJS with Angular', - children: [ - { - label: 'Signals interop', - path: 'ecosystem/rxjs-interop', - contentPath: 'ecosystem/rxjs-interop/signals-interop', - }, - { - label: 'Component output interop', - path: 'ecosystem/rxjs-interop/output-interop', - contentPath: 'ecosystem/rxjs-interop/output-interop', - }, - { - label: 'Unsubscribing with takeUntilDestroyed', - path: 'ecosystem/rxjs-interop/take-until-destroyed', - contentPath: 'ecosystem/rxjs-interop/take-until-destroyed', - }, - ], - }, - { - label: 'Service Workers & PWAs', - children: [ - { - label: 'Overview', - path: 'ecosystem/service-workers', - contentPath: 'ecosystem/service-workers/overview', - }, - { - label: 'Getting started', - path: 'ecosystem/service-workers/getting-started', - contentPath: 'ecosystem/service-workers/getting-started', - }, - { - label: 'Custom service worker scripts', - path: 'ecosystem/service-workers/custom-service-worker-scripts', - contentPath: 'ecosystem/service-workers/custom-service-worker-scripts', - }, - { - label: 'Configuration file', - path: 'ecosystem/service-workers/config', - contentPath: 'ecosystem/service-workers/config', - }, - { - label: 'Communicating with the service worker', - path: 'ecosystem/service-workers/communications', - contentPath: 'ecosystem/service-workers/communications', - }, - { - label: 'Push notifications', - path: 'ecosystem/service-workers/push-notifications', - contentPath: 'ecosystem/service-workers/push-notifications', - }, - { - label: 'Service worker devops', - path: 'ecosystem/service-workers/devops', - contentPath: 'ecosystem/service-workers/devops', - }, - { - label: 'App shell pattern', - path: 'ecosystem/service-workers/app-shell', - contentPath: 'ecosystem/service-workers/app-shell', - }, - ], - }, - { - label: 'Web workers', - path: 'ecosystem/web-workers', - contentPath: 'ecosystem/web-workers', - }, - { - label: 'Custom build pipeline', - path: 'ecosystem/custom-build-pipeline', - contentPath: 'ecosystem/custom-build-pipeline', - }, - { - label: 'Tailwind', - path: 'guide/tailwind', - contentPath: 'guide/tailwind', - status: 'new', - }, - { - label: 'Angular Fire', - path: 'https://github.com/angular/angularfire#readme', - }, - { - label: 'Google Maps', - path: 'https://github.com/angular/components/tree/main/src/google-maps#readme', - }, - { - label: 'Google Pay', - path: 'https://github.com/google-pay/google-pay-button#angular', - }, - { - label: 'YouTube player', - path: 'https://github.com/angular/components/blob/main/src/youtube-player/README.md', - }, - { - label: 'Angular CDK', - path: 'https://material.angular.dev/cdk/categories', - }, - { - label: 'Angular Material', - path: 'https://material.angular.dev/', - }, - ], - }, - ...(isDevMode() - ? [ - { - label: 'Adev Dev Guide', - children: [ - { - label: 'Kitchen Sink', - path: 'kitchen-sink', - contentPath: 'kitchen-sink', - }, - ], - }, - ] - : []), -]; - -export const TUTORIALS_SUB_NAVIGATION_DATA: NavigationItem[] = [ - FIRST_APP_TUTORIAL_NAV_DATA, - LEARN_ANGULAR_TUTORIAL_NAV_DATA, - DEFERRABLE_VIEWS_TUTORIAL_NAV_DATA, - SIGNALS_TUTORIAL_NAV_DATA, - SIGNAL_FORMS_TUTORIAL_NAV_DATA, - { - path: DEFAULT_PAGES.TUTORIALS, - contentPath: 'tutorials/home', - label: 'Tutorials', - }, -]; - -const REFERENCE_SUB_NAVIGATION_DATA: NavigationItem[] = [ - { - label: 'Roadmap', - path: 'roadmap', - contentPath: 'reference/roadmap', - }, - { - label: 'Get involved', - path: 'https://github.com/angular/angular/blob/main/CONTRIBUTING.md', - }, - { - label: 'API Reference', - children: [ - { - label: 'Overview', - path: 'api', - }, - ...getApiNavigationItems(), - ], - }, - { - label: 'CLI Reference', - children: [ - { - label: 'Overview', - path: 'cli', - contentPath: 'reference/cli', - }, - { - label: 'ng add', - path: 'cli/add', - }, - { - label: 'ng analytics', - children: [ - { - label: 'Overview', - path: 'cli/analytics', - }, - { - label: 'disable', - path: 'cli/analytics/disable', - }, - { - label: 'enable', - path: 'cli/analytics/enable', - }, - { - label: 'info', - path: 'cli/analytics/info', - }, - { - label: 'prompt', - path: 'cli/analytics/prompt', - }, - ], - }, - { - label: 'ng build', - path: 'cli/build', - }, - { - label: 'ng cache', - children: [ - { - label: 'Overview', - path: 'cli/cache', - }, - { - label: 'clean', - path: 'cli/cache/clean', - }, - { - label: 'disable', - path: 'cli/cache/disable', - }, - { - label: 'enable', - path: 'cli/cache/enable', - }, - { - label: 'info', - path: 'cli/cache/info', - }, - ], - }, - { - label: 'ng completion', - children: [ - { - label: 'Overview', - path: 'cli/completion', - }, - { - label: 'script', - path: 'cli/completion/script', - }, - ], - }, - { - label: 'ng config', - path: 'cli/config', - }, - { - label: 'ng deploy', - path: 'cli/deploy', - }, - { - label: 'ng e2e', - path: 'cli/e2e', - }, - { - label: 'ng extract-i18n', - path: 'cli/extract-i18n', - }, - { - label: 'ng generate', - children: [ - { - label: 'Overview', - path: 'cli/generate', - }, - { - label: 'ai-config', - path: 'cli/generate/ai-config', - }, - { - label: 'app-shell', - path: 'cli/generate/app-shell', - }, - { - label: 'application', - path: 'cli/generate/application', - }, - { - label: 'class', - path: 'cli/generate/class', - }, - { - label: 'component', - path: 'cli/generate/component', - }, - { - label: 'config', - path: 'cli/generate/config', - }, - { - label: 'directive', - path: 'cli/generate/directive', - }, - { - label: 'enum', - path: 'cli/generate/enum', - }, - { - label: 'environments', - path: 'cli/generate/environments', - }, - { - label: 'guard', - path: 'cli/generate/guard', - }, - { - label: 'interceptor', - path: 'cli/generate/interceptor', - }, - { - label: 'interface', - path: 'cli/generate/interface', - }, - { - label: 'library', - path: 'cli/generate/library', - }, - { - label: 'module', - path: 'cli/generate/module', - }, - { - label: 'pipe', - path: 'cli/generate/pipe', - }, - { - label: 'resolver', - path: 'cli/generate/resolver', - }, - { - label: 'service-worker', - path: 'cli/generate/service-worker', - }, - { - label: 'service', - path: 'cli/generate/service', - }, - { - label: 'web-worker', - path: 'cli/generate/web-worker', - }, - ], - }, - { - label: 'ng lint', - path: 'cli/lint', - }, - { - label: 'ng new', - path: 'cli/new', - }, - { - label: 'ng run', - path: 'cli/run', - }, - { - label: 'ng serve', - path: 'cli/serve', - }, - { - label: 'ng test', - path: 'cli/test', - }, - { - label: 'ng update', - path: 'cli/update', - }, - { - label: 'ng version', - path: 'cli/version', - }, - ], - }, - { - label: 'Error Encyclopedia', - children: [ - { - label: 'Overview', - path: 'errors', - contentPath: 'reference/errors/overview', - }, - ...ERRORS_NAV_DATA, - ], - }, - { - label: 'Extended Diagnostics', - children: [ - { - label: 'Overview', - path: 'extended-diagnostics', - contentPath: 'reference/extended-diagnostics/overview', - }, - ...EXT_DIAGNOSTICS_NAV_DATA, - ], - }, - { - label: 'Versioning and releases', - path: 'reference/releases', - contentPath: 'reference/releases', - }, - { - label: 'Version compatibility', - path: 'reference/versions', - contentPath: 'reference/versions', - }, - { - label: 'Update guide', - path: 'update-guide', - }, - { - label: 'Configurations', - children: [ - { - label: 'File structure', - path: 'reference/configs/file-structure', - contentPath: 'reference/configs/file-structure', - }, - { - label: 'Workspace configuration', - path: 'reference/configs/workspace-config', - contentPath: 'reference/configs/workspace-config', - }, - { - label: 'Angular compiler options', - path: 'reference/configs/angular-compiler-options', - contentPath: 'reference/configs/angular-compiler-options', - }, - { - label: 'npm dependencies', - path: 'reference/configs/npm-packages', - contentPath: 'reference/configs/npm-packages', - }, - ], - }, - { - label: 'Migrations', - children: [ - { - label: 'Overview', - path: 'reference/migrations', - contentPath: 'reference/migrations/overview', - }, - { - label: 'Standalone', - path: 'reference/migrations/standalone', - contentPath: 'reference/migrations/standalone', - }, - { - label: 'Control Flow Syntax', - path: 'reference/migrations/control-flow', - contentPath: 'reference/migrations/control-flow', - }, - { - label: 'inject() Function', - path: 'reference/migrations/inject-function', - contentPath: 'reference/migrations/inject-function', - }, - { - label: 'Lazy-loaded routes', - path: 'reference/migrations/route-lazy-loading', - contentPath: 'reference/migrations/route-lazy-loading', - }, - { - label: 'Signal inputs', - path: 'reference/migrations/signal-inputs', - contentPath: 'reference/migrations/signal-inputs', - }, - { - label: 'Outputs', - path: 'reference/migrations/outputs', - contentPath: 'reference/migrations/outputs', - }, - { - label: 'Signal queries', - path: 'reference/migrations/signal-queries', - contentPath: 'reference/migrations/signal-queries', - }, - { - label: 'Clean up unused imports', - path: 'reference/migrations/cleanup-unused-imports', - contentPath: 'reference/migrations/cleanup-unused-imports', - }, - { - label: 'Self-closing tags', - path: 'reference/migrations/self-closing-tags', - contentPath: 'reference/migrations/self-closing-tags', - }, - { - label: 'NgClass to Class', - path: 'reference/migrations/ngclass-to-class', - contentPath: 'reference/migrations/ngclass-to-class', - status: 'new', - }, - { - label: 'NgStyle to Style', - path: 'reference/migrations/ngstyle-to-style', - contentPath: 'reference/migrations/ngstyle-to-style', - status: 'new', - }, - { - label: 'Router Testing Module Migration', - path: 'reference/migrations/router-testing-module-migration', - contentPath: 'reference/migrations/router-testing-module-migration', - status: 'new', - }, - { - label: 'CommonModule to Standalone', - path: 'reference/migrations/common-to-standalone', - contentPath: 'reference/migrations/common-to-standalone', - status: 'new', - }, - ], - }, -]; - -const FOOTER_NAVIGATION_DATA: NavigationItem[] = [ - { - label: 'Press Kit', - path: 'press-kit', - contentPath: 'reference/press-kit', - }, - { - label: 'License', - path: 'license', - contentPath: 'reference/license', - }, -]; - // Docs navigation data structure, it's used to display structure in // navigation-list component And build the routing table for content pages. export const SUB_NAVIGATION_DATA: SubNavigationData = { diff --git a/adev-ja/src/app/routing/sub-navigation-data.ts b/adev-ja/src/app/routing/sub-navigation-data.ts index f45ec5202f..43f27a2578 100644 --- a/adev-ja/src/app/routing/sub-navigation-data.ts +++ b/adev-ja/src/app/routing/sub-navigation-data.ts @@ -6,20 +6,14 @@ * found in the LICENSE file at https://angular.dev/license */ -import {isDevMode} from '@angular/core'; import {NavigationItem} from '@angular/docs'; -// These imports are expected to be red because they are generated a build time -import FIRST_APP_TUTORIAL_NAV_DATA from '../../../src/assets/tutorials/first-app/routes.json'; -import LEARN_ANGULAR_TUTORIAL_NAV_DATA from '../../../src/assets/tutorials/learn-angular/routes.json'; -import DEFERRABLE_VIEWS_TUTORIAL_NAV_DATA from '../../../src/assets/tutorials/deferrable-views/routes.json'; -import SIGNALS_TUTORIAL_NAV_DATA from '../../../src/assets/tutorials/signals/routes.json'; -import SIGNAL_FORMS_TUTORIAL_NAV_DATA from '../../../src/assets/tutorials/signal-forms/routes.json'; -import ERRORS_NAV_DATA from '../../../src/assets/content/reference/errors/routes.json'; -import EXT_DIAGNOSTICS_NAV_DATA from '../../../src/assets/content/reference/extended-diagnostics/routes.json'; - -import {getApiNavigationItems} from '../features/references/helpers/manifest.helper'; -import {DEFAULT_PAGES} from '../core/constants/pages'; +import { + DOCS_SUB_NAVIGATION_DATA, + FOOTER_NAVIGATION_DATA, + REFERENCE_SUB_NAVIGATION_DATA, + TUTORIALS_SUB_NAVIGATION_DATA, +} from './navigation-entries'; interface SubNavigationData { docs: NavigationItem[]; @@ -28,1621 +22,6 @@ interface SubNavigationData { footer: NavigationItem[]; } -const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [ - { - label: '入門', - children: [ - { - label: 'Angularとは？', - path: 'overview', - contentPath: 'introduction/what-is-angular', - }, - { - label: 'インストール', - path: 'installation', - contentPath: 'introduction/installation', - }, - { - label: '基本概念', - children: [ - { - label: '概要', - path: 'essentials', - contentPath: 'introduction/essentials/overview', - }, - { - label: 'コンポーネントによる構築', - path: 'essentials/components', - contentPath: 'introduction/essentials/components', - }, - { - label: 'リアクティビティとシグナル', - path: 'essentials/signals', - contentPath: 'introduction/essentials/signals', - }, - { - label: 'テンプレートによる動的なインターフェース', - path: 'essentials/templates', - contentPath: 'introduction/essentials/templates', - }, - { - label: 'シグナルを使ったフォーム', - path: 'essentials/signal-forms', - contentPath: 'introduction/essentials/signal-forms', - status: 'new', - }, - { - label: '依存性の注入によるモジュール設計', - path: 'essentials/dependency-injection', - contentPath: 'introduction/essentials/dependency-injection', - }, - { - label: '次のステップ', - path: 'essentials/next-steps', - contentPath: 'introduction/essentials/next-steps', - }, - ], - }, - { - label: '作ってみよう！ 🚀', - path: 'tutorials/learn-angular', - }, - ], - }, - { - label: '詳細ガイド', - children: [ - { - label: 'シグナル', - status: 'updated', - children: [ - { - label: '概要', - path: 'guide/signals', - contentPath: 'guide/signals/overview', - }, - { - label: 'linkedSignalによる派生状態', - path: 'guide/signals/linked-signal', - contentPath: 'guide/signals/linked-signal', - }, - { - label: 'resourceによる非同期リアクティビティ', - path: 'guide/signals/resource', - contentPath: 'guide/signals/resource', - }, - { - label: '非リアクティブAPIのための副作用', - path: 'guide/signals/effect', - contentPath: 'guide/signals/effect', - status: 'new', - }, - ], - }, - { - label: 'コンポーネント', - children: [ - { - label: 'コンポーネントの構造', - path: 'guide/components', - contentPath: 'guide/components/anatomy-of-components', - }, - { - label: 'セレクター', - path: 'guide/components/selectors', - contentPath: 'guide/components/selectors', - }, - { - label: 'スタイリング', - path: 'guide/components/styling', - contentPath: 'guide/components/styling', - }, - { - label: '入力プロパティによるデータ受け入れ', - path: 'guide/components/inputs', - contentPath: 'guide/components/inputs', - }, - { - label: '出力によるカスタムイベント', - path: 'guide/components/outputs', - contentPath: 'guide/components/outputs', - }, - { - label: 'ng-contentによるコンテンツ投影', - path: 'guide/components/content-projection', - contentPath: 'guide/components/content-projection', - }, - { - label: 'ホスト要素', - path: 'guide/components/host-elements', - contentPath: 'guide/components/host-elements', - }, - { - label: 'ライフサイクル', - path: 'guide/components/lifecycle', - contentPath: 'guide/components/lifecycle', - }, - { - label: 'クエリによるコンポーネントの子への参照', - path: 'guide/components/queries', - contentPath: 'guide/components/queries', - }, - { - label: 'DOM APIの使用', - path: 'guide/components/dom-apis', - contentPath: 'guide/components/dom-apis', - }, - { - label: '継承', - path: 'guide/components/inheritance', - contentPath: 'guide/components/inheritance', - }, - { - label: 'プログラムによるコンポーネントレンダリング', - path: 'guide/components/programmatic-rendering', - contentPath: 'guide/components/programmatic-rendering', - }, - { - label: '高度な設定', - path: 'guide/components/advanced-configuration', - contentPath: 'guide/components/advanced-configuration', - }, - { - label: 'カスタム要素', - path: 'guide/elements', - contentPath: 'guide/elements', - }, - ], - }, - { - label: 'テンプレート', - children: [ - { - label: '概要', - path: 'guide/templates', - contentPath: 'guide/templates/overview', - }, - { - label: '動的テキスト、プロパティ、属性のバインディング', - path: 'guide/templates/binding', - contentPath: 'guide/templates/binding', - }, - { - label: 'イベントリスナーの追加', - path: 'guide/templates/event-listeners', - contentPath: 'guide/templates/event-listeners', - }, - { - label: '双方向バインディング', - path: 'guide/templates/two-way-binding', - contentPath: 'guide/templates/two-way-binding', - }, - { - label: '制御フロー', - path: 'guide/templates/control-flow', - contentPath: 'guide/templates/control-flow', - }, - { - label: 'パイプ', - path: 'guide/templates/pipes', - contentPath: 'guide/templates/pipes', - }, - { - label: 'ng-contentによる子コンテンツのスロット化', - path: 'guide/templates/ng-content', - contentPath: 'guide/templates/ng-content', - }, - { - label: 'ng-templateによるテンプレートフラグメントの作成', - path: 'guide/templates/ng-template', - contentPath: 'guide/templates/ng-template', - }, - { - label: 'ng-containerによる要素のグループ化', - path: 'guide/templates/ng-container', - contentPath: 'guide/templates/ng-container', - }, - { - label: 'テンプレート内の変数', - path: 'guide/templates/variables', - contentPath: 'guide/templates/variables', - }, - { - label: '@deferによる遅延読み込み', - path: 'guide/templates/defer', - contentPath: 'guide/templates/defer', - }, - { - label: '式の構文', - path: 'guide/templates/expression-syntax', - contentPath: 'guide/templates/expression-syntax', - }, - { - label: 'テンプレート内の空白', - path: 'guide/templates/whitespace', - contentPath: 'guide/templates/whitespace', - }, - ], - }, - { - label: 'ディレクティブ', - children: [ - { - label: '概要', - path: 'guide/directives', - contentPath: 'guide/directives/overview', - }, - { - label: '属性ディレクティブ', - path: 'guide/directives/attribute-directives', - contentPath: 'guide/directives/attribute-directives', - }, - { - label: '構造ディレクティブ', - path: 'guide/directives/structural-directives', - contentPath: 'guide/directives/structural-directives', - }, - { - label: 'ディレクティブコンポジションAPI', - path: 'guide/directives/directive-composition-api', - contentPath: 'guide/directives/directive-composition-api', - }, - { - label: 'NgOptimizedImageによる画像の最適化', - path: 'guide/image-optimization', - contentPath: 'guide/image-optimization', - }, - ], - }, - { - label: '依存性の注入', - status: 'updated', - children: [ - { - label: '概要', - path: 'guide/di', - contentPath: 'guide/di/overview', - status: 'updated', - }, - { - label: 'サービスの作成と使用', - path: 'guide/di/creating-and-using-services', - contentPath: 'guide/di/creating-and-using-services', - status: 'updated', - }, - { - label: '依存性プロバイダーの定義', - path: 'guide/di/defining-dependency-providers', - contentPath: 'guide/di/defining-dependency-providers', - status: 'updated', - }, - { - label: '注入コンテキスト', - path: 'guide/di/dependency-injection-context', - contentPath: 'guide/di/dependency-injection-context', - }, - { - label: '階層的なインジェクター', - path: 'guide/di/hierarchical-dependency-injection', - contentPath: 'guide/di/hierarchical-dependency-injection', - }, - { - label: 'インジェクショントークンの最適化', - path: 'guide/di/lightweight-injection-tokens', - contentPath: 'guide/di/lightweight-injection-tokens', - }, - { - label: 'DIの実践', - path: 'guide/di/di-in-action', - contentPath: 'guide/di/di-in-action', - }, - ], - }, - { - label: 'ルーティング', - status: 'updated', - children: [ - { - label: '概要', - path: 'guide/routing', - contentPath: 'guide/routing/overview', - }, - { - label: 'ルートを定義する', - path: 'guide/routing/define-routes', - contentPath: 'guide/routing/define-routes', - }, - { - label: 'アウトレットにルートを表示する', - path: 'guide/routing/show-routes-with-outlets', - contentPath: 'guide/routing/show-routes-with-outlets', - }, - { - label: 'ルートへのナビゲーション', - path: 'guide/routing/navigate-to-routes', - contentPath: 'guide/routing/navigate-to-routes', - }, - { - label: 'ルートの状態を読み取る', - path: 'guide/routing/read-route-state', - contentPath: 'guide/routing/read-route-state', - }, - { - label: 'ルートのリダイレクト', - path: 'guide/routing/redirecting-routes', - contentPath: 'guide/routing/redirecting-routes', - }, - { - label: 'ガードによるルートアクセスの制御', - path: 'guide/routing/route-guards', - contentPath: 'guide/routing/route-guards', - }, - { - label: 'ルートデータリゾルバー', - path: 'guide/routing/data-resolvers', - contentPath: 'guide/routing/data-resolvers', - }, - { - label: 'ライフサイクルとイベント', - path: 'guide/routing/lifecycle-and-events', - contentPath: 'guide/routing/lifecycle-and-events', - }, - { - label: 'ルーティングとナビゲーションのテスト', - path: 'guide/routing/testing', - contentPath: 'guide/routing/testing', - status: 'new', - }, - { - label: 'その他のルーティングタスク', - path: 'guide/routing/common-router-tasks', - contentPath: 'guide/routing/common-router-tasks', - }, - { - label: 'カスタムルートマッチの作成', - path: 'guide/routing/routing-with-urlmatcher', - contentPath: 'guide/routing/routing-with-urlmatcher', - }, - { - label: 'レンダリング戦略', - path: 'guide/routing/rendering-strategies', - contentPath: 'guide/routing/rendering-strategies', - status: 'new', - }, - { - label: 'ルートの動作のカスタマイズ', - path: 'guide/routing/customizing-route-behavior', - contentPath: 'guide/routing/customizing-route-behavior', - status: 'new', - }, - { - label: 'ルーターリファレンス', - path: 'guide/routing/router-reference', - contentPath: 'guide/routing/router-reference', - }, - { - label: 'ルート遷移アニメーション', - path: 'guide/routing/route-transition-animations', - contentPath: 'guide/routing/route-transition-animations', - }, - ], - }, - { - label: 'フォーム', - status: 'updated', - children: [ - { - label: '概要', - path: 'guide/forms', - contentPath: 'guide/forms/overview', - }, - { - label: 'シグナルフォーム', - status: 'new', - children: [ - { - label: '概要', - path: 'guide/forms/signals/overview', - contentPath: 'guide/forms/signals/overview', - }, - { - label: 'フォームモデル', - path: 'guide/forms/signals/models', - contentPath: 'guide/forms/signals/models', - }, - { - label: 'フォームモデルの設計', - path: 'guide/forms/signals/model-design', - contentPath: 'guide/forms/signals/designing-your-form-model', - }, - { - label: 'フィールド状態管理', - path: 'guide/forms/signals/field-state-management', - contentPath: 'guide/forms/signals/field-state-management', - }, - { - label: 'バリデーション', - path: 'guide/forms/signals/validation', - contentPath: 'guide/forms/signals/validation', - }, - { - label: 'カスタムコントロール', - path: 'guide/forms/signals/custom-controls', - contentPath: 'guide/forms/signals/custom-controls', - }, - { - label: '他のフォームシステムとの比較', - path: 'guide/forms/signals/comparison', - contentPath: 'guide/forms/signals/comparison', - }, - { - label: 'Migrating from Legacy Forms', - path: 'guide/forms/signals/migration', - contentPath: 'guide/forms/signals/migration', - }, - ], - }, - { - label: 'リアクティブフォーム', - path: 'guide/forms/reactive-forms', - contentPath: 'guide/forms/reactive-forms', - }, - { - label: '厳密に型付けされたリアクティブフォーム', - path: 'guide/forms/typed-forms', - contentPath: 'guide/forms/typed-forms', - }, - { - label: 'テンプレート駆動型フォーム', - path: 'guide/forms/template-driven-forms', - contentPath: 'guide/forms/template-driven-forms', - }, - { - label: 'フォーム入力の検証', - path: 'guide/forms/form-validation', - contentPath: 'guide/forms/form-validation', - }, - { - label: '動的フォームの構築', - path: 'guide/forms/dynamic-forms', - contentPath: 'guide/forms/dynamic-forms', - }, - ], - }, - { - label: 'HTTPクライアント', - children: [ - { - label: '概要', - path: 'guide/http', - contentPath: 'guide/http/overview', - }, - { - label: 'HttpClientの設定', - path: 'guide/http/setup', - contentPath: 'guide/http/setup', - }, - { - label: 'リクエストの実行', - path: 'guide/http/making-requests', - contentPath: 'guide/http/making-requests', - }, - { - label: 'httpResourceを使ったリアクティブなデータ取得', - path: 'guide/http/http-resource', - contentPath: 'guide/http/http-resource', - }, - { - label: 'リクエストとレスポンスへの介入', - path: 'guide/http/interceptors', - contentPath: 'guide/http/interceptors', - }, - { - label: 'テスト', - path: 'guide/http/testing', - contentPath: 'guide/http/testing', - }, - ], - }, - { - label: 'サーバーサイド・ハイブリッドレンダリング', - children: [ - { - label: '概要', - path: 'guide/performance', - contentPath: 'guide/performance/overview', - }, - { - label: 'サーバーサイド・ハイブリッドレンダリング', - path: 'guide/ssr', - contentPath: 'guide/ssr', - }, - { - label: 'ハイドレーション', - path: 'guide/hydration', - contentPath: 'guide/hydration', - }, - { - label: 'インクリメンタルハイドレーション', - path: 'guide/incremental-hydration', - contentPath: 'guide/incremental-hydration', - }, - ], - }, - { - label: 'テスト', - children: [ - { - label: '概要', - path: 'guide/testing', - contentPath: 'guide/testing/overview', - }, - { - label: 'コンポーネントのテストの基本', - path: 'guide/testing/components-basics', - contentPath: 'guide/testing/components-basics', - }, - { - label: 'コンポーネントのテストシナリオ', - path: 'guide/testing/components-scenarios', - contentPath: 'guide/testing/components-scenarios', - }, - { - label: 'サービスのテスト', - path: 'guide/testing/services', - contentPath: 'guide/testing/services', - }, - { - label: '属性ディレクティブのテスト', - path: 'guide/testing/attribute-directives', - contentPath: 'guide/testing/attribute-directives', - }, - { - label: 'パイプのテスト', - path: 'guide/testing/pipes', - contentPath: 'guide/testing/pipes', - }, - { - label: 'ルーティングとナビゲーションのテスト', - path: 'guide/routing/testing', - contentPath: 'guide/routing/testing', - status: 'new', - }, - { - label: 'テストのデバッグ', - path: 'guide/testing/debugging', - contentPath: 'guide/testing/debugging', - }, - { - label: 'コードカバレッジ', - path: 'guide/testing/code-coverage', - contentPath: 'guide/testing/code-coverage', - }, - { - label: 'テストユーティリティAPI', - path: 'guide/testing/utility-apis', - contentPath: 'guide/testing/utility-apis', - }, - { - label: 'コンポーネントハーネスの概要', - path: 'guide/testing/component-harnesses-overview', - contentPath: 'guide/testing/component-harnesses-overview', - }, - { - label: 'テストでコンポーネントハーネスを使う', - path: 'guide/testing/using-component-harnesses', - contentPath: 'guide/testing/using-component-harnesses', - }, - { - label: 'コンポーネントハーネスを作成する', - path: 'guide/testing/creating-component-harnesses', - contentPath: 'guide/testing/creating-component-harnesses', - }, - { - label: 'テスト環境にハーネスサポートを追加する', - path: 'guide/testing/component-harnesses-testing-environments', - contentPath: 'guide/testing/component-harnesses-testing-environments', - }, - { - label: 'KarmaからVitestへの移行', - path: 'guide/testing/migrating-to-vitest', - contentPath: 'guide/testing/migrating-to-vitest', - }, - { - label: 'KarmaとJasmineによるテスト', - path: 'guide/testing/karma', - contentPath: 'guide/testing/karma', - }, - { - label: 'Zone.jsテストユーティリティ', - path: 'guide/testing/zone-js-testing-utilities', - contentPath: 'guide/testing/zone-js-testing-utilities', - }, - ], - }, - { - label: 'Angular Aria', - status: 'new', - children: [ - { - label: '概要', - path: 'guide/aria/overview', - contentPath: 'guide/aria/overview', - }, - { - label: 'アコーディオン', - path: 'guide/aria/accordion', - contentPath: 'guide/aria/accordion', - }, - { - label: 'オートコンプリート', - path: 'guide/aria/autocomplete', - contentPath: 'guide/aria/autocomplete', - }, - { - label: 'コンボボックス', - path: 'guide/aria/combobox', - contentPath: 'guide/aria/combobox', - }, - { - label: 'グリッド', - path: 'guide/aria/grid', - contentPath: 'guide/aria/grid', - }, - { - label: 'リストボックス', - path: 'guide/aria/listbox', - contentPath: 'guide/aria/listbox', - }, - { - label: 'メニュー', - path: 'guide/aria/menu', - contentPath: 'guide/aria/menu', - }, - { - label: 'メニューバー', - path: 'guide/aria/menubar', - contentPath: 'guide/aria/menubar', - }, - { - label: 'マルチセレクト', - path: 'guide/aria/multiselect', - contentPath: 'guide/aria/multiselect', - }, - { - label: 'セレクト', - path: 'guide/aria/select', - contentPath: 'guide/aria/select', - }, - { - label: 'タブ', - path: 'guide/aria/tabs', - contentPath: 'guide/aria/tabs', - }, - { - label: 'ツールバー', - path: 'guide/aria/toolbar', - contentPath: 'guide/aria/toolbar', - }, - { - label: 'ツリー', - path: 'guide/aria/tree', - contentPath: 'guide/aria/tree', - }, - ], - }, - { - label: '国際化', - children: [ - { - label: '概要', - path: 'guide/i18n', - contentPath: 'guide/i18n/overview', - }, - { - label: 'localizeパッケージの追加', - path: 'guide/i18n/add-package', - contentPath: 'guide/i18n/add-package', - }, - { - label: 'IDによるロケールの参照', - path: 'guide/i18n/locale-id', - contentPath: 'guide/i18n/locale-id', - }, - { - label: 'ロケールに基づいたデータのフォーマット', - path: 'guide/i18n/format-data-locale', - contentPath: 'guide/i18n/format-data-locale', - }, - { - label: '翻訳のためのコンポーネントの準備', - path: 'guide/i18n/prepare', - contentPath: 'guide/i18n/prepare', - }, - { - label: '翻訳ファイルの操作', - path: 'guide/i18n/translation-files', - contentPath: 'guide/i18n/translation-files', - }, - { - label: 'アプリへの翻訳の統合', - path: 'guide/i18n/merge', - contentPath: 'guide/i18n/merge', - }, - { - label: '複数のロケールのデプロイ', - path: 'guide/i18n/deploy', - contentPath: 'guide/i18n/deploy', - }, - { - label: 'ロケールデータのグローバルバリアントのインポート', - path: 'guide/i18n/import-global-variants', - contentPath: 'guide/i18n/import-global-variants', - }, - { - label: 'カスタムIDによるマークされたテキストの管理', - path: 'guide/i18n/manage-marked-text', - contentPath: 'guide/i18n/manage-marked-text', - }, - { - label: 'Angularアプリケーションの例', - path: 'guide/i18n/example', - contentPath: 'guide/i18n/example', - }, - ], - }, - { - label: 'アニメーション', - status: 'updated', - children: [ - { - label: 'Enter and Leave アニメーション', - path: 'guide/animations/enter-and-leave', - contentPath: 'guide/animations/enter-and-leave', - status: 'new', - }, - { - label: '複雑なCSSアニメーション', - path: 'guide/animations/css', - contentPath: 'guide/animations/css', - }, - { - label: 'ルート遷移アニメーション', - path: 'guide/routing/route-transition-animations', - contentPath: 'guide/routing/route-transition-animations', - }, - ], - }, - { - label: 'Drag and drop', - path: 'guide/drag-drop', - contentPath: 'guide/drag-drop', - }, - ], - }, - { - label: 'Build with AI', - status: 'new', - children: [ - { - label: 'はじめよう', - path: 'ai', - contentPath: 'ai/overview', - }, - { - label: 'LLMプロンプトとAI IDEセットアップ', - path: 'ai/develop-with-ai', - contentPath: 'ai/develop-with-ai', - }, - { - label: '設計パターン', - path: 'ai/design-patterns', - contentPath: 'ai/design-patterns', - }, - { - label: 'Angular CLI MCPサーバーセットアップ', - path: 'ai/mcp', - contentPath: 'ai/mcp-server-setup', - }, - { - label: 'Angular AI Tutor', - path: 'ai/ai-tutor', - contentPath: 'ai/ai-tutor', - }, - ], - }, - { - label: '開発者ツール', - children: [ - { - label: 'Angular CLI', - children: [ - { - label: '概要', - path: 'tools/cli', - contentPath: 'tools/cli/overview', - }, - { - label: 'ローカル設定', - path: 'tools/cli/setup-local', - contentPath: 'tools/cli/setup-local', - }, - { - label: 'Angularアプリのビルド', - path: 'tools/cli/build', - contentPath: 'tools/cli/build', - }, - { - label: '開発用ローカルサーバー', - path: 'tools/cli/serve', - contentPath: 'tools/cli/serve', - }, - { - label: 'デプロイメント', - path: 'tools/cli/deployment', - contentPath: 'tools/cli/deployment', - }, - { - label: 'エンドツーエンドテスト', - path: 'tools/cli/end-to-end', - contentPath: 'tools/cli/end-to-end', - }, - { - label: '新しいビルドシステムへの移行', - path: 'tools/cli/build-system-migration', - contentPath: 'tools/cli/build-system-migration', - }, - { - label: 'ビルド環境', - path: 'tools/cli/environments', - contentPath: 'tools/cli/environments', - }, - { - label: 'Angular CLIビルダー', - path: 'tools/cli/cli-builder', - contentPath: 'tools/cli/cli-builder', - }, - { - label: 'Schematicsによるコードの生成', - path: 'tools/cli/schematics', - contentPath: 'tools/cli/schematics', - }, - { - label: 'Schematicsの作成', - path: 'tools/cli/schematics-authoring', - contentPath: 'tools/cli/schematics-authoring', - }, - { - label: 'ライブラリのSchematics', - path: 'tools/cli/schematics-for-libraries', - contentPath: 'tools/cli/schematics-for-libraries', - }, - { - label: 'テンプレート型チェック', - path: 'tools/cli/template-typecheck', - contentPath: 'tools/cli/template-typecheck', - }, - { - label: '事前コンパイル (AOT) コンパイル', - path: 'tools/cli/aot-compiler', - contentPath: 'tools/cli/aot-compiler', - }, - { - label: 'AOTメタデータエラー', - path: 'tools/cli/aot-metadata-errors', - contentPath: 'tools/cli/aot-metadata-errors', - }, - ], - }, - { - label: 'ライブラリ', - children: [ - { - label: '概要', - path: 'tools/libraries', - contentPath: 'tools/libraries/overview', - }, - { - label: 'ライブラリの作成', - path: 'tools/libraries/creating-libraries', - contentPath: 'tools/libraries/creating-libraries', - }, - { - label: 'ライブラリの使用', - path: 'tools/libraries/using-libraries', - contentPath: 'tools/libraries/using-libraries', - }, - { - label: 'Angularパッケージフォーマット', - path: 'tools/libraries/angular-package-format', - contentPath: 'tools/libraries/angular-package-format', - }, - ], - }, - { - label: 'DevTools', - children: [ - { - label: '概要', - path: 'tools/devtools', - contentPath: 'tools/devtools/overview', - }, - { - label: 'コンポーネント', - path: 'tools/devtools/component', - contentPath: 'tools/devtools/component', - }, - { - label: 'プロファイラー', - path: 'tools/devtools/profiler', - contentPath: 'tools/devtools/profiler', - }, - { - label: 'インジェクター', - path: 'tools/devtools/injectors', - contentPath: 'tools/devtools/injectors', - }, - // TODO: create those guides - // The signal debugging docs should also be added to the signal section - // { - // label: 'Signals', - // path: 'tools/devtools/signals', - // contentPath: 'tools/devtools/signals', - // }, - // { - // label: 'Router', - // path: 'tools/devtools/router', - // contentPath: 'tools/devtools/router', - // } - ], - }, - { - label: '言語サービス', - path: 'tools/language-service', - contentPath: 'tools/language-service', - }, - ], - }, - { - label: 'ベストプラクティス', - children: [ - { - label: 'スタイルガイド', - path: 'style-guide', - contentPath: 'best-practices/style-guide', - status: 'updated', - }, - { - label: 'セキュリティ', - path: 'best-practices/security', - contentPath: 'guide/security', // Have not refactored due to build issues - }, - { - label: 'アクセシビリティ', - path: 'best-practices/a11y', - contentPath: 'best-practices/a11y', - }, - { - label: 'Angularにおける未処理エラー', - path: 'best-practices/error-handling', - contentPath: 'best-practices/error-handling', - }, - { - label: 'パフォーマンス', - children: [ - { - label: '概要', - path: 'best-practices/runtime-performance', - contentPath: 'best-practices/runtime-performance/overview', - }, - { - label: 'ゾーンの汚染', - path: 'best-practices/zone-pollution', - contentPath: 'best-practices/runtime-performance/zone-pollution', - }, - { - label: '遅い計算', - path: 'best-practices/slow-computations', - contentPath: 'best-practices/runtime-performance/slow-computations', - }, - { - label: 'コンポーネントサブツリーのスキップ', - path: 'best-practices/skipping-subtrees', - contentPath: 'best-practices/runtime-performance/skipping-subtrees', - }, - { - label: 'Chrome DevToolsでのプロファイリング', - path: 'best-practices/profiling-with-chrome-devtools', - contentPath: 'best-practices/runtime-performance/profiling-with-chrome-devtools', - }, - {label: 'Zoneless', path: 'guide/zoneless', contentPath: 'guide/zoneless'}, - ], - }, - { - label: 'アップデートに追従する', - path: 'update', - contentPath: 'best-practices/update', - }, - ], - }, - { - label: '開発者向けイベント', - children: [ - { - label: 'Angular v21 Release', - path: 'events/v21', - contentPath: 'events/v21', - status: 'new', - }, - ], - }, - { - label: '拡張エコシステム', - children: [ - { - label: 'NgModule', - path: 'guide/ngmodules/overview', - contentPath: 'guide/ngmodules/overview', - }, - { - label: 'レガシーアニメーション', - children: [ - { - label: '概要', - path: 'guide/legacy-animations', - contentPath: 'guide/animations/overview', - }, - { - label: 'トランジションとトリガー', - path: 'guide/legacy-animations/transition-and-triggers', - contentPath: 'guide/animations/transition-and-triggers', - }, - { - label: '複雑なシーケンス', - path: 'guide/legacy-animations/complex-sequences', - contentPath: 'guide/animations/complex-sequences', - }, - { - label: '再利用可能なアニメーション', - path: 'guide/legacy-animations/reusable-animations', - contentPath: 'guide/animations/reusable-animations', - }, - { - label: 'ネイティブCSSアニメーションへの移行', - path: 'guide/animations/migration', - contentPath: 'guide/animations/migration', - }, - ], - }, - { - label: 'RxJSとの併用', - children: [ - { - label: 'Signalとの相互運用', - path: 'ecosystem/rxjs-interop', - contentPath: 'ecosystem/rxjs-interop/signals-interop', - }, - { - label: 'コンポーネント出力との相互接続', - path: 'ecosystem/rxjs-interop/output-interop', - contentPath: 'ecosystem/rxjs-interop/output-interop', - }, - { - label: 'takeUntilDestroyedでの購読解除', - path: 'ecosystem/rxjs-interop/take-until-destroyed', - contentPath: 'ecosystem/rxjs-interop/take-until-destroyed', - }, - ], - }, - { - label: 'Service WorkerとPWA', - children: [ - { - label: '概要', - path: 'ecosystem/service-workers', - contentPath: 'ecosystem/service-workers/overview', - }, - { - label: 'はじめに', - path: 'ecosystem/service-workers/getting-started', - contentPath: 'ecosystem/service-workers/getting-started', - }, - { - label: '独自のService Workerスクリプト', - path: 'ecosystem/service-workers/custom-service-worker-scripts', - contentPath: 'ecosystem/service-workers/custom-service-worker-scripts', - }, - { - label: '設定ファイル', - path: 'ecosystem/service-workers/config', - contentPath: 'ecosystem/service-workers/config', - }, - { - label: 'Service Workerとの通信', - path: 'ecosystem/service-workers/communications', - contentPath: 'ecosystem/service-workers/communications', - }, - { - label: 'プッシュ通知', - path: 'ecosystem/service-workers/push-notifications', - contentPath: 'ecosystem/service-workers/push-notifications', - }, - { - label: 'Service WorkerのDevOps', - path: 'ecosystem/service-workers/devops', - contentPath: 'ecosystem/service-workers/devops', - }, - { - label: 'App Shellパターン', - path: 'ecosystem/service-workers/app-shell', - contentPath: 'ecosystem/service-workers/app-shell', - }, - ], - }, - { - label: 'Web Worker', - path: 'ecosystem/web-workers', - contentPath: 'ecosystem/web-workers', - }, - { - label: 'カスタムビルドパイプライン', - path: 'ecosystem/custom-build-pipeline', - contentPath: 'ecosystem/custom-build-pipeline', - }, - { - label: 'Tailwind', - path: 'guide/tailwind', - contentPath: 'guide/tailwind', - status: 'new', - }, - { - label: 'Angular Fire', - path: 'https://github.com/angular/angularfire#readme', - }, - { - label: 'Google Maps', - path: 'https://github.com/angular/components/tree/main/src/google-maps#readme', - }, - { - label: 'Google Pay', - path: 'https://github.com/google-pay/google-pay-button#angular', - }, - { - label: 'YouTubeプレーヤー', - path: 'https://github.com/angular/components/blob/main/src/youtube-player/README.md', - }, - { - label: 'Angular CDK', - path: 'https://material.angular.dev/cdk/categories', - }, - { - label: 'Angular Material', - path: 'https://material.angular.dev/', - }, - ], - }, - ...(isDevMode() - ? [ - { - label: 'Adev Dev Guide', - children: [ - { - label: 'Kitchen Sink', - path: 'kitchen-sink', - contentPath: 'kitchen-sink', - }, - ], - }, - ] - : []), -]; - -export const TUTORIALS_SUB_NAVIGATION_DATA: NavigationItem[] = [ - FIRST_APP_TUTORIAL_NAV_DATA, - LEARN_ANGULAR_TUTORIAL_NAV_DATA, - DEFERRABLE_VIEWS_TUTORIAL_NAV_DATA, - SIGNALS_TUTORIAL_NAV_DATA, - SIGNAL_FORMS_TUTORIAL_NAV_DATA, - { - path: DEFAULT_PAGES.TUTORIALS, - contentPath: 'tutorials/home', - label: 'チュートリアル', - }, -]; - -const REFERENCE_SUB_NAVIGATION_DATA: NavigationItem[] = [ - { - label: 'ロードマップ', - path: 'roadmap', - contentPath: 'reference/roadmap', - }, - { - label: '開発に参加する', - path: 'https://github.com/angular/angular/blob/main/CONTRIBUTING.md', - }, - { - label: 'コミュニティに参加する', - path: 'https://community.angular.jp/', - }, - { - label: '日本語化プロジェクト', - path: 'https://github.com/angular/angular-ja', - }, - { - label: 'APIリファレンス', - children: [ - { - label: '概要', - path: 'api', - }, - ...getApiNavigationItems(), - ], - }, - { - label: 'CLIリファレンス', - children: [ - { - label: '概要', - path: 'cli', - contentPath: 'reference/cli', - }, - { - label: 'ng add', - path: 'cli/add', - }, - { - label: 'ng analytics', - children: [ - { - label: '概要', - path: 'cli/analytics', - }, - { - label: 'disable', - path: 'cli/analytics/disable', - }, - { - label: 'enable', - path: 'cli/analytics/enable', - }, - { - label: 'info', - path: 'cli/analytics/info', - }, - { - label: 'prompt', - path: 'cli/analytics/prompt', - }, - ], - }, - { - label: 'ng build', - path: 'cli/build', - }, - { - label: 'ng cache', - children: [ - { - label: '概要', - path: 'cli/cache', - }, - { - label: 'clear', - path: 'cli/cache/clean', - }, - { - label: 'disable', - path: 'cli/cache/disable', - }, - { - label: 'enable', - path: 'cli/cache/enable', - }, - { - label: 'info', - path: 'cli/cache/info', - }, - ], - }, - { - label: 'ng completion', - children: [ - { - label: '概要', - path: 'cli/completion', - }, - { - label: 'script', - path: 'cli/completion/script', - }, - ], - }, - { - label: 'ng config', - path: 'cli/config', - }, - { - label: 'ng deploy', - path: 'cli/deploy', - }, - { - label: 'ng e2e', - path: 'cli/e2e', - }, - { - label: 'ng extract-i18n', - path: 'cli/extract-i18n', - }, - { - label: 'ng generate', - children: [ - { - label: '概要', - path: 'cli/generate', - }, - { - label: 'ai-config', - path: 'cli/generate/ai-config', - }, - { - label: 'app-shell', - path: 'cli/generate/app-shell', - }, - { - label: 'application', - path: 'cli/generate/application', - }, - { - label: 'class', - path: 'cli/generate/class', - }, - { - label: 'component', - path: 'cli/generate/component', - }, - { - label: 'config', - path: 'cli/generate/config', - }, - { - label: 'directive', - path: 'cli/generate/directive', - }, - { - label: 'enum', - path: 'cli/generate/enum', - }, - { - label: 'environments', - path: 'cli/generate/environments', - }, - { - label: 'guard', - path: 'cli/generate/guard', - }, - { - label: 'interceptor', - path: 'cli/generate/interceptor', - }, - { - label: 'interface', - path: 'cli/generate/interface', - }, - { - label: 'library', - path: 'cli/generate/library', - }, - { - label: 'module', - path: 'cli/generate/module', - }, - { - label: 'pipe', - path: 'cli/generate/pipe', - }, - { - label: 'resolver', - path: 'cli/generate/resolver', - }, - { - label: 'service-worker', - path: 'cli/generate/service-worker', - }, - { - label: 'service', - path: 'cli/generate/service', - }, - { - label: 'web-worker', - path: 'cli/generate/web-worker', - }, - ], - }, - { - label: 'ng lint', - path: 'cli/lint', - }, - { - label: 'ng new', - path: 'cli/new', - }, - { - label: 'ng run', - path: 'cli/run', - }, - { - label: 'ng serve', - path: 'cli/serve', - }, - { - label: 'ng test', - path: 'cli/test', - }, - { - label: 'ng update', - path: 'cli/update', - }, - { - label: 'ng version', - path: 'cli/version', - }, - ], - }, - { - label: 'エラー百科辞典', - children: [ - { - label: '概要', - path: 'errors', - contentPath: 'reference/errors/overview', - }, - ...ERRORS_NAV_DATA, - ], - }, - { - label: '拡張診断', - children: [ - { - label: '概要', - path: 'extended-diagnostics', - contentPath: 'reference/extended-diagnostics/overview', - }, - ...EXT_DIAGNOSTICS_NAV_DATA, - ], - }, - { - label: 'バージョニングとリリース', - path: 'reference/releases', - contentPath: 'reference/releases', - }, - { - label: 'バージョン互換性', - path: 'reference/versions', - contentPath: 'reference/versions', - }, - { - label: 'アップデートガイド', - path: 'update-guide', - }, - { - label: '設定', - children: [ - { - label: 'ファイル構造', - path: 'reference/configs/file-structure', - contentPath: 'reference/configs/file-structure', - }, - { - label: 'ワークスペース設定', - path: 'reference/configs/workspace-config', - contentPath: 'reference/configs/workspace-config', - }, - { - label: 'Angularコンパイラオプション', - path: 'reference/configs/angular-compiler-options', - contentPath: 'reference/configs/angular-compiler-options', - }, - { - label: 'npmの依存関係', - path: 'reference/configs/npm-packages', - contentPath: 'reference/configs/npm-packages', - }, - ], - }, - { - label: 'マイグレーション', - children: [ - { - label: '概要', - path: 'reference/migrations', - contentPath: 'reference/migrations/overview', - }, - { - label: 'スタンドアロン', - path: 'reference/migrations/standalone', - contentPath: 'reference/migrations/standalone', - }, - { - label: '制御フロー構文', - path: 'reference/migrations/control-flow', - contentPath: 'reference/migrations/control-flow', - }, - { - label: 'inject() 関数', - path: 'reference/migrations/inject-function', - contentPath: 'reference/migrations/inject-function', - }, - { - label: '遅延読み込みルート', - path: 'reference/migrations/route-lazy-loading', - contentPath: 'reference/migrations/route-lazy-loading', - }, - { - label: 'Signal入力', - path: 'reference/migrations/signal-inputs', - contentPath: 'reference/migrations/signal-inputs', - }, - { - label: '出力', - path: 'reference/migrations/outputs', - contentPath: 'reference/migrations/outputs', - }, - { - label: 'Signalクエリ', - path: 'reference/migrations/signal-queries', - contentPath: 'reference/migrations/signal-queries', - }, - { - label: '未使用のインポートのクリーンアップ', - path: 'reference/migrations/cleanup-unused-imports', - contentPath: 'reference/migrations/cleanup-unused-imports', - }, - { - label: '自己閉鎖タグ', - path: 'reference/migrations/self-closing-tags', - contentPath: 'reference/migrations/self-closing-tags', - }, - { - label: 'NgClassからClassへ', - path: 'reference/migrations/ngclass-to-class', - contentPath: 'reference/migrations/ngclass-to-class', - status: 'new', - }, - { - label: 'NgStyleからStyleへ', - path: 'reference/migrations/ngstyle-to-style', - contentPath: 'reference/migrations/ngstyle-to-style', - status: 'new', - }, - { - label: 'Routerテストモジュールのマイグレーション', - path: 'reference/migrations/router-testing-module-migration', - contentPath: 'reference/migrations/router-testing-module-migration', - status: 'new', - }, - { - label: 'CommonModuleからスタンドアロンへ', - path: 'reference/migrations/common-to-standalone', - contentPath: 'reference/migrations/common-to-standalone', - status: 'new', - }, - ], - }, -]; - -const FOOTER_NAVIGATION_DATA: NavigationItem[] = [ - { - label: 'プレスキット', - path: 'press-kit', - contentPath: 'reference/press-kit', - }, - { - label: 'ライセンス', - path: 'license', - contentPath: 'reference/license', - }, -]; - // Docs navigation data structure, it's used to display structure in // navigation-list component And build the routing table for content pages. export const SUB_NAVIGATION_DATA: SubNavigationData = { diff --git a/adev-ja/src/content/ai/ai-tutor.en.md b/adev-ja/src/content/ai/ai-tutor.en.md index fd3b01aed9..7c922be054 100644 --- a/adev-ja/src/content/ai/ai-tutor.en.md +++ b/adev-ja/src/content/ai/ai-tutor.en.md @@ -108,7 +108,7 @@ If the tutor doesn't respond correctly or you suspect an issue with your applica ## **Your Learning Journey: The Phased Path** -You will build your application over a four-phase journey. You can follow this path from start to finish to create a complete, fully-functional Angular application. Each module builds logically upon the last, taking you from the basics to advanced, real-world features. +You will build your application over a five-phase journey. You can follow this path from start to finish to create a complete, fully-functional Angular application. Each module builds logically upon the last, taking you from the basics to advanced, real-world features. **A Note on Automated Setup:** Some modules require a setup step, like creating interfaces or mock data. In these cases, the tutor will present you with the code and file instructions. You will be responsible for creating and modifying these files as instructed before the exercise begins. @@ -141,6 +141,15 @@ You will build your application over a four-phase journey. You can follow this p - **Module 16:** Introduction to Forms - **Module 17:** Intro to Angular Material +### **Phase 5: Experimental Signal Forms (⚠️ WARNING: Subject to Change)** + +**CRITICAL NOTE FOR THIS PHASE:** Signal Forms are currently an [**EXPERIMENTAL** feature](/reference/releases#experimental). The API may change significantly in future Angular releases. Please proceed with the understanding that this section demonstrates a cutting-edge feature. + +- **Module 18**: **Introduction to Signal Forms** +- **Module 19**: **Submitting & Resetting** +- **Module 20**: **Validation in Signal Forms** +- **Module 21**: **Field State & Error Messages** + --- ## **A Note on AI & Feedback** diff --git a/adev-ja/src/content/ai/ai-tutor.md b/adev-ja/src/content/ai/ai-tutor.md index 2ecfff631e..7ff8f7d375 100644 --- a/adev-ja/src/content/ai/ai-tutor.md +++ b/adev-ja/src/content/ai/ai-tutor.md @@ -108,7 +108,7 @@ Angular AIチューターは、完全でモダンなAngularアプリケーショ ## **学習の道のり：段階的なパス** {#your-learning-journey-the-phased-path} -4つのフェーズにわたる道のりでアプリケーションを構築します。このパスを最初から最後までたどることで、完全で機能的なAngularアプリケーションを作成できます。各モジュールは前のモジュールの上に論理的に構築されており、基礎から高度で実践的な機能へと導きます。 +5つのフェーズにわたる道のりでアプリケーションを構築します。このパスを最初から最後までたどることで、完全で機能的なAngularアプリケーションを作成できます。各モジュールは前のモジュールの上に論理的に構築されており、基礎から高度で実践的な機能へと導きます。 **自動セットアップに関する注意：** 一部のモジュールでは、インターフェースやモックデータの作成など、セットアップ手順が必要です。これらの場合、チューターがコードとファイルの手順を提示します。演習が始まる前に、指示に従ってこれらのファイルを作成・修正する責任があります。 @@ -141,6 +141,15 @@ Angular AIチューターは、完全でモダンなAngularアプリケーショ - **モジュール16：** フォーム入門 - **モジュール17：** Angular Material入門 +### **フェーズ5：実験的なシグナルフォーム（⚠️ 警告：変更の可能性あり）** {#phase-5-experimental-signal-forms-warning-subject-to-change} + +**このフェーズに関する重要な注意：** シグナルフォームは現在[**実験的な**機能](/reference/releases#experimental)です。APIは将来のAngularリリースで大幅に変更される可能性があります。このセクションは最先端の機能を示すものであることをご理解の上、お進みください。 + +- **モジュール18：** **シグナルフォーム入門** +- **モジュール19：** **送信とリセット** +- **モジュール20：** **シグナルフォームのバリデーション** +- **モジュール21：** **フィールドの状態とエラーメッセージ** + --- ## **AIとフィードバックに関する注意点** {#a-note-on-ai-feedback} diff --git a/adev-ja/src/content/ai/design-patterns.en.md b/adev-ja/src/content/ai/design-patterns.en.md index d40582e24c..8a4ce4d670 100644 --- a/adev-ja/src/content/ai/design-patterns.en.md +++ b/adev-ja/src/content/ai/design-patterns.en.md @@ -80,14 +80,14 @@ The following example demonstrates how to create a responsive UI to dynamically
- + } @else if (imgResource.hasValue()) { - + } @else {
-

Failed to load image. Click to retry.

+

Failed to load image. Click to retry.

} ``` @@ -130,9 +130,9 @@ The `characters` member is updated asynchronously and can be displayed in the te @if (characters.isLoading()) {

Loading...

} @else if (characters.hasValue()) { -

{{characters.value()}}

+

{{ characters.value() }}

} @else { -

{{characters.error()}}

+

{{ characters.error() }}

} ``` diff --git a/adev-ja/src/content/ai/design-patterns.md b/adev-ja/src/content/ai/design-patterns.md index bc11860487..0e750827b0 100644 --- a/adev-ja/src/content/ai/design-patterns.md +++ b/adev-ja/src/content/ai/design-patterns.md @@ -80,14 +80,14 @@ LLM APIは、従来のより決定論的なAPIよりも低速でエラーが発
- + } @else if (imgResource.hasValue()) { - + } @else {
-

Failed to load image. Click to retry.

+

Failed to load image. Click to retry.

} ``` @@ -130,9 +130,9 @@ characters = resource({ @if (characters.isLoading()) {

Loading...

} @else if (characters.hasValue()) { -

{{characters.value()}}

+

{{ characters.value() }}

} @else { -

{{characters.error()}}

+

{{ characters.error() }}

} ``` diff --git a/adev-ja/src/content/ai/mcp-server-setup.en.md b/adev-ja/src/content/ai/mcp-server-setup.en.md index c8e929e383..1a9a8a6be5 100644 --- a/adev-ja/src/content/ai/mcp-server-setup.en.md +++ b/adev-ja/src/content/ai/mcp-server-setup.en.md @@ -22,10 +22,12 @@ Some tools are provided in experimental / preview status since they are new or n | Name | Description | `local-only` | `read-only` | | :------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :----------: | :---------: | | `build` | Perform a one-off, non-watched build using `ng build`. | ✅ | ❌ | -| `modernize` | Performs code migrations and provides further instructions on how to modernize Angular code to align with the latest best practices and syntax. [Learn more](/reference/migrations) | ✅ | ❌ | | `devserver.start` | Asynchronously starts a development server that watches the workspace for changes, similar to running `ng serve`. Since this is asynchronous it returns immediately. To manage the resulting server, use the `devserver.stop` and `devserver.wait_for_build` tools. | ✅ | ✅ | | `devserver.stop` | Stops a development server started by `devserver.start`. | ✅ | ✅ | | `devserver.wait_for_build` | Returns the output logs of the most recent build in a running development server started by `devserver.start`. If a build is currently ongoing, it will first wait for that build to complete and then return the logs. | ✅ | ✅ | +| `e2e` | Executes the end-to-end tests configured in the project. | ✅ | ✅ | +| `modernize` | Performs code migrations and provides further instructions on how to modernize Angular code to align with the latest best practices and syntax. [Learn more](https://angular.dev/reference/migrations) | ✅ | ❌ | +| `test` | Runs the project's unit tests. | ✅ | ✅ | ## Get Started @@ -133,11 +135,11 @@ For other IDEs, check your IDE's documentation for the proper location of the MC The `mcp` command can be configured with the following options passed as arguments in your IDE's MCP configuration: -| Option | Type | Description | Default | -| :---------------------------- | :-------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ | -| `--read-only` | `boolean` | Only register tools that do not make changes to the project. Your editor or coding agent may still perform edits. | `false` | -| `--local-only` | `boolean` | Only register tools that do not require an internet connection. Your editor or coding agent may still send data over the network. | `false` | -| `--experimental-tool`
`-E` | `string` | Enable an [experimental tool](#experimental-tools). Separate multiple options by spaces, e.g. `-E tool_a tool_b`. You can also enable tool groups like `devserver` to enable all related tools at once, e.g. `-E devserver`. | | +| Option | Type | Description | Default | +| :---------------------------- | :-------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------ | +| `--read-only` | `boolean` | Only register tools that do not make changes to the project. Your editor or coding agent may still perform edits. | `false` | +| `--local-only` | `boolean` | Only register tools that do not require an internet connection. Your editor or coding agent may still send data over the network. | `false` | +| `--experimental-tool`
`-E` | `string` | Enable an [experimental tool](#experimental-tools). Separate multiple options by spaces, e.g. `-E tool_a tool_b`. Enable all `devserver.x` tools by using `-E devserver`. | | For example, to run the server in read-only mode in VS Code, you would update your `mcp.json` like this: diff --git a/adev-ja/src/content/ai/mcp-server-setup.md b/adev-ja/src/content/ai/mcp-server-setup.md index ec20c1d2e1..6eba92921a 100644 --- a/adev-ja/src/content/ai/mcp-server-setup.md +++ b/adev-ja/src/content/ai/mcp-server-setup.md @@ -22,10 +22,12 @@ Angular CLI MCPサーバーは、開発ワークフローを支援するいく | 名前 | 説明 | `local-only` | `read-only` | | :------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------: | :---------: | | `build` | `ng build`を使用して、1回限りの非監視ビルドを実行します。 | ✅ | ❌ | -| `modernize` | コード移行を実行し、最新のベストプラクティスと構文に合わせてAngularコードをモダナイズする方法についてさらなる指示を提供します。[詳細を見る](/reference/migrations) | ✅ | ❌ | | `devserver.start` | ワークスペースの変更を監視する開発サーバーを非同期に起動します。`ng serve`の実行に似ています。これは非同期であるため、即座に戻ります。結果として得られるサーバーを管理するには、`devserver.stop`および`devserver.wait_for_build`ツールを使用します。 | ✅ | ✅ | | `devserver.stop` | `devserver.start`によって起動された開発サーバーを停止します。 | ✅ | ✅ | | `devserver.wait_for_build` | `devserver.start`によって起動された実行中の開発サーバーにおける最新のビルドの出力ログを返します。ビルドが現在進行中の場合、まずそのビルドが完了するのを待ってからログを返します。 | ✅ | ✅ | +| `e2e` | プロジェクトで設定されたエンドツーエンドテストを実行します。 | ✅ | ✅ | +| `modernize` | コード移行を実行し、最新のベストプラクティスと構文に合わせてAngularコードをモダナイズする方法についてさらなる指示を提供します。[詳細を見る](https://angular.dev/reference/migrations) | ✅ | ❌ | +| `test` | プロジェクトのユニットテストを実行します。 | ✅ | ✅ | ## 開始方法 {#get-started} @@ -137,7 +139,7 @@ MCPサーバーの設定に関する最新の手順については、JetBrains | :---------------------------- | :-------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------- | | `--read-only` | `boolean` | プロジェクトに変更を加えないツールのみを登録します。エディタまたはコーディングエージェントは引き続き編集を実行する場合があります。 | `false` | | `--local-only` | `boolean` | インターネット接続を必要としないツールのみを登録します。エディタまたはコーディングエージェントは引き続きネットワーク経由でデータを送信する場合があります。 | `false` | -| `--experimental-tool`
`-E` | `string` | [実験的ツール](#experimental-tools)を有効にします。複数のオプションをスペースで区切ります。例: `-E tool_a tool_b`。`devserver`のようなツールグループを有効にして、関連するすべてのツールを一度に有効にすることもできます。例: `-E devserver`。 | | +| `--experimental-tool`
`-E` | `string` | [実験的ツール](#experimental-tools)を有効にします。複数のオプションをスペースで区切ります。例: `-E tool_a tool_b`。`-E devserver`を使用してすべての`devserver.x`ツールを有効にできます。 | | たとえば、VS Codeにおいて読み取り専用モードでサーバーを実行する場合は、`mcp.json`を次のように更新します： diff --git a/adev-ja/src/content/ai/overview.en.md b/adev-ja/src/content/ai/overview.en.md index e2da24e392..b11f3e6623 100644 --- a/adev-ja/src/content/ai/overview.en.md +++ b/adev-ja/src/content/ai/overview.en.md @@ -38,7 +38,7 @@ Here are examples of how to build with Genkit and Angular: - [Agentic Apps with Genkit and Angular starter-kit](https://github.com/angular/examples/tree/main/genkit-angular-starter-kit) — New to building with AI? Start here with a basic app that features an agentic workflow. Perfect place to start for your first AI building experience. -- [Use Genkit in an Angular app](https://genkit.dev/docs/angular/) — Build a basic application that uses Genkit Flows, Angular and Gemini 2.5 Flash. This step-by-step walkthrough guides you through creating a full-stack Angular application with AI features. +- [Use Genkit in an Angular app](https://genkit.dev/docs/frameworks/angular/) — Build a basic application that uses Genkit Flows, Angular and Gemini 2.5 Flash. This step-by-step walkthrough guides you through creating a full-stack Angular application with AI features. - [Dynamic Story Generator app](https://github.com/angular/examples/tree/main/genkit-angular-story-generator) — Learn to build an agentic Angular app powered by Genkit, Gemini and Imagen 3 to dynamically generate a story based on user interaction featuring beautiful image panels to accompany the events that take place. Start here if you'd like to experiment with a more advanced use-case. diff --git a/adev-ja/src/content/ai/overview.md b/adev-ja/src/content/ai/overview.md index a8ed4a1fe1..a9d0604c72 100644 --- a/adev-ja/src/content/ai/overview.md +++ b/adev-ja/src/content/ai/overview.md @@ -38,7 +38,7 @@ GenkitとAngularで構築する方法の例を次に示します。 - [GenkitとAngularのスターターキットを使用したエージェントアプリ](https://github.com/angular/examples/tree/main/genkit-angular-starter-kit)— AIでの構築は初めてですか？エージェントワークフローを備えた基本的なアプリケーションから始めましょう。初めてのAI構築体験に最適な場所です。 -- [AngularアプリでGenkitを使用する](https://genkit.dev/docs/angular/)— Genkit Flows、Angular、Gemini 2.5 Flashを使用する基本的なアプリケーションを構築します。このステップバイステップのウォークスルーは、AI機能を備えたフルスタックAngularアプリケーションの作成をガイドします。 +- [AngularアプリでGenkitを使用する](https://genkit.dev/docs/frameworks/angular/)— Genkit Flows、Angular、Gemini 2.5 Flashを使用する基本的なアプリケーションを構築します。このステップバイステップのウォークスルーは、AI機能を備えたフルスタックAngularアプリケーションの作成をガイドします。 - [動的ストーリー生成アプリ](https://github.com/angular/examples/tree/main/genkit-angular-story-generator)— Genkit、Gemini、Imagen 3を搭載したエージェントAngularアプリケーションを構築し、ユーザーインタラクションに基づいてストーリーを動的に生成し、発生するイベントに付随する美しい画像パネルを特徴とする方法を学びます。より高度なユースケースを試したい場合は、ここから始めましょう。 diff --git a/adev-ja/src/content/best-practices/a11y.en.md b/adev-ja/src/content/best-practices/a11y.en.md index 14e751f560..54994a5c19 100644 --- a/adev-ja/src/content/best-practices/a11y.en.md +++ b/adev-ja/src/content/best-practices/a11y.en.md @@ -37,13 +37,10 @@ Some ARIA patterns expose DOM APIs or directive inputs that accept structured va

Attention

Please review your answers before continuing.

-
+
- -`, + `, }) export class ReviewDialog {} ``` @@ -99,7 +96,7 @@ The following example shows how to make a progress bar accessible by using host path="adev/src/content/examples/accessibility/src/app/progress-bar.component.ts" language="ts" linenums - highlight="[12, 20]"/> + highlight="[12, 19]"/> - - Home - - - About - - - Shop - + Home + About + Shop ``` diff --git a/adev-ja/src/content/best-practices/a11y.md b/adev-ja/src/content/best-practices/a11y.md index 36bba194d0..7c94114817 100644 --- a/adev-ja/src/content/best-practices/a11y.md +++ b/adev-ja/src/content/best-practices/a11y.md @@ -37,13 +37,10 @@ HELPFUL: 慣習的に、HTML属性は小文字の名前を使用します (`tabi

Attention

Please review your answers before continuing.

-
+
- -`, + `, }) export class ReviewDialog {} ``` @@ -99,7 +96,7 @@ Angularコンポーネントを作成する際には、サポートされてい path="adev/src/content/examples/accessibility/src/app/progress-bar.component.ts" language="ts" linenums - highlight="[12, 20]"/> + highlight="[12, 19]"/> e instanceof NavigationEnd)).subscribe(() => { ```angular-html ``` diff --git a/adev-ja/src/content/best-practices/error-handling.en.md b/adev-ja/src/content/best-practices/error-handling.en.md index d9cb07d367..8f88da54dd 100644 --- a/adev-ja/src/content/best-practices/error-handling.en.md +++ b/adev-ja/src/content/best-practices/error-handling.en.md @@ -52,7 +52,7 @@ Errors that are caught neither by the application code nor by the framework's ap ### Client-side rendering -Adding [`provideBrowserGlobalErrorListeners()`](/api/core/provideBrowserGlobalErrorListeners) to the [ApplicationConfig](guide/di/dependency-injection#at-the-application-root-level-using-applicationconfig) adds the `'error'` and `'unhandledrejection'` listeners to the browser window and forwards those errors to `ErrorHandler`. The Angular CLI generates new applications with this provider by default. The Angular team recommends handling these global errors for most applications, either with the framework's built-in listeners or with your own custom listeners. If you provide custom listeners, you can remove `provideBrowserGlobalErrorListeners`. +Adding [`provideBrowserGlobalErrorListeners()`](/api/core/provideBrowserGlobalErrorListeners) to the [ApplicationConfig](guide/di/defining-dependency-providers#application-bootstrap) adds the `'error'` and `'unhandledrejection'` listeners to the browser window and forwards those errors to `ErrorHandler`. The Angular CLI generates new applications with this provider by default. The Angular team recommends handling these global errors for most applications, either with the framework's built-in listeners or with your own custom listeners. If you provide custom listeners, you can remove `provideBrowserGlobalErrorListeners`. ### Server-side and hybrid rendering diff --git a/adev-ja/src/content/best-practices/error-handling.md b/adev-ja/src/content/best-practices/error-handling.md index 94e84906f9..3fc3e38128 100644 --- a/adev-ja/src/content/best-practices/error-handling.md +++ b/adev-ja/src/content/best-practices/error-handling.md @@ -52,7 +52,7 @@ export class GlobalErrorHandler implements ErrorHandler { ### クライアントサイドレンダリング {#client-side-rendering} -[ApplicationConfig](guide/di/dependency-injection#at-the-application-root-level-using-applicationconfig)に[`provideBrowserGlobalErrorListeners()`](/api/core/provideBrowserGlobalErrorListeners)を追加すると、ブラウザウィンドウに`'error'`と`'unhandledrejection'`リスナーが追加され、それらのエラーが`ErrorHandler`に転送されます。Angular CLIは、デフォルトでこのプロバイダーを使用して新しいアプリケーションを生成します。Angularチームは、ほとんどのアプリケーションで、フレームワークの組み込みリスナーまたは独自のカスタムリスナーのいずれかを使用して、これらのグローバルエラーを処理することを推奨しています。カスタムリスナーを提供する場合は、`provideBrowserGlobalErrorListeners`を削除できます。 +[ApplicationConfig](guide/di/defining-dependency-providers#application-bootstrap)に[`provideBrowserGlobalErrorListeners()`](/api/core/provideBrowserGlobalErrorListeners)を追加すると、ブラウザウィンドウに`'error'`と`'unhandledrejection'`リスナーが追加され、それらのエラーが`ErrorHandler`に転送されます。Angular CLIは、デフォルトでこのプロバイダーを使用して新しいアプリケーションを生成します。Angularチームは、ほとんどのアプリケーションで、フレームワークの組み込みリスナーまたは独自のカスタムリスナーのいずれかを使用して、これらのグローバルエラーを処理することを推奨しています。カスタムリスナーを提供する場合は、`provideBrowserGlobalErrorListeners`を削除できます。 ### サーバーサイドおよびハイブリッドレンダリング {#server-side-and-hybrid-rendering} diff --git a/adev-ja/src/content/best-practices/performance/overview.md b/adev-ja/src/content/best-practices/performance/overview.md new file mode 100644 index 0000000000..3ff3ac8044 --- /dev/null +++ b/adev-ja/src/content/best-practices/performance/overview.md @@ -0,0 +1,43 @@ +# Performance + +Angular includes many optimizations out of the box, but as applications grow, you may need to fine-tune both how quickly your app loads and how responsive it feels during use. These guides cover the tools and techniques Angular provides to help you build fast applications. + +## Loading performance + +Loading performance determines how quickly your application becomes visible and interactive. Slow loading directly impacts [Core Web Vitals](https://web.dev/vitals/) like Largest Contentful Paint (LCP) and Time to First Byte (TTFB). + +| Technique | What it does | When to use it | +| :------------------------------------------------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------------------------- | +| [Lazy-loaded routes](guide/routing/define-routes#lazily-loaded-components-and-routes) | Defers loading route components until navigation, reducing the initial bundle size | Applications with multiple routes where not all are needed on initial load | +| [Deferred loading with `@defer`](best-practices/performance/defer) | Splits components into separate bundles that load on demand | Components not visible on initial render, heavy third-party libraries, below-the-fold content | +| [Image optimization](best-practices/performance/image-optimization) | Prioritizes LCP images, lazy loads others, generates responsive `srcset` attributes | Any application that displays images | +| [Server-side rendering](best-practices/performance/ssr) | Renders pages on the server for faster first paint and better SEO, with [hydration](guide/hydration) to restore interactivity and [incremental hydration](guide/incremental-hydration) to defer hydrating sections until needed | Content-heavy applications, pages that need search engine indexing | + +## Runtime performance + +Runtime performance determines how responsive your application feels after it loads. Angular's change detection system keeps the DOM in sync with your data, and optimizing how and when it runs is the primary lever for improving runtime performance. + +| Technique | What it does | When to use it | +| :-------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------ | +| [Zoneless change detection](guide/zoneless) | Removes ZoneJS overhead and triggers change detection only when signals or events indicate a change | New applications (default in Angular v21+), or existing applications ready to migrate | +| [Slow computations](best-practices/slow-computations) | Identifies and optimizes expensive template expressions and lifecycle hooks | Profiling reveals specific components causing slow change detection cycles | +| [Skipping component subtrees](best-practices/skipping-subtrees) | Uses `OnPush` change detection to skip unchanged component trees | Applications that need finer control over change detection | +| [Zone pollution](best-practices/zone-pollution) | Prevents unnecessary change detection caused by third-party libraries or timers | Zone-based applications where profiling reveals excessive change detection cycles | + +## Measuring performance + +Identifying what to optimize is just as important as knowing how to optimize it. Angular integrates with browser developer tools to help you find bottlenecks. + +| Tool | What it does | +| :------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [Chrome DevTools profiling](best-practices/profiling-with-chrome-devtools) | Records Angular-specific performance data alongside browser profiling, with color-coded flame charts that show component rendering, change detection cycles, and lifecycle hooks | +| [Angular DevTools](tools/devtools) | A browser extension that provides a component tree inspector and a profiler for visualizing change detection cycles | + +## What to optimize first + +If you are unsure where to start, profile your application first using the [Chrome DevTools Angular track](best-practices/profiling-with-chrome-devtools) to identify specific bottlenecks. + +As a general starting point: + +- **Slow initial load** — Use [`@defer`](best-practices/performance/defer) to split large components out of the main bundle, [`NgOptimizedImage`](best-practices/performance/image-optimization) to prioritize above-the-fold images, and [server-side rendering](best-practices/performance/ssr) to deliver content faster. +- **Slow interactions after load** — Check whether [zoneless change detection](guide/zoneless) is enabled, look for [slow computations](best-practices/slow-computations) in templates or lifecycle hooks, and consider [`OnPush`](best-practices/skipping-subtrees) to reduce unnecessary change detection. diff --git a/adev-ja/src/content/best-practices/runtime-performance/profiling-with-chrome-devtools.md b/adev-ja/src/content/best-practices/runtime-performance/profiling-with-chrome-devtools.md index 67a98b65e0..d992e529a6 100644 --- a/adev-ja/src/content/best-practices/runtime-performance/profiling-with-chrome-devtools.md +++ b/adev-ja/src/content/best-practices/runtime-performance/profiling-with-chrome-devtools.md @@ -25,11 +25,10 @@ You can use the Angular track to better understand how your code runs in the bro You can enable Angular profiling in one of two ways: -1. Run `ng.enableProfiling()` in Chrome's console panel, or -1. Include a call to `enableProfiling()` in your application startup code (imported from `@angular/core`). +1. Run [`ng.enableProfiling()`](api/core/enableProfiling) in Chrome's console panel, or +1. Include a call to [`enableProfiling()`](api/core/enableProfiling) in your application startup code (imported from `@angular/core`). -NOTE: -Angular profiling works exclusively in development mode. +NOTE: Angular profiling works exclusively in development mode. Here is an example of how you can enable the integration in the application bootstrap to capture all possible events: diff --git a/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md b/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md index 77167acbed..2f549e4185 100644 --- a/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md +++ b/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md @@ -6,7 +6,7 @@ JavaScriptは、デフォルトでは、複数の異なるコンポーネント アプリケーションの一部が状態変化の影響を受けないと確信できる場合は、[OnPush](/api/core/ChangeDetectionStrategy)を使用して、コンポーネントのサブツリー全体の変更検知をスキップできます。 -## `OnPush`の使用 +## `OnPush`の使用 {#using-onpush} OnPush変更検知は、Angularにコンポーネントのサブツリーの変更検知を次の場合**のみ**実行するように指示します。 diff --git a/adev-ja/src/content/best-practices/runtime-performance/slow-computations.md b/adev-ja/src/content/best-practices/runtime-performance/slow-computations.md index 744080ee3d..b135069985 100644 --- a/adev-ja/src/content/best-practices/runtime-performance/slow-computations.md +++ b/adev-ja/src/content/best-practices/runtime-performance/slow-computations.md @@ -19,7 +19,7 @@ For example, in the preceding screenshot, the second recorded change detection c Here are several techniques to remove slow computations: - **Optimizing the underlying algorithm**. This is the recommended approach. If you can speed up the algorithm that is causing the problem, you can speed up the entire change detection mechanism. -- **Caching using pure pipes**. You can move the heavy computation to a pure [pipe](guide/pipes). Angular reevaluates a pure pipe only if it detects that its inputs have changed, compared to the previous time Angular called it. +- **Caching using pure pipes**. You can move the heavy computation to a pure [pipe](guide/templates/pipes). Angular reevaluates a pure pipe only if it detects that its inputs have changed, compared to the previous time Angular called it. - **Using memoization**. [Memoization](https://en.wikipedia.org/wiki/Memoization) is a similar technique to pure pipes, with the difference that pure pipes preserve only the last result from the computation where memoization could store multiple results. - **Avoid repaints/reflows in lifecycle hooks**. Certain [operations](https://web.dev/avoid-large-complex-layouts-and-layout-thrashing/) cause the browser to either synchronously recalculate the layout of the page or re-render it. Since reflows and repaints are generally slow, you want to avoid performing them in every change detection cycle. diff --git a/adev-ja/src/content/best-practices/style-guide.en.md b/adev-ja/src/content/best-practices/style-guide.en.md index 6b32e76466..9a8c542f75 100644 --- a/adev-ja/src/content/best-practices/style-guide.en.md +++ b/adev-ja/src/content/best-practices/style-guide.en.md @@ -197,7 +197,7 @@ ensures that the value set by Angular is not overwritten. ```ts @Component({ - /* ... */ + /*...*/ }) export class UserProfile { readonly userId = input(); @@ -211,7 +211,7 @@ advice applies to output properties and queries, but not input properties. ```ts @Component({ - /* ... */ + /*...*/ }) export class UserProfile { @Output() readonly userSaved = new EventEmitter(); @@ -276,7 +276,7 @@ then delegate to more specific behaviors based on the event details: ```ts @Component({ - /* ... */ + /*...*/ }) class RichText { handleKeydown(event: KeyboardEvent) { @@ -323,7 +323,7 @@ your class, import and `implement` these interfaces to ensure that the methods a import {Component, OnInit} from '@angular/core'; @Component({ - /* ... */ + /*...*/ }) export class UserProfile implements OnInit { // The `OnInit` interface ensures this method is named correctly. diff --git a/adev-ja/src/content/best-practices/style-guide.md b/adev-ja/src/content/best-practices/style-guide.md index fc541f67c0..3e2bce8a0d 100644 --- a/adev-ja/src/content/best-practices/style-guide.md +++ b/adev-ja/src/content/best-practices/style-guide.md @@ -197,7 +197,7 @@ readonlyアクセス修飾子は、Angularによって設定された値が上 ```ts @Component({ - /* ... */ + /*...*/ }) export class UserProfile { readonly userId = input(); @@ -211,7 +211,7 @@ export class UserProfile { ```ts @Component({ - /* ... */ + /*...*/ }) export class UserProfile { @Output() readonly userSaved = new EventEmitter(); @@ -276,7 +276,7 @@ export class UserProfile { ```ts @Component({ - /* ... */ + /*...*/ }) class RichText { handleKeydown(event: KeyboardEvent) { @@ -323,7 +323,7 @@ Angularは、各ライフサイクルメソッドに対応するTypeScriptイン import {Component, OnInit} from '@angular/core'; @Component({ - /* ... */ + /*...*/ }) export class UserProfile implements OnInit { // The `OnInit` interface ensures this method is named correctly. diff --git a/adev-ja/src/content/best-practices/update.en.md b/adev-ja/src/content/best-practices/update.en.md index 57297149e8..0e2cabdfa1 100644 --- a/adev-ja/src/content/best-practices/update.en.md +++ b/adev-ja/src/content/best-practices/update.en.md @@ -43,7 +43,7 @@ It also includes troubleshooting information and any recommended manual changes For simple updates, the CLI command [`ng update`](cli/update) is all you need. Without additional arguments, [`ng update`](cli/update) lists the updates that are available to you and provides recommended steps to update your application to the most current version. -[Angular Versioning and Releases](reference/releases#versioning 'Angular Release Practices, Versioning') describes the level of change that you can expect based on a release's version number. +[Angular Versioning and Releases](reference/releases#angular-versioning 'Angular Release Practices, Versioning') describes the level of change that you can expect based on a release's version number. It also describes supported update paths. ## Resource summary diff --git a/adev-ja/src/content/best-practices/update.md b/adev-ja/src/content/best-practices/update.md index 0c2aba53c6..b4b7735662 100644 --- a/adev-ja/src/content/best-practices/update.md +++ b/adev-ja/src/content/best-practices/update.md @@ -43,7 +43,7 @@ Angularアップデートガイドは、指定した現在のバージョンと 簡単なアップデートの場合は、CLIコマンド [`ng update`](cli/update) で十分です。 追加の引数なしで、[`ng update`](cli/update)は、使用可能なアップデートをリストし、アプリケーションを最新バージョンにアップデートするための推奨される手順を提供します。 -[Angularのバージョン管理とリリース](reference/releases#versioning 'Angular リリースプラクティス、バージョン管理')では、リリースのバージョン番号に基づいて期待できる変更レベルについて説明しています。 +[Angularのバージョン管理とリリース](reference/releases#angular-versioning 'Angular リリースプラクティス、バージョン管理')では、リリースのバージョン番号に基づいて期待できる変更レベルについて説明しています。 また、サポートされているアップデートパスについても説明しています。 ## リソースの概要 diff --git a/adev-ja/src/content/ecosystem/rxjs-interop/signals-interop.md b/adev-ja/src/content/ecosystem/rxjs-interop/signals-interop.md index ee763e37af..9b28a809a4 100644 --- a/adev-ja/src/content/ecosystem/rxjs-interop/signals-interop.md +++ b/adev-ja/src/content/ecosystem/rxjs-interop/signals-interop.md @@ -7,10 +7,10 @@ The `@angular/core/rxjs-interop` package offers APIs that help you integrate RxJ Use the `toSignal` function to create a signal which tracks the value of an Observable. It behaves similarly to the `async` pipe in templates, but is more flexible and can be used anywhere in an application. ```angular-ts -import { Component } from '@angular/core'; -import { AsyncPipe } from '@angular/common'; -import { interval } from 'rxjs'; -import { toSignal } from '@angular/core/rxjs-interop'; +import {Component} from '@angular/core'; +import {AsyncPipe} from '@angular/common'; +import {interval} from 'rxjs'; +import {toSignal} from '@angular/core/rxjs-interop'; @Component({ template: `{{ counter() }}`, @@ -47,7 +47,7 @@ If you don't provide an `initialValue`, the resulting signal will return `undefi Some Observables are guaranteed to emit synchronously, such as `BehaviorSubject`. In those cases, you can specify the `requireSync: true` option. -When `requiredSync` is `true`, `toSignal` enforces that the Observable emits synchronously on subscription. This guarantees that the signal always has a value, and no `undefined` type or initial value is required. +When `requireSync` is `true`, `toSignal` enforces that the Observable emits synchronously on subscription. This guarantees that the signal always has a value, and no `undefined` type or initial value is required. ### `manualCleanup` diff --git a/adev-ja/src/content/guide/animations/complex-sequences.en.md b/adev-ja/src/content/guide/animations/complex-sequences.en.md index ddd3fe3899..4070303cee 100644 --- a/adev-ja/src/content/guide/animations/complex-sequences.en.md +++ b/adev-ja/src/content/guide/animations/complex-sequences.en.md @@ -1,6 +1,6 @@ # Complex animation sequences -IMPORTANT: The `@angular/animations` package is now deprecated. The Angular team recommends using native CSS with `animate.enter` and `animate.leave` for animations for all new code. Learn more at the new enter and leave [animation guide](guide/animations/enter-and-leave). Also see [Migrating away from Angular's Animations package](guide/animations/migration) to learn how you can start migrating to pure CSS animations in your apps. +IMPORTANT: The `@angular/animations` package is now deprecated. The Angular team recommends using native CSS with `animate.enter` and `animate.leave` for animations for all new code. Learn more at the new enter and leave [animation guide](/guide/animations). Also see [Migrating away from Angular's Animations package](guide/animations/migration) to learn how you can start migrating to pure CSS animations in your apps. So far, we've learned simple animations of single HTML elements. Angular also lets you animate coordinated sequences, such as an entire grid or list of elements as they enter and leave a page. @@ -54,7 +54,7 @@ The following example demonstrates how to use the `query()` and `stagger()` func - Use `stagger()` to delay each animation by 30 milliseconds - Animate each element on screen for 0.5 seconds using a custom-defined easing curve, simultaneously fading it in and un-transforming it - + ## Parallel animation using group() function @@ -67,7 +67,7 @@ HELPFUL: The [`group()`](api/animations/group) function is used to group animati The following example uses [`group()`](api/animations/group)s on both `:enter` and `:leave` for two different timing configurations, thus applying two independent animations to the same element in parallel. - + ## Sequential vs. parallel animations @@ -91,11 +91,11 @@ The heroes list gradually re-enters the page as you delete each letter in the fi The HTML template contains a trigger called `filterAnimation`. - + The `filterAnimation` in the component's decorator contains three transitions. - + The code in this example performs the following tasks: diff --git a/adev-ja/src/content/guide/animations/complex-sequences.md b/adev-ja/src/content/guide/animations/complex-sequences.md index bff306decc..f68ddbd372 100644 --- a/adev-ja/src/content/guide/animations/complex-sequences.md +++ b/adev-ja/src/content/guide/animations/complex-sequences.md @@ -1,6 +1,6 @@ # 複雑なアニメーションシーケンス -IMPORTANT: `@angular/animations`パッケージは現在非推奨です。Angularチームは、新しく書くコードのアニメーションには`animate.enter`と`animate.leave`を使ったネイティブCSSの利用を推奨します。詳しくは、新しいenterとleaveの[アニメーションガイド](guide/animations/enter-and-leave)を参照してください。また、アプリケーションで純粋なCSSアニメーションへの移行を始める方法については、[AngularのAnimationsパッケージからの移行](guide/animations/migration)も参照してください。 +IMPORTANT: `@angular/animations`パッケージは現在非推奨です。Angularチームは、新しく書くコードのアニメーションには`animate.enter`と`animate.leave`を使ったネイティブCSSの利用を推奨します。詳しくは、新しいenterとleaveの[アニメーションガイド](/guide/animations)を参照してください。また、アプリケーションで純粋なCSSアニメーションへの移行を始める方法については、[AngularのAnimationsパッケージからの移行](guide/animations/migration)も参照してください。 ここまで、単一のHTML要素のシンプルなアニメーションを学んできました。 Angularでは、ページに出入りする要素のグリッド全体やリスト全体など、連携したシーケンスもアニメーション化できます。 @@ -54,7 +54,7 @@ Angularでは、ページに出入りする要素のグリッド全体やリス - `stagger()` を使って各アニメーションを30ミリ秒ずつ遅らせます。 - カスタム定義のイージングカーブを使って各要素を0.5秒かけてアニメーションし、フェードインと`transform`の解除を同時に行います。 - + ## group() 関数を使った並行アニメーション {#parallel-animation-using-group-function} @@ -67,7 +67,7 @@ HELPFUL: [`group()`](api/animations/group) 関数は、アニメーション化 次の例は、`:enter` と `:leave` の両方で [`group()`](api/animations/group) を使用し、2つの異なるタイミング設定を適用します。これにより、同じ要素に2つの独立したアニメーションを並行して適用できます。 - + ## 順次アニメーションと並行アニメーション {#sequential-vs-parallel-animations} @@ -91,11 +91,11 @@ Filter/Staggerタブで、**Search Heroes** テキストボックスに `Magnet` HTMLテンプレートには `filterAnimation` というトリガーが含まれます。 - + コンポーネントのデコレーターにある `filterAnimation` には3つのトランジションが含まれます。 - + この例のコードは次のタスクを実行します： diff --git a/adev-ja/src/content/guide/animations/css.en.md b/adev-ja/src/content/guide/animations/css.en.md index a88a32ef70..8d08ff0e58 100644 --- a/adev-ja/src/content/guide/animations/css.en.md +++ b/adev-ja/src/content/guide/animations/css.en.md @@ -52,10 +52,10 @@ Similarly, you can use `transition-duration`, `transition-delay`, and `transitio Animations can be triggered by toggling CSS styles or classes. Once a class is present on an element, the animation will occur. Removing the class will revert the element back to whatever CSS is defined for that element. Here's an example: - - - - + + + + ## Transition and Triggers @@ -64,10 +64,10 @@ Animations can be triggered by toggling CSS styles or classes. Once a class is p You can use css-grid to animate to auto height. - - - - + + + + If you don't have to worry about supporting all browsers, you can also check out `calc-size()`, which is the true solution to animating auto height. See [MDN's docs](https://developer.mozilla.org/en-US/docs/Web/CSS/calc-size) and (this tutorial)[https://frontendmasters.com/blog/one-of-the-boss-battles-of-css-is-almost-won-transitioning-to-auto/] for more information. @@ -76,18 +76,18 @@ If you don't have to worry about supporting all browsers, you can also check out You can create animations for when an item enters a view or leaves a view. Let's start by looking at how to animate an element entering a view. We'll do this with `animate.enter`, which will apply animation classes when an element enters the view. - - - - + + + + Animating an element when it leaves the view is similar to animating when entering a view. Use `animate.leave` to specify which CSS classes to apply when the element leaves the view. - - - - + + + + For more information on `animate.enter` and `animate.leave`, see the [Enter and Leave animations guide](guide/animations). @@ -96,10 +96,10 @@ For more information on `animate.enter` and `animate.leave`, see the [Enter and Animating on increment and decrement is a common pattern in applications. Here's an example of how you can accomplish that behavior. - - - - + + + + ### Disabling an animation or all animations @@ -147,10 +147,10 @@ Animations are often more complicated than just a simple fade in or fade out. Yo One common effect is to stagger the animations of each item in a list to create a cascade effect. This can be accomplished by utilizing `animation-delay` or `transition-delay`. Here is an example of what that CSS might look like. - - - - + + + + ### Parallel Animations @@ -171,10 +171,10 @@ In this example, the `rotate` and `fade-in` animations fire at the same time, bu Items in a `@for` loop will be removed and re-added, which will fire off animations using `@starting-styles` for entry animations. Alternatively, you can use `animate.enter` for this same behavior. Use `animate.leave` to animate elements as they are removed, as seen in the example below. - - - - + + + + ## Programmatic control of animations diff --git a/adev-ja/src/content/guide/animations/css.md b/adev-ja/src/content/guide/animations/css.md index 517a78f6f8..9c991483cb 100644 --- a/adev-ja/src/content/guide/animations/css.md +++ b/adev-ja/src/content/guide/animations/css.md @@ -52,10 +52,10 @@ CSSには、アプリケーション内で美しく魅力的なアニメーシ アニメーションは、CSSのスタイルやクラスを切り替えることでトリガーできます。クラスが要素に追加されるとアニメーションが実行され、クラスを削除すると、その要素に定義されているCSSに戻ります。例を示します。 - - - - + + + + ## トランジションとトリガー {#transition-and-triggers} @@ -64,10 +64,10 @@ CSSには、アプリケーション内で美しく魅力的なアニメーシ CSS Gridを使用すると、`height: auto`へのアニメーションを実現できます。 - - - - + + + + すべてのブラウザをサポートする必要がない場合は、`height: auto`をアニメーション化するためのより本質的な解決策である`calc-size()`も確認してください。詳しくは、[MDNのドキュメント](https://developer.mozilla.org/en-US/docs/Web/CSS/calc-size)とこの項目に関連する[チュートリアル](https://frontendmasters.com/blog/one-of-the-boss-battles-of-css-is-almost-won-transitioning-to-auto/)を参照してください。 @@ -76,30 +76,30 @@ CSS Gridを使用すると、`height: auto`へのアニメーションを実現 要素がビューに入るとき、またはビューから出るときのアニメーションを作成できます。まずは、ビューに入るときのアニメーションを見ていきましょう。`animate.enter`を使うと、要素がビューに入るときにアニメーション用のクラスが適用されます。 - - - - + + + + ビューから出るときのアニメーションも、ビューに入るときと同様です。`animate.leave`で、要素がビューから出るときに適用するCSSクラスを指定します。 - - - - + + + + -`animate.enter`と`animate.leave`について詳しくは、[EnterとLeaveのアニメーションガイド](guide/animations/enter-and-leave)を参照してください。 +`animate.enter`と`animate.leave`について詳しくは、[EnterとLeaveのアニメーションガイド](guide/animations)を参照してください。 ### インクリメントとデクリメントをアニメーション化する {#animating-increment-and-decrement} インクリメントとデクリメントに合わせてアニメーションするのは、アプリケーションでよくあるパターンです。以下はその例です。 - - - - + + + + ### アニメーション（またはすべてのアニメーション）を無効にする {#disabling-an-animation-or-all-animations} @@ -147,10 +147,10 @@ NOTE: これらのコールバックはバブリング（イベント伝播） よくある効果の1つに、リスト内の各要素のアニメーションを段階的に遅らせてカスケード効果を作るものがあります。これは`animation-delay`または`transition-delay`を利用して実現できます。次はそのCSSの例です。 - - - - + + + + ### 並行アニメーション {#parallel-animations} @@ -171,10 +171,10 @@ NOTE: これらのコールバックはバブリング（イベント伝播） `@for`ループ内の要素は削除されて再追加されるため、enterアニメーションとして`@starting-styles`を使用したアニメーションが実行されます。同じ挙動は`animate.enter`でも実現できます。要素が削除されるときにアニメーションするには、以下の例のように`animate.leave`を使用します。 - - - - + + + + ## アニメーションをプログラムで制御する {#programmatic-control-of-animations} diff --git a/adev-ja/src/content/guide/animations/enter-and-leave.en.md b/adev-ja/src/content/guide/animations/enter-and-leave.en.md index 2a994183a9..73be130a0f 100644 --- a/adev-ja/src/content/guide/animations/enter-and-leave.en.md +++ b/adev-ja/src/content/guide/animations/enter-and-leave.en.md @@ -45,7 +45,7 @@ You can use `animate.leave` to animate elements as they _leave_ the DOM. You can When the animation completes, Angular automatically removes the animated element from the DOM. -NOTE: When using multiple keyframe animations or transition properties on a an element, Angular waits to remove the element only _after_ the longest of those animations has completed. +NOTE: When using multiple keyframe animations or transition properties on an element, Angular waits to remove the element only _after_ the longest of those animations has completed. `animate.leave` can also be used with signals, and other bindings. You can use `animate.leave` with a single class or multiple classes. Either specify it as a simple string with spaces or a string array. @@ -55,6 +55,16 @@ NOTE: When using multiple keyframe animations or transition properties on a an e +### Element removal order matters + +There is some nuance to how `animate.leave` animations are run and when an animation will occur. `animate.leave` works if it is placed on the element that is being removed. However, `animate.leave` will **not** animate if it is on an element that is a _descendent_ of the element being removed. This is because when a parent node is removed, it takes the entire sub tree with it, and since there are no animations on that parent node, it will be removed immediately. This means there's no element to animate away with `animate.leave`. You will need to consider this in your usage of `animate.leave`. + + + + + + + ## Event Bindings, Functions, and Third-party Libraries Both `animate.enter` and `animate.leave` support event binding syntax that allows for function calls. You can use this syntax to call a function in your component code or utilize third-party animation libraries, like [GSAP](https://gsap.com/), [anime.js](https://animejs.com/), or any other JavaScript animation library. diff --git a/adev-ja/src/content/guide/animations/enter-and-leave.md b/adev-ja/src/content/guide/animations/enter-and-leave.md index 243f06d667..8191fb9722 100644 --- a/adev-ja/src/content/guide/animations/enter-and-leave.md +++ b/adev-ja/src/content/guide/animations/enter-and-leave.md @@ -55,6 +55,16 @@ NOTE: 要素に複数のキーフレームアニメーションまたはtransiti +### 要素の削除順序が重要 {#element-removal-order-matters} + +`animate.leave`アニメーションの実行方法とアニメーションが発生するタイミングには、いくつかの微妙な点があります。`animate.leave`は、削除される要素に配置されている場合に機能します。ただし、`animate.leave`は、削除される要素の_子孫_の要素にある場合はアニメーション**しません**。これは、親ノードが削除されると、サブツリー全体が一緒に削除され、その親ノードにアニメーションがないため、即座に削除されるためです。これは、`animate.leave`でアニメーション化する要素がないことを意味します。`animate.leave`の使用においてこのことを考慮する必要があります。 + + + + + + + ## イベントバインディング、関数、およびサードパーティライブラリ {#event-bindings-functions-and-third-party-libraries} `animate.enter`と`animate.leave`はどちらも、関数呼び出しを可能にするイベントバインディング構文をサポートしています。この構文を使用して、コンポーネントコード内の関数を呼び出したり、[GSAP](https://gsap.com/)、[anime.js](https://animejs.com/)などのサードパーティのアニメーションライブラリ、またはその他のJavaScriptアニメーションライブラリを利用したり可能です。 diff --git a/adev-ja/src/content/guide/animations/migration.md b/adev-ja/src/content/guide/animations/migration.md index 7872a9b507..e3a3e8dff3 100644 --- a/adev-ja/src/content/guide/animations/migration.md +++ b/adev-ja/src/content/guide/animations/migration.md @@ -38,7 +38,7 @@ The animations package allowed you to define various states using the [`state()` #### With Animations Package - + This same behavior can be accomplished natively by using CSS classes either using a keyframe animation or transition styling. @@ -69,17 +69,17 @@ The animations package required specifying triggers using the `trigger()` functi #### With Animations Package - - - + + + #### With Native CSS - - - - + + + + ## Transition and Triggers @@ -97,19 +97,19 @@ The animations package offers the ability to animate things that have been histo #### With Animations Package - - - + + + You can use css-grid to animate to auto height. #### With Native CSS - - - - + + + + If you don't have to worry about supporting all browsers, you can also check out `calc-size()`, which is the true solution to animating auto height. See [MDN's docs](https://developer.mozilla.org/en-US/docs/Web/CSS/calc-size) and (this tutorial)[https://frontendmasters.com/blog/one-of-the-boss-battles-of-css-is-almost-won-transitioning-to-auto/] for more information. @@ -121,29 +121,25 @@ The animations package offered the previously mentioned pattern matching for ent #### With Animations Package - - - + + + -Here's how the same thing can be accomplished without the animations package using `animate.enter`. - #### With Native CSS - - - - + + + + -Use `animate.leave` to animate elements as they leave the view, which will apply the specified CSS classes to the element as it leaves the view. - #### With Native CSS - - - - + + + + For more information on `animate.enter` and `animate.leave`, see the [Enter and Leave animations guide](guide/animations). @@ -155,17 +151,17 @@ Along with the aforementioned `:enter` and `:leave`, there's also `:increment` a #### With Animations Package - - - + + + #### With Native CSS - - - - + + + + ### Parent / Child Animations @@ -226,17 +222,17 @@ The `stagger()` function allowed you to delay the animation of each item in a li #### With Animations Package - - - + + + #### With Native CSS - - - - + + + + ### Parallel Animations @@ -257,20 +253,20 @@ In this example, the `rotate` and `fade-in` animations fire at the same time. Items reordering in a list works out of the box using the previously described techniques. No additional special work is required. Items in a `@for` loop will be removed and re-added properly, which will fire off animations using `@starting-styles` for entry animations. Alternatively, you can use `animate.enter` for this same behavior. Use `animate.leave` to animate elements as they are removed, as seen in the example above. -#### With Animations Package< +#### With Animations Package - - - + + + #### With Native CSS - - - - + + + + ## Migrating usages of AnimationPlayer diff --git a/adev-ja/src/content/guide/animations/overview.md b/adev-ja/src/content/guide/animations/overview.md index 04981eaa65..ec2ee0d7c0 100644 --- a/adev-ja/src/content/guide/animations/overview.md +++ b/adev-ja/src/content/guide/animations/overview.md @@ -1,6 +1,6 @@ # Introduction to Angular animations -IMPORTANT: The `@angular/animations` package is now deprecated. The Angular team recommends using native CSS with `animate.enter` and `animate.leave` for animations for all new code. Learn more at the new enter and leave [animation guide](guide/animations/enter-and-leave). Also see [Migrating away from Angular's Animations package](guide/animations/migration) to learn how you can start migrating to pure CSS animations in your apps. +IMPORTANT: The `@angular/animations` package is now deprecated. The Angular team recommends using native CSS with `animate.enter` and `animate.leave` for animations for all new code. Learn more at the new enter and leave [animation guide](guide/animations). Also see [Migrating away from Angular's Animations package](guide/animations/migration) to learn how you can start migrating to pure CSS animations in your apps. Animation provides the illusion of motion: HTML elements change styling over time. Well-designed animations can make your application more fun and straightforward to use, but they aren't just cosmetic. @@ -52,7 +52,7 @@ For `NgModule` based applications import `BrowserAnimationsModule`, which introd If you plan to use specific animation functions in component files, import those functions from `@angular/animations`. - + See all [available animation functions](guide/legacy-animations#animations-api-summary) at the end of this guide. @@ -61,7 +61,7 @@ See all [available animation functions](guide/legacy-animations#animations-api-s In the component file, add a metadata property called `animations:` within the `@Component()` decorator. You put the trigger that defines an animation within the `animations` metadata property. - + @@ -84,7 +84,7 @@ Run the following command in terminal to generate the component: ng g component open-close ``` -This will create the component at `src/app/open-close.component.ts`. +This will create the component at `src/app/open-close.ts`. ### Animation state and styles @@ -99,11 +99,11 @@ Let's see how Angular's [`state()`](api/animations/state) function works with th In this code snippet, multiple style attributes are set at the same time for the state. In the `open` state, the button has a height of 200 pixels, an opacity of 1, and a yellow background color. - + In the following `closed` state, the button has a height of 100 pixels, an opacity of 0.8, and a background color of blue. - + ### Transitions and timing @@ -171,7 +171,7 @@ HELPFUL: See the Material Design website's topic on [Natural easing curves](http This example provides a state transition from `open` to `closed` with a 1-second transition between states. - + In the preceding code snippet, the `=>` operator indicates unidirectional transitions, and `<=>` is bidirectional. Within the transition, `animate()` specifies how long the transition takes. @@ -179,7 +179,7 @@ In this case, the state change from `open` to `closed` takes 1 second, expressed This example adds a state transition from the `closed` state to the `open` state with a 0.5-second transition animation arc. - + HELPFUL: Some additional notes on using styles within [`state`](api/animations/state) and `transition` functions. @@ -212,7 +212,7 @@ However, it's possible for multiple triggers to be active at once. Animations are defined in the metadata of the component that controls the HTML element to be animated. Put the code that defines your animations under the `animations:` property within the `@Component()` decorator. - + When you've defined an animation trigger for a component, attach it to an element in that component's template by wrapping the trigger name in brackets and preceding it with an `@` symbol. Then, you can bind the trigger to a template expression using standard Angular property binding syntax as shown below, where `triggerName` is the name of the trigger, and `expression` evaluates to a defined animation state. @@ -225,7 +225,7 @@ The animation is executed or triggered when the expression value changes to a ne The following code snippet binds the trigger to the value of the `isOpen` property. - + In this example, when the `isOpen` expression evaluates to a defined state of `open` or `closed`, it notifies the trigger `openClose` of a state change. Then it's up to the `openClose` code to handle the state change and kick off a state change animation. @@ -242,9 +242,9 @@ In the HTML template file, use the trigger name to attach the defined animations Here are the code files discussed in the transition example. - - - + + + ### Summary diff --git a/adev-ja/src/content/guide/animations/reusable-animations.md b/adev-ja/src/content/guide/animations/reusable-animations.md index 350aaa4b4a..b1519edfe8 100644 --- a/adev-ja/src/content/guide/animations/reusable-animations.md +++ b/adev-ja/src/content/guide/animations/reusable-animations.md @@ -1,6 +1,6 @@ # Reusable animations -IMPORTANT: The `@angular/animations` package is now deprecated. The Angular team recommends using native CSS with `animate.enter` and `animate.leave` for animations for all new code. Learn more at the new enter and leave [animation guide](guide/animations/enter-and-leave). Also see [Migrating away from Angular's Animations package](guide/animations/migration) to learn how you can start migrating to pure CSS animations in your apps. +IMPORTANT: The `@angular/animations` package is now deprecated. The Angular team recommends using native CSS with `animate.enter` and `animate.leave` for animations for all new code. Learn more at the new enter and leave [animation guide](guide/animations). Also see [Migrating away from Angular's Animations package](guide/animations/migration) to learn how you can start migrating to pure CSS animations in your apps. This topic provides some examples of how to create reusable animations. @@ -23,7 +23,7 @@ For example, the following snippet exports the animation `trigger`. From this point, you can import reusable animation variables in your component class. For example, the following code snippet imports the `transitionAnimation` variable and uses it via the `useAnimation()` function. - + ## More on Angular animations diff --git a/adev-ja/src/content/guide/animations/route-animations.md b/adev-ja/src/content/guide/animations/route-animations.md deleted file mode 100644 index 1fbbd973d0..0000000000 --- a/adev-ja/src/content/guide/animations/route-animations.md +++ /dev/null @@ -1,157 +0,0 @@ -# Route transition animations - -When a user navigates from one route to another, the Angular Router maps the URL path to the relevant component and displays its view. Animating this route transition can greatly enhance the user experience. The Router has support for the View Transitions API when navigating between routes in Chrome/Chromium browsers. - -HELPFUL: The Router's native View Transitions integration is currently in [developer preview](/reference/releases#developer-preview). Native View Transitions are also a relatively new feature so there may be limited support in some browsers. - -## How View Transitions work - -The native browser method that’s used for view transitions is `document.startViewTransition`. When `startViewTransition()` is called, the browser captures the current state of the page which includes taking a screenshot. The method takes a callback that updates the DOM and this function can be asynchronous. The new state is captured and the transition begins in the next animation frame when the promise returned by the callback resolves. - -Here’s an example of the startViewTransition api: - -```ts -document.startViewTransition(async () => { - await updateTheDOMSomehow(); -}); -``` - -If you’re curious to read more about the details of the browser API, the [Chrome Explainer](https://developer.chrome.com/docs/web-platform/view-transitions) is an invaluable resource. - -## How the Router uses view transitions - -Several things happen after navigation starts in the router: route matching, loading lazy routes and components, executing guards and resolvers to name a few. Once these have completed successfully, the new routes are ready to be activated. This route activation is the DOM update that we want to perform as part of the view transition. - -When the view transition feature is enabled, navigation “pauses” and a call is made to the browser’s `startViewTransition` method. Once the `startViewTransition` callback executes (this happens asynchronously, as outlined in the spec here), navigation “resumes”. The remaining steps for the router navigation include updating the browser URL and activating or deactivating the matched routes (the DOM update). - -Finally, the callback passed to `startViewTransition` returns a Promise that resolves once Angular has finished rendering. As described above, this indicates to the browser that the new DOM state should be captured and the transition should begin. - -View transitions are a [progressive enhancement](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement). If the browser does not support the API, the Router will perform the DOM updates without calling `startViewTransition` and the navigation will not be animated. - -## Enabling View Transitions in the Router - -To enable this feature, simply add `withViewTransitions` to the `provideRouter` or set `enableViewTransitions: true` in `RouterModule.forRoot`: - -```ts -// Standalone bootstrap -bootstrapApplication(MyApp, {providers: [ - provideRouter(ROUTES, withViewTransitions()), -]}); - -// NgModule bootstrap -@NgModule({ - imports: [RouterModule.forRoot(routes, {enableViewTransitions: true})] -}) -export class AppRouting {} -``` - -[Try the “count” example on StackBlitz](https://stackblitz.com/edit/stackblitz-starters-2dnvtm?file=src%2Fmain.ts) - -This example uses the counter application from the Chrome explainer and replaces the direct call to startViewTransition when the counter increments with a router navigation. - -## Using CSS to customize transitions - -View transitions can be customized with CSS. We can also instruct the browser to create separate elements for the transition by setting a view-transition-name. We can expand the first example by adding view-transition-name: count to the .count style in the Counter component. Then, in the global styles, we can define a custom animation for this view transition: - -```css -/* Custom transition */ -@keyframes rotate-out { - to { - transform: rotate(90deg); - } -} -@keyframes rotate-in { - from { - transform: rotate(-90deg); - } -} -::view-transition-old(count), -::view-transition-new(count) { - animation-duration: 200ms; - animation-name: -ua-view-transition-fade-in, rotate-in; -} -::view-transition-old(count) { - animation-name: -ua-view-transition-fade-out, rotate-out; -} -``` - -It is important that the view transition animations are defined in a global style file. They cannot be defined in the component styles because the default view encapsulation will scope the styles to the component. - -[Try the updated “count” example on StackBlitz](https://stackblitz.com/edit/stackblitz-starters-fwn4i7?file=src%2Fmain.ts) - -## Controlling transitions with onViewTransitionCreated - -The `withViewTransitions` router feature can also be called with an options object that includes an `onViewTransitionCreated` callback. This callback is run in an [injection context](/guide/di/dependency-injection-context#run-within-an-injection-context) and receives a [ViewTransitionInfo](/api/router/ViewTransitionInfo) object that includes the `ViewTransition` returned from `startViewTransition`, as well as the `ActivatedRouteSnapshot` that the navigation is transitioning from and the new one that it is transitioning to. - -This callback can be used for any number of customizations. For example, you might want to skip transitions under certain conditions. We use this on the new angular.dev docs site: - -```ts -withViewTransitions({ - onViewTransitionCreated: ({transition}) => { - const router = inject(Router); - const targetUrl = router.getCurrentNavigation()!.finalUrl!; - // Skip the transition if the only thing - // changing is the fragment and queryParams - const config = { - paths: 'exact', - matrixParams: 'exact', - fragment: 'ignored', - queryParams: 'ignored', - }; - - if (router.isActive(targetUrl, config)) { - transition.skipTransition(); - } - }, -}), -``` - -In this code snippet, we create a `UrlTree` from the `ActivatedRouteSnapshot` the navigation is going to. We then check with the Router to see if this `UrlTree` is already active, ignoring any differences in the fragment or query parameters. If it is already active, we call skipTransition which will skip the animation portion of the view transition. This is the case when clicking on an anchor link that will only scroll to another location in the same document. - -## Examples from the Chrome explainer adapted to Angular - -We’ve recreated some of the great examples from the Chrome Team in Angular for you to explore. - -### Transitioning elements don’t need to be the same DOM element - -* [Chrome Explainer](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#transitioning_elements_dont_need_to_be_the_same_dom_element) -* [Angular Example on StackBlitz](https://stackblitz.com/edit/stackblitz-starters-dh8npr?file=src%2Fmain.ts) - -### Custom entry and exit animations - -* [Chrome Explainer](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#custom_entry_and_exit_transitions) -* [Angular Example on StackBlitz](https://stackblitz.com/edit/stackblitz-starters-8kly3o) - -### Async DOM updates and waiting for content - -* [Chrome Explainer](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#async_dom_updates_and_waiting_for_content) - -> During this time, the page is frozen, so delays here should be kept to a minimum…in some cases it’s better to avoid the delay altogether, and use the content you already have. - -The view transition feature in the Angular router does not provide a way to delay the animation. For the moment, our stance is that it’s always better to use the content you have rather than making the page non-interactive for any additional amount of time. - -### Handle multiple view transition styles with view transition types - -* [Chrome Explainer](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#view-transition-types) -* [Angular Example on StackBlitz](https://stackblitz.com/edit/stackblitz-starters-vxzcam) - -### Handle multiple view transition styles with a class name on the view transition root (deprecated) - -* [Chrome Explainer](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#changing-on-navigation-type) -* [Angular Example on StackBlitz](https://stackblitz.com/edit/stackblitz-starters-nmnzzg?file=src%2Fmain.ts) - -### Transitioning without freezing other animations - -* [Chrome Explainer](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#transitioning-without-freezing) -* [Angular Example on StackBlitz](https://stackblitz.com/edit/stackblitz-starters-76kgww) - -### Animating with Javascript - -* [Chrome Explainer](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#animating-with-javascript) -* [Angular Example on StackBlitz](https://stackblitz.com/edit/stackblitz-starters-cklnkm) - -## Native View Transitions Alternative - -Animating the transition between routes can also be done with the `@angular/animations` package. -The animation [triggers and transitions](/guide/animations/transition-and-triggers) -can be derived from the router state, such as the current URL or `ActivatedRoute`. diff --git a/adev-ja/src/content/guide/animations/transition-and-triggers.md b/adev-ja/src/content/guide/animations/transition-and-triggers.md index 1856a2e249..1e03b72ed9 100644 --- a/adev-ja/src/content/guide/animations/transition-and-triggers.md +++ b/adev-ja/src/content/guide/animations/transition-and-triggers.md @@ -1,6 +1,6 @@ # Animation transitions and triggers -IMPORTANT: The `@angular/animations` package is now deprecated. The Angular team recommends using native CSS with `animate.enter` and `animate.leave` for animations for all new code. Learn more at the new enter and leave [animation guide](guide/animations/enter-and-leave). Also see [Migrating away from Angular's Animations package](guide/animations/migration) to learn how you can start migrating to pure CSS animations in your apps. +IMPORTANT: The `@angular/animations` package is now deprecated. The Angular team recommends using native CSS with `animate.enter` and `animate.leave` for animations for all new code. Learn more at the new enter and leave [animation guide](guide/animations). Also see [Migrating away from Angular's Animations package](guide/animations/migration) to learn how you can start migrating to pure CSS animations in your apps. This guide goes into depth on special transition states such as the `*` wildcard and `void`. It shows how these special states are used for elements entering and leaving a view. This section also explores multiple animation triggers, animation callbacks, and sequence-based animation using keyframes. @@ -23,11 +23,11 @@ Instead of defining each state-to-state transition pair, any transition to `clos This allows the addition of new states without having to include separate transitions for each one. - + Use a double arrow syntax to specify state-to-state transitions in both directions. - + ### Use wildcard state with multiple transition states @@ -37,7 +37,7 @@ If the button can change from `open` to either `closed` or something like `inPro wildcard state with 3 states - + The `* => *` transition applies when any change between two states takes place. @@ -52,7 +52,7 @@ To do this, list the more specific transitions _before_ `* => *`. Use the wildcard `*` with a style to tell the animation to use whatever the current style value is, and animate with that. Wildcard is a fallback value that's used if the state being animated isn't declared within the trigger. - + ### Void state @@ -76,7 +76,7 @@ Add a new behavior: - When you add a hero to the list of heroes, it appears to fly onto the page from the left - When you remove a hero from the list, it appears to fly out to the right - + In the preceding code, you applied the `void` state when the HTML element isn't attached to a view. @@ -105,11 +105,11 @@ As a rule of thumb consider that any element being added to the DOM by Angular p This example has a special trigger for the enter and leave animation called `myInsertRemoveTrigger`. The HTML template contains the following code. - + In the component file, the `:enter` transition sets an initial opacity of 0. It then animates it to change that opacity to 1 as the element is inserted into the view. - + Note that this example doesn't need to use [`state()`](api/animations/state). @@ -121,13 +121,13 @@ Use these to kick off a transition when a numeric value has increased or decreas HELPFUL: The following example uses `query()` and `stagger()` methods. For more information on these methods, see the [complex sequences](guide/legacy-animations/complex-sequences) page. - + ## Boolean values in transitions If a trigger contains a Boolean value as a binding value, then this value can be matched using a `transition()` expression that compares `true` and `false`, or `1` and `0`. - + In the code snippet above, the HTML template binds a `
` element to a trigger named `openClose` with a status expression of `isOpen`, and with possible values of `true` and `false`. This pattern is an alternative to the practice of creating two named states like `open` and `close`. @@ -136,7 +136,7 @@ Inside the `@Component` metadata under the `animations:` property, when the stat In this case, the animation uses whatever height the element already had before the animation started. When the element is `closed`, the element gets animated to a height of 0, which makes it invisible. - + ## Multiple animation triggers @@ -156,8 +156,8 @@ When true, the `@.disabled` binding prevents all animations from rendering. The following code sample shows how to use this feature. - - + + When the `@.disabled` binding is true, the `@childAnimation` trigger doesn't kick off. @@ -177,7 +177,7 @@ Those elements can still animate. To turn off all animations for an Angular application, place the `@.disabled` host binding on the topmost Angular component. - + HELPFUL: Disabling animations application-wide is useful during end-to-end \(E2E\) testing. @@ -186,12 +186,12 @@ HELPFUL: Disabling animations application-wide is useful during end-to-end \(E2E The animation `trigger()` function emits _callbacks_ when it starts and when it finishes. The following example features a component that contains an `openClose` trigger. - + In the HTML template, the animation event is passed back via `$event`, as `@triggerName.start` and `@triggerName.done`, where `triggerName` is the name of the trigger being used. In this example, the trigger `openClose` appears as follows. - + A potential use for animation callbacks could be to cover for a slow API call, such as a database lookup. For example, an **InProgress** button can be set up to have its own looping animation while the backend system operation finishes. @@ -204,7 +204,7 @@ An animation can influence an end user to _perceive_ the operation as faster, ev Callbacks can serve as a debugging tool, for example in conjunction with `console.warn()` to view the application's progress in a browser's Developer JavaScript Console. The following code snippet creates console log output for the original example, a button with the two states of `open` and `closed`. - + ## Keyframes @@ -217,7 +217,7 @@ For example, the button, instead of fading, could change color several times ove The code for this color change might look like this. - + ### Offset @@ -233,7 +233,7 @@ Specifying an offset of 0.8 for the middle transition in the preceding example m The code with offsets specified would be as follows. - + You can combine keyframes with `duration`, `delay`, and `easing` within a single animation. @@ -250,7 +250,7 @@ Here's an example of using keyframes to create a pulse effect: The code snippet for this animation might look like this. - + ### Animatable properties and units @@ -285,7 +285,7 @@ In these cases, you can use a special wildcard `*` property value under `style() The following example has a trigger called `shrinkOut`, used when an HTML element leaves the page. The animation takes whatever height the element has before it leaves, and animates from that height to zero. - + ### Keyframes summary diff --git a/adev-ja/src/content/guide/aria/accordion.en.md b/adev-ja/src/content/guide/aria/accordion.en.md index 2588aeeb47..4a27dc5e0b 100644 --- a/adev-ja/src/content/guide/aria/accordion.en.md +++ b/adev-ja/src/content/guide/aria/accordion.en.md @@ -145,13 +145,11 @@ Use the `ngAccordionContent` directive on an `ng-template` to defer rendering co ```angular-html
- +
- Description + Description
diff --git a/adev-ja/src/content/guide/aria/accordion.md b/adev-ja/src/content/guide/aria/accordion.md index 8c7ec06118..df3d224cf9 100644 --- a/adev-ja/src/content/guide/aria/accordion.md +++ b/adev-ja/src/content/guide/aria/accordion.md @@ -145,13 +145,11 @@ NOTE: `multiExpandable`入力はデフォルトで`true`です。単一展開の ```angular-html
- +
- Description + Description
diff --git a/adev-ja/src/content/guide/aria/grid.en.md b/adev-ja/src/content/guide/aria/grid.en.md index 2b162aee15..e91a02a4b3 100644 --- a/adev-ja/src/content/guide/aria/grid.en.md +++ b/adev-ja/src/content/guide/aria/grid.en.md @@ -135,11 +135,13 @@ Instead of tabbing through each button, users navigate with arrow keys and only Enable selection with `[enableSelection]="true"` and configure how focus and selection interact. ```angular-html - +
diff --git a/adev-ja/src/content/guide/aria/grid.md b/adev-ja/src/content/guide/aria/grid.md index 88aa28ebf5..e1d47fb853 100644 --- a/adev-ja/src/content/guide/aria/grid.md +++ b/adev-ja/src/content/guide/aria/grid.md @@ -135,11 +135,13 @@ `[enableSelection]="true"`で選択を有効にし、フォーカスと選択がどのように相互作用するかを設定します。 ```angular-html -
Cell 1 Cell 2
+
diff --git a/adev-ja/src/content/guide/aria/listbox.en.md b/adev-ja/src/content/guide/aria/listbox.en.md index d7a753a2d9..38238eb3e2 100644 --- a/adev-ja/src/content/guide/aria/listbox.en.md +++ b/adev-ja/src/content/guide/aria/listbox.en.md @@ -110,10 +110,21 @@ With `orientation="horizontal"`, left and right arrow keys navigate between opti Listbox supports two selection modes that control when items become selected. - +The `'follow'` mode automatically selects the focused item, providing faster interaction when selection changes frequently. The `'explicit'` mode requires Space or Enter to confirm selection, preventing accidental changes while navigating. Dropdown patterns typically use `'follow'` mode for single selection. + +#### Explicit + + + + + + +#### Follow + + + + + | Mode | Description | | ------------ | ------------------------------------------------------------------------------------------------------ | diff --git a/adev-ja/src/content/guide/aria/listbox.md b/adev-ja/src/content/guide/aria/listbox.md index e16c3ec507..8cc24a22e2 100644 --- a/adev-ja/src/content/guide/aria/listbox.md +++ b/adev-ja/src/content/guide/aria/listbox.md @@ -110,10 +110,21 @@ Angularのリストボックスは、以下の機能を備えた完全にアク リストボックスは、アイテムがいつ選択されるかを制御する2つの選択モードをサポートしています。 - +`'follow'`モードはフォーカスされたアイテムを自動的に選択し、選択が頻繁に変わる場合により速いインタラクションを提供します。`'explicit'`モードは選択を確定するためにSpaceキーまたはEnterキーが必要で、ナビゲーション中の意図しない変更を防ぎます。ドロップダウンパターンでは、通常、単一選択のために`'follow'`モードが使用されます。 + +#### Explicit + + + + + + +#### Follow + + + + + | モード | 説明 | | ------------ | -------------------------------------------------------------------------------------- | @@ -122,7 +133,7 @@ Angularのリストボックスは、以下の機能を備えた完全にアク TIP: ドロップダウンパターンでは、通常、単一選択のために`'follow'`モードが使用されます。 -## API +## API {#apis} ### Listboxディレクティブ {#listbox-directive} diff --git a/adev-ja/src/content/guide/aria/menu.en.md b/adev-ja/src/content/guide/aria/menu.en.md index 444325cfd2..fe69c67c6d 100644 --- a/adev-ja/src/content/guide/aria/menu.en.md +++ b/adev-ja/src/content/guide/aria/menu.en.md @@ -190,10 +190,9 @@ The container directive for menu items. #### Methods -| Method | Parameters | Description | -| ---------------- | ---------- | ---------------------------------- | -| `close` | none | Closes the menu | -| `focusFirstItem` | none | Moves focus to the first menu item | +| Method | Parameters | Description | +| ------- | ---------- | --------------- | +| `close` | none | Closes the menu | ### MenuBar diff --git a/adev-ja/src/content/guide/aria/menu.md b/adev-ja/src/content/guide/aria/menu.md index c9bbe91404..b0f1e8966a 100644 --- a/adev-ja/src/content/guide/aria/menu.md +++ b/adev-ja/src/content/guide/aria/menu.md @@ -190,10 +190,9 @@ #### メソッド {#methods} -| Method | Parameters | Description | -| ---------------- | ---------- | ---------------------------------- | -| `close` | none | メニューを閉じます | -| `focusFirstItem` | none | 最初のメニューアイテムにフォーカスを移動します | +| Method | Parameters | Description | +| ------- | ---------- | --------------- | +| `close` | none | メニューを閉じます | ### MenuBar {#menubar} diff --git a/adev-ja/src/content/guide/components/advanced-configuration.en.md b/adev-ja/src/content/guide/components/advanced-configuration.en.md index 4e71034ee8..875e44ebab 100644 --- a/adev-ja/src/content/guide/components/advanced-configuration.en.md +++ b/adev-ja/src/content/guide/components/advanced-configuration.en.md @@ -40,7 +40,7 @@ import {Component, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; @Component({ ..., schemas: [CUSTOM_ELEMENTS_SCHEMA], - template: '' + template: '' }) export class ComponentWithCustomElements { } ``` diff --git a/adev-ja/src/content/guide/components/advanced-configuration.md b/adev-ja/src/content/guide/components/advanced-configuration.md index ffc6d52d9c..d33a1340eb 100644 --- a/adev-ja/src/content/guide/components/advanced-configuration.md +++ b/adev-ja/src/content/guide/components/advanced-configuration.md @@ -40,7 +40,7 @@ import {Component, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; @Component({ ..., schemas: [CUSTOM_ELEMENTS_SCHEMA], - template: '' + template: '' }) export class ComponentWithCustomElements { } ``` diff --git a/adev-ja/src/content/guide/components/anatomy-of-components.en.md b/adev-ja/src/content/guide/components/anatomy-of-components.en.md index c9732799a0..1bb8e6ae96 100644 --- a/adev-ja/src/content/guide/components/anatomy-of-components.en.md +++ b/adev-ja/src/content/guide/components/anatomy-of-components.en.md @@ -14,9 +14,9 @@ You provide Angular-specific information for a component by adding a `@Component ```angular-ts {highlight: [1, 2, 3, 4]} @Component({ selector: 'profile-photo', - template: `Your profile photo`, + template: `Your profile photo`, }) -export class ProfilePhoto { } +export class ProfilePhoto {} ``` For full details on writing Angular templates, including data binding, event handling, and control flow, see the [Templates guide](guide/templates). @@ -28,10 +28,14 @@ Components can optionally include a list of CSS styles that apply to that compon ```angular-ts {highlight: [4]} @Component({ selector: 'profile-photo', - template: `Your profile photo`, - styles: `img { border-radius: 50%; }`, + template: `Your profile photo`, + styles: ` + img { + border-radius: 50%; + } + `, }) -export class ProfilePhoto { } +export class ProfilePhoto {} ``` By default, a component's styles only affect elements defined in that component's template. See [Styling Components](guide/components/styling) for details on Angular's approach to styling. @@ -70,7 +74,7 @@ import {ProfilePhoto} from './profile-photo'; export class UserProfile {} ``` -By default, Angular components are _standalone_, meaning that you can directly add them to the `imports` array of other components. Components created with an earlier version of Angular may instead specify `standalone: false` in their `@Component` decorator. For these components, you instead import the `NgModule` in which the component is defined. See the full [`NgModule` guide](guide/ngmodules) for details. +By default, Angular components are _standalone_, meaning that you can directly add them to the `imports` array of other components. Components created with an earlier version of Angular may instead specify `standalone: false` in their `@Component` decorator. For these components, you instead import the `NgModule` in which the component is defined. See the full [`NgModule` guide](guide/ngmodules/overview) for details. Important: In Angular versions before 19.0.0, the `standalone` option defaults to `false`. @@ -94,13 +98,13 @@ You show a component by creating a matching HTML element in the template of _oth @Component({ selector: 'profile-photo', }) -export class ProfilePhoto { } +export class ProfilePhoto {} @Component({ -imports: [ProfilePhoto], -template: `` + imports: [ProfilePhoto], + template: ``, }) -export class UserProfile { } +export class UserProfile {} ``` Angular creates an instance of the component for every matching HTML element it encounters. The DOM element that matches a component's selector is referred to as that component's **host element**. The contents of a component's template are rendered inside its host element. diff --git a/adev-ja/src/content/guide/components/anatomy-of-components.md b/adev-ja/src/content/guide/components/anatomy-of-components.md index 53464d6882..ff31ad1d4d 100644 --- a/adev-ja/src/content/guide/components/anatomy-of-components.md +++ b/adev-ja/src/content/guide/components/anatomy-of-components.md @@ -14,9 +14,9 @@ TypeScriptクラスの上部に `@Component` [デコレーター](https://www.ty ```angular-ts {highlight: [1, 2, 3, 4]} @Component({ selector: 'profile-photo', - template: `Your profile photo`, + template: `Your profile photo`, }) -export class ProfilePhoto { } +export class ProfilePhoto {} ``` データバインディング、イベント処理、制御フローなど、Angularテンプレート作成に関する詳細は、[テンプレートガイド](guide/templates)を参照してください。 @@ -28,10 +28,14 @@ export class ProfilePhoto { } ```angular-ts {highlight: [4]} @Component({ selector: 'profile-photo', - template: `Your profile photo`, - styles: `img { border-radius: 50%; }`, + template: `Your profile photo`, + styles: ` + img { + border-radius: 50%; + } + `, }) -export class ProfilePhoto { } +export class ProfilePhoto {} ``` デフォルトでは、コンポーネントのスタイルは、そのコンポーネントのテンプレートで定義された要素にのみ影響を与えます。Angularのスタイリングアプローチの詳細については、[コンポーネントのスタイリング](guide/components/styling)を参照してください。 @@ -70,7 +74,7 @@ import {ProfilePhoto} from './profile-photo'; export class UserProfile {} ``` -デフォルトでは、Angularコンポーネントは*スタンドアロン*です。つまり、他のコンポーネントの`imports`配列に直接追加できます。以前のバージョンのAngularで作成されたコンポーネントは、代わりに`@Component`デコレーターで`standalone: false`を指定している場合があります。これらのコンポーネントの場合、代わりにコンポーネントが定義されている`NgModule`をインポートします。詳細は、完全な[`NgModule`ガイド](guide/ngmodules)を参照してください。 +デフォルトでは、Angularコンポーネントは*スタンドアロン*です。つまり、他のコンポーネントの`imports`配列に直接追加できます。以前のバージョンのAngularで作成されたコンポーネントは、代わりに`@Component`デコレーターで`standalone: false`を指定している場合があります。これらのコンポーネントの場合、代わりにコンポーネントが定義されている`NgModule`をインポートします。詳細は、完全な[`NgModule`ガイド](guide/ngmodules/overview)を参照してください。 IMPORTANT: 19.0.0より前のAngularバージョンでは、`standalone`オプションはデフォルトで`false`です。 @@ -83,7 +87,7 @@ IMPORTANT: 19.0.0より前のAngularバージョンでは、`standalone`オプ selector: 'profile-photo', ... }) -export class ProfilePhoto { } +export class ProfilePhoto {} ``` Angularがサポートするセレクターの種類と、セレクターの選択に関するガイダンスについては、[コンポーネントセレクター](guide/components/selectors)を参照してください。 @@ -94,13 +98,13 @@ _他の_コンポーネントのテンプレートで一致するHTML要素を @Component({ selector: 'profile-photo', }) -export class ProfilePhoto { } +export class ProfilePhoto {} @Component({ -imports: [ProfilePhoto], -template: `` + imports: [ProfilePhoto], + template: ``, }) -export class UserProfile { } +export class UserProfile {} ``` Angularは、遭遇する一致するHTML要素ごとにコンポーネントのインスタンスを作成します。コンポーネントのセレクターと一致するDOM要素は、そのコンポーネントの**ホスト要素**と呼ばれます。コンポーネントのテンプレートの内容はそのホスト要素内にレンダリングされます。 diff --git a/adev-ja/src/content/guide/components/content-projection.en.md b/adev-ja/src/content/guide/components/content-projection.en.md index 3fe55711f9..f11feb7f7f 100644 --- a/adev-ja/src/content/guide/components/content-projection.en.md +++ b/adev-ja/src/content/guide/components/content-projection.en.md @@ -10,7 +10,9 @@ example, you may want to create a custom card component: selector: 'custom-card', template: '
', }) -export class CustomCard {/* ... */} +export class CustomCard { + /* ... */ +} ``` **You can use the `` element as a placeholder to mark where content should go**: @@ -20,7 +22,9 @@ export class CustomCard {/* ... */} selector: 'custom-card', template: '
', }) -export class CustomCard {/* ... */} +export class CustomCard { + /* ... */ +} ``` TIP: `` works similarly @@ -40,7 +44,9 @@ rendered, or **projected**, at the location of that ``: `, }) -export class CustomCard {/* ... */} +export class CustomCard { + /* ... */ +} ``` ```angular-html diff --git a/adev-ja/src/content/guide/components/content-projection.md b/adev-ja/src/content/guide/components/content-projection.md index 1e84cc6cc2..ff4496994b 100644 --- a/adev-ja/src/content/guide/components/content-projection.md +++ b/adev-ja/src/content/guide/components/content-projection.md @@ -10,7 +10,9 @@ TIP: このガイドは、すでに [基本ガイド](essentials) を読んだ selector: 'custom-card', template: '
', }) -export class CustomCard {/* ... */} +export class CustomCard { + /* ... */ +} ``` **``要素は、コンテンツを配置する場所を示すプレースホルダーとして使用できます**: @@ -20,7 +22,9 @@ export class CustomCard {/* ... */} selector: 'custom-card', template: '
', }) -export class CustomCard {/* ... */} +export class CustomCard { + /* ... */ +} ``` TIP: ``は、 @@ -40,7 +44,9 @@ Angular固有の機能も備えています。 `, }) -export class CustomCard {/* ... */} +export class CustomCard { + /* ... */ +} ``` ```angular-html diff --git a/adev-ja/src/content/guide/components/dom-apis.en.md b/adev-ja/src/content/guide/components/dom-apis.en.md index 68ac11a681..be1881e7b5 100644 --- a/adev-ja/src/content/guide/components/dom-apis.en.md +++ b/adev-ja/src/content/guide/components/dom-apis.en.md @@ -7,7 +7,9 @@ directly interact with a component's DOM. Components can inject ElementRef to ge component's host element: ```ts -@Component({...}) +@Component({ + /*...*/ +}) export class ProfilePhoto { constructor() { const elementRef = inject(ElementRef); @@ -23,7 +25,9 @@ You can use Angular's `afterEveryRender` and `afterNextRender` functions to regi callback** that runs when Angular has finished rendering the page. ```ts -@Component({...}) +@Component({ + /*...*/ +}) export class ProfilePhoto { constructor() { const elementRef = inject(ElementRef); diff --git a/adev-ja/src/content/guide/components/dom-apis.md b/adev-ja/src/content/guide/components/dom-apis.md index 49ef8c8b44..8c1ecaf1fa 100644 --- a/adev-ja/src/content/guide/components/dom-apis.md +++ b/adev-ja/src/content/guide/components/dom-apis.md @@ -7,7 +7,9 @@ Angularは、ほとんどのDOM作成、更新、および削除を自動的に コンポーネントは `ElementRef` を注入して、コンポーネントのホスト要素への参照を取得できます。 ```ts -@Component({...}) +@Component({ + /*...*/ +}) export class ProfilePhoto { constructor() { const elementRef = inject(ElementRef); @@ -23,7 +25,9 @@ Angularの `afterEveryRender` および `afterNextRender` 関数を使用して Angularがページのレンダリングを完了したときに実行される **レンダリングコールバック** を登録できます。 ```ts -@Component({...}) +@Component({ + /*...*/ +}) export class ProfilePhoto { constructor() { const elementRef = inject(ElementRef); diff --git a/adev-ja/src/content/guide/components/host-elements.en.md b/adev-ja/src/content/guide/components/host-elements.en.md index fc200dac2e..082c2e0f62 100644 --- a/adev-ja/src/content/guide/components/host-elements.en.md +++ b/adev-ja/src/content/guide/components/host-elements.en.md @@ -10,9 +10,7 @@ The contents of a component's template are rendered inside its host element. // Component source @Component({ selector: 'profile-photo', - template: ` - Your profile photo - `, + template: `Your profile photo`, }) export class ProfilePhoto {} ``` @@ -64,6 +62,8 @@ export class CustomSlider { } ``` +NOTE: The global target names that can be used to prefix an event name are `document:`, `window:` and `body:`. + ## The `@HostBinding` and `@HostListener` decorators You can alternatively bind to the host element by applying the `@HostBinding` and `@HostListener` @@ -141,7 +141,7 @@ You can set such custom properties on a host element with a [style binding][styl /* ... */ host: { '[style.--my-background]': 'color()', - } + }, }) export class MyComponent { color = signal('lightgreen'); @@ -157,7 +157,7 @@ Alternatively, it is also possible to set css custom properties on the host elem ```angular-ts @Component({ selector: 'my-component', - template: ``, + template: ``, }) export class MyComponent { color = signal('lightgreen'); diff --git a/adev-ja/src/content/guide/components/host-elements.md b/adev-ja/src/content/guide/components/host-elements.md index f75a056e1b..b78c77693d 100644 --- a/adev-ja/src/content/guide/components/host-elements.md +++ b/adev-ja/src/content/guide/components/host-elements.md @@ -10,9 +10,7 @@ Angularは、コンポーネントのセレクターに一致するすべてのH // コンポーネントソース @Component({ selector: 'profile-photo', - template: ` - Your profile photo - `, + template: `Your profile photo`, }) export class ProfilePhoto {} ``` @@ -64,6 +62,8 @@ export class CustomSlider { } ``` +NOTE: イベント名にプレフィックスとして使用できるグローバルターゲット名は `document:`、`window:`、`body:` です。 + ## `@HostBinding`および`@HostListener`デコレーター {#the-hostbinding-and-hostlistener-decorators} クラスメンバーに`@HostBinding`および`@HostListener`デコレーターを適用することにより、 @@ -141,7 +141,7 @@ export class ProfilePhoto { /* ... */ } /* ... */ host: { '[style.--my-background]': 'color()', - } + }, }) export class MyComponent { color = signal('lightgreen'); @@ -157,7 +157,7 @@ export class MyComponent { ```angular-ts @Component({ selector: 'my-component', - template: ``, + template: ``, }) export class MyComponent { color = signal('lightgreen'); diff --git a/adev-ja/src/content/guide/components/inheritance.en.md b/adev-ja/src/content/guide/components/inheritance.en.md index b11af7e587..78dbda57cf 100644 --- a/adev-ja/src/content/guide/components/inheritance.en.md +++ b/adev-ja/src/content/guide/components/inheritance.en.md @@ -12,7 +12,9 @@ export class ListboxBase { value: string; } -@Component({ ... }) +@Component({ + /*...*/ +}) export class CustomListbox extends ListboxBase { // CustomListbox inherits the `value` property. } @@ -27,9 +29,7 @@ host bindings, inputs, outputs, lifecycle methods. ```angular-ts @Component({ selector: 'base-listbox', - template: ` - ... - `, + template: ` ... `, host: { '(keydown)': 'handleKey($event)', }, @@ -43,9 +43,7 @@ export class ListboxBase { @Component({ selector: 'custom-listbox', - template: ` - ... - `, + template: ` ... `, host: { '(click)': 'focusActiveOption()', }, @@ -70,12 +68,16 @@ and their own. If a base class injects dependencies as constructor parameters, the child class must explicitly class these dependencies to `super`. ```ts -@Component({ ... }) +@Component({ + /*...*/ +}) export class ListboxBase { - constructor(private element: ElementRef) { } + constructor(private element: ElementRef) {} } -@Component({ ... }) +@Component({ + /*...*/ +}) export class CustomListbox extends ListboxBase { constructor(element: ElementRef) { super(element); @@ -90,7 +92,9 @@ implements `ngOnInit` _overrides_ the base class's implementation. If you want t class's lifecycle method, explicitly call the method with `super`: ```ts -@Component({ ... }) +@Component({ + /*...*/ +}) export class ListboxBase { protected isInitialized = false; ngOnInit() { @@ -98,7 +102,9 @@ export class ListboxBase { } } -@Component({ ... }) +@Component({ + /*...*/ +}) export class CustomListbox extends ListboxBase { override ngOnInit() { super.ngOnInit(); diff --git a/adev-ja/src/content/guide/components/inheritance.md b/adev-ja/src/content/guide/components/inheritance.md index 426d2e690b..6b815c5b5d 100644 --- a/adev-ja/src/content/guide/components/inheritance.md +++ b/adev-ja/src/content/guide/components/inheritance.md @@ -12,7 +12,9 @@ export class ListboxBase { value: string; } -@Component({ ... }) +@Component({ + /*...*/ +}) export class CustomListbox extends ListboxBase { // CustomListboxは`value`プロパティを継承します。 } @@ -27,9 +29,7 @@ export class CustomListbox extends ListboxBase { ```angular-ts @Component({ selector: 'base-listbox', - template: ` - ... - `, + template: ` ... `, host: { '(keydown)': 'handleKey($event)', }, @@ -43,9 +43,7 @@ export class ListboxBase { @Component({ selector: 'custom-listbox', - template: ` - ... - `, + template: ` ... `, host: { '(click)': 'focusActiveOption()', }, @@ -70,12 +68,16 @@ export class CustomListbox extends ListboxBase { もし基底クラスがコンストラクターのパラメーターとして依存性を注入している場合、子クラスではその依存性を明示的にsuper()に渡す必要があります。 ```ts -@Component({ ... }) +@Component({ + /*...*/ +}) export class ListboxBase { - constructor(private element: ElementRef) { } + constructor(private element: ElementRef) {} } -@Component({ ... }) +@Component({ + /*...*/ +}) export class CustomListbox extends ListboxBase { constructor(element: ElementRef) { super(element); @@ -90,7 +92,9 @@ export class CustomListbox extends ListboxBase { 基底クラスのライフサイクルメソッドを保持したい場合は、`super`で明示的にメソッドを呼び出します。 ```ts -@Component({ ... }) +@Component({ + /*...*/ +}) export class ListboxBase { protected isInitialized = false; ngOnInit() { @@ -98,7 +102,9 @@ export class ListboxBase { } } -@Component({ ... }) +@Component({ + /*...*/ +}) export class CustomListbox extends ListboxBase { override ngOnInit() { super.ngOnInit(); diff --git a/adev-ja/src/content/guide/components/inputs.en.md b/adev-ja/src/content/guide/components/inputs.en.md index 0b2d8236f9..0321d2ae5f 100644 --- a/adev-ja/src/content/guide/components/inputs.en.md +++ b/adev-ja/src/content/guide/components/inputs.en.md @@ -7,7 +7,7 @@ TIP: If you're familiar with other web frameworks, input properties are similar When you use a component, you commonly want to pass some data to it. A component specifies the data that it accepts by declaring **inputs**: -```ts {highlight:[5]} +```ts {highlight:[8]} import {Component, input} from '@angular/core'; @Component({ @@ -63,7 +63,7 @@ When extending a component class, **inputs are inherited by the child class.** The `input` function returns an `InputSignal`. You can read the value by calling the signal: -```ts {highlight:[5]} +```ts {highlight:[11]} import {Component, input, computed} from '@angular/core'; @Component({ @@ -84,7 +84,7 @@ Signals created by the `input` function are read-only. You can declare that an input is `required` by calling `input.required` instead of `input`: -```ts {highlight:[3]} +```ts {highlight:[6]} @Component({ /*...*/ }) @@ -176,7 +176,7 @@ _presence_ of the attribute indicates a "true" value. However, Angular's `boolea You can specify the `alias` option to change the name of an input in templates. -```ts {highlight:[3]} +```ts {highlight:[5]} @Component({ /*...*/ }) @@ -273,7 +273,7 @@ See [Custom events with outputs](guide/components/outputs) for more details on o ### Customizing model inputs -You can mark a model input as required or provide an alias in the same way as a [standard input](guide/signals/inputs). +You can mark a model input as required or provide an alias in the same way as a [standard input](guide/components/inputs). Model inputs do not support input transforms. @@ -293,8 +293,10 @@ TIP: While the Angular team recommends using the signal-based `input` function f You can alternatively declare component inputs by adding the `@Input` decorator to a property: -```ts {highlight:[3]} -@Component({...}) +```ts {highlight:[5]} +@Component({ + /*...*/ +}) export class CustomSlider { @Input() value = 0; } @@ -314,8 +316,10 @@ The `@Input` decorator accepts a config object that lets you change the way that You can specify the `required` option to enforce that a given input must always have a value. -```ts {highlight:[3]} -@Component({...}) +```ts {highlight:[5]} +@Component({ + /*...*/ +}) export class CustomSlider { @Input({required: true}) value = 0; } @@ -345,8 +349,10 @@ function trimString(value: string | undefined) { You can specify the `alias` option to change the name of an input in templates. -```ts {highlight:[3]} -@Component({...}) +```ts {highlight:[5]} +@Component({ + /*...*/ +}) export class CustomSlider { @Input({alias: 'sliderValue'}) value = 0; } diff --git a/adev-ja/src/content/guide/components/inputs.md b/adev-ja/src/content/guide/components/inputs.md index 52574fc20f..de1424f926 100644 --- a/adev-ja/src/content/guide/components/inputs.md +++ b/adev-ja/src/content/guide/components/inputs.md @@ -7,7 +7,7 @@ TIP: 他のウェブフレームワークに精通している場合は、入力 コンポーネントを使用する際に、一般的にいくつかのデータを渡したいことがあります。 コンポーネントは、**入力**を宣言することで、受け入れるデータを指定します。 -```ts {highlight:[5]} +```ts {highlight:[8]} import {Component, input} from '@angular/core'; @Component({ @@ -63,7 +63,7 @@ export class CustomSlider { `input`関数は`InputSignal`を返します。シグナルを呼び出すことで値を読み取ることができます。 -```ts {highlight:[5]} +```ts {highlight:[11]} import {Component, input, computed} from '@angular/core'; @Component({ @@ -84,7 +84,7 @@ export class CustomSlider { `input`の代わりに`input.required`を呼び出すことで、入力が`required`であることを宣言できます。 -```ts {highlight:[3]} +```ts {highlight:[6]} @Component({ /*...*/ }) @@ -176,7 +176,7 @@ export class CustomSlider { `alias`オプションを指定して、テンプレートでの入力の名前を変更できます。 -```ts {highlight:[3]} +```ts {highlight:[5]} @Component({ /*...*/ }) @@ -273,7 +273,7 @@ export class CustomCheckbox { ### モデル入力のカスタマイズ -[通常の入力](guide/signals/inputs)と同様に、モデル入力を必須としてマークしたり、エイリアスを提供したりできます。 +[通常の入力](guide/components/inputs)と同様に、モデル入力を必須としてマークしたり、エイリアスを提供したりできます。 モデル入力は入力変換をサポートしません。 @@ -281,24 +281,26 @@ export class CustomCheckbox { コンポーネントが双方向バインディングをサポートする場合に、モデル入力を使用します。これは通常、ユーザーの操作に基づいて値を変更するためにコンポーネントが存在する場合に適しています。最も一般的には、日付ピッカーやコンボボックスなどのカスタムフォームコントロールは、主要な値にモデル入力を使用する必要があります。 -# 入力名の選択 +## 入力名の選択 {#choosing-input-names} DOM要素のプロパティ（HTMLElementなど）と競合する入力名を選択することは避けてください。名前の競合は、バインドされたプロパティがコンポーネントのものであるか、DOM要素のものであるかについて混乱を招きます。 コンポーネントセレクターのように、コンポーネント入力にプレフィックスを追加することは避けてください。特定の要素は1つのコンポーネントしかホストできないため、カスタムプロパティはすべてコンポーネントに属すると見なすことができます。 -# `@Input`デコレーターによる入力の宣言 +## `@Input`デコレーターによる入力の宣言 {#declaring-inputs-with-the-input-decorator} TIP: Angularチームは新しいプロジェクトにはシグナルベースの`input`関数の使用を推奨していますが、元のデコレーターベースの`@Input` APIは引き続き完全にサポートされています。 コンポーネント入力を宣言する代わりに、プロパティに`@Input`デコレーターを追加できます。 - -@Component({...}) +```ts {highlight:[5]} +@Component({ + /*...*/ +}) export class CustomSlider { @Input() value = 0; } - +``` 入力へのバインディングは、シグナルベースの入力とデコレーターベースの入力の両方で同じです。 @@ -314,12 +316,14 @@ export class CustomSlider { `required`オプションを指定して、特定の入力が常に値を持つ必要があることを強制できます。 - -@Component({...}) +```ts {highlight:[5]} +@Component({ + /*...*/ +}) export class CustomSlider { @Input({required: true}) value = 0; } - +``` すべての必須入力を指定せずにコンポーネントを使用しようとすると、Angularはビルド時にエラーを報告します。 @@ -345,8 +349,10 @@ function trimString(value: string | undefined) { `alias`オプションを指定して、テンプレートでの入力の名前を変更できます。 -```ts {highlight:[3]} -@Component({...}) +```ts {highlight:[5]} +@Component({ + /*...*/ +}) export class CustomSlider { @Input({alias: 'sliderValue'}) value = 0; } diff --git a/adev-ja/src/content/guide/components/lifecycle.en.md b/adev-ja/src/content/guide/components/lifecycle.en.md index 177fc5a967..b74ef898c5 100644 --- a/adev-ja/src/content/guide/components/lifecycle.en.md +++ b/adev-ja/src/content/guide/components/lifecycle.en.md @@ -256,7 +256,9 @@ next phase. ```ts import {Component, ElementRef, afterNextRender} from '@angular/core'; -@Component({...}) +@Component({ + /*...*/ +}) export class UserProfile { private prevPadding = 0; private elementHeight = 0; @@ -281,7 +283,7 @@ export class UserProfile { if (didWrite) { this.elementHeight = nativeElement.getBoundingClientRect().height; } - } + }, }); } } diff --git a/adev-ja/src/content/guide/components/lifecycle.md b/adev-ja/src/content/guide/components/lifecycle.md index 514e989cde..8f02a019c4 100644 --- a/adev-ja/src/content/guide/components/lifecycle.md +++ b/adev-ja/src/content/guide/components/lifecycle.md @@ -256,7 +256,9 @@ AngularでDOMを操作する方法については、[DOM API の使用](guide/co ```ts import {Component, ElementRef, afterNextRender} from '@angular/core'; -@Component({...}) +@Component({ + /*...*/ +}) export class UserProfile { private prevPadding = 0; private elementHeight = 0; @@ -281,7 +283,7 @@ export class UserProfile { if (didWrite) { this.elementHeight = nativeElement.getBoundingClientRect().height; } - } + }, }); } } diff --git a/adev-ja/src/content/guide/components/outputs.md b/adev-ja/src/content/guide/components/outputs.md index 0c27cb9408..4b8599ff55 100644 --- a/adev-ja/src/content/guide/components/outputs.md +++ b/adev-ja/src/content/guide/components/outputs.md @@ -114,7 +114,7 @@ const eventSubscription = someComponent.someEventProperty.subscribe((eventData) eventSubscription.unsubscribe(); ``` -## イベント名の選択 +## イベント名の選択 {#choosing-event-names} HTMLElementなどのDOM要素のイベントと衝突する出力名を選択することは避けてください。名前の衝突は、バインドされたプロパティがコンポーネントのものであるか、DOM要素のものであるかについて混乱を招きます。 diff --git a/adev-ja/src/content/guide/components/programmatic-rendering.en.md b/adev-ja/src/content/guide/components/programmatic-rendering.en.md index f1d2a2f051..93b851af6d 100644 --- a/adev-ja/src/content/guide/components/programmatic-rendering.en.md +++ b/adev-ja/src/content/guide/components/programmatic-rendering.en.md @@ -20,10 +20,10 @@ chunks automatically and loaded only when necessary, based on the configured tri template. ```angular-ts -@Component({ ... }) +@Component({/*...*/}) export class AdminBio { /* ... */ } -@Component({ ... }) +@Component({/*...*/}) export class StandardBio { /* ... */ } @Component({ @@ -41,6 +41,144 @@ export class CustomDialog { } ``` +### Passing inputs to dynamically rendered components + +You can pass inputs to the dynamically rendered component using the `ngComponentOutletInputs` property. This property accepts an object where keys are input names and values are the input values. + +```angular-ts +@Component({ + selector: 'user-greeting', + template: ` +
+

User: {{ username() }}

+

Role: {{ role() }}

+
+ `, +}) +export class UserGreeting { + username = input.required(); + role = input('guest'); +} + +@Component({ + selector: 'profile-view', + imports: [NgComponentOutlet], + template: ``, +}) +export class ProfileView { + greetingComponent = UserGreeting; + greetingInputs = signal({username: 'ngAwesome', role: 'admin'}); +} +``` + +The inputs are updated whenever the `greetingInputs` signal changes, keeping the dynamic component in sync with the parent's state. + +### Providing content projection + +Use `ngComponentOutletContent` to pass projected content to the dynamically rendered component. This is useful when the dynamic component uses `` to display content. + +```angular-ts +@Component({ + selector: 'card-wrapper', + template: ` +
+ +
+ `, +}) +export class CardWrapper {} + +@Component({ + imports: [NgComponentOutlet], + template: ` + + + +

Dynamic Content

+

This content is projected into the card.

+ + `, +}) +export class DynamicCard { + private vcr = inject(ViewContainerRef); + cardComponent = CardWrapper; + + private contentTemplate = viewChild>('contentTemplate'); + + cardContent = computed(() => { + const template = this.contentTemplate(); + if (!template) return []; + // Returns an array of projection slots. Each element represents one slot. + // CardWrapper has one , so we return an array with one element. + return [this.vcr.createEmbeddedView(template).rootNodes]; + }); +} +``` + +NOTE: Hydration does not support projecting DOM nodes created with native DOM APIs. This causes an [NG0503 error](/errors/NG0503). Use Angular APIs to create projected content or add `ngSkipHydration` to the component. + +### Providing injectors + +You can provide a custom injector to the dynamically created component using `ngComponentOutletInjector`. This is useful for providing component-specific services or configuration. + +```angular-ts +export const THEME_DATA = new InjectionToken('THEME_DATA', { + factory: () => 'light', +}); + +@Component({ + selector: 'themed-panel', + template: `
...
`, +}) +export class ThemedPanel { + theme = inject(THEME_DATA); +} + +@Component({ + selector: 'dynamic-panel', + imports: [NgComponentOutlet], + template: ``, +}) +export class DynamicPanel { + panelComponent = ThemedPanel; + + customInjector = Injector.create({ + providers: [{provide: THEME_DATA, useValue: 'dark'}], + }); +} +``` + +### Accessing the component instance + +You can access the dynamically created component's instance using the directive's `exportAs` feature: + +```angular-ts +@Component({ + selector: 'counter', + template: `

Count: {{ count() }}

`, +}) +export class Counter { + count = signal(0); + increment() { + this.count.update((c) => c + 1); + } +} + +@Component({ + imports: [NgComponentOutlet], + template: ` + + + + `, +}) +export class CounterHost { + counterComponent = Counter; +} +``` + +NOTE: The `componentInstance` property is `null` before the component is rendered. + See the [NgComponentOutlet API reference](api/common/NgComponentOutlet) for more information on the directive's capabilities. @@ -57,9 +195,7 @@ DOM as the next sibling of the component or directive that injected the `ViewCon ```angular-ts @Component({ selector: 'leaf-content', - template: ` - This is the leaf content - `, + template: `This is the leaf content`, }) export class LeafContent {} @@ -75,9 +211,7 @@ export class OuterContainer {} @Component({ selector: 'inner-item', - template: ` - - `, + template: ``, }) export class InnerItem { private viewContainer = inject(ViewContainerRef); @@ -153,20 +287,20 @@ To simplify this, both `createComponent` and `ViewContainerRef.createComponent` By contrast, the standalone `createComponent` API does not attach the new component to any existing view or DOM location — it returns a `ComponentRef` and gives you explicit control over where to place the component’s host element. ```angular-ts -import { Component, input, model, output } from "@angular/core"; +import {Component, input, model, output} from '@angular/core'; @Component({ selector: 'app-warning', template: ` - @if(isExpanded()) { -
-

Warning: Action needed!

- -
- } - ` + @if (isExpanded()) { +
+

Warning: Action needed!

+ +
+ } + `, }) -export class AppWarningComponent { +export class AppWarning { readonly canClose = input.required(); readonly isExpanded = model(); readonly close = output(); @@ -189,13 +323,13 @@ import {ThemeDirective} from '../theme.directive'; @Component({ template: ``, }) -export class HostComponent { +export class Host { private vcr = inject(ViewContainerRef); readonly canClose = signal(true); readonly isExpanded = signal(true); showWarning() { - const compRef = this.vcr.createComponent(AppWarningComponent, { + const compRef = this.vcr.createComponent(AppWarning, { bindings: [ inputBinding('canClose', this.canClose), twoWayBinding('isExpanded', this.isExpanded), @@ -212,7 +346,7 @@ export class HostComponent { } ``` -In the example above, the dynamic **AppWarningComponent** is created with its `canClose` input bound to a reactive signal, a two-way binding on its `isExpanded` state, and an output listener for `close`. The `FocusTrap` and `ThemeDirective` are attached to the host element via `directives`. +In the example above, the dynamic **AppWarning** is created with its `canClose` input bound to a reactive signal, a two-way binding on its `isExpanded` state, and an output listener for `close`. The `FocusTrap` and `ThemeDirective` are attached to the host element via `directives`. ### Popup attached to `document.body` with `createComponent` + `hostElement` @@ -228,7 +362,7 @@ import { inputBinding, outputBinding, } from '@angular/core'; -import {PopupComponent} from './popup.component'; +import {Popup} from './popup'; @Injectable({providedIn: 'root'}) export class PopupService { @@ -240,7 +374,7 @@ export class PopupService { const host = document.createElement('popup-host'); // Create the component and bind in one call - const ref = createComponent(PopupComponent, { + const ref = createComponent(Popup, { environmentInjector: this.injector, hostElement: host, bindings: [ diff --git a/adev-ja/src/content/guide/components/programmatic-rendering.md b/adev-ja/src/content/guide/components/programmatic-rendering.md index 1d7631d64f..2c5851e30f 100644 --- a/adev-ja/src/content/guide/components/programmatic-rendering.md +++ b/adev-ja/src/content/guide/components/programmatic-rendering.md @@ -20,10 +20,10 @@ HELPFUL: 遅延読み込みのユースケース(たとえば、重いコンポ 構造ディレクティブです。 ```angular-ts -@Component({ ... }) +@Component({/*...*/}) export class AdminBio { /* ... */ } -@Component({ ... }) +@Component({/*...*/}) export class StandardBio { /* ... */ } @Component({ @@ -41,6 +41,144 @@ export class CustomDialog { } ``` +### 動的にレンダリングされたコンポーネントへのインプットの渡し方 + +`ngComponentOutletInputs`プロパティを使用して、動的にレンダリングされたコンポーネントにインプットを渡すことができます。このプロパティは、キーがインプット名で値がインプット値であるオブジェクトを受け入れます。 + +```angular-ts +@Component({ + selector: 'user-greeting', + template: ` +
+

User: {{ username() }}

+

Role: {{ role() }}

+
+ `, +}) +export class UserGreeting { + username = input.required(); + role = input('guest'); +} + +@Component({ + selector: 'profile-view', + imports: [NgComponentOutlet], + template: ``, +}) +export class ProfileView { + greetingComponent = UserGreeting; + greetingInputs = signal({username: 'ngAwesome', role: 'admin'}); +} +``` + +インプットは`greetingInputs`シグナルが変更されるたびに更新され、動的コンポーネントを親の状態と同期させます。 + +### コンテンツプロジェクションの提供 + +`ngComponentOutletContent`を使用して、動的にレンダリングされたコンポーネントにプロジェクトされたコンテンツを渡すことができます。これは、動的コンポーネントが``を使用してコンテンツを表示する場合に便利です。 + +```angular-ts +@Component({ + selector: 'card-wrapper', + template: ` +
+ +
+ `, +}) +export class CardWrapper {} + +@Component({ + imports: [NgComponentOutlet], + template: ` + + + +

Dynamic Content

+

This content is projected into the card.

+ + `, +}) +export class DynamicCard { + private vcr = inject(ViewContainerRef); + cardComponent = CardWrapper; + + private contentTemplate = viewChild>('contentTemplate'); + + cardContent = computed(() => { + const template = this.contentTemplate(); + if (!template) return []; + // Returns an array of projection slots. Each element represents one slot. + // CardWrapper has one , so we return an array with one element. + return [this.vcr.createEmbeddedView(template).rootNodes]; + }); +} +``` + +NOTE: Hydrationは、ネイティブDOM APIで作成されたDOMノードのプロジェクションをサポートしていません。これにより[NG0503エラー](/errors/NG0503)が発生します。Angular APIを使用してプロジェクトされたコンテンツを作成するか、コンポーネントに`ngSkipHydration`を追加してください。 + +### インジェクターの提供 + +`ngComponentOutletInjector`を使用して、動的に作成されたコンポーネントにカスタムインジェクターを提供できます。これは、コンポーネント固有のサービスや設定を提供する場合に便利です。 + +```angular-ts +export const THEME_DATA = new InjectionToken('THEME_DATA', { + factory: () => 'light', +}); + +@Component({ + selector: 'themed-panel', + template: `
...
`, +}) +export class ThemedPanel { + theme = inject(THEME_DATA); +} + +@Component({ + selector: 'dynamic-panel', + imports: [NgComponentOutlet], + template: ``, +}) +export class DynamicPanel { + panelComponent = ThemedPanel; + + customInjector = Injector.create({ + providers: [{provide: THEME_DATA, useValue: 'dark'}], + }); +} +``` + +### コンポーネントインスタンスへのアクセス + +ディレクティブの`exportAs`機能を使用して、動的に作成されたコンポーネントのインスタンスにアクセスできます。 + +```angular-ts +@Component({ + selector: 'counter', + template: `

Count: {{ count() }}

`, +}) +export class Counter { + count = signal(0); + increment() { + this.count.update((c) => c + 1); + } +} + +@Component({ + imports: [NgComponentOutlet], + template: ` + + + + `, +}) +export class CounterHost { + counterComponent = Counter; +} +``` + +NOTE: `componentInstance`プロパティは、コンポーネントがレンダリングされる前は`null`です。 + ディレクティブの機能の詳細については、[NgComponentOutlet APIリファレンス](api/common/NgComponentOutlet)を 参照してください。 @@ -57,9 +195,7 @@ export class CustomDialog { ```angular-ts @Component({ selector: 'leaf-content', - template: ` - This is the leaf content - `, + template: `This is the leaf content`, }) export class LeafContent {} @@ -75,9 +211,7 @@ export class OuterContainer {} @Component({ selector: 'inner-item', - template: ` - - `, + template: ``, }) export class InnerItem { private viewContainer = inject(ViewContainerRef); @@ -153,20 +287,20 @@ export class AdminSettings { コンポーネントのホスト要素を配置する場所を明示的に制御できます。 ```angular-ts -import { Component, input, model, output } from "@angular/core"; +import {Component, input, model, output} from '@angular/core'; @Component({ selector: 'app-warning', template: ` - @if(isExpanded()) { -
-

Warning: Action needed!

- -
- } - ` + @if (isExpanded()) { +
+

Warning: Action needed!

+ +
+ } + `, }) -export class AppWarningComponent { +export class AppWarning { readonly canClose = input.required(); readonly isExpanded = model(); readonly close = output(); @@ -189,13 +323,13 @@ import {ThemeDirective} from '../theme.directive'; @Component({ template: ``, }) -export class HostComponent { +export class Host { private vcr = inject(ViewContainerRef); readonly canClose = signal(true); readonly isExpanded = signal(true); showWarning() { - const compRef = this.vcr.createComponent(AppWarningComponent, { + const compRef = this.vcr.createComponent(AppWarning, { bindings: [ inputBinding('canClose', this.canClose), twoWayBinding('isExpanded', this.isExpanded), @@ -212,7 +346,7 @@ export class HostComponent { } ``` -上記の例では、動的な**AppWarningComponent**は、`canClose`インプットがリアクティブシグナルにバインドされ、`isExpanded`状態で双方向バインディングが行われ、`close`のアウトプットリスナーが設定されて作成されます。`FocusTrap`と`ThemeDirective`は、`directives`を介してホスト要素にアタッチされます。 +上記の例では、動的な**AppWarning**は、`canClose`インプットがリアクティブシグナルにバインドされ、`isExpanded`状態で双方向バインディングが行われ、`close`のアウトプットリスナーが設定されて作成されます。`FocusTrap`と`ThemeDirective`は、`directives`を介してホスト要素にアタッチされます。 ### `createComponent` + `hostElement`で`document.body`にアタッチされたポップアップ @@ -228,7 +362,7 @@ import { inputBinding, outputBinding, } from '@angular/core'; -import {PopupComponent} from './popup.component'; +import {Popup} from './popup'; @Injectable({providedIn: 'root'}) export class PopupService { @@ -240,7 +374,7 @@ export class PopupService { const host = document.createElement('popup-host'); // コンポーネントを作成し、1回の呼び出しでバインド - const ref = createComponent(PopupComponent, { + const ref = createComponent(Popup, { environmentInjector: this.injector, hostElement: host, bindings: [ diff --git a/adev-ja/src/content/guide/components/queries.en.md b/adev-ja/src/content/guide/components/queries.en.md index 512067b0fa..b76607661f 100644 --- a/adev-ja/src/content/guide/components/queries.en.md +++ b/adev-ja/src/content/guide/components/queries.en.md @@ -58,7 +58,7 @@ export class CustomCardAction { }) export class CustomCard { actions = viewChildren(CustomCardAction); - actionsTexts = computed(() => this.actions().map(action => action.text)); + actionsTexts = computed(() => this.actions().map((action) => action.text)); } ``` @@ -89,16 +89,15 @@ export class CustomExpando { } @Component({ -/* ... */ -// CustomToggle is used inside CustomExpando as content. -template: ` + /* ... */ + // CustomToggle is used inside CustomExpando as content. + template: ` Show - ` + `, }) - -export class UserProfile { } +export class UserProfile {} ``` If the query does not find a result, its value is `undefined`. This may occur if the target element is absent or hidden by `@if`. Angular keeps the result of `contentChild` up to date as your application state changes. @@ -107,7 +106,7 @@ By default, content queries find only _direct_ children of the component and do You can also query for multiple results with the `contentChildren` function. -```angular-ts {highlight: [14, 16, 17, 18, 19, 20]} +```angular-ts {highlight: [14, 15]} @Component({ selector: 'custom-menu-item', /*...*/ @@ -120,10 +119,9 @@ export class CustomMenuItem { selector: 'custom-menu', /*...*/ }) - export class CustomMenu { items = contentChildren(CustomMenuItem); - itemTexts = computed(() => this.items().map(item => item.text)); + itemTexts = computed(() => this.items().map((item) => item.text)); } @Component({ @@ -133,9 +131,9 @@ export class CustomMenu { Cheese Tomato - ` + `, }) -export class UserProfile { } +export class UserProfile {} ``` `contentChildren` creates a signal with an `Array` of the query results. @@ -150,7 +148,7 @@ In some cases, especially with `viewChild`, you know with certainty that a speci ```ts @Component({ - /* ... */ + /*...*/ }) export class CustomCard { header = viewChild.required(CustomCardHeader); @@ -175,7 +173,7 @@ a [template reference variable](guide/templates/variables#template-reference-var template: ` - ` + `, }) export class ActionBar { saveButton = viewChild>('save'); @@ -199,9 +197,11 @@ const SUB_ITEM = new InjectionToken('sub-item'); /*...*/ providers: [{provide: SUB_ITEM, useValue: 'special-item'}], }) -export class SpecialItem { } +export class SpecialItem {} -@Component({/*...*/}) +@Component({ + /*...*/ +}) export class CustomList { subItemType = contentChild(SUB_ITEM); } @@ -236,7 +236,7 @@ Developers most commonly use `read` to retrieve `ElementRef` and `TemplateRef`. By default, `contentChildren` queries find only _direct_ children of the component and do not traverse into descendants. `contentChild` queries do traverse into descendants by default. -```angular-ts {highlight: [13, 14, 15, 16]} +```angular-ts {highlight: [13, 14, 15, 16, 17]} @Component({ selector: 'custom-expando', /*...*/ @@ -254,9 +254,9 @@ export class CustomExpando { Show - ` + `, }) -export class UserProfile { } +export class UserProfile {} ``` In the example above, `CustomExpando` cannot find `` with `contentChildren` because it is not a direct child of ``. By setting `descendants: true`, you configure the query to traverse all descendants in the same template. Queries, however, _never_ pierce into components to traverse elements in other templates. @@ -287,7 +287,7 @@ export class CustomCardHeader { selector: 'custom-card', template: 'Visit sunny California!', }) -export class CustomCard { +export class CustomCard implements AfterViewInit { @ViewChild(CustomCardHeader) header: CustomCardHeader; ngAfterViewInit() { @@ -320,11 +320,11 @@ export class CustomCardAction { Cancel `, }) -export class CustomCard { +export class CustomCard implements AfterViewInit { @ViewChildren(CustomCardAction) actions: QueryList; ngAfterViewInit() { - this.actions.forEach(action => { + this.actions.forEach((action) => { console.log(action.text); }); } @@ -337,7 +337,7 @@ export class CustomCard { You can query for a single result with the `@ContentChild` decorator. -```angular-ts {highlight: [15, 16, 17, 18, 19, 26]} +```angular-ts {highlight: [14, 16, 17, 18]} @Component({ selector: 'custom-toggle', /*...*/ @@ -350,8 +350,7 @@ export class CustomToggle { selector: 'custom-expando', /*...*/ }) - -export class CustomExpando { +export class CustomExpando implements AfterContentInit { @ContentChild(CustomToggle) toggle: CustomToggle; ngAfterContentInit() { @@ -365,9 +364,9 @@ export class CustomExpando { Show - ` + `, }) -export class UserProfile { } +export class UserProfile {} ``` In this example, the `CustomExpando` component queries for a child `CustomToggle` and accesses the result in `ngAfterContentInit`. @@ -378,7 +377,7 @@ Angular keeps the result of `@ContentChild` up to date as your application state You can also query for multiple results with the `@ContentChildren` decorator. -```angular-ts {highlight: [15, 17, 18, 19, 20, 21]} +```angular-ts {highlight: [14, 16, 17, 18, 19, 20]} @Component({ selector: 'custom-menu-item', /*...*/ @@ -391,12 +390,11 @@ export class CustomMenuItem { selector: 'custom-menu', /*...*/ }) - -export class CustomMenu { +export class CustomMenu implements AfterContentInit { @ContentChildren(CustomMenuItem) items: QueryList; ngAfterContentInit() { - this.items.forEach(item => { + this.items.forEach((item) => { console.log(item.text); }); } @@ -409,9 +407,9 @@ export class CustomMenu { Cheese Tomato - ` + `, }) -export class UserProfile { } +export class UserProfile {} ``` `@ContentChildren` creates a `QueryList` object that contains the query results. You can subscribe to changes to the query results over time via the `changes` property. @@ -429,7 +427,7 @@ All query decorators accept an options object as a second parameter. These optio selector: 'custom-card', template: 'Visit sunny California!', }) -export class CustomCard { +export class CustomCard implements OnInit { @ViewChild(CustomCardHeader, {static: true}) header: CustomCardHeader; ngOnInit() { diff --git a/adev-ja/src/content/guide/components/queries.md b/adev-ja/src/content/guide/components/queries.md index 4be5c09f5b..1b233b4728 100644 --- a/adev-ja/src/content/guide/components/queries.md +++ b/adev-ja/src/content/guide/components/queries.md @@ -11,7 +11,7 @@ TIP: このガイドでは、[基本概念のガイド](essentials)を読んで クエリには、**ビュークエリ**と**コンテンツクエリ**の2つのカテゴリーがあります。 -## ビュークエリ +## ビュークエリ {#view-queries} ビュークエリは、コンポーネントの_ビュー_（コンポーネント自身のテンプレートで定義された要素）内の要素から結果を取得します。`viewChild`関数を使用して単一の結果をクエリできます。 @@ -58,7 +58,7 @@ export class CustomCardAction { }) export class CustomCard { actions = viewChildren(CustomCardAction); - actionsTexts = computed(() => this.actions().map(action => action.text)); + actionsTexts = computed(() => this.actions().map((action) => action.text)); } ``` @@ -66,7 +66,7 @@ export class CustomCard { **クエリはコンポーネントの境界を貫通することはありません。**ビュークエリは、コンポーネントのテンプレートからの結果のみを取得できます。 -## コンテンツクエリ +## コンテンツクエリ {#content-queries} コンテンツクエリは、コンポーネントの_コンテンツ_（コンポーネントが使用されているテンプレート内でコンポーネントの中にネストされた要素）内の要素から結果を取得します。`contentChild`関数を使用して単一の結果をクエリできます。 @@ -89,16 +89,15 @@ export class CustomExpando { } @Component({ -/* ... */ -// CustomToggle is used inside CustomExpando as content. -template: ` + /* ... */ + // CustomToggle is used inside CustomExpando as content. + template: ` Show - ` + `, }) - -export class UserProfile { } +export class UserProfile {} ``` クエリが結果を見つけられない場合、その値は`undefined`になります。これは、ターゲット要素が存在しないか、`@if`によって非表示になっている場合に発生する可能性があります。Angularは、アプリケーションの状態が変化するにつれて`contentChild`の結果を最新の状態に保ちます。 @@ -107,7 +106,7 @@ export class UserProfile { } `contentChildren`関数を使用して、複数結果をクエリできます。 -```angular-ts {highlight: [14, 16, 17, 18, 19, 20]} +```angular-ts {highlight: [14, 15]} @Component({ selector: 'custom-menu-item', /* ... */ @@ -120,10 +119,9 @@ export class CustomMenuItem { selector: 'custom-menu', /* ... */ }) - export class CustomMenu { items = contentChildren(CustomMenuItem); - itemTexts = computed(() => this.items().map(item => item.text)); + itemTexts = computed(() => this.items().map((item) => item.text)); } @Component({ @@ -133,9 +131,9 @@ export class CustomMenu { Cheese Tomato - ` + `, }) -export class UserProfile { } +export class UserProfile {} ``` `contentChildren`は、クエリ結果の`Array`を含むシグナルを作成します。 @@ -150,7 +148,7 @@ export class UserProfile { } ```ts @Component({ - /* ... */ + /*...*/ }) export class CustomCard { header = viewChild.required(CustomCardHeader); @@ -175,7 +173,7 @@ export class CustomCard { template: ` - ` + `, }) export class ActionBar { saveButton = viewChild>('save'); @@ -199,7 +197,7 @@ const SUB_ITEM = new InjectionToken('sub-item'); /*...*/ providers: [{provide: SUB_ITEM, useValue: 'special-item'}], }) -export class SpecialItem { } +export class SpecialItem {} @Component({/*...*/}) export class CustomList { @@ -287,7 +285,7 @@ export class CustomCardHeader { selector: 'custom-card', template: 'Visit sunny California!', }) -export class CustomCard { +export class CustomCard implements AfterViewInit { @ViewChild(CustomCardHeader) header: CustomCardHeader; ngAfterViewInit() { diff --git a/adev-ja/src/content/guide/components/selectors.en.md b/adev-ja/src/content/guide/components/selectors.en.md index 8539c7f18c..a04926ba08 100644 --- a/adev-ja/src/content/guide/components/selectors.en.md +++ b/adev-ja/src/content/guide/components/selectors.en.md @@ -140,7 +140,7 @@ without extra work. This is especially valuable for ARIA attributes such as `ari Angular does not report errors when it encounters custom attributes that don't match an available component. When using components with attribute selectors, consumers may forget to import the component or its NgModule, resulting in the component not rendering. -See [Importing and using components](guide/components/importing) for more information. +See [Importing and using components](guide/components#imports-in-the-component-decorator) for more information. Components that define attribute selectors should use lowercase, dash-case attributes. You can follow the same prefixing recommendation described above. diff --git a/adev-ja/src/content/guide/components/selectors.md b/adev-ja/src/content/guide/components/selectors.md index 9e0654c4de..628f51a6bd 100644 --- a/adev-ja/src/content/guide/components/selectors.md +++ b/adev-ja/src/content/guide/components/selectors.md @@ -98,7 +98,7 @@ export class DropZone { } Angularは、リスト内の_いずれか_のセレクターにマッチングする要素ごとにコンポーネントを作成します。 -## セレクターの選択 +## セレクターの選択 {#choosing-a-selector} ほとんどのコンポーネントは、カスタム要素名をセレクターとして使用する必要があります。 すべてのカスタム要素名は、 @@ -110,7 +110,7 @@ Angularテンプレートで [ネイティブ カスタム要素](https://developer.mozilla.org/docs/Web/Web_Components) を使用する方法の詳細については、 [コンポーネントの高度な設定](guide/components/advanced-configuration) を参照してください。 -### セレクターのプレフィックス +### セレクターのプレフィックス {#selector-prefixes} Angularチームは、プロジェクト内で定義されているすべてのカスタムコンポーネントに 短い一貫性のあるプレフィックスを使用することをお勧めします。 @@ -140,7 +140,7 @@ export class YouTubeUploadButton { } Angularは、使用可能なコンポーネントと一致しないカスタム属性に出会ってもエラーを報告しません。 属性セレクターを使用してコンポーネントを使用する場合、 利用者はコンポーネントまたはそのNgModuleをインポートし忘れることがあり、その結果、コンポーネントがレンダリングされません。 -詳細については、[コンポーネントのインポートと使用](guide/components/importing) を参照してください。 +詳細については、[コンポーネントのインポートと使用](guide/components#imports-in-the-component-decorator) を参照してください。 属性セレクターを定義するコンポーネントは、小文字、ダッシュ区切りの属性を使用する必要があります。 上記で説明したプレフィックスの推奨事項に従うことができます。 diff --git a/adev-ja/src/content/guide/components/styling.en.md b/adev-ja/src/content/guide/components/styling.en.md index 0f00e7485c..0355304f27 100644 --- a/adev-ja/src/content/guide/components/styling.en.md +++ b/adev-ja/src/content/guide/components/styling.en.md @@ -7,10 +7,14 @@ Components can optionally include CSS styles that apply to that component's DOM: ```angular-ts {highlight:[4]} @Component({ selector: 'profile-photo', - template: `Your profile photo`, - styles: ` img { border-radius: 50%; } `, + template: `Your profile photo`, + styles: ` + img { + border-radius: 50%; + } + `, }) -export class ProfilePhoto { } +export class ProfilePhoto {} ``` You can also choose to write your styles in separate files: @@ -21,7 +25,7 @@ You can also choose to write your styles in separate files: templateUrl: 'profile-photo.html', styleUrl: 'profile-photo.css', }) -export class ProfilePhoto { } +export class ProfilePhoto {} ``` When Angular compiles your component, these styles are emitted with your component's JavaScript diff --git a/adev-ja/src/content/guide/components/styling.md b/adev-ja/src/content/guide/components/styling.md index a685843ade..c8dca8ca99 100644 --- a/adev-ja/src/content/guide/components/styling.md +++ b/adev-ja/src/content/guide/components/styling.md @@ -7,10 +7,14 @@ TIP: このガイドでは、すでに[基本概念のガイド](essentials)を ```angular-ts {highlight:[4]} @Component({ selector: 'profile-photo', - template: `Your profile photo`, - styles: ` img { border-radius: 50%; } `, + template: `Your profile photo`, + styles: ` + img { + border-radius: 50%; + } + `, }) -export class ProfilePhoto { } +export class ProfilePhoto {} ``` また、別のファイルにスタイルを記述できます。 @@ -21,7 +25,7 @@ export class ProfilePhoto { } templateUrl: 'profile-photo.html', styleUrl: 'profile-photo.css', }) -export class ProfilePhoto { } +export class ProfilePhoto {} ``` Angularがコンポーネントをコンパイルすると、これらのスタイルはコンポーネントのJavaScript出力と共に発行されます。 @@ -33,7 +37,7 @@ Angularは、[Sass](https://sass-lang.com)、 [less](https://lesscss.org)、[stylus](https://stylus-lang.com)など、 CSSを出力するすべてのツールと連携します。 -## スタイルのスコープ +## スタイルのスコープ {#style-scoping} 各コンポーネントには、**ビューカプセル化**設定があり、フレームワークがコンポーネントのスタイルをどのようにスコープするかを決定します。 ビューカプセル化モードには、`Emulated`、`ShadowDom`、`ExperimentalIsolatedShadowDom`、`None`の4つのモードがあります。 @@ -44,7 +48,7 @@ CSSを出力するすべてのツールと連携します。 ..., encapsulation: ViewEncapsulation.None, }) -export class ProfilePhoto { } +export class ProfilePhoto {} ``` ### ViewEncapsulation.Emulated diff --git a/adev-ja/src/content/guide/di/creating-and-using-services.en.md b/adev-ja/src/content/guide/di/creating-and-using-services.en.md index d7b1486f6a..a9cdc05328 100644 --- a/adev-ja/src/content/guide/di/creating-and-using-services.en.md +++ b/adev-ja/src/content/guide/di/creating-and-using-services.en.md @@ -51,21 +51,19 @@ Once you've created a service with `providedIn: 'root'`, you can inject it anywh ### Injecting into a component ```angular-ts -import { Component, inject } from '@angular/core'; -import { BasicDataStore } from './basic-data-store'; +import {Component, inject} from '@angular/core'; +import {BasicDataStore} from './basic-data-store'; @Component({ selector: 'app-example', template: `

{{ dataStore.getData() }}

- +
- ` + `, }) -export class ExampleComponent { +export class Example { dataStore = inject(BasicDataStore); } ``` diff --git a/adev-ja/src/content/guide/di/creating-and-using-services.md b/adev-ja/src/content/guide/di/creating-and-using-services.md index 02236a8ff4..742fcc2290 100644 --- a/adev-ja/src/content/guide/di/creating-and-using-services.md +++ b/adev-ja/src/content/guide/di/creating-and-using-services.md @@ -51,21 +51,19 @@ export class BasicDataStore { ### コンポーネントへの注入 {#injecting-into-a-component} ```angular-ts -import { Component, inject } from '@angular/core'; -import { BasicDataStore } from './basic-data-store'; +import {Component, inject} from '@angular/core'; +import {BasicDataStore} from './basic-data-store'; @Component({ selector: 'app-example', template: `

{{ dataStore.getData() }}

- +
- ` + `, }) -export class ExampleComponent { +export class Example { dataStore = inject(BasicDataStore); } ``` diff --git a/adev-ja/src/content/guide/di/creating-injectable-service.md b/adev-ja/src/content/guide/di/creating-injectable-service.md index 1dad19288e..30123b8a65 100644 --- a/adev-ja/src/content/guide/di/creating-injectable-service.md +++ b/adev-ja/src/content/guide/di/creating-injectable-service.md @@ -108,20 +108,20 @@ For clarity and maintainability, it is recommended that you define components an To inject a service as a dependency into a component, you can declare a class field representing the dependency and use Angular's [`inject`](/api/core/inject) function to initialize it. -The following example specifies the `HeroService` in the `HeroListComponent`. +The following example specifies the `HeroService` in the `HeroList`. The type of `heroService` is `HeroService`. ```ts import {inject} from '@angular/core'; -export class HeroListComponent { +export class HeroList { private heroService = inject(HeroService); } ``` It is also possible to inject a service into a component using the component's constructor: -```ts {header: 'hero-list.component.ts (constructor signature)'} +```ts {header: 'hero-list.ts (constructor signature)'} constructor(private heroService: HeroService) ``` @@ -155,6 +155,6 @@ In this example, the `getHeroes()` method uses the `Logger` service by logging a ## What's next - - + + diff --git a/adev-ja/src/content/guide/di/debugging-and-troubleshooting-di.md b/adev-ja/src/content/guide/di/debugging-and-troubleshooting-di.md new file mode 100644 index 0000000000..e5f9ae9644 --- /dev/null +++ b/adev-ja/src/content/guide/di/debugging-and-troubleshooting-di.md @@ -0,0 +1,1018 @@ +# Debugging and troubleshooting dependency injection + +Dependency injection (DI) issues typically stem from configuration mistakes, scope problems, or incorrect usage patterns. This guide helps you identify and resolve common DI problems that developers encounter. + +## Common pitfalls and solutions + +### Services not available where expected + +One of the most common DI issues occurs when you try to inject a service but Angular cannot find it in the current injector or any parent injector. This usually happens when the service is provided in the wrong scope or not provided at all. + +#### Provider scope mismatch + +When you provide a service in a component's `providers` array, Angular creates an instance in that component's injector. This instance is only available to that component and its children. Parent components and sibling components cannot access it because they use different injectors. + +```angular-ts {header: 'child-view.ts'} +import {Component} from '@angular/core'; +import {DataStore} from './data-store'; + +@Component({ + selector: 'app-child', + template: '

Child

', + providers: [DataStore], // Only available in this component and its children +}) +export class ChildView {} +``` + +```angular-ts {header: 'parent-view.ts'} +import {Component, inject} from '@angular/core'; +import {DataStore} from './data-store'; + +@Component({ + selector: 'app-parent', + template: '', +}) +export class ParentView { + private dataService = inject(DataStore); // ERROR: Not available to parent +} +``` + +Angular only searches up the hierarchy, never down. Parent components cannot access services provided in child components. + +**Solution:** Provide the service at a higher level (application or parent component). + +```ts {prefer} +import {Injectable} from '@angular/core'; + +@Injectable({providedIn: 'root'}) +export class DataStore { + // Available everywhere +} +``` + +TIP: Use `providedIn: 'root'` by default for services that don't need component-specific state. This makes services available everywhere and enables tree-shaking. + +#### Services and lazy-loaded routes + +When you provide a service in a lazy-loaded route's `providers` array, Angular creates a child injector for that route. This injector and its services only become available after the route loads. Components in the eagerly-loaded parts of your application cannot access these services because they use different injectors that exist before the lazy-loaded injector is created. + +```ts {header: 'feature.routes.ts'} +import {Routes} from '@angular/router'; +import {FeatureClient} from './feature-client'; + +export const featureRoutes: Routes = [ + { + path: 'feature', + providers: [FeatureClient], + loadComponent: () => import('./feature-view'), + }, +]; +``` + +```angular-ts {header: 'eager-view.ts'} +import {Component, inject} from '@angular/core'; +import {FeatureClient} from './feature-client'; + +@Component({ + selector: 'app-eager', + template: '

Eager Component

', +}) +export class EagerView { + private featureService = inject(FeatureClient); // ERROR: Not available yet +} +``` + +Lazy-loaded routes create child injectors that are only available after the route loads. + +NOTE: By default, route injectors and their services persist even after navigating away from the route. They are not destroyed until the application is closed. For automatic cleanup of unused route injectors, see [customizing route behavior](guide/routing/customizing-route-behavior#experimental-automatic-cleanup-of-unused-route-injectors). + +**Solution:** Use `providedIn: 'root'` for services that need to be shared across lazy boundaries. + +```ts {prefer, header: 'Provide at root for shared services'} +import {Injectable} from '@angular/core'; + +@Injectable({providedIn: 'root'}) +export class FeatureClient { + // Available everywhere, including before lazy load +} +``` + +If the service should be lazy-loaded but still available to eager components, inject it only where needed and use optional injection to handle availability. + +### Multiple instances instead of singletons + +You expect one shared instance (singleton) but get separate instances in different components. + +#### Providing in component instead of root + +When you add a service to a component's `providers` array, Angular creates a new instance of that service for each instance of the component. Each component gets its own separate service instance, which means changes in one component don't affect the service instance in other components. This is often unexpected when you want shared state across your application. + +```angular-ts {avoid, header: 'Component-level provider creates multiple instances'} +import {Component, inject} from '@angular/core'; +import {UserClient} from './user-client'; + +@Component({ + selector: 'app-profile', + template: '

Profile

', + providers: [UserClient], // Creates new instance per component! +}) +export class UserProfile { + private userService = inject(UserClient); +} + +@Component({ + selector: 'app-settings', + template: '

Settings

', + providers: [UserClient], // Different instance! +}) +export class UserSettings { + private userService = inject(UserClient); +} +``` + +Each component gets its own `UserClient` instance. Changes in one component don't affect the other. + +**Solution:** Use `providedIn: 'root'` for singletons. + +```ts {prefer, header: 'Root-level singleton'} +import {Injectable} from '@angular/core'; + +@Injectable({providedIn: 'root'}) +export class UserClient { + // Single instance shared across all components +} +``` + +#### When multiple instances are intentional + +Sometimes you want separate instances per component for component-specific state. + +```angular-ts {header: 'Intentional: Component-scoped state'} +import {Injectable, signal} from '@angular/core'; + +@Injectable() // No providedIn - must be provided explicitly +export class FormStateStore { + private formData = signal({}); + + setData(data: any) { + this.formData.set(data); + } + + getData() { + return this.formData(); + } +} + +@Component({ + selector: 'app-user-form', + template: '
...', + providers: [FormStateStore], // Each form gets its own state +}) +export class UserForm { + private formState = inject(FormStateStore); +} +``` + +This pattern is useful for: + +- Form state management (each form has isolated state) +- Component-specific caching +- Temporary data that shouldn't be shared + +### Incorrect inject() usage + +The `inject()` function only works in specific contexts during class construction and factory execution. + +#### Using inject() in lifecycle hooks + +When you call the `inject()` function inside lifecycle hooks like `ngOnInit()`, `ngAfterViewInit()`, or `ngOnDestroy()`, Angular throws an error because these methods run outside the injection context. The injection context is only available during the synchronous execution of class construction, which happens before lifecycle hooks are called. + +```angular-ts {avoid, header: 'inject() in ngOnInit'} +import {Component, inject} from '@angular/core'; +import {UserClient} from './user-client'; + +@Component({ + selector: 'app-profile', + template: '

User: {{userName}}

', +}) +export class UserProfile { + userName = ''; + + ngOnInit() { + const userService = inject(UserClient); // ERROR: Not an injection context + this.userName = userService.getUser().name; + } +} +``` + +**Solution:** Capture dependencies and derive values in field initializers. + +```angular-ts {prefer, header: 'Derive values in field initializers'} +import {Component, inject} from '@angular/core'; +import {UserClient} from './user-client'; + +@Component({ + selector: 'app-profile', + template: '

User: {{userName}}

', +}) +export class UserProfile { + private userService = inject(UserClient); + userName = this.userService.getUser().name; +} +``` + +#### Using the Injector for deferred injection + +When you need to retrieve services outside an injection context, use the captured `Injector` directly with `injector.get()`: + +```angular-ts +import {Component, inject, Injector} from '@angular/core'; +import {UserClient} from './user-client'; + +@Component({ + selector: 'app-profile', + template: '', +}) +export class UserProfile { + private injector = inject(Injector); + + delayedLoad() { + setTimeout(() => { + const userService = this.injector.get(UserClient); + console.log(userService.getUser()); + }, 1000); + } +} +``` + +#### Using runInInjectionContext for callbacks + +Use `runInInjectionContext()` when you need to enable **other code** to call `inject()`. This is useful when accepting callbacks that might use dependency injection: + +```angular-ts +import {Component, inject, Injector, input} from '@angular/core'; + +@Component({ + selector: 'app-data-loader', + template: '', +}) +export class DataLoader { + private injector = inject(Injector); + onLoad = input<() => void>(); + + load() { + const callback = this.onLoad(); + if (callback) { + // Enable the callback to use inject() + this.injector.runInInjectionContext(callback); + } + } +} +``` + +The `runInInjectionContext()` method creates a temporary injection context, allowing code inside the callback to call `inject()`. + +IMPORTANT: Always capture dependencies at the class level when possible. Use `injector.get()` for simple deferred retrieval, and `runInInjectionContext()` only when external code needs to call `inject()`. + +TIP: Use `assertInInjectionContext()` to verify your code is running in a valid injection context. This is useful when creating reusable functions that call `inject()`. See [Asserting the context](guide/di/dependency-injection-context#asserts-the-context) for details. + +### providers vs viewProviders confusion + +The difference between `providers` and `viewProviders` affects content projection scenarios. + +#### Understanding the difference + +**providers:** Available to the component's template AND any content projected into the component (ng-content). + +**viewProviders:** Only available to the component's template, NOT to projected content. + +```angular-ts {header: 'parent-view.ts'} +import {Component, inject} from '@angular/core'; +import {ThemeStore} from './theme-store'; + +@Component({ + selector: 'app-parent', + template: ` +
+

Theme: {{ themeService.theme() }}

+ +
+ `, + providers: [ThemeStore], // Available to content children +}) +export class ParentView { + protected themeService = inject(ThemeStore); +} + +@Component({ + selector: 'app-parent-view', + template: ` +
+

Theme: {{ themeService.theme() }}

+ +
+ `, + viewProviders: [ThemeStore], // NOT available to content children +}) +export class ParentViewOnly { + protected themeService = inject(ThemeStore); +} +``` + +```angular-ts {header: 'child-view.ts'} +import {Component, inject} from '@angular/core'; +import {ThemeStore} from './theme-store'; + +@Component({ + selector: 'app-child', + template: '

Child theme: {{theme()}}

', +}) +export class ChildView { + private themeService = inject(ThemeStore, {optional: true}); + theme = () => this.themeService?.theme() ?? 'none'; +} +``` + +```angular-ts {header: 'app.ts'} +@Component({ + selector: 'app-root', + template: ` + + + + + + + + + + `, +}) +export class App {} +``` + +**When projected into `app-parent`:** The child component can inject `ThemeStore` because `providers` makes it available to projected content. + +**When projected into `app-parent-view`:** The child component cannot inject `ThemeStore` because `viewProviders` restricts it to the parent's template only. + +#### Choosing between providers and viewProviders + +Use `providers` when: + +- The service should be available to projected content +- You want content children to access the service +- You're providing general-purpose services + +Use `viewProviders` when: + +- The service should only be available to your component's template +- You want to hide implementation details from projected content +- You're providing internal services that shouldn't leak out + +**Default recommendation:** Use `providers` unless you have a specific reason to restrict access with `viewProviders`. + +### InjectionToken issues + +When using `InjectionToken` for non-class dependencies, developers often encounter problems related to token identity, type safety, and provider configuration. These issues usually stem from how JavaScript handles object identity and how TypeScript infers types. + +#### Token identity confusion + +When you create a new `InjectionToken` instance, JavaScript creates a unique object in memory. Even if you create another `InjectionToken` with the exact same description string, it's a completely different object. Angular uses the token object's identity (not its description) to match providers with injection points, so tokens with the same description but different object identities cannot access each other's values. + +```ts {header: 'config.token.ts'} +import {InjectionToken} from '@angular/core'; + +export interface AppConfig { + apiUrl: string; +} + +export const APP_CONFIG = new InjectionToken('app config'); +``` + +```ts {header: 'app.config.ts'} +import {APP_CONFIG} from './config.token'; + +export const appConfig: AppConfig = { + apiUrl: 'https://api.example.com', +}; + +bootstrapApplication(App, { + providers: [{provide: APP_CONFIG, useValue: appConfig}], +}); +``` + +```angular-ts {avoid, header: 'feature-view.ts'} +// Creating new token with same description +import {InjectionToken, inject} from '@angular/core'; +import {AppConfig} from './config.token'; + +const APP_CONFIG = new InjectionToken('app config'); + +@Component({ + selector: 'app-feature', + template: '

Feature

', +}) +export class FeatureView { + private config = inject(APP_CONFIG); // ERROR: Different token instance! +} +``` + +Even though both tokens have the description `'app config'`, they are different objects. Angular compares tokens by reference, not by description. + +**Solution:** Import the same token instance. + +```angular-ts {prefer, header: 'feature-view.ts'} +import {inject} from '@angular/core'; +import {APP_CONFIG, AppConfig} from './config.token'; + +@Component({ + selector: 'app-feature', + template: '

API: {{config.apiUrl}}

', +}) +export class FeatureView { + protected config = inject(APP_CONFIG); // Works: Same token instance +} +``` + +TIP: Always export tokens from a shared file and import them everywhere they're needed. Never create multiple `InjectionToken` instances with the same description. + +#### Trying to inject interfaces + +When you define a TypeScript interface, it only exists during compilation for type checking. TypeScript erases all interface definitions when it compiles to JavaScript, so at runtime there's no object for Angular to use as an injection token. If you try to inject an interface type, Angular has nothing to match against the provider configuration. + +```angular-ts {avoid, header: 'Can't inject interface'} +interface UserConfig { + name: string; + email: string; +} + +@Component({ + selector: 'app-profile', + template: '

Profile

', +}) +export class UserProfile { + // ERROR: Interfaces don't exist at runtime + constructor(private config: UserConfig) {} +} +``` + +**Solution:** Use `InjectionToken` for interface types. + +```angular-ts {prefer, header: 'Use InjectionToken for interfaces'} +import {InjectionToken, inject} from '@angular/core'; + +interface UserConfig { + name: string; + email: string; +} + +export const USER_CONFIG = new InjectionToken('user configuration'); + +// Provide the configuration +bootstrapApplication(App, { + providers: [ + { + provide: USER_CONFIG, + useValue: {name: 'Alice', email: 'alice@example.com'}, + }, + ], +}); + +// Inject using the token +@Component({ + selector: 'app-profile', + template: '

User: {{config.name}}

', +}) +export class UserProfile { + protected config = inject(USER_CONFIG); +} +``` + +The `InjectionToken` exists at runtime and can be used for injection, while the `UserConfig` interface provides type safety during development. + +### Circular dependencies + +Circular dependencies occur when services inject each other, creating a cycle that Angular cannot resolve. For detailed explanations and code examples, see [NG0200: Circular dependency](errors/NG0200). + +**Resolution strategies** (in order of preference): + +1. **Restructure** - Extract shared logic to a third service, breaking the cycle +2. **Use events** - Replace direct dependencies with event-based communication (such as `Subject`) +3. **Lazy injection** - Use `Injector.get()` to defer one dependency (last resort) + +NOTE: Do not use `forwardRef()` for service circular dependencies—it only solves circular imports in standalone component configurations. + +## Debugging dependency resolution + +### Understanding the resolution process + +Angular resolves dependencies by walking up the injector hierarchy. When a `NullInjectorError` occurs, understanding this search order helps you identify where to add the missing provider. + +Angular searches in this order: + +1. **Element injector** - The current component or directive +2. **Parent element injectors** - Up the DOM tree through parent components +3. **Environment injector** - The route or application injector +4. **NullInjector** - Throws `NullInjectorError` if not found + +When you see a `NullInjectorError`, the service isn't provided at any level the component can access. Check that: + +- The service has `@Injectable({providedIn: 'root'})`, or +- The service is in a `providers` array the component can reach + +You can modify this search behavior with resolution modifiers like `self`, `skipSelf`, `host`, and `optional`. For complete coverage of resolution rules and modifiers, see the [Hierarchical injectors guide](guide/di/hierarchical-dependency-injection). + +### Using Angular DevTools + +Angular DevTools includes an injector tree inspector that visualizes the entire injector hierarchy and shows which providers are available at each level. For installation and general usage, see the [Angular DevTools injector documentation](tools/devtools/injectors). + +When debugging DI issues, use DevTools to answer these questions: + +- **Is the service provided?** Select the component that fails to inject and check if the service appears in the Injector section. +- **At what level?** Walk up the component tree to find where the service is actually provided (component, route, or application level). +- **Multiple instances?** If a singleton service appears in multiple component injectors, it's likely provided in component `providers` arrays instead of using `providedIn: 'root'`. + +If a service never appears in any injector, verify it has the `@Injectable()` decorator with `providedIn: 'root'` or is listed in a `providers` array. + +### Logging and tracing injection + +When DevTools isn't enough, use logging to trace injection behavior. + +#### Logging service creation + +Add console logs to service constructors to see when services are created. + +```ts +import {Injectable} from '@angular/core'; + +@Injectable({providedIn: 'root'}) +export class UserClient { + constructor() { + console.log('UserClient created'); + console.trace(); // Shows call stack + } + + getUser() { + return {name: 'Alice'}; + } +} +``` + +When the service is created, you'll see the log message and a stack trace showing where the injection occurred. + +**What to look for:** + +- How many times is the constructor called? (should be once for singletons) +- Where in the code is it being injected? (check the stack trace) +- Is it created at the expected time? (application startup vs lazy) + +#### Checking service availability + +Use optional injection with logging to determine if a service is available. + +```angular-ts +import {Component, inject} from '@angular/core'; +import {UserClient} from './user-client'; + +@Component({ + selector: 'app-debug', + template: '

Debug Component

', +}) +export class DebugView { + private userService = inject(UserClient, {optional: true}); + + constructor() { + if (this.userService) { + console.log('UserClient available:', this.userService); + } else { + console.warn('UserClient NOT available'); + console.trace(); // Shows where we tried to inject + } + } +} +``` + +This pattern helps you verify if a service is available without crashing the application. + +#### Logging resolution modifiers + +Test different resolution strategies with logging. + +```angular-ts +import {Component, inject} from '@angular/core'; +import {UserClient} from './user-client'; + +@Component({ + selector: 'app-debug', + template: '

Debug Component

', + providers: [UserClient], +}) +export class DebugView { + // Try to get local instance + private localService = inject(UserClient, {self: true, optional: true}); + + // Try to get parent instance + private parentService = inject(UserClient, { + skipSelf: true, + optional: true, + }); + + constructor() { + console.log('Local instance:', this.localService); + console.log('Parent instance:', this.parentService); + console.log('Same instance?', this.localService === this.parentService); + } +} +``` + +This shows you which instances are available at different injector levels. + +### Debugging workflow + +When DI fails, follow this systematic approach: + +**Step 1: Read the error message** + +- Identify the error code (NG0200, NG0203, etc.) +- Read the dependency path +- Note which token failed + +**Step 2: Check the basics** + +- Does the service have `@Injectable()`? +- Is `providedIn` set correctly? +- Are imports correct? +- Is the file included in compilation? + +**Step 3: Verify injection context** + +- Is `inject()` called in a valid context? +- Check for async issues (await, setTimeout, promises) +- Verify timing (not after destroy) + +**Step 4: Use debugging tools** + +- Open Angular DevTools +- Check injector hierarchy +- Add console logs to constructors +- Use optional injection to test availability + +**Step 5: Simplify and isolate** + +- Remove dependencies one by one +- Test in a minimal component +- Check each injector level separately +- Create a reproduction case + +## DI error reference + +This section provides detailed information about specific Angular DI error codes you may encounter. Use this as a reference when you see these errors in your console. + +### NullInjectorError: No provider for [Service] + +**Error code:** None (displayed as `NullInjectorError`) + +This error occurs when Angular cannot find a provider for a token in the injector hierarchy. The error message includes a dependency path showing where the injection was attempted. + +``` +NullInjectorError: No provider for UserClient! + Dependency path: App -> AuthClient -> UserClient +``` + +The dependency path shows that `App` injected `AuthClient`, which tried to inject `UserClient`, but no provider was found. + +#### Missing @Injectable decorator + +The most common cause is forgetting the `@Injectable()` decorator on a service class. + +```ts {avoid, header: 'Missing decorator'} +export class UserClient { + getUser() { + return {name: 'Alice'}; + } +} +``` + +Angular requires the `@Injectable()` decorator to generate the metadata needed for dependency injection. + +```ts {prefer, header: 'Include @Injectable'} +import {Injectable} from '@angular/core'; + +@Injectable({ + providedIn: 'root', +}) +export class UserClient { + getUser() { + return {name: 'Alice'}; + } +} +``` + +NOTE: Classes with zero-argument constructors can work without `@Injectable()`, but this is not recommended. Always include the decorator for consistency and to avoid issues when adding dependencies later. + +#### Missing providedIn configuration + +A service may have `@Injectable()` but not specify where it should be provided. + +```ts {avoid, header: 'No providedIn specified'} +import {Injectable} from '@angular/core'; + +@Injectable() +export class UserClient { + getUser() { + return {name: 'Alice'}; + } +} +``` + +Specify `providedIn: 'root'` to make the service available throughout your application. + +```ts {prefer, header: 'Specify providedIn'} +import {Injectable} from '@angular/core'; + +@Injectable({ + providedIn: 'root', +}) +export class UserClient { + getUser() { + return {name: 'Alice'}; + } +} +``` + +The `providedIn: 'root'` configuration makes the service available application-wide and enables tree-shaking (the service is removed from the bundle if never injected). + +#### Standalone component missing imports + +In Angular v20+ with standalone components, you must explicitly import or provide dependencies in each component. + +```angular-ts {avoid, header: 'Missing service import'} +import {Component, inject} from '@angular/core'; +import {UserClient} from './user-client'; + +@Component({ + selector: 'app-profile', + template: '

User: {{user().name}}

', +}) +export class UserProfile { + private userService = inject(UserClient); // ERROR: No provider + user = this.userService.getUser(); +} +``` + +Ensure the service uses `providedIn: 'root'` or add it to the component's `providers` array. + +```angular-ts {prefer, header: 'Service uses providedIn: root'} +import {Component, inject} from '@angular/core'; +import {UserClient} from './user-client'; + +@Component({ + selector: 'app-profile', + template: '

User: {{user().name}}

', +}) +export class UserProfile { + private userService = inject(UserClient); // Works: providedIn: 'root' + user = this.userService.getUser(); +} +``` + +#### Debugging with the dependency path + +The dependency path in the error message shows the chain of injections that led to the failure. + +``` +NullInjectorError: No provider for LoggerStore! + Dependency path: App -> DataStore -> ApiClient -> LoggerStore +``` + +This path tells you: + +1. `App` injected `DataStore` +2. `DataStore` injected `ApiClient` +3. `ApiClient` tried to inject `LoggerStore` +4. No provider for `LoggerStore` was found + +Start your investigation at the end of the chain (`LoggerStore`) and verify it has proper configuration. + +#### Checking provider availability with optional injection + +Use optional injection to check if a provider exists without throwing an error. + +```angular-ts +import {Component, inject} from '@angular/core'; +import {UserClient} from './user-client'; + +@Component({ + selector: 'app-debug', + template: '

Service available: {{serviceAvailable}}

', +}) +export class DebugView { + private userService = inject(UserClient, {optional: true}); + serviceAvailable = this.userService !== null; +} +``` + +Optional injection returns `null` if no provider is found, allowing you to handle the absence gracefully. + +### NG0203: inject() must be called from an injection context + +**Error code:** NG0203 + +This error occurs when you call `inject()` outside of a valid injection context. Angular requires `inject()` to be called synchronously during class construction or factory execution. + +``` +NG0203: inject() must be called from an injection context such as a +constructor, a factory function, a field initializer, or a function +used with `runInInjectionContext`. +``` + +#### Valid injection contexts + +Angular allows `inject()` in these locations: + +1. **Class field initializers** + + ```angular-ts + import {Component, inject} from '@angular/core'; + import {UserClient} from './user-client'; + + @Component({ + selector: 'app-profile', + template: '

User: {{user().name}}

', + }) + export class UserProfile { + private userService = inject(UserClient); // Valid + user = this.userService.getUser(); + } + ``` + +2. **Class constructor** + + ```angular-ts + import {Component, inject} from '@angular/core'; + import {UserClient} from './user-client'; + + @Component({ + selector: 'app-profile', + template: '

User: {{user().name}}

', + }) + export class UserProfile { + private userService: UserClient; + + constructor() { + this.userService = inject(UserClient); // Valid + } + + user = this.userService.getUser(); + } + ``` + +3. **Provider factory functions** + + ```ts + import {inject, InjectionToken} from '@angular/core'; + import {UserClient} from './user-client'; + + export const GREETING = new InjectionToken('greeting', { + factory() { + const userService = inject(UserClient); // Valid + const user = userService.getUser(); + return `Hello, ${user.name}`; + }, + }); + ``` + +4. **Inside runInInjectionContext()** + + ```angular-ts + import {Component, inject, Injector} from '@angular/core'; + import {UserClient} from './user-client'; + + @Component({ + selector: 'app-profile', + template: '', + }) + export class UserProfile { + private injector = inject(Injector); + + loadUser() { + this.injector.runInInjectionContext(() => { + const userService = inject(UserClient); // Valid + console.log(userService.getUser()); + }); + } + } + ``` + +Other injection contexts that `inject()` also works in include: + +- [provideAppInitializer](api/core/provideAppInitializer) +- [provideEnvironmentInitializer](api/core/provideEnvironmentInitializer) +- Functional [route guards](guide/routing/route-guards) +- Functional [data resolvers](guide/routing/data-resolvers) + +#### When this error occurs + +This error occurs when: + +- Calling `inject()` in lifecycle hooks (`ngOnInit`, `ngAfterViewInit`, etc.) +- Calling `inject()` after `await` in async functions +- Calling `inject()` in callbacks (`setTimeout`, `Promise.then()`, etc.) +- Calling `inject()` outside of class construction phase + +See the "Incorrect inject() usage" section for detailed examples and solutions. + +#### Solutions and workarounds + +**Solution 1:** Capture dependencies in field initializers (most common) + +```ts +private userService = inject(UserClient) // Capture at class level +``` + +**Solution 2:** Use `runInInjectionContext()` for callbacks + +```ts +private injector = inject(Injector) + +someCallback() { + this.injector.runInInjectionContext(() => { + const service = inject(MyClient) + }) +} +``` + +**Solution 3:** Pass dependencies as parameters instead of injecting them + +```ts +// Instead of injecting inside a callback +setTimeout(() => { + const service = inject(MyClient) // ERROR +}, 1000) + +// Capture first, then use +private service = inject(MyClient) + +setTimeout(() => { + this.service.doSomething() // Use captured reference +}, 1000) +``` + +### NG0200: Circular dependency detected + +**Error code:** NG0200 + +This error occurs when two or more services depend on each other, creating a circular dependency that Angular cannot resolve. + +``` +NG0200: Circular dependency in DI detected for AuthClient + Dependency path: AuthClient -> UserClient -> AuthClient +``` + +The dependency path shows the cycle: `AuthClient` depends on `UserClient`, which depends back on `AuthClient`. + +#### Understanding the error + +Angular creates service instances by calling their constructors and injecting dependencies. When services depend on each other circularly, Angular cannot determine which to create first. + +#### Common causes + +- Direct circular dependency (Service A → Service B → Service A) +- Indirect circular dependency (Service A → Service B → Service C → Service A) +- Import cycles in module files that also have service dependencies + +#### Resolution strategies + +See the "Circular dependencies" section for detailed examples and solutions: + +1. **Restructure** - Extract shared logic to a third service (recommended) +2. **Use events** - Replace direct dependencies with event-based communication +3. **Lazy injection** - Use `Injector.get()` to defer one dependency (last resort) + +Do NOT use `forwardRef()` for service circular dependencies. It only solves circular imports in component configurations. + +### Other DI error codes + +For detailed explanations and solutions for these errors, see the [Angular error reference](errors): + +| Error Code | Description | +| ----------------------- | ------------------------------------------------------------------------------------------ | +| [NG0204](errors/NG0204) | Can't resolve all parameters - missing `@Injectable()` decorator | +| [NG0205](errors/NG0205) | Injector already destroyed - accessing services after component destruction | +| [NG0207](errors/NG0207) | EnvironmentProviders in wrong context - using `provideHttpClient()` in component providers | + +## Next steps + +When you encounter DI errors, remember to: + +1. Read the error message and dependency path carefully +2. Verify basic configuration (decorators, `providedIn`, imports) +3. Check injection context and timing +4. Use DevTools and logging to investigate +5. Simplify and isolate the problem + +For a deeper understanding of specific topics on dependency injection, check out: + +- [Understanding dependency injection](guide/di) - Core DI concepts and patterns +- [Hierarchical dependency injection](guide/di/hierarchical-dependency-injection) - How the injector hierarchy works +- [Testing with dependency injection](guide/testing) - Using TestBed and mocking dependencies diff --git a/adev-ja/src/content/guide/di/defining-dependency-providers.md b/adev-ja/src/content/guide/di/defining-dependency-providers.md index f685b05ef3..84d4684f46 100644 --- a/adev-ja/src/content/guide/di/defining-dependency-providers.md +++ b/adev-ja/src/content/guide/di/defining-dependency-providers.md @@ -66,7 +66,7 @@ export const APP_CONFIG = new InjectionToken('app.config', { selector: 'app-header', template: `

Version: {{ config.version }}

`, }) -export class HeaderComponent { +export class Header { config = inject(APP_CONFIG); // Automatically available } ``` @@ -167,7 +167,7 @@ export class LocalDataStore { providers: [LocalDataStore], template: `...`, }) -export class ExampleComponent { +export class Example { dataStore = inject(LocalDataStore); } ``` @@ -191,7 +191,7 @@ export class DataStore { providers: [DataStore], template: `...`, }) -export class IsolatedComponent { +export class Isolated { dataStore = inject(DataStore); // Component-specific instance } ``` @@ -235,14 +235,14 @@ Think of Angular's dependency injection system as a hash map or dictionary. Each When manually providing dependencies, you typically see this shorthand syntax: ```angular-ts -import { Component } from '@angular/core'; -import { LocalService } from './local-service'; +import {Component} from '@angular/core'; +import {LocalService} from './local-service'; @Component({ selector: 'app-example', - providers: [LocalService] // Service without providedIn + providers: [LocalService], // Service without providedIn }) -export class ExampleComponent { } +export class Example {} ``` This is actually a shorthand for a more detailed provider configuration: @@ -282,16 +282,16 @@ Provider identifiers allow Angular's dependency injection (DI) system to retriev Class name use the imported class directly as the identifier: ```angular-ts -import { Component } from '@angular/core'; -import { LocalService } from './local-service'; +import {Component} from '@angular/core'; +import {LocalService} from './local-service'; @Component({ selector: 'app-example', - providers: [ - { provide: LocalService, useClass: LocalService } - ] + providers: [{provide: LocalService, useClass: LocalService}], }) -export class ExampleComponent { /* ... */ } +export class Example { + /* ... */ +} ``` The class serves as both the identifier and the implementation, which is why Angular provides the shorthand `providers: [LocalService]`. @@ -313,17 +313,15 @@ NOTE: The string `'DataService'` is a description used purely for debugging purp Use the token in your provider configuration: ```angular-ts -import { Component, inject } from '@angular/core'; -import { LocalDataService } from './local-data-service'; -import { DATA_SERVICE_TOKEN } from './tokens'; +import {Component, inject} from '@angular/core'; +import {LocalDataService} from './local-data-service'; +import {DATA_SERVICE_TOKEN} from './tokens'; @Component({ selector: 'app-example', - providers: [ - { provide: DATA_SERVICE_TOKEN, useClass: LocalDataService } - ] + providers: [{provide: DATA_SERVICE_TOKEN, useClass: LocalDataService}], }) -export class ExampleComponent { +export class Example { private dataService = inject(DATA_SERVICE_TOKEN); } ``` @@ -344,7 +342,7 @@ interface DataService { {provide: DataService, useClass: LocalDataService}, // Error! ], }) -export class ExampleComponent { +export class Example { private dataService = inject(DataService); // Error! } @@ -354,7 +352,7 @@ export const DATA_SERVICE_TOKEN = new InjectionToken('DataService') @Component({ providers: [{provide: DATA_SERVICE_TOKEN, useClass: LocalDataService}], }) -export class ExampleComponent { +export class Example { private dataService = inject(DATA_SERVICE_TOKEN); // Works! } ``` @@ -428,7 +426,7 @@ export class EvenBetterLogger extends Logger { {provide: Logger, useClass: EvenBetterLogger}, ], }) -export class ExampleComponent { +export class Example { private logger = inject(Logger); // Gets EvenBetterLogger instance } ``` @@ -485,7 +483,7 @@ bootstrapApplication(AppComponent, { selector: 'app-header', template: `

{{ title }}

`, }) -export class HeaderComponent { +export class Header { private config = inject(APP_CONFIG); title = this.config.appTitle; } @@ -575,7 +573,7 @@ export const apiClientProvider = { selector: 'app-dashboard', providers: [apiClientProvider], }) -export class DashboardComponent { +export class Dashboard { private apiClient = inject(ApiClient); } ``` @@ -628,7 +626,7 @@ Use application-level providers in `bootstrapApplication` when: ```ts // main.ts -bootstrapApplication(AppComponent, { +bootstrapApplication(App, { providers: [ {provide: API_BASE_URL, useValue: 'https://api.example.com'}, {provide: INTERCEPTOR_TOKEN, useClass: AuthInterceptor, multi: true}, @@ -672,20 +670,20 @@ Use component or directive providers when: @Component({ selector: 'app-advanced-form', providers: [ - FormValidationService, // Each form gets its own validator - { provide: FORM_CONFIG, useValue: { strictMode: true } } - ] + FormValidationService, // Each form gets its own validator + {provide: FORM_CONFIG, useValue: {strictMode: true}}, + ], }) -export class AdvancedFormComponent { } +export class AdvancedForm {} // Modal component with isolated state management @Component({ selector: 'app-modal', providers: [ - ModalStateService // Each modal manages its own state - ] + ModalStateService, // Each modal manages its own state + ], }) -export class ModalComponent { } +export class Modal {} ``` **Benefits:** @@ -771,7 +769,7 @@ export function provideAnalytics(config: AnalyticsConfig): Provider[] { // Usage in consumer app // main.ts -bootstrapApplication(AppComponent, { +bootstrapApplication(App, { providers: [ provideAnalytics({ trackingId: 'GA-12345', @@ -881,7 +879,7 @@ export function withRetry(config: RetryConfig): HttpFeature { } // Consumer usage with multiple features -bootstrapApplication(AppComponent, { +bootstrapApplication(App, { providers: [ provideHttpClient( {baseUrl: 'https://api.example.com'}, diff --git a/adev-ja/src/content/guide/di/dependency-injection-context.md b/adev-ja/src/content/guide/di/dependency-injection-context.md index d986c13139..e23ba8eb6c 100644 --- a/adev-ja/src/content/guide/di/dependency-injection-context.md +++ b/adev-ja/src/content/guide/di/dependency-injection-context.md @@ -31,7 +31,7 @@ const canActivateTeam: CanActivateFn = ( }; ``` -## 注入コンテキスト内で実行する +## 注入コンテキスト内で実行する {#run-within-an-injection-context} すでに注入コンテキスト内にいない状態で、特定の関数を注入コンテキスト内で実行したい場合は、`runInInjectionContext` を使用できます。 これには、たとえば `EnvironmentInjector` のような特定のインジェクターへのアクセスが必要です。 @@ -53,7 +53,7 @@ export class HeroService { [`inject`](/api/core/inject) は、インジェクターが要求されたトークンを解決できる場合にのみインスタンスを返します。 -## コンテキストのアサート +## コンテキストのアサート {#asserts-the-context} Angularは、現在のコンテキストが注入コンテキストであることをアサートし、そうでない場合は明確なエラーをスローするための `assertInInjectionContext` ヘルパー関数を提供します。呼び出し元の関数への参照を渡すと、エラーメッセージが正しいAPIエントリーポイントを指し示すようになります。これにより、デフォルトの汎用的な注入エラーよりも明確で実用的なメッセージが生成されます。 diff --git a/adev-ja/src/content/guide/di/hierarchical-dependency-injection.en.md b/adev-ja/src/content/guide/di/hierarchical-dependency-injection.en.md index f9a09ce173..75e92df648 100644 --- a/adev-ja/src/content/guide/di/hierarchical-dependency-injection.en.md +++ b/adev-ja/src/content/guide/di/hierarchical-dependency-injection.en.md @@ -68,7 +68,7 @@ There are two more injectors above `root`, an additional `EnvironmentInjector` a Consider how Angular bootstraps the application with the following in `main.ts`: ```ts -bootstrapApplication(AppComponent, appConfig); +bootstrapApplication(App, appConfig); ``` The `bootstrapApplication()` method creates a child injector of the platform injector which is configured by the `ApplicationConfig` instance. @@ -106,7 +106,7 @@ All requests forward up to the root injector, whether you configured it with the If you configure an app-wide provider in the `ApplicationConfig` of `bootstrapApplication`, it overrides one configured for `root` in the `@Injectable()` metadata. You can do this to configure a non-default provider of a service that is shared with multiple applications. -Here is an example of the case where the component router configuration includes a non-default [location strategy](guide/routing#location-strategy) by listing its provider in the `providers` list of the `ApplicationConfig`. +Here is an example of the case where the component router configuration includes a non-default [location strategy](guide/routing/common-router-tasks#locationstrategy-and-browser-url-styles) by listing its provider in the `providers` list of the `ApplicationConfig`. ```ts providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]; @@ -193,8 +193,8 @@ Additionally, you can combine all of the modifiers except: This way, if it can't be resolved at runtime, Angular resolves the service as `null`, rather than throwing an error. In the following example, the service, `OptionalService`, isn't provided in the service, `ApplicationConfig`, `@NgModule()`, or component class, so it isn't available anywhere in the app. -```ts {header:"src/app/optional/optional.component.ts"} -export class OptionalComponent { +```ts {header:"src/app/optional/optional.ts"} +export class Optional { public optional? = inject(OptionalService, {optional: true}); } ``` @@ -206,15 +206,15 @@ Use `self` so that Angular will only look at the `ElementInjector` for the curre A good use case for `self` is to inject a service but only if it is available on the current host element. To avoid errors in this situation, combine `self` with `optional`. -For example, in the following `SelfNoDataComponent`, notice the injected `LeafService` as a property. +For example, in the following `SelfNoData`, notice the injected `LeafService` as a property. -```ts {header: 'self-no-data.component.ts', highlight: [7]} +```ts {header: 'self-no-data.ts', highlight: [7]} @Component({ selector: 'app-self-no-data', - templateUrl: './self-no-data.component.html', - styleUrls: ['./self-no-data.component.css'], + templateUrl: './self-no-data.html', + styleUrls: ['./self-no-data.css'], }) -export class SelfNoDataComponent { +export class SelfNoData { public leaf = inject(LeafService, {optional: true, self: true}); } ``` @@ -224,14 +224,14 @@ In this example, there is a parent provider and injecting the service will retur Another example shows the component class with a provider for `FlowerService`. In this case, the injector looks no further than the current `ElementInjector` because it finds the `FlowerService` and returns the tulip 🌷. -```ts {header:"src/app/self/self.component.ts"} +```ts {header:"src/app/self/self.ts"} @Component({ selector: 'app-self', - templateUrl: './self.component.html', - styleUrls: ['./self.component.css'], + templateUrl: './self.html', + styleUrls: ['./self.css'], providers: [{provide: FlowerService, useValue: {emoji: '🌷'}}], }) -export class SelfComponent { +export class Self { constructor(@Self() public flower: FlowerService) {} } ``` @@ -253,15 +253,15 @@ export class LeafService { Imagine that in the child component, you had a different value, maple leaf 🍁 but you wanted to use the parent's value instead. This is when you'd use `skipSelf`: -```ts {header:"skipself.component.ts" highlight:[[6],[10]]} +```ts {header:"skipself.ts" highlight:[[6],[10]]} @Component({ selector: 'app-skipself', - templateUrl: './skipself.component.html', - styleUrls: ['./skipself.component.css'], + templateUrl: './skipself.html', + styleUrls: ['./skipself.css'], // Angular would ignore this LeafService instance providers: [{provide: LeafService, useValue: {emoji: '🍁'}}], }) -export class SkipselfComponent { +export class Skipself { // Use skipSelf as inject option public leaf = inject(LeafService, {skipSelf: true}); } @@ -291,21 +291,21 @@ class Person { Even if there is a service instance further up the tree, Angular won't continue looking. Use `host` as follows: -```ts {header:"host.component.ts" highlight:[[6],[9]]} +```ts {header:"host.ts" highlight:[[6],[9]]} @Component({ selector: 'app-host', - templateUrl: './host.component.html', - styleUrls: ['./host.component.css'], + templateUrl: './host.html', + styleUrls: ['./host.css'], // provide the service providers: [{provide: FlowerService, useValue: {emoji: '🌷'}}], }) -export class HostComponent { +export class Host { // use host when injecting the service flower = inject(FlowerService, {host: true, optional: true}); } ``` -Since `HostComponent` has the `host` option , no matter what the parent of `HostComponent` might have as a `flower.emoji` value, the `HostComponent` will use tulip 🌷. +Since `Host` has the `host` option , no matter what the parent of `Host` might have as a `flower.emoji` value, the `Host` will use tulip 🌷. ### Modifiers with constructor injection @@ -313,8 +313,8 @@ Similarly as presented before, the behavior of constructor injection can be modi Import each of them from `@angular/core` and use each in the component class constructor when you inject your service. -```ts {header:"self-no-data.component.ts" highlight:[2]} -export class SelfNoDataComponent { +```ts {header:"self-no-data.ts" highlight:[2]} +export class SelfNoData { constructor(@Self() @Optional() public leaf?: LeafService) {} } ``` @@ -390,22 +390,22 @@ export class FlowerService { } ``` -Consider an application with only an `AppComponent` and a `ChildComponent`. +Consider an application with only an `App` and a `Child`. The most basic rendered view would look like nested HTML elements such as the following: ```html - - + + ``` However, behind the scenes, Angular uses a logical view representation as follows when resolving injection requests: ```html - + <#VIEW> - + <#VIEW> @@ -421,7 +421,7 @@ Knowledge of this structure can inform how you provide and inject your services, Now, consider that `` injects the `FlowerService`: ```typescript -export class AppComponent { +export class App { flower = inject(FlowerService); } ``` @@ -434,7 +434,7 @@ Add a binding to the `` template to visualize the result: The output in the view would be: -```shell +```text {hideCopy} Emoji from FlowerService: 🌺 ``` @@ -474,17 +474,17 @@ In the example case, the constraints are: ### Using the `providers` array -Now, in the `ChildComponent` class, add a provider for `FlowerService` to demonstrate more complex resolution rules in the upcoming sections: +Now, in the `Child` class, add a provider for `FlowerService` to demonstrate more complex resolution rules in the upcoming sections: ```ts @Component({ selector: 'app-child', - templateUrl: './child.component.html', - styleUrls: ['./child.component.css'], + templateUrl: './child.html', + styleUrls: ['./child.css'], // use the providers array to provide a service providers: [{provide: FlowerService, useValue: {emoji: '🌻'}}], }) -export class ChildComponent { +export class Child { // inject the service flower = inject(FlowerService); } @@ -493,15 +493,15 @@ export class ChildComponent { Now that the `FlowerService` is provided in the `@Component()` decorator, when the `` requests the service, the injector has only to look as far as the `ElementInjector` in the ``. It won't have to continue the search any further through the injector tree. -The next step is to add a binding to the `ChildComponent` template. +The next step is to add a binding to the `Child` template. ```html

Emoji from FlowerService: {{flower.emoji}}

``` -To render the new values, add `` to the bottom of the `AppComponent` template so the view also displays the sunflower: +To render the new values, add `` to the bottom of the `App` template so the view also displays the sunflower: -```shell +```text {hideCopy} Child Component Emoji from FlowerService: 🌻 ``` @@ -555,10 +555,10 @@ export class AnimalService { } ``` -Following the same pattern as with the `FlowerService`, inject the `AnimalService` in the `AppComponent` class: +Following the same pattern as with the `FlowerService`, inject the `AnimalService` in the `App` class: ```ts -export class AppComponent { +export class App { public flower = inject(FlowerService); public animal = inject(AnimalService); } @@ -572,37 +572,36 @@ Here, it has a value of dog 🐶. ```typescript @Component({ selector: 'app-child', - templateUrl: './child.component.html', - styleUrls: ['./child.component.css'], + templateUrl: './child.html', + styleUrls: ['./child.css'], // provide services providers: [{provide: FlowerService, useValue: {emoji: '🌻'}}], viewProviders: [{provide: AnimalService, useValue: {emoji: '🐶'}}], }) -export class ChildComponent { +export class Child { // inject services flower = inject(FlowerService); animal = inject(AnimalService); } ``` -Add bindings to the `ChildComponent` and the `AppComponent` templates. -In the `ChildComponent` template, add the following binding: +Add bindings to the `Child` and the `App` templates. +In the `Child` template, add the following binding: ```html

Emoji from AnimalService: {{animal.emoji}}

``` -Additionally, add the same to the `AppComponent` template: +Additionally, add the same to the `App` template: ```html

Emoji from AnimalService: {{animal.emoji}}

-s ``` Now you should see both values in the browser: -```shell -AppComponent +```text {hideCopy} +App Emoji from AnimalService: 🐳 Child Component @@ -637,35 +636,35 @@ It doesn't need to continue searching the `ElementInjector` tree, nor does it ne The `viewProviders` field is conceptually similar to `providers`, but there is one notable difference. Configured providers in `viewProviders` are not visible to projected content that ends up as a logical children of the component. -To see the difference between using `providers` and `viewProviders`, add another component to the example and call it `InspectorComponent`. -`InspectorComponent` will be a child of the `ChildComponent`. -In `inspector.component.ts`, inject the `FlowerService` and `AnimalService` during property initialization: +To see the difference between using `providers` and `viewProviders`, add another component to the example and call it `Inspector`. +`Inspector` will be a child of the `Child`. +In `inspector.ts`, inject the `FlowerService` and `AnimalService` during property initialization: ```typescript -export class InspectorComponent { +export class Inspector { flower = inject(FlowerService); animal = inject(AnimalService); } ``` You do not need a `providers` or `viewProviders` array. -Next, in `inspector.component.html`, add the same markup from previous components: +Next, in `inspector.html`, add the same markup from previous components: ```html

Emoji from FlowerService: {{flower.emoji}}

Emoji from AnimalService: {{animal.emoji}}

``` -Remember to add the `InspectorComponent` to the `ChildComponent` `imports` array. +Remember to add the `Inspector` to the `Child` `imports` array. ```ts @Component({ ... - imports: [InspectorComponent] + imports: [Inspector] }) ``` -Next, add the following to `child.component.html`: +Next, add the following to `child.html`: ```html ... @@ -679,9 +678,9 @@ Next, add the following to `child.component.html`: ``` -`` allows you to project content, and `` inside the `ChildComponent` template makes the `InspectorComponent` a child component of `ChildComponent`. +`` allows you to project content, and `` inside the `Child` template makes the `Inspector` a child component of `Child`. -Next, add the following to `app.component.html` to take advantage of content projection. +Next, add the following to `app.html` to take advantage of content projection. ```html @@ -691,7 +690,7 @@ Next, add the following to `app.component.html` to take advantage of content pro The browser now renders the following, omitting the previous examples for brevity: -```shell +```text {hideCopy} ... Content projection @@ -703,10 +702,10 @@ Emoji from AnimalService: 🐶 ``` These four bindings demonstrate the difference between `providers` and `viewProviders`. -Remember that the dog emoji 🐶 is declared inside the `<#VIEW>` of `ChildComponent` and isn't visible to the projected content. +Remember that the dog emoji 🐶 is declared inside the `<#VIEW>` of `Child` and isn't visible to the projected content. Instead, the projected content sees the whale 🐳. -However, in the next output section though, the `InspectorComponent` is an actual child component of `ChildComponent`, `InspectorComponent` is inside the `<#VIEW>`, so when it asks for the `AnimalService`, it sees the dog 🐶. +However, in the next output section though, the `Inspector` is an actual child component of `Child`, `Inspector` is inside the `<#VIEW>`, so when it asks for the `AnimalService`, it sees the dog 🐶. The `AnimalService` in the logical tree would look like this: @@ -751,7 +750,7 @@ Visibility decorators influence where the search for the injection token begins To do this, place visibility configuration at the point of injection, that is, when invoking `inject()`, rather than at a point of declaration. To alter where the injector starts looking for `FlowerService`, add `skipSelf` to the `` `inject()` invocation where `FlowerService` is injected. -This invocation is a property initializer the `` as shown in `child.component.ts`: +This invocation is a property initializer the `` as shown in `child.ts`: ```typescript flower = inject(FlowerService, {skipSelf: true}); @@ -762,7 +761,7 @@ Instead, the injector starts looking for the `FlowerService` at the `ElementInje Then, it goes back to the `` `ModuleInjector` and finds the red hibiscus 🌺 value, which is available because `` and `` share the same `ModuleInjector`. The UI renders the following: -```shell +```text {hideCopy} Emoji from FlowerService: 🌺 ``` @@ -847,7 +846,7 @@ With `skipSelf` in the ``, the injector begins its search for the `An ### `host` and `viewProviders` If you just use `host` for the injection of `AnimalService`, the result is dog 🐶 because the injector finds the `AnimalService` in the `` `<#VIEW>` itself. -The `ChildComponent` configures the `viewProviders` so that the dog emoji is provided as `AnimalService` value. +The `Child` configures the `viewProviders` so that the dog emoji is provided as `AnimalService` value. You can also see `host` the `inject()`: ```typescript @@ -858,7 +857,7 @@ You can also see `host` the `inject()`: { provide: AnimalService, useValue: { emoji: '🐶' } }, ] }) -export class ChildComponent { +export class Child { animal = inject(AnimalService, { host: true }) } ``` @@ -879,24 +878,24 @@ export class ChildComponent { ``` -Add a `viewProviders` array with a third animal, hedgehog 🦔, to the `app.component.ts` `@Component()` metadata: +Add a `viewProviders` array with a third animal, hedgehog 🦔, to the `app.ts` `@Component()` metadata: ```typescript @Component({ selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: [ './app.component.css' ], + templateUrl: './app.html', + styleUrls: [ './app.css' ], viewProviders: [ { provide: AnimalService, useValue: { emoji: '🦔' } }, ], }) ``` -Next, add `skipSelf` along with `host` to the `inject()` for the `AnimalService` injection in `child.component.ts`. +Next, add `skipSelf` along with `host` to the `inject()` for the `AnimalService` injection in `child.ts`. Here are `host` and `skipSelf` in the `animal` property initialization: ```typescript -export class ChildComponent { +export class Child { animal = inject(AnimalService, {host: true, skipSelf: true}); } ``` @@ -908,7 +907,7 @@ export class ChildComponent { When `host` and `skipSelf` were applied to the `FlowerService`, which is in the `providers` array, the result was `null` because `skipSelf` starts its search in the `` injector, but `host` stops searching at `<#VIEW>` —where there is no `FlowerService` In the logical tree, you can see that the `FlowerService` is visible in ``, not its `<#VIEW>`. -However, the `AnimalService`, which is provided in the `AppComponent` `viewProviders` array, is visible. +However, the `AnimalService`, which is provided in the `App` `viewProviders` array, is visible. The logical tree representation shows why this is: @@ -940,34 +939,34 @@ The ability to configure one or more providers at different levels opens up usef ### Scenario: service isolation Architectural reasons may lead you to restrict access to a service to the application domain where it belongs. -For example, consider we build a `VillainsListComponent` that displays a list of villains. +For example, consider we build a `VillainsList` that displays a list of villains. It gets those villains from a `VillainsService`. If you provide `VillainsService` in the root `AppModule`, it will make `VillainsService` visible everywhere in the application. If you later modify the `VillainsService`, you could break something in other components that started depending this service by accident. -Instead, you should provide the `VillainsService` in the `providers` metadata of the `VillainsListComponent` like this: +Instead, you should provide the `VillainsService` in the `providers` metadata of the `VillainsList` like this: ```typescript @Component({ selector: 'app-villains-list', - templateUrl: './villains-list.component.html', + templateUrl: './villains-list.html', providers: [VillainsService], }) -export class VillainsListComponent {} +export class VillainsList {} ``` -By providing `VillainsService` in the `VillainsListComponent` metadata and nowhere else, the service becomes available only in the `VillainsListComponent` and its subcomponent tree. +By providing `VillainsService` in the `VillainsList` metadata and nowhere else, the service becomes available only in the `VillainsList` and its subcomponent tree. -`VillainService` is a singleton with respect to `VillainsListComponent` because that is where it is declared. -As long as `VillainsListComponent` does not get destroyed it will be the same instance of `VillainService` but if there are multiple instances of `VillainsListComponent`, then each instance of `VillainsListComponent` will have its own instance of `VillainService`. +`VillainsService` is a singleton with respect to `VillainsList` because that is where it is declared. +As long as `VillainsList` does not get destroyed it will be the same instance of `VillainsService` but if there are multiple instances of `VillainsList`, then each instance of `VillainsList` will have its own instance of `VillainsService`. ### Scenario: multiple edit sessions Many applications allow users to work on several open tasks at the same time. For example, in a tax preparation application, the preparer could be working on several tax returns, switching from one to the other throughout the day. -To demonstrate that scenario, imagine a `HeroListComponent` that displays a list of super heroes. +To demonstrate that scenario, imagine a `HeroList` that displays a list of super heroes. To open a hero's tax return, the preparer clicks on a hero name, which opens a component for editing that return. Each selected hero tax return opens in its own component and multiple returns can be open at the same time. @@ -978,7 +977,7 @@ Each tax return component has the following characteristics: - Can change a tax return without affecting a return in another component - Has the ability to save the changes to its tax return or cancel them -Suppose that the `HeroTaxReturnComponent` had logic to manage and restore changes. +Suppose that the `HeroTaxReturn` had logic to manage and restore changes. That would be a straightforward task for a hero tax return. In the real world, with a rich tax return data model, the change management would be tricky. You could delegate that management to a helper service, as this example does. @@ -1018,7 +1017,7 @@ export class HeroTaxReturnService { } ``` -Here is the `HeroTaxReturnComponent` that makes use of `HeroTaxReturnService`. +Here is the `HeroTaxReturn` that makes use of `HeroTaxReturnService`. ```typescript import {Component, input, output} from '@angular/core'; @@ -1027,11 +1026,11 @@ import {HeroTaxReturnService} from './hero-tax-return.service'; @Component({ selector: 'app-hero-tax-return', - templateUrl: './hero-tax-return.component.html', - styleUrls: ['./hero-tax-return.component.css'], + templateUrl: './hero-tax-return.html', + styleUrls: ['./hero-tax-return.css'], providers: [HeroTaxReturnService], }) -export class HeroTaxReturnComponent { +export class HeroTaxReturn { message = ''; close = output(); @@ -1079,13 +1078,13 @@ The component also asks the service to save and restore this tax return. This won't work if the service is an application-wide singleton. Every component would share the same service instance, and each component would overwrite the tax return that belonged to another hero. -To prevent this, configure the component-level injector of `HeroTaxReturnComponent` to provide the service, using the `providers` property in the component metadata. +To prevent this, configure the component-level injector of `HeroTaxReturn` to provide the service, using the `providers` property in the component metadata. ```typescript providers: [HeroTaxReturnService]; ``` -The `HeroTaxReturnComponent` has its own provider of the `HeroTaxReturnService`. +The `HeroTaxReturn` has its own provider of the `HeroTaxReturnService`. Recall that every component _instance_ has its own injector. Providing the service at the component level ensures that _every_ instance of the component gets a private instance of the service. This makes sure that no tax return gets overwritten. @@ -1170,5 +1169,5 @@ style RootInjector fill:#BDD7EE,color:#000 ## More on dependency injection - + diff --git a/adev-ja/src/content/guide/di/hierarchical-dependency-injection.md b/adev-ja/src/content/guide/di/hierarchical-dependency-injection.md index 78499ddaac..afcaff2077 100644 --- a/adev-ja/src/content/guide/di/hierarchical-dependency-injection.md +++ b/adev-ja/src/content/guide/di/hierarchical-dependency-injection.md @@ -68,7 +68,7 @@ export class ItemService { Angularが `main.ts` の次の内容でアプリケーションをブートストラップする方法を検討してください。 ```ts -bootstrapApplication(AppComponent, appConfig); +bootstrapApplication(App, appConfig); ``` `bootstrapApplication()` メソッドは、 `ApplicationConfig` インスタンスによって構成されたプラットフォームインジェクターの子インジェクターを作成します。 @@ -106,7 +106,7 @@ stateDiagram-v2 `bootstrapApplication()` の `ApplicationConfig` でアプリケーション全体のプロバイダーを構成すると、 `@Injectable()` メタデータの `root` で構成されたプロバイダーがオーバーライドされます。 これは、複数のアプリケーションで共有されるサービスのデフォルト以外のプロバイダーを構成する場合に行うことができます。 -コンポーネントルーターの構成にデフォルト以外の [ロケーション戦略](guide/routing#location-strategy) が含まれている場合、 `ApplicationConfig` の `providers` リストにそのプロバイダーをリストすることによって、その例を示します。 +コンポーネントルーターの構成にデフォルト以外の [ロケーション戦略](guide/routing/common-router-tasks#locationstrategy-and-browser-url-styles) が含まれている場合、 `ApplicationConfig` の `providers` リストにそのプロバイダーをリストすることによって、その例を示します。 ```ts providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]; @@ -193,8 +193,8 @@ Angularの解決動作は、`optional`、`self`、`skipSelf`、および `host` そのため、実行時に解決できない場合、Angularはサービスをエラーをスローするのではなく、 `null` として解決します。 次の例では、サービス `OptionalService` はサービス `ApplicationConfig`や`@NgModule()`、コンポーネントクラスで提供されていないため、アプリケーションのどこにも使用できません。 -```ts {header:"src/app/optional/optional.component.ts"} -export class OptionalComponent { +```ts {header:"src/app/optional/optional.ts"} +export class Optional { public optional? = inject(OptionalService, {optional: true}); } ``` @@ -206,15 +206,15 @@ export class OptionalComponent { `self` の適切なユースケースは、サービスを注入するが、現在のホスト要素で使用可能な場合のみにすることです。 このような状況でエラーを回避するには、`self` を `optional` と組み合わせます。 -たとえば、次の `SelfNoDataComponent` では、プロパティとして注入された `LeafService` に注目してください。 +たとえば、次の `SelfNoData` では、プロパティとして注入された `LeafService` に注目してください。 -```ts {header: 'self-no-data.component.ts', highlight: [7]} +```ts {header: 'self-no-data.ts', highlight: [7]} @Component({ selector: 'app-self-no-data', - templateUrl: './self-no-data.component.html', - styleUrls: ['./self-no-data.component.css'], + templateUrl: './self-no-data.html', + styleUrls: ['./self-no-data.css'], }) -export class SelfNoDataComponent { +export class SelfNoData { public leaf = inject(LeafService, {optional: true, self: true}); } ``` @@ -224,14 +224,14 @@ export class SelfNoDataComponent { 別の例では、 `FlowerService` のプロバイダーを備えたコンポーネントクラスを示しています。 この場合、インジェクターは現在の `ElementInjector` より先を見ずに、 `FlowerService` を見つけて、チューリップ 🌷 を返します。 -```ts {header:"src/app/self/self.component.ts"} +```ts {header:"src/app/self/self.ts"} @Component({ selector: 'app-self', - templateUrl: './self.component.html', - styleUrls: ['./self.component.css'], + templateUrl: './self.html', + styleUrls: ['./self.css'], providers: [{provide: FlowerService, useValue: {emoji: '🌷'}}], }) -export class SelfComponent { +export class Self { constructor(@Self() public flower: FlowerService) {} } ``` @@ -253,15 +253,15 @@ export class LeafService { 子コンポーネントに、異なる値、カエデの葉 🍁 が含まれていると想像してください。ただし、親の値を使用したいとします。 これが `skipSelf` を使用する場合です。 -```ts {header:"skipself.component.ts" highlight:[[6],[10]]} +```ts {header:"skipself.ts" highlight:[[6],[10]]} @Component({ selector: 'app-skipself', - templateUrl: './skipself.component.html', - styleUrls: ['./skipself.component.css'], + templateUrl: './skipself.html', + styleUrls: ['./skipself.css'], // Angular はこの LeafService インスタンスを無視します providers: [{provide: LeafService, useValue: {emoji: '🍁'}}], }) -export class SkipselfComponent { +export class Skipself { // Use skipSelf as inject option public leaf = inject(LeafService, {skipSelf: true}); } @@ -291,21 +291,21 @@ class Person { ツリーのさらに上にサービスインスタンスがある場合でも、Angularは検索を続けません。 `host` を次のように使用します。 -```ts {header:"host.component.ts" highlight:[[6],[9]]} +```ts {header:"host.ts" highlight:[[6],[9]]} @Component({ selector: 'app-host', - templateUrl: './host.component.html', - styleUrls: ['./host.component.css'], + templateUrl: './host.html', + styleUrls: ['./host.css'], // provide the service providers: [{provide: FlowerService, useValue: {emoji: '🌷'}}], }) -export class HostComponent { +export class Host { // use host when injecting the service flower = inject(FlowerService, {host: true, optional: true}); } ``` -`HostComponent`に`host`オプションがあるため、`HostComponent`の親が`flower.emoji`にどのような値を持っていても、`HostComponent`はチューリップ🌷を使用します。 +`Host`に`host`オプションがあるため、`Host`の親が`flower.emoji`にどのような値を持っていても、`Host`はチューリップ🌷を使用します。 ### コンストラクター注入での修飾子 {#modifiers-with-constructor-injection} @@ -313,8 +313,8 @@ export class HostComponent { `@angular/core` からそれぞれをインポートし、サービスを注入するときにコンポーネントクラスのコンストラクターでそれぞれを使用します。 -```ts {header:"self-no-data.component.ts" highlight:[2]} -export class SelfNoDataComponent { +```ts {header:"self-no-data.ts" highlight:[2]} +export class SelfNoData { constructor(@Self() @Optional() public leaf?: LeafService) {} } ``` @@ -390,22 +390,22 @@ export class FlowerService { } ``` -`AppComponent` と `ChildComponent` のみが含まれるアプリケーションを検討してください。 +`App` と `Child` のみが含まれるアプリケーションを検討してください。 最も基本的なレンダリングされたビューは、次のようなネストされたHTML要素のように見えます。 ```html - - + + ``` ただし、裏側では、Angularはインジェクションリクエストを解決するときに、次のような論理ビュー表現を使用します。 ```html - + <#VIEW> - + <#VIEW> @@ -421,7 +421,7 @@ export class FlowerService { 次に、 `` が `FlowerService` を注入しているとします。 ```typescript -export class AppComponent { +export class App { flower = inject(FlowerService); } ``` @@ -434,7 +434,7 @@ export class AppComponent { ビューに出力されるのは次のとおりです。 -```shell +```text {hideCopy} Emoji from FlowerService: 🌺 ``` @@ -474,17 +474,17 @@ Emoji from FlowerService: 🌺 ### `providers` 配列を使用する {#using-the-providers-array} -次に、 `ChildComponent` クラスで、今後のセクションでより複雑な解決ルールを説明するために、 `FlowerService` のプロバイダーを追加します。 +次に、 `Child` クラスで、今後のセクションでより複雑な解決ルールを説明するために、 `FlowerService` のプロバイダーを追加します。 ```ts @Component({ selector: 'app-child', - templateUrl: './child.component.html', - styleUrls: ['./child.component.css'], + templateUrl: './child.html', + styleUrls: ['./child.css'], // use the providers array to provide a service providers: [{provide: FlowerService, useValue: {emoji: '🌻'}}], }) -export class ChildComponent { +export class Child { // inject the service flower = inject(FlowerService); } @@ -493,15 +493,15 @@ export class ChildComponent { `FlowerService` が `@Component()` デコレーターで提供されるようになったため、 `` がサービスを要求すると、インジェクターは `` の `ElementInjector` ほど遠くまでしか見なくてもよくなります。 インジェクターは、インジェクターツリーをさらに検索する必要はありません。 -次のステップは、 `ChildComponent` テンプレートにバインディングを追加することです。 +次のステップは、 `Child` テンプレートにバインディングを追加することです。 ```html

Emoji from FlowerService: {{flower.emoji}}

``` -新しい値をレンダリングするために、ビューにひまわりも表示されるように、 `AppComponent` テンプレートの下部に `` を追加します。 +新しい値をレンダリングするために、ビューにひまわりも表示されるように、 `App` テンプレートの下部に `` を追加します。 -```shell +```text {hideCopy} Child Component Emoji from FlowerService: 🌻 ``` @@ -555,10 +555,10 @@ export class AnimalService { } ``` -`FlowerService` と同じパターンに従って、 `AppComponent` クラスに `AnimalService` を注入します。 +`FlowerService` と同じパターンに従って、 `App` クラスに `AnimalService` を注入します。 ```ts -export class AppComponent { +export class App { public flower = inject(FlowerService); public animal = inject(AnimalService); } @@ -572,37 +572,36 @@ HELPFUL: `FlowerService` に関連するコードはすべてそのままにし ```typescript @Component({ selector: 'app-child', - templateUrl: './child.component.html', - styleUrls: ['./child.component.css'], + templateUrl: './child.html', + styleUrls: ['./child.css'], // provide services providers: [{provide: FlowerService, useValue: {emoji: '🌻'}}], viewProviders: [{provide: AnimalService, useValue: {emoji: '🐶'}}], }) -export class ChildComponent { +export class Child { // inject services flower = inject(FlowerService); animal = inject(AnimalService); } ``` -`ChildComponent` と `AppComponent` のテンプレートにバインディングを追加します。 -`ChildComponent` テンプレートに、次のバインディングを追加します。 +`Child` と `App` のテンプレートにバインディングを追加します。 +`Child` テンプレートに、次のバインディングを追加します。 ```html

Emoji from AnimalService: {{animal.emoji}}

``` -さらに、 `AppComponent` テンプレートにも同じものを追加します。 +さらに、 `App` テンプレートにも同じものを追加します。 ```html

Emoji from AnimalService: {{animal.emoji}}

-s ``` これで、ブラウザに両方の値が表示されます。 -```shell -AppComponent +```text {hideCopy} +App Emoji from AnimalService: 🐳 Child Component @@ -637,35 +636,35 @@ Emoji from AnimalService: 🐶 `viewProviders` フィールドは、概念的には `providers` と似ていますが、1つの顕著な違いがあります。 `viewProviders` で構成されたプロバイダーは、コンポーネントの論理的な子になる投影されたコンテンツには可視ではありません。 -`providers` と `viewProviders` の違いを確認するために、別のコンポーネントを例に追加して、 `InspectorComponent` と呼びます。 -`InspectorComponent` は、 `ChildComponent` の子になります。 -`inspector.component.ts` では、プロパティの初期化中に `FlowerService` と `AnimalService` を注入します。 +`providers` と `viewProviders` の違いを確認するために、別のコンポーネントを例に追加して、 `Inspector` と呼びます。 +`Inspector` は、 `Child` の子になります。 +`inspector.ts` では、プロパティの初期化中に `FlowerService` と `AnimalService` を注入します。 ```typescript -export class InspectorComponent { +export class Inspector { flower = inject(FlowerService); animal = inject(AnimalService); } ``` `providers` または `viewProviders` 配列は必要ありません。 -次に、 `inspector.component.html` に、以前のコンポーネントと同じマークアップを追加します。 +次に、 `inspector.html` に、以前のコンポーネントと同じマークアップを追加します。 ```html

Emoji from FlowerService: {{flower.emoji}}

Emoji from AnimalService: {{animal.emoji}}

``` -`InspectorComponent` を `ChildComponent` の `imports` 配列に追加することを忘れないでください。 +`Inspector` を `Child` の `imports` 配列に追加することを忘れないでください。 ```ts @Component({ ... - imports: [InspectorComponent] + imports: [Inspector] }) ``` -次に、 `child.component.html` に次を追加します。 +次に、 `child.html` に次を追加します。 ```html ... @@ -679,9 +678,9 @@ export class InspectorComponent { ``` -`` を使用するとコンテンツを投影でき、 `ChildComponent` テンプレート内の `` は、 `InspectorComponent` を `ChildComponent` の子コンポーネントにします。 +`` を使用するとコンテンツを投影でき、 `Child` テンプレート内の `` は、 `Inspector` を `Child` の子コンポーネントにします。 -次に、コンテンツ投影を活用するために、 `app.component.html` に次を追加します。 +次に、コンテンツ投影を活用するために、 `app.html` に次を追加します。 ```html @@ -691,7 +690,7 @@ export class InspectorComponent { これで、ブラウザには、以前の例は省略して、次のものがレンダリングされます。 -```shell +```text {hideCopy} ... Content projection @@ -703,10 +702,10 @@ Emoji from AnimalService: 🐶 ``` これらの4つのバインディングは、 `providers` と `viewProviders` の違いを示しています。 -犬の絵文字 🐶 は、 `ChildComponent` の `<#VIEW>` 内に宣言され、投影されたコンテンツには可視ではないことを覚えておいてください。 +犬の絵文字 🐶 は、 `Child` の `<#VIEW>` 内に宣言され、投影されたコンテンツには可視ではないことを覚えておいてください。 代わりに、投影されたコンテンツには、クジラ 🐳 が表示されます。 -ただし、次の出力セクションでは `InspectorComponent` は `ChildComponent` の実際の子コンポーネントです。そして `InspectorComponent` は `<#VIEW>` の内側にあるため、 `AnimalService` を要求すると、犬 🐶 が表示されます。 +ただし、次の出力セクションでは `Inspector` は `Child` の実際の子コンポーネントです。そして `Inspector` は `<#VIEW>` の内側にあるため、 `AnimalService` を要求すると、犬 🐶 が表示されます。 論理ツリー内の `AnimalService` は、次のようになります。 @@ -751,7 +750,7 @@ Emoji from AnimalService: 🐶 これを行うには、宣言のポイントではなく、注入のポイント、つまり `inject()` を呼び出すときに可視性構成を配置します。 インジェクターが `FlowerService` の検索を開始する場所を変更するには、`FlowerService` が注入される `` の `inject()` 呼び出しに `skipSelf` を追加します。 -この呼び出しは、`child.component.ts` に示すように、`` のプロパティ初期化子です。 +この呼び出しは、`child.ts` に示すように、`` のプロパティ初期化子です。 ```typescript flower = inject(FlowerService, {skipSelf: true}); @@ -762,7 +761,7 @@ flower = inject(FlowerService, {skipSelf: true}); 次に、 `` の `ModuleInjector` に戻り、 `` と `` が同じ `ModuleInjector` を共有しているため、赤いハイビスカス 🌺 値が見つかります。 UIには次のように表示されます。 -```shell +```text {hideCopy} Emoji from FlowerService: 🌺 ``` @@ -847,7 +846,7 @@ Emoji from FlowerService: 🌺 ### `host` と `viewProviders` {#host-and-viewproviders} `AnimalService`のインジェクションに`host`だけを使用する場合、インジェクターは``の`<#VIEW>`自体で`AnimalService`を見つけるため、結果は犬🐶になります。 -`ChildComponent`は`viewProviders`を設定し、犬の絵文字が`AnimalService`の値として提供されます。 +`Child`は`viewProviders`を設定し、犬の絵文字が`AnimalService`の値として提供されます。 `inject()`では`host`も使用できます： ```typescript @@ -858,7 +857,7 @@ Emoji from FlowerService: 🌺 { provide: AnimalService, useValue: { emoji: '🐶' } }, ] }) -export class ChildComponent { +export class Child { animal = inject(AnimalService, { host: true }) } ``` @@ -884,19 +883,19 @@ export class ChildComponent { ```typescript @Component({ selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: [ './app.component.css' ], + templateUrl: './app.html', + styleUrls: [ './app.css' ], viewProviders: [ { provide: AnimalService, useValue: { emoji: '🦔' } }, ], }) ``` -次に、`child.component.ts` の `AnimalService` 注入の `inject()` に `host` とともに `skipSelf` を追加します。 +次に、`child.ts` の `AnimalService` 注入の `inject()` に `host` とともに `skipSelf` を追加します。 `animal` プロパティの初期化における `host` と `skipSelf` は次のとおりです。 ```typescript -export class ChildComponent { +export class Child { animal = inject(AnimalService, {host: true, skipSelf: true}); } ``` @@ -908,7 +907,7 @@ export class ChildComponent { `providers` 配列にある `FlowerService` に `host` と `skipSelf` を適用した場合、結果は `null` でした。これは、`skipSelf` が `` インジェクターで検索を開始しますが、`host` は `<#VIEW>` で検索を停止するためです。そこには `FlowerService` がありません。 論理ツリーでは、 `FlowerService` は `` で可視であり、 `<#VIEW>` では可視ではないことがわかります。 -ただし、 `AppComponent` の `viewProviders` 配列で提供されている `AnimalService` は可視です。 +ただし、 `App` の `viewProviders` 配列で提供されている `AnimalService` は可視です。 論理ツリーの表現は、これが理由を示しています。 @@ -940,34 +939,34 @@ export class ChildComponent { ### シナリオ：サービスの分離 {#scenario-service-isolation} アーキテクチャ上の理由から、サービスへのアクセスを属するアプリケーションドメインに制限する必要がある場合があります。 -たとえば、悪役のリストを表示する `VillainsListComponent` を構築するとします。 +たとえば、悪役のリストを表示する `VillainsList` を構築するとします。 この悪役は、 `VillainsService` から取得されます。 `VillainsService` をルートの `AppModule` で提供すると、 `VillainsService` がアプリケーションのすべての場所で可視になります。 後で `VillainsService` を変更した場合、誤ってこのサービスに依存し始めた他のコンポーネントで何かが壊れる可能性があります。 -代わりに、次のように `VillainsListComponent` の `providers` メタデータで `VillainsService` を提供する必要があります。 +代わりに、次のように `VillainsList` の `providers` メタデータで `VillainsService` を提供する必要があります。 ```typescript @Component({ selector: 'app-villains-list', - templateUrl: './villains-list.component.html', + templateUrl: './villains-list.html', providers: [VillainsService], }) -export class VillainsListComponent {} +export class VillainsList {} ``` -`VillainsService` を `VillainsListComponent` メタデータで提供し、他の場所では提供しないと、サービスは `VillainsListComponent` とそのサブコンポーネントツリーのみに使用可能になります。 +`VillainsService` を `VillainsList` メタデータで提供し、他の場所では提供しないと、サービスは `VillainsList` とそのサブコンポーネントツリーのみに使用可能になります。 -`VillainService` は、 `VillainsListComponent` に対してシングルトンです。なぜなら、それが宣言されている場所だからです。 -`VillainsListComponent` が破棄されない限り `VillainService` のインスタンスは同じです。ただし `VillainsListComponent` のインスタンスが複数ある場合、 `VillainsListComponent` の各インスタンスには、独自の `VillainService` インスタンスが1つずつあります。 +`VillainsService` は、 `VillainsList` に対してシングルトンです。なぜなら、それが宣言されている場所だからです。 +`VillainsList` が破棄されない限り `VillainsService` のインスタンスは同じです。ただし `VillainsList` のインスタンスが複数ある場合、 `VillainsList` の各インスタンスには、独自の `VillainsService` インスタンスが1つずつあります。 ### シナリオ：複数の編集セッション {#scenario-multiple-edit-sessions} 多くのアプリケーションでは、ユーザーは同時に複数のオープンタスクで作業できます。 たとえば、税務申告の作成アプリケーションでは、作成者は複数の税務申告で作業し、1日を通してそれらを切り替えることができます。 -そのシナリオを示すために、スーパーヒーローのリストを表示する `HeroListComponent` を考えてみてください。 +そのシナリオを示すために、スーパーヒーローのリストを表示する `HeroList` を考えてみてください。 ヒーローの税務申告を開くために、作成者はヒーローの名前をクリックすると、その申告を編集するためのコンポーネントが開きます。 選択したヒーローの税務申告は、それぞれ独自のコンポーネントで開き、複数の申告を同時に開くことができます。 @@ -978,7 +977,7 @@ export class VillainsListComponent {} - 別のコンポーネントの申告に影響を与えずに税務申告を変更できます - 税務申告の変更を保存するか、キャンセルする機能があります -`HeroTaxReturnComponent` に、変更を管理および復元するためのロジックがあるとします。 +`HeroTaxReturn` に、変更を管理および復元するためのロジックがあるとします。 これは、ヒーローの税務申告にとっては簡単なタスクです。 現実世界では、豊富な税務申告データモデルでは、変更管理が複雑になります。 この例のように、この管理をヘルパーサービスに委任できます。 @@ -1018,7 +1017,7 @@ export class HeroTaxReturnService { } ``` -以下は、 `HeroTaxReturnService` を使用する `HeroTaxReturnComponent` です。 +以下は、 `HeroTaxReturnService` を使用する `HeroTaxReturn` です。 ```typescript import {Component, input, output} from '@angular/core'; @@ -1027,11 +1026,11 @@ import {HeroTaxReturnService} from './hero-tax-return.service'; @Component({ selector: 'app-hero-tax-return', - templateUrl: './hero-tax-return.component.html', - styleUrls: ['./hero-tax-return.component.css'], + templateUrl: './hero-tax-return.html', + styleUrls: ['./hero-tax-return.css'], providers: [HeroTaxReturnService], }) -export class HeroTaxReturnComponent { +export class HeroTaxReturn { message = ''; close = output(); @@ -1079,13 +1078,13 @@ _編集対象の税務申告_ は、 `input` プロパティを介して到着 これは、サービスがアプリケーション全体のシングルトンである場合に機能しません。 すべてのコンポーネントは同じサービスインスタンスを共有し、各コンポーネントは別のヒーローに属する税務申告を上書きします。 -これを防ぐために、コンポーネントレベルのインジェクター `HeroTaxReturnComponent` を構成して、コンポーネントメタデータの `providers` プロパティを使用してサービスを提供します。 +これを防ぐために、コンポーネントレベルのインジェクター `HeroTaxReturn` を構成して、コンポーネントメタデータの `providers` プロパティを使用してサービスを提供します。 ```typescript providers: [HeroTaxReturnService]; ``` -`HeroTaxReturnComponent` には、 `HeroTaxReturnService` の独自の提供者がいます。 +`HeroTaxReturn` には、 `HeroTaxReturnService` の独自の提供者がいます。 覚えておいてください。すべてのコンポーネントの _インスタンス_ には、独自のインジェクターがあります。 コンポーネントレベルでサービスを提供すると、コンポーネントの _すべての_ インスタンスは、サービスのプライベートインスタンスを1つずつ取得することが保証されます。これにより、税務申告が上書きされないようにします。 @@ -1170,5 +1169,5 @@ style RootInjector fill:#BDD7EE,color:#000 ## 依存性の注入の詳細 {#more-on-dependency-injection} - + diff --git a/adev-ja/src/content/guide/di/lightweight-injection-tokens.en.md b/adev-ja/src/content/guide/di/lightweight-injection-tokens.en.md index a4f13143db..588c36762f 100644 --- a/adev-ja/src/content/guide/di/lightweight-injection-tokens.en.md +++ b/adev-ja/src/content/guide/di/lightweight-injection-tokens.en.md @@ -22,11 +22,10 @@ To prevent the retention of unused components, your library should use the light To better explain the condition under which token retention occurs, consider a library that provides a library-card component. This component contains a body and can contain an optional header: -```angular-html - -; -…; -; +```html + + … + ``` In a likely implementation, the `` component uses `contentChild` or `contentChildren` to get `` and ``, as in the following: @@ -91,7 +90,7 @@ Although tokens used only as type specifiers are removed when converted to JavaS When using `inject(CustomOther)`, `CustomOther` is passed as a value argument. The token is now in a value position, which causes the tree-shaker to keep the reference. -HELPFUL: Libraries should use [tree-shakable providers](guide/di/dependency-injection#providing-dependency) for all services, providing dependencies at the root level rather than in components or modules. +HELPFUL: Libraries should use [tree-shakable providers](guide/di/defining-dependency-providers) for all services, providing dependencies at the root level rather than in components or modules. ## Using lightweight injection tokens @@ -144,7 +143,7 @@ This lets the parent communicate with the child, if it is present, in a type-saf For example, the `LibCard` now queries `LibHeaderToken` rather than `LibHeader`. The following example shows how the pattern lets `LibCard` communicate with the `LibHeader` without actually referring to `LibHeader`: -```ts {highlight: [[2],[9],[11],[19]]} +```ts {highlight: [[2],[7],[11],[19]]} abstract class LibHeaderToken { abstract doSomething(): void; } diff --git a/adev-ja/src/content/guide/di/lightweight-injection-tokens.md b/adev-ja/src/content/guide/di/lightweight-injection-tokens.md index 71ca7f2795..d00a32ea40 100644 --- a/adev-ja/src/content/guide/di/lightweight-injection-tokens.md +++ b/adev-ja/src/content/guide/di/lightweight-injection-tokens.md @@ -22,11 +22,10 @@ Angularがインジェクショントークンを格納する方法により、 トークン保持が発生する状況をより明確に説明するために、ライブラリカードコンポーネントを提供するライブラリを検討してください。 このコンポーネントには本体が含まれており、オプションでヘッダーを含めることができます。 -```angular-html - -; -…; -; +```html + + … + ``` 一般的な実装では、 `` コンポーネントは、次の例のように `contentChild` または `contentChildren` を使用して `` と `` を取得します。 @@ -91,7 +90,7 @@ class MyComponent { これらは実質的に `constructor(@Optional() other: OtherComponent)` を `constructor(@Optional() @Inject(OtherComponent) other)` に変更されます。 トークンはこれで値位置にあるため、ツリーシェーカーは参照を保持します。 -HELPFUL: ライブラリは、[ツリーシェイク可能なプロバイダー](guide/di/dependency-injection#providing-dependency) をすべてのサービスに使用し、コンポーネントやモジュールではなく、ルートレベルで依存関係を提供する必要があります。 +HELPFUL: ライブラリは、[ツリーシェイク可能なプロバイダー](guide/di/defining-dependency-providers) をすべてのサービスに使用し、コンポーネントやモジュールではなく、ルートレベルで依存関係を提供する必要があります。 ## 軽量インジェクショントークンの使用 @@ -144,7 +143,7 @@ class LibCardComponent { たとえば、 `LibCardComponent` はこれで `LibHeaderComponent` ではなく `LibHeaderToken` をクエリします。 次の例は、パターンにより `LibCardComponent` が `LibHeaderComponent` を実際に参照せずに `LibHeaderComponent` と通信する方法を示しています。 -```ts {highlight: [[2],[9],[11],[19]]} +```ts {highlight: [[2],[7],[11],[19]]} abstract class LibHeaderToken { abstract doSomething(): void; } diff --git a/adev-ja/src/content/guide/di/overview.en.md b/adev-ja/src/content/guide/di/overview.en.md index cb0829d211..879dd8e8a0 100644 --- a/adev-ja/src/content/guide/di/overview.en.md +++ b/adev-ja/src/content/guide/di/overview.en.md @@ -69,17 +69,15 @@ You can inject dependencies using Angular's `inject()` function. Here is an example of a navigation bar that injects `AnalyticsLogger` and Angular `Router` service to allow users to navigate to a different page while tracking the event. ```angular-ts -import { Component, inject } from '@angular/core'; -import { Router } from '@angular/router'; -import { AnalyticsLogger } from './analytics-logger'; +import {Component, inject} from '@angular/core'; +import {Router} from '@angular/router'; +import {AnalyticsLogger} from './analytics-logger'; @Component({ selector: 'app-navbar', - template: ` - Detail Page - `, + template: `Detail Page`, }) -export class NavbarComponent { +export class Navbar { private router = inject(Router); private analytics = inject(AnalyticsLogger); @@ -96,7 +94,9 @@ export class NavbarComponent { You can inject dependencies during construction of a component, directive, or service. The call to [`inject`](/api/core/inject) can appear in either the `constructor` or in a field initializer. Here are some common examples: ```ts -@Component({...}) +@Component({ + /*...*/ +}) export class MyComponent { // ✅ In class field initializer private service = inject(MyService); diff --git a/adev-ja/src/content/guide/di/overview.md b/adev-ja/src/content/guide/di/overview.md index e2964a7e44..4503768c05 100644 --- a/adev-ja/src/content/guide/di/overview.md +++ b/adev-ja/src/content/guide/di/overview.md @@ -69,17 +69,15 @@ Angularの `inject()` 関数を使用して依存関係を注入できます。 次は、`AnalyticsLogger` とAngularの `Router` サービスを注入して、イベントを追跡しながらユーザーが別のページに移動できるようにするナビゲーションバーの例です。 ```angular-ts -import { Component, inject } from '@angular/core'; -import { Router } from '@angular/router'; -import { AnalyticsLogger } from './analytics-logger'; +import {Component, inject} from '@angular/core'; +import {Router} from '@angular/router'; +import {AnalyticsLogger} from './analytics-logger'; @Component({ selector: 'app-navbar', - template: ` - Detail Page - `, + template: `Detail Page`, }) -export class NavbarComponent { +export class Navbar { private router = inject(Router); private analytics = inject(AnalyticsLogger); @@ -96,7 +94,9 @@ export class NavbarComponent { コンポーネント、ディレクティブ、またはサービスの構築中に依存関係を注入できます。[`inject`](/api/core/inject) の呼び出しは、`constructor` またはフィールドイニシャライザーのいずれかに配置できます。一般的な例をいくつか示します。 ```ts -@Component({...}) +@Component({ + /*...*/ +}) export class MyComponent { // ✅ クラスフィールドイニシャライザー内 private service = inject(MyService); diff --git a/adev-ja/src/content/guide/directives/attribute-directives.en.md b/adev-ja/src/content/guide/directives/attribute-directives.en.md index e072054840..f5af756de7 100644 --- a/adev-ja/src/content/guide/directives/attribute-directives.en.md +++ b/adev-ja/src/content/guide/directives/attribute-directives.en.md @@ -121,7 +121,7 @@ This section guides you through configuring your application so the developer ca 3. To bind to the `AppComponent.color` and fall back to "violet" as the default color, add the following HTML. - In this case, the `defaultColor` binding doesn't use square brackets, `[]`, because it is static. + In this case, the `defaultColor` binding doesn't use square brackets, `[]`, because the value is a static string, not a dynamic expression. diff --git a/adev-ja/src/content/guide/directives/attribute-directives.md b/adev-ja/src/content/guide/directives/attribute-directives.md index f4ec819d25..dc35f294b1 100644 --- a/adev-ja/src/content/guide/directives/attribute-directives.md +++ b/adev-ja/src/content/guide/directives/attribute-directives.md @@ -122,7 +122,7 @@ HELPFUL: ハンドラーは、ホストDOM要素`el`に色を設定するヘル 3. `AppComponent.color`にバインドし、デフォルトカラーとして「violet」を使用するには、次のHTMLを追加します。 - この場合、`defaultColor`バインディングは、静的であるため、角括弧`[]`を使用しません。 + この場合、`defaultColor`バインディングは、動的な式ではなく静的な文字列であるため、角括弧`[]`を使用しません。 diff --git a/adev-ja/src/content/guide/directives/directive-composition-api.en.md b/adev-ja/src/content/guide/directives/directive-composition-api.en.md index 4dce2bfe6f..f6bda5e079 100644 --- a/adev-ja/src/content/guide/directives/directive-composition-api.en.md +++ b/adev-ja/src/content/guide/directives/directive-composition-api.en.md @@ -60,8 +60,7 @@ By explicitly specifying the inputs and outputs, consumers of the component with bind them in a template: ```angular-html - - + ``` Furthermore, you can alias inputs and outputs from `hostDirective` to customize the API of your @@ -83,8 +82,7 @@ export class AdminMenu {} ``` ```angular-html - - + ``` ## Adding directives to another directive diff --git a/adev-ja/src/content/guide/directives/directive-composition-api.md b/adev-ja/src/content/guide/directives/directive-composition-api.md index faf9391d6b..4010477391 100644 --- a/adev-ja/src/content/guide/directives/directive-composition-api.md +++ b/adev-ja/src/content/guide/directives/directive-composition-api.md @@ -60,8 +60,7 @@ export class AdminMenu {} テンプレートでそれらにバインドできます。 ```angular-html - - + ``` さらに、`hostDirective` から入力と出力をエイリアスして、 @@ -83,8 +82,7 @@ export class AdminMenu {} ``` ```angular-html - - + ``` ## 別のディレクティブにディレクティブを追加する diff --git a/adev-ja/src/content/guide/directives/overview.en.md b/adev-ja/src/content/guide/directives/overview.en.md index ed218a3f1c..287f986e28 100644 --- a/adev-ja/src/content/guide/directives/overview.en.md +++ b/adev-ja/src/content/guide/directives/overview.en.md @@ -32,7 +32,7 @@ HELPFUL: Built-in directives use only public APIs. They do not have special acce Add or remove multiple CSS classes simultaneously with `ngClass`. -HELPFUL: To add or remove a _single_ class, use [class binding](guide/templates/class-binding) rather than `NgClass`. +HELPFUL: To add or remove a _single_ class, use [class binding](/guide/templates/binding#css-class-and-style-property-bindings) rather than `NgClass`. ### Import `NgClass` in the component diff --git a/adev-ja/src/content/guide/directives/overview.md b/adev-ja/src/content/guide/directives/overview.md index 1b23d2ac91..0058c3ed1e 100644 --- a/adev-ja/src/content/guide/directives/overview.md +++ b/adev-ja/src/content/guide/directives/overview.md @@ -32,7 +32,7 @@ HELPFUL: 組み込みディレクティブは、公開APIのみを使用しま `ngClass` を使用して、複数のCSSクラスを同時に追加または削除します。 -HELPFUL: _単一の_ クラスを追加または削除するには、`NgClass` ではなく [クラスバインディング](guide/templates/class-binding) を使用します。 +HELPFUL: _単一の_ クラスを追加または削除するには、`NgClass` ではなく [クラスバインディング](/guide/templates/binding#css-class-and-style-property-bindings) を使用します。 ### コンポーネントに `NgClass` をインポートする diff --git a/adev-ja/src/content/guide/directives/structural-directives.en.md b/adev-ja/src/content/guide/directives/structural-directives.en.md index 0e696ce225..8751f2b8a0 100644 --- a/adev-ja/src/content/guide/directives/structural-directives.en.md +++ b/adev-ja/src/content/guide/directives/structural-directives.en.md @@ -31,7 +31,7 @@ Structural directives can be applied directly on an element by prefixing the dir You can use this with `SelectDirective` as follows: ```angular-html -

The data is: {{data}}

+

The data is: {{ data }}

``` This example shows the flexibility of structural directive shorthand syntax, which is sometimes called _microsyntax_. @@ -40,11 +40,11 @@ When used in this way, only the structural directive and its bindings are applie ```angular-html -

The data is: {{data}}

+

The data is: {{ data }}

-

The data is: {{data}}

+

The data is: {{ data }}

 ``` diff --git a/adev-ja/src/content/guide/directives/structural-directives.md b/adev-ja/src/content/guide/directives/structural-directives.md index 32abd03686..952a275073 100644 --- a/adev-ja/src/content/guide/directives/structural-directives.md +++ b/adev-ja/src/content/guide/directives/structural-directives.md @@ -31,7 +31,7 @@ Angularは、構造ディレクティブの省略記法をサポートしてお 以下は、`SelectDirective`を使用した例です。 ```angular-html -

The data is: {{data}}

+

The data is: {{ data }}

``` この例は、構造ディレクティブの省略記法の柔軟性を示しており、これはマイクロシンタックスと呼ばれることもあります。 @@ -40,11 +40,11 @@ Angularは、構造ディレクティブの省略記法をサポートしてお ```angular-html -

The data is: {{data}}

+

The data is: {{ data }}

-

The data is: {{data}}

+

The data is: {{ data }}

 ``` @@ -167,7 +167,7 @@ Angularは、構造ディレクティブの省略記法を次の通常のバイ | `*ngComponentOutlet="componentClass; inputs: myInputs";` | `` | | `*myDir="exp as value"` | `` | -## カスタムディレクティブのテンプレートタイプチェックを改善する +## カスタムディレクティブのテンプレートタイプチェックを改善する {#improving-template-type-checking-for-custom-directives} カスタムディレクティブのテンプレートタイプチェックを改善するには、ディレクティブ定義にテンプレートガードを追加します。 これらのガードは、Angularテンプレートタイプチェッカーがコンパイル時にテンプレート内の間違いを見つけるのに役立ち、ランタイムエラーを回避できます。 diff --git a/adev-ja/src/content/guide/drag-drop.md b/adev-ja/src/content/guide/drag-drop.md index c33451438e..2e2aebbe35 100644 --- a/adev-ja/src/content/guide/drag-drop.md +++ b/adev-ja/src/content/guide/drag-drop.md @@ -34,8 +34,8 @@ import {Component} from '@angular/core'; import {CdkDrag} from '@angular/cdk/drag-drop'; @Component({ - selector: 'my-custom-component', - templateUrl: 'my-custom-component.html', + selector: 'drag-drop-example', + templateUrl: 'drag-drop-example.html', imports: [CdkDrag], }) export class DragDropExample {} @@ -45,10 +45,10 @@ export class DragDropExample {} You can make any element draggable by adding the `cdkDrag` directive. By default, all draggable elements support free dragging. - - - - + + + + ## Create a list of reorderable draggable elements @@ -57,10 +57,10 @@ Add the `cdkDropList` directive to a parent element to group draggable elements The drag and drop directives don't update your data model. To update the data model, listen to the `cdkDropListDropped` event (once the user finishes dragging) and update the data model manually. - - - - + + + + You can use the `CDK_DROP_LIST` injection token that can be used to reference instances of `cdkDropList`. For more information see the [dependency injection guide](/guide/di) and the [drop list injection token API](api/cdk/drag-drop/CDK_DROP_LIST). @@ -84,27 +84,27 @@ The `cdkDropListConnectedTo` directive works both with a direct reference to ano
``` - - - - + + + + Use the `cdkDropListGroup` directive if you have an unknown number of connected drop lists to set up the connection automatically. Any new `cdkDropList` that is added under a group automatically connects to all other lists. -```html +```angular-html
@for (list of lists; track list) { -
+
}
``` - - - - + + + + You can use the `CDK_DROP_LIST_GROUP` injection token that can be used to reference instances of `cdkDropListGroup`. For more information see the [dependency injection guide](/guide/di) and the [drop list group injection token API](api/cdk/drag-drop/CDK_DROP_LIST_GROUP). @@ -113,23 +113,23 @@ You can use the `CDK_DROP_LIST_GROUP` injection token that can be used to refere By default, a user can move `cdkDrag` elements from one container into another connected container. For more fine-grained control over which elements can be dropped into a container, use `cdkDropListEnterPredicate`. Angular calls the predicate whenever a draggable element enters a new container. Depending on whether the predicate returns true or false, the item may or may not be allowed into the new container. - - - - + + + + ## Attach data You can associate some arbitrary data with both `cdkDrag` and `cdkDropList` by setting `cdkDragData` or `cdkDropListData`, respectively. You can bind to the events fired from both directives that will include this data, allowing you to easily identify the origin of the drag or drop interaction. -```html +```angular-html @for (list of lists; track list) { -
- @for (item of list; track item) { -
- } -
+
+ @for (item of list; track item) { +
+ } +
} ``` @@ -139,10 +139,10 @@ You can associate some arbitrary data with both `cdkDrag` and `cdkDropList` by s By default, the user can drag the entire `cdkDrag` element to move it around. To restrict the user to only be able to do so using a handle element, add the `cdkDragHandle` directive to an element inside of `cdkDrag`. You can have as many `cdkDragHandle` elements as you want. - - - - + + + + You can use the `CDK_DRAG_HANDLE` injection token that can be used to reference instances of `cdkDragHandle`. For more information see the [dependency injection guide](/guide/di) and the [drag handle injection token API](api/cdk/drag-drop/CDK_DRAG_HANDLE). @@ -155,10 +155,10 @@ To customize the preview, provide a custom template via `*cdkDragPreview`. The c The cloned element removes its id attribute in order to avoid having multiple elements with the same id on the page. This will cause any CSS that targets that id not to be applied. - - - - + + + + You can use the `CDK_DRAG_PREVIEW` injection token that can be used to reference instances of `cdkDragPreview`. For more information see the [dependency injection guide](/guide/di) and the [drag preview injection token API](api/cdk/drag-drop/CDK_DRAG_PREVIEW). @@ -181,10 +181,10 @@ Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update `p While a `cdkDrag` element is being dragged, the directive creates a placeholder element that shows where the element will be placed when dropped. By default, the placeholder is a clone of the element that is being dragged. You can replace the placeholder with a custom one using the `*cdkDragPlaceholder` directive: - - - - + + + + You can use the `CDK_DRAG_PLACEHOLDER` injection token that can be used to reference instances of `cdkDragPlaceholder`. For more information see the [dependency injection guide](/guide/di) and the [drag placeholder injection token API](api/cdk/drag-drop/CDK_DRAG_PLACEHOLDER). @@ -195,10 +195,10 @@ Set the `cdkDragRootElement` attribute if there's an element that you want to ma The attribute accepts a selector and looks up the DOM until it finds an element that matches the selector. If an element is found, it becomes draggable. This is useful for cases such as making a dialog draggable. - - - - + + + + Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update `rootElementSelector` within the config. For more information see the [dependency injection guide](/guide/di), [drag config injection token API](api/cdk/drag-drop/CDK_DRAG_CONFIG), and the [drag drop config API](api/cdk/drag-drop/DragDropConfig). @@ -207,20 +207,20 @@ Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update `r By default, `cdkDrag` elements not in a `cdkDropList` move from their normal DOM position only when a user manually moves the element. Use the `cdkDragFreeDragPosition` input to explicitly set the element’s position. A common use case for this is restoring a draggable element's position after a user has navigated away and then returned. - - - - + + + + ### Restrict movement within an element To stop the user from being able to drag a `cdkDrag` element outside of another element, pass a CSS selector to the `cdkDragBoundary` attribute. This attribute accepts a selector and looks up the DOM until it finds an element that matches it. If a match is found, the element becomes the boundary that the draggable element can't be dragged outside of `cdkDragBoundary` can also be used when `cdkDrag` is placed inside a `cdkDropList`. - - - - + + + + Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update boundaryElement within the config. For more information see the [dependency injection guide](/guide/di), [drag config injection token API](api/cdk/drag-drop/CDK_DRAG_CONFIG), and the [drag drop config API](api/cdk/drag-drop/DragDropConfig). @@ -229,10 +229,10 @@ Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update bo By default, `cdkDrag` allows free movement in all directions. To restrict dragging to a specific axis, set `cdkDragLockAxis` to either "x" or "y"on `cdkDrag`. To restrict dragging for multiple draggable elements within `cdkDropList`, set `cdkDropListLockAxis` on `cdkDropList` instead. - - - - + + + + Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update `lockAxis` within the config. For more information see the [dependency injection guide](/guide/di), [drag config injection token API](api/cdk/drag-drop/CDK_DRAG_CONFIG), and the [drag drop config API](api/cdk/drag-drop/DragDropConfig). @@ -243,10 +243,10 @@ By default when the user puts their pointer down on a `cdkDrag`, the dragging se You can delay the dragging sequence using the `cdkDragStartDelay` input. The input waits for the user to hold down their pointer for the specified number of milliseconds before dragging the element. - - - - + + + + Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update dragStartDelay within the config. For more information see the [dependency injection guide](/guide/di), [drag config injection token API](api/cdk/drag-drop/CDK_DRAG_CONFIG), and the [drag drop config API](api/cdk/drag-drop/DragDropConfig). @@ -255,10 +255,10 @@ Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update dr If you want to disable dragging for a particular drag item, set the `cdkDragDisabled` input on a `cdkDrag` item to true or false. You can disable an entire list using the `cdkDropListDisabled` input on a `cdkDropList`. It is also possible to disable a specific handle via `cdkDragHandleDisabled` on `cdkDragHandle`. - - - - + + + + Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update `draggingDisabled` within the config. For more information see the [dependency injection guide](/guide/di), [drag config injection token API](api/cdk/drag-drop/CDK_DRAG_CONFIG), and the [drag drop config API](api/cdk/drag-drop/DragDropConfig). @@ -269,10 +269,10 @@ Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update `d By default, the `cdkDropList` directive assumes lists are vertical. This can be changed by setting the `cdkDropListOrientation` property to horizontal. - - - - + + + + Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update `listOrientation` within the config. For more information see the [dependency injection guide](/guide/di), [drag config injection token API](api/cdk/drag-drop/CDK_DRAG_CONFIG), and the [drag drop config API](api/cdk/drag-drop/DragDropConfig). @@ -283,30 +283,30 @@ By default, the `cdkDropList` sorts the draggable elements by moving them around If you have a sortable list that needs to wrap onto new lines, you can set `cdkDropListOrientation` attribute to `mixed`. This causes the list to use a different strategy of sorting the elements which involves moving them in the DOM. However the list can no longer animate the sorting action . - - - - + + + + ### Selective sorting By default, `cdkDrag` elements are sorted into any position inside of a `cdkDropList`. To change this behavior, set the `cdkDropListSortPredicate` attribute which takes in a function. The predicate function is called whenever a draggable element is about to be moved into a new index within the drop list. If the predicate returns true, the item will be moved into the new index, otherwise it will keep its current position. - - - - + + + + ### Disable sorting There are cases where draggable elements can be dragged out of one `cdkDropList` into another, however the user shouldn't be able to sort them within the source list. For these cases, add the `cdkDropListSortingDisabled` attribute to prevent the draggable elements in a `cdkDropList` from sorting. This preserves the dragged element's initial position in the source list if it does not get dragged to a new valid position. - - - - + + + + Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update sortingDisabled within the config. For more information see the [dependency injection guide](/guide/di), [drag config injection token API](api/cdk/drag-drop/CDK_DRAG_CONFIG), and the [drag drop config API](api/cdk/drag-drop/DragDropConfig). @@ -319,10 +319,10 @@ To enable copying, you can set the `cdkDropListHasAnchor` input. This tells the Combining `cdkDropListHasAnchor` with `cdkDropListSortingDisabled` makes it possible to construct a list from which a user can copy items without being able to reorder the source list (e.g. a product list and a shopping cart). - - - - + + + + ## Customize animations diff --git a/adev-ja/src/content/guide/elements.en.md b/adev-ja/src/content/guide/elements.en.md index 90bb9d2e34..44daf9eec7 100644 --- a/adev-ja/src/content/guide/elements.en.md +++ b/adev-ja/src/content/guide/elements.en.md @@ -63,7 +63,7 @@ One regular Angular component and a second one using the custom element. ### Mapping A custom element _hosts_ an Angular component, providing a bridge between the data and logic defined in the component and standard DOM APIs. -Component properties and logic maps directly into HTML attributes and the browser's event system. +Component properties and logic map directly into HTML attributes and the browser's event system. - The creation API parses the component looking for input properties, and defines corresponding attributes for the custom element. It transforms the property names to make them compatible with custom elements, which do not recognize case distinctions. @@ -71,10 +71,10 @@ Component properties and logic maps directly into HTML attributes and the browse For example, for a component with `inputProp = input({alias: 'myInputProp'})`, the corresponding custom element defines an attribute `my-input-prop`. - Component outputs are dispatched as HTML [Custom Events](https://developer.mozilla.org/docs/Web/API/CustomEvent), with the name of the custom event matching the output name. - For example, for a component `with valueChanged = output()`, the corresponding custom element dispatches events with the name "valueChanged", and the emitted data is stored on the event's `detail` property. + For example, for a component with `valueChanged = output()`, the corresponding custom element dispatches events with the name "valueChanged", and the emitted data is stored on the event's `detail` property. If you provide an alias, that value is used; for example, `clicks = output({alias: 'myClick'});` results in dispatch events with the name "myClick". -For more information, see Web Component documentation for [Creating custom events](https://developer.mozilla.org/docs/Web/Guide/Events/Creating_and_triggering_events#Creating_custom_events). +For more information, see Web Component documentation for [Creating custom events](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Events#creating_custom_events). ## Example: A Popup Service @@ -85,20 +85,20 @@ Using an Angular custom element makes the process simpler and more transparent, The following Popup Service example application defines a component that you can either load dynamically or convert to a custom element. -| Files | Details | -| :------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `popup.component.ts` | Defines a simple pop-up element that displays an input message, with some animation and styling. | -| `popup.service.ts` | Creates an injectable service that provides two different ways to invoke the `PopupComponent`; as a dynamic component, or as a custom element. Notice how much more setup is required for the dynamic-loading method. | -| `app.component.ts` | Defines the application's root component, which uses the `PopupService` to add the pop-up to the DOM at run time. When the application runs, the root component's constructor converts `PopupComponent` to a custom element. | +| Files | Details | +| :----------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `popup.ts` | Defines a simple pop-up element that displays an input message, with some animation and styling. | +| `popup.service.ts` | Creates an injectable service that provides two different ways to invoke the `Popup`; as a dynamic component, or as a custom element. Notice how much more setup is required for the dynamic-loading method. | +| `app.ts` | Defines the application's root component, which uses the `PopupService` to add the pop-up to the DOM at run time. When the application runs, the root component's constructor converts `Popup` to a custom element. | For comparison, the demo shows both methods. One button adds the popup using the dynamic-loading method, and the other uses the custom element. The result is the same, but the preparation is different. - + - + ## Typings for custom elements @@ -119,7 +119,7 @@ Assume you create a `my-dialog` custom element based on the following component: ```ts @Component(/* ... */) class MyDialog { - content = input(string); + content = input(''); } ``` @@ -164,5 +164,5 @@ document.querySelector('my-other-element'); //--> NgElement & WithProperties<{fo Care should be taken when destroying and then re-attaching custom elements created with `@angular/elements` due to issues with the [disconnect()](https://github.com/angular/angular/issues/38778) callback. Cases where you may run into this issue are: -- Rendering a component in an `ng-if` or `ng-repeat` in `AngularJs` +- Rendering a component in an `ng-if` or `ng-repeat` in `AngularJS` - Manually detaching and re-attaching an element to the DOM diff --git a/adev-ja/src/content/guide/elements.md b/adev-ja/src/content/guide/elements.md index e09c66fbe4..6664502991 100644 --- a/adev-ja/src/content/guide/elements.md +++ b/adev-ja/src/content/guide/elements.md @@ -63,7 +63,7 @@ IMPORTANT: コンポーネントのセレクターをカスタム要素のタグ ### マッピング {#mapping} カスタム要素はAngularコンポーネントを_ホスト_し、コンポーネントで定義されたデータとロジック、および標準のDOM API間のブリッジを提供します。 -コンポーネントのプロパティとロジックは、HTML属性とブラウザのイベントシステムに直接マッピングされます。 +コンポーネントのプロパティとロジックは、HTML属性とブラウザのイベントシステムに直接マップされます。 - 作成APIは、入力プロパティを探してコンポーネントを解析し、カスタム要素に対応する属性を定義します。 プロパティ名をカスタム要素と互換性があるように変換します。カスタム要素は大文字と小文字の区別を認識しません。 @@ -72,9 +72,9 @@ IMPORTANT: コンポーネントのセレクターをカスタム要素のタグ - コンポーネントの出力はHTMLの[カスタムイベント](https://developer.mozilla.org/docs/Web/API/CustomEvent)としてディスパッチされ、カスタムイベントの名前は出力名と一致します。 例えば、`valueChanged = output()`を持つコンポーネントの場合、対応するカスタム要素は"valueChanged"という名前のイベントをディスパッチし、出力されたデータはイベントの`detail`プロパティに格納されます。 - エイリアスを提供した場合、その値が使用されます。`clicks = output({alias: 'myClick'});`は"myClick"という名前のディスパッチイベントを生成します。 + エイリアスを提供した場合、その値が使用されます。たとえば、`clicks = output({alias: 'myClick'});`は"myClick"という名前のディスパッチイベントを生成します。 -詳細については、Webコンポーネントのドキュメントの[カスタムイベントの作成](https://developer.mozilla.org/docs/Web/Guide/Events/Creating_and_triggering_events#Creating_custom_events)を参照してください。 +詳細については、Webコンポーネントのドキュメントの[カスタムイベントの作成](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Events#creating_custom_events)を参照してください。 ## 例: Popupサービス {#example-a-popup-service} @@ -85,20 +85,20 @@ Angularカスタム要素を使用すると、必要なインフラストラク 以下のPopupサービス例のアプリケーションは、動的にロードするかカスタム要素に変換できるコンポーネントを定義しています。 -| ファイル | 詳細 | -| :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `popup.component.ts` | 入力メッセージを表示するシンプルなポップアップ要素を、アニメーションとスタイル付きで定義します。 | -| `popup.service.ts` | `PopupComponent`を呼び出す2つの異なる方法を提供する注入可能サービスを作成します。動的コンポーネントとして、またはカスタム要素として。動的読み込み方式には、より多くのセットアップが必要であることに注目してください。 | -| `app.component.ts` | `PopupService`を使用して実行時にDOMにポップアップを追加する、アプリケーションのルートコンポーネントを定義します。アプリケーションの実行時、ルートコンポーネントのコンストラクターは`PopupComponent`をカスタム要素に変換します。 | +| ファイル | 詳細 | +| :----------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `popup.ts` | 入力メッセージを表示するシンプルなポップアップ要素を、アニメーションとスタイル付きで定義します。 | +| `popup.service.ts` | `Popup`を呼び出す2つの異なる方法を提供する注入可能サービスを作成します。動的コンポーネントとして、またはカスタム要素として。動的読み込み方式には、より多くのセットアップが必要であることに注目してください。 | +| `app.ts` | `PopupService`を使用して実行時にDOMにポップアップを追加する、アプリケーションのルートコンポーネントを定義します。アプリケーションの実行時、ルートコンポーネントのコンストラクターは`Popup`をカスタム要素に変換します。 | 比較のため、デモでは両方の方法を示しています。 一方のボタンは動的読み込み方式を使用してポップアップを追加し、もう一方はカスタム要素を使用します。 結果は同じですが、準備が異なります。 - + - + ## カスタム要素の型定義 {#typings-for-custom-elements} @@ -119,7 +119,7 @@ Angularで作成されたカスタム要素は`NgElement`（これはさらに`H ```ts @Component(/* ... */) class MyDialog { - content = input(string); + content = input(''); } ``` diff --git a/adev-ja/src/content/guide/forms/form-validation.en.md b/adev-ja/src/content/guide/forms/form-validation.en.md index ca5aad51da..07d9d9d675 100644 --- a/adev-ja/src/content/guide/forms/form-validation.en.md +++ b/adev-ja/src/content/guide/forms/form-validation.en.md @@ -250,9 +250,9 @@ A common UI pattern is to show a spinner while the async validation is being per The following example shows how to achieve this in a template-driven form. ```angular-html - + -@if(model.pending) { +@if (model.pending) { } ``` @@ -278,7 +278,7 @@ interface ActorsService { In a real world application, the `ActorsService` would be responsible for making an HTTP request to the actor database to check if the role is available. From the validator's point of view, the actual implementation of the service is not important, so the example can just code against the `ActorsService` interface. -As the validation begins, the `UnambiguousRoleValidator` delegates to the `ActorsService` `isRoleTaken()` method with the current control value. +As the validation begins, the `UniqueRoleValidator` delegates to the `ActorsService` `isRoleTaken()` method with the current control value. At this point the control is marked as `pending` and remains in this state until the observable chain returned from the `validate()` method completes. The `isRoleTaken()` method dispatches an HTTP request that checks if the role is available, and returns `Observable` as the result. @@ -300,7 +300,7 @@ To use an async validator in reactive forms, begin by injecting the validator in Then, pass the validator function directly to the `FormControl` to apply it. -In the following example, the `validate` function of `UnambiguousRoleValidator` is applied to `roleControl` by passing it to the control's `asyncValidators` option and binding it to the instance of `UnambiguousRoleValidator` that was injected into `ActorFormReactiveComponent`. +In the following example, the `validate` function of `UniqueRoleValidator` is applied to `roleControl` by passing it to the control's `asyncValidators` option and binding it to the instance of `UniqueRoleValidator` that was injected into `ActorFormReactiveComponent`. The value of `asyncValidators` can be either a single async validator function, or an array of functions. To learn more about `FormControl` options, see the [AbstractControlOptions](api/forms/AbstractControlOptions) API reference. @@ -330,7 +330,7 @@ You can delay updating the form validity by changing the `updateOn` property fro With template-driven forms, set the property in the template. ```angular-html - + ``` With reactive forms, set the property in the `FormControl` instance. diff --git a/adev-ja/src/content/guide/forms/form-validation.md b/adev-ja/src/content/guide/forms/form-validation.md index 740a7b4bcd..06aca2471e 100644 --- a/adev-ja/src/content/guide/forms/form-validation.md +++ b/adev-ja/src/content/guide/forms/form-validation.md @@ -250,9 +250,9 @@ const actorForm = new FormGroup( 次の例は、テンプレート駆動フォームでこれを実現する方法を示しています。 ```angular-html - + -@if(model.pending) { +@if (model.pending) { } ``` @@ -278,7 +278,7 @@ interface ActorsService { 実際のアプリケーションでは、`ActorsService`は、アクターデータベースにHTTPリクエストを送信して役割が利用可能かどうかを確認する役割を担います。 バリデーターの観点から、サービスの実際の実装は重要でないため、例では`ActorsService`インターフェースに対してのみコードを作成できます。 -検証が始まると、`UnambiguousRoleValidator`は、現在のコントロール値で`ActorsService`の`isRoleTaken()`メソッドに委任します。 +検証が始まると、`UniqueRoleValidator`は、現在のコントロール値で`ActorsService`の`isRoleTaken()`メソッドに委任します。 この時点で、コントロールは`pending`としてマークされ、`validate()`メソッドから返されるObservableチェーンが完了するまで、この状態を維持します。 `isRoleTaken()`メソッドは、役割が利用可能かどうかを確認するHTTPリクエストをディスパッチし、結果として`Observable`を返します。 @@ -300,7 +300,7 @@ interface ActorsService { 次に、バリデーター関数を`FormControl`に直接渡して、適用します。 -次の例では、`UnambiguousRoleValidator`の`validate`関数が、`roleControl`に適用されています。この関数をコントロールの`asyncValidators`オプションに渡し、`ActorFormReactiveComponent`に注入された`UnambiguousRoleValidator`のインスタンスにバインドしています。 +次の例では、`UniqueRoleValidator`の`validate`関数が、`roleControl`に適用されています。この関数をコントロールの`asyncValidators`オプションに渡し、`ActorFormReactiveComponent`に注入された`UniqueRoleValidator`のインスタンスにバインドしています。 `asyncValidators`の値は、単一の非同期バリデーター関数、または関数の配列にできます。 `FormControl`オプションの詳細については、[AbstractControlOptions](api/forms/AbstractControlOptions) APIリファレンスを参照してください。 @@ -330,7 +330,7 @@ interface ActorsService { テンプレート駆動フォームでは、テンプレートでプロパティを設定します。 ```angular-html - + ``` リアクティブフォームでは、`FormControl`インスタンスでプロパティを設定します。 diff --git a/adev-ja/src/content/guide/forms/reactive-forms.en.md b/adev-ja/src/content/guide/forms/reactive-forms.en.md index 5dc6e6c548..cd0474c37f 100644 --- a/adev-ja/src/content/guide/forms/reactive-forms.en.md +++ b/adev-ja/src/content/guide/forms/reactive-forms.en.md @@ -387,25 +387,21 @@ You can bind a `FormArray` directly to a `
` element by using the `FormArra This is useful when the form does not use a top-level `FormGroup`, and the array itself represents the full form model. ```angular-ts -import { Component } from '@angular/core'; -import { FormArray, FormControl } from '@angular/forms'; +import {Component} from '@angular/core'; +import {FormArray, FormControl} from '@angular/forms'; @Component({ selector: 'form-array-example', template: ` @for (control of form.controls; track $index) { - + } `, }) export class FormArrayExampleComponent { - controls = [ - new FormControl('fish'), - new FormControl('cat'), - new FormControl('dog'), - ]; + controls = [new FormControl('fish'), new FormControl('cat'), new FormControl('dog')]; form = new FormArray(this.controls); } @@ -451,7 +447,7 @@ import { } from '@angular/forms'; @Component({ - /* ... */ + /*...*/ }) export class UnifiedEventsBasicComponent { form = new FormGroup({ @@ -601,7 +597,9 @@ When updating form controls programmatically, you have precise control over how By default `emitEvent: true`, any change to a control emits events through the `valueChanges` and `statusChanges` observables. Setting `emitEvent: false` suppresses these emissions, which is useful when setting values programmatically without triggering reactive behavior like auto-save, avoiding circular updates between controls, or performing bulk updates where events should emit only once at the end. ```ts -@Component({/* ... */}) +@Component({ + /* ... */ +}) export class BlogPostEditor { postForm = new FormGroup({ title: new FormControl(''), @@ -610,16 +608,15 @@ export class BlogPostEditor { constructor() { // Auto-save draft every time user types - this.postForm.valueChanges.subscribe(formValue => { + this.postForm.valueChanges.subscribe((formValue) => { this.autosaveDraft(formValue); }); } loadExistingDraft(savedDraft: {title: string; content: string}) { // Restore draft without triggering auto-save - this.postForm.setValue(savedDraft, { emitEvent: false }); + this.postForm.setValue(savedDraft, {emitEvent: false}); } - } ``` diff --git a/adev-ja/src/content/guide/forms/reactive-forms.md b/adev-ja/src/content/guide/forms/reactive-forms.md index 4e2fcfbdea..2723766279 100644 --- a/adev-ja/src/content/guide/forms/reactive-forms.md +++ b/adev-ja/src/content/guide/forms/reactive-forms.md @@ -18,7 +18,7 @@ テンプレート駆動型フォームでは、テンプレート内の直接アクセスを使用してデータを変更できますが、リアクティブフォームほど明示的ではありません。これは、テンプレートに埋め込まれたディレクティブと、変更を非同期的に追跡するミュータブルデータに依存するためです。 2つのパラダイムの詳細な比較については、[フォームの概要](guide/forms)を参照してください。 -## 基本的なフォームコントロールの追加 +## 基本的なフォームコントロールの追加 {#adding-a-basic-form-control} フォームコントロールを使用するには、次の3つの手順があります。 @@ -387,25 +387,21 @@ _フォーム検証_ は、ユーザー入力が完全で正しいことを確 これは、フォームがトップレベルの `FormGroup` を使用せず、配列自体が完全なフォームモデルを表す場合に便利です。 ```angular-ts -import { Component } from '@angular/core'; -import { FormArray, FormControl } from '@angular/forms'; +import {Component} from '@angular/core'; +import {FormArray, FormControl} from '@angular/forms'; @Component({ selector: 'form-array-example', template: `
@for (control of form.controls; track $index) { - + } `, }) export class FormArrayExampleComponent { - controls = [ - new FormControl('fish'), - new FormControl('cat'), - new FormControl('dog'), - ]; + controls = [new FormControl('fish'), new FormControl('cat'), new FormControl('dog')]; form = new FormArray(this.controls); } @@ -451,7 +447,7 @@ import { } from '@angular/forms'; @Component({ - /* ... */ + /*...*/ }) export class UnifiedEventsBasicComponent { form = new FormGroup({ @@ -601,7 +597,9 @@ onSubmit() { デフォルトで `emitEvent: true` の場合、コントロールへの変更は `valueChanges` と `statusChanges` Observableを通じてイベントを発行します。`emitEvent: false` を設定すると、これらの発行が抑制されます。これは、自動保存のようなリアクティブな動作をトリガーせずにプログラムで値を設定する場合、コントロール間の循環更新を回避する場合、またはイベントが最後に一度だけ発行されるべき一括更新を実行する場合に便利です。 ```ts -@Component({/* ... */}) +@Component({ + /* ... */ +}) export class BlogPostEditor { postForm = new FormGroup({ title: new FormControl(''), @@ -610,16 +608,15 @@ export class BlogPostEditor { constructor() { // ユーザーが入力するたびに下書きを自動保存 - this.postForm.valueChanges.subscribe(formValue => { + this.postForm.valueChanges.subscribe((formValue) => { this.autosaveDraft(formValue); }); } loadExistingDraft(savedDraft: {title: string; content: string}) { // 自動保存をトリガーせずに下書きを復元 - this.postForm.setValue(savedDraft, { emitEvent: false }); + this.postForm.setValue(savedDraft, {emitEvent: false}); } - } ``` diff --git a/adev-ja/src/content/guide/forms/signals/async-operations.md b/adev-ja/src/content/guide/forms/signals/async-operations.md new file mode 100644 index 0000000000..ec4a837c2b --- /dev/null +++ b/adev-ja/src/content/guide/forms/signals/async-operations.md @@ -0,0 +1,552 @@ +# Async operations + +Some validation requires data from external sources like backend APIs or third-party services. Signal Forms provides two functions for asynchronous validation: `validateHttp()` for HTTP-based validation and `validateAsync()` for custom resource-based validation. + +## When to use async validation + +Use async validation when your validation logic requires external data. Some common examples include: + +- **Uniqueness checks** - Verify usernames or emails don't already exist +- **Database lookups** - Check values against server-side data +- **External API validation** - Validate addresses, tax IDs, or other data with third-party services +- **Server-side business rules** - Apply validation rules that only the server can verify + +Don't use async validation for checks you can perform synchronously on the client. Use synchronous validation rules like `pattern()`, `email()`, or `validate()` for format validation and static rules. + +## How async validation works + +Async validation runs only after all synchronous validation passes. While the validation executes, the field's `pending()` signal returns `true`. The validation can target errors to specific fields, and pending requests cancel automatically when field values change. + +Here's an example checking username availability: + +```angular-ts +import {Component, signal} from '@angular/core'; +import {form, validateHttp, FormField} from '@angular/forms/signals'; + +@Component({ + selector: 'app-registration', + imports: [FormField], + template: ` +
+ + + @if (registrationForm.username().pending()) { + Checking availability... + } + @if (registrationForm.username().invalid()) { + @for (error of registrationForm.username().errors(); track $index) { + {{ error.message }} + } + } + + `, +}) +export class Registration { + registrationModel = signal({username: ''}); + + registrationForm = form(this.registrationModel, (schemaPath) => { + validateHttp(schemaPath.username, { + request: ({value}) => { + const username = value(); + return username ? `/api/users/check?username=${username}` : undefined; + }, + onSuccess: (response) => { + return response.available + ? null + : { + kind: 'usernameTaken', + message: 'Username is already taken', + }; + }, + onError: (error) => { + console.error('Validation request failed:', error); + return { + kind: 'serverError', + message: 'Could not verify username availability', + }; + }, + }); + }); +} +``` + +The validation flow works like this: + +1. User types a value +2. Synchronous validation rules run first +3. If synchronous validation fails, async validation doesn't run +4. If synchronous validation passes, async validation starts and `pending()` becomes `true` +5. The request completes and `pending()` becomes `false` +6. Errors update based on the response + +## HTTP validation with validateHttp() + +The `validateHttp()` function provides the most common form of async validation. Use it when you need to validate against a REST API or any HTTP endpoint. + +### Request function + +The `request` function returns either a URL string or an `HttpResourceRequest` object. Return `undefined` to skip the validation: + +```ts +import {Component, signal} from '@angular/core'; +import {form, validateHttp, FormField} from '@angular/forms/signals'; + +@Component({ + selector: 'app-registration', + imports: [FormField], + template: `...`, +}) +export class Registration { + registrationModel = signal({username: ''}); + + // Cache usernames that passed validation + private validatedUsernames = new Set(); + + registrationForm = form(this.registrationModel, (schemaPath) => { + validateHttp(schemaPath.username, { + request: ({value}) => { + const username = value(); + // Skip HTTP request if already validated + if (this.validatedUsernames.has(username)) return undefined; + + return `/api/users/check?username=${username}`; + }, + onSuccess: (response, {value}) => { + if (response.available) { + // Cache successful validations + this.validatedUsernames.add(value()); + return null; + } + return { + kind: 'usernameTaken', + message: 'Username is already taken', + }; + }, + onError: () => ({ + kind: 'serverError', + message: 'Could not verify username', + }), + }); + }); +} +``` + +For POST requests or custom headers, return an `HttpResourceRequest` object: + +```ts +request: ({value}) => ({ + url: '/api/validate', + method: 'POST', + body: {username: value()}, +}) // prettier-ignore +``` + +### Success and error handlers + +The `onSuccess` function receives the HTTP response and returns validation errors or `undefined` for valid values: + +```ts +onSuccess: (response) => { + if (response.valid) return undefined; + + return { + kind: 'invalid', + message: response.message || 'Validation failed', + }; +} // prettier-ignore +``` + +Return multiple errors when needed: + +```ts +onSuccess: (response) => { + const errors = []; + if (response.usernameTaken) { + errors.push({ + kind: 'usernameTaken', + message: 'Username taken', + }); + } + if (response.profanity) { + errors.push({ + kind: 'profanity', + message: 'Username contains inappropriate content', + }); + } + return errors.length > 0 ? errors : undefined; +} // prettier-ignore +``` + +The `onError` function handles request failures like network errors or HTTP errors: + +```ts +onError: (error) => { + console.error('Validation request failed:', error); + return { + kind: 'serverError', + message: 'Could not verify. Please try again later.', + }; +} // prettier-ignore +``` + +### HTTP options + +Customize the HTTP request with the `options` parameter: + +```ts +import {HttpHeaders} from '@angular/common/http'; + +validateHttp(schemaPath.field, { + request: ({value}) => `/api/validate?value=${value()}`, + options: { + headers: new HttpHeaders({ + Authorization: 'Bearer token', + }), + timeout: 5000, + }, + onSuccess: (response) => + response.valid + ? null + : { + kind: 'invalid', + message: 'Invalid value', + }, + onError: () => ({ + kind: 'requestFailed', + message: 'Unable to reach server to validate.', + }), +}); +``` + +TIP: See the [httpResource API documentation](api/common/http/httpResource) for all available options. + +## Custom async validation with validateAsync() + +Most applications should use `validateHttp()` for async validation. It handles HTTP requests with minimal configuration and covers the majority of use cases. + +`validateAsync()` is a lower-level API that exposes Angular's resource primitive directly. It offers complete control but requires more code and familiarity with Angular's resource API. + +Consider `validateAsync()` only when `validateHttp()` can't meet your needs. Some examples include: + +- **Non-HTTP validation** - WebSocket connections, IndexedDB lookups, or Web Worker computations +- **Custom caching strategies** - Application-specific caching beyond simple memoization +- **Complex retry logic** - Custom backoff strategies or conditional retries +- **Direct resource access** - When you need the full resource lifecycle + +### Creating a custom validation rule + +The `validateAsync()` function requires four properties: `params`, `factory`, `onSuccess`, and `onError`. The `params` function returns the parameters for your resource, while `factory` creates the resource: + +```ts +import {Component, inject, signal, resource, Signal} from '@angular/core'; +import {form, validateAsync, FormField} from '@angular/forms/signals'; +import {UsernameValidator} from './username-validator'; + +@Component({ + selector: 'app-registration', + imports: [FormField], + template: `...`, +}) +export class Registration { + registrationModel = signal({username: ''}); + + private usernameValidator = inject(UsernameValidator); + private cache = new Map(); + + // Custom resource factory with caching + createUsernameResource = (usernameSignal: Signal) => { + return resource({ + params: () => usernameSignal(), + loader: async ({params: username}) => { + if (!username) return undefined; + + // Check cache first + const cached = this.cache.get(username); + if (cached !== undefined) return cached; + + // Use injected service for validation + const result = await this.usernameValidator.checkAvailability(username); + + // Cache result + this.cache.set(username, result); + return result; + }, + }); + }; + + registrationForm = form(this.registrationModel, (schemaPath) => { + validateAsync(schemaPath.username, { + params: ({value}) => { + const username = value(); + return username.length >= 3 ? username : undefined; + }, + factory: this.createUsernameResource, + onSuccess: (result) => { + return result?.available + ? null + : { + kind: 'usernameTaken', + message: 'Username taken', + }; + }, + onError: (error) => { + console.error('Validation failed:', error); + return { + kind: 'serverError', + message: 'Could not verify username', + }; + }, + }); + }); +} +``` + +The `params` function runs on every value change. Return `undefined` to skip validation. The `factory` function runs once during setup and receives params as a signal. The resource updates automatically when params change. + +### Using Observable-based services + +If your application has existing services that return Observables, use `rxResource` from `@angular/core/rxjs-interop`: + +```ts +import {Component, inject, signal, Signal} from '@angular/core'; +import {rxResource} from '@angular/core/rxjs-interop'; +import {form, validateAsync, FormField} from '@angular/forms/signals'; +import {UsernameService} from './username-service'; + +@Component({ + selector: 'app-registration', + imports: [FormField], + template: `...`, +}) +export class Registration { + registrationModel = signal({username: ''}); + + private usernameService = inject(UsernameService); + + private createUsernameResource = (usernameSignal: Signal) => { + return rxResource({ + request: () => usernameSignal(), + stream: ({request: username}) => this.usernameService.checkUsername(username), + }); + }; + + registrationForm = form(this.registrationModel, (schemaPath) => { + validateAsync(schemaPath.username, { + params: ({value}) => value() || undefined, + factory: this.createUsernameResource, + onSuccess: (result) => + result?.available ? null : {kind: 'usernameTaken', message: 'Username taken'}, + onError: () => ({ + kind: 'serverError', + message: 'Could not verify username', + }), + }); + }); +} +``` + +The `rxResource` function works directly with Observables and handles subscription cleanup automatically when the field value changes. + +## Understanding pending state + +When async validation runs, the field's `pending()` signal returns `true`. During this time: + +- `valid()` returns `false` +- `invalid()` returns `false` +- `errors()` returns an empty array +- `submit()` waits for validation to complete + +Show the pending state in your template to provide feedback: + +```angular-html + + +@if (loginForm.username().pending()) { + Checking availability... +} + +@if (loginForm.username().touched() && loginForm.username().invalid()) { + @for (error of loginForm.username().errors(); track $index) { + {{ error.message }} + } +} +``` + +Disable form submission while validation is pending: + +```angular-html + +``` + +TIP: See the [Field State Management guide](guide/forms/signals/field-state-management) for more patterns using `pending()`, `valid()`, and `invalid()` signals. + +### Validation execution order + +Async validation only runs after synchronous validation passes. This prevents unnecessary server requests for invalid input: + +```ts +import {form, required, minLength, validateHttp} from '@angular/forms/signals'; + +form(model, (schemaPath) => { + // 1. These synchronous validation rules run first + required(schemaPath.username); + minLength(schemaPath.username, 3); + + // 2. This async validation rule only runs if synchronous validation passes + validateHttp(schemaPath.username, { + request: ({value}) => `/api/check?username=${value()}`, + onSuccess: (result) => + result.valid + ? null + : { + kind: 'usernameTaken', + message: 'Username taken', + }, + onError: () => ({ + kind: 'serverError', + message: 'Validation failed', + }), + }); +}); +``` + +This execution order improves performance by reducing server load and catching format errors instantly. + +### Request cancellation + +When a field value changes, Signal Forms automatically cancels any pending async validation request for that field. This prevents race conditions and ensures validation always reflects the current value. You don't need to implement cancellation logic yourself. + +## Best practices + +### Combine with synchronous validation + +Always validate format before making async requests. This catches errors instantly and prevents unnecessary server requests: + +```ts +import {form, required, email, validateHttp} from '@angular/forms/signals'; + +form(model, (schemaPath) => { + // Validate format first + required(schemaPath.email); + email(schemaPath.email); + + // Then check availability + validateHttp(schemaPath.email, { + request: ({value}) => `/api/emails/check?email=${value()}`, + onSuccess: (result) => + result.available + ? null + : { + kind: 'emailInUse', + message: 'Email already in use', + }, + onError: () => ({ + kind: 'serverError', + message: 'Could not verify email', + }), + }); +}); +``` + +### Skip validation when appropriate + +Return `undefined` from the `request` function to skip validation. Use this to avoid validating empty fields or values that don't meet minimum requirements: + +```ts +import {validateHttp} from '@angular/forms/signals'; + +validateHttp(schemaPath.username, { + request: ({value}) => { + const username = value(); + // Skip validation for empty or short usernames + if (!username || username.length < 3) return undefined; + + return `/api/users/check?username=${username}`; + }, + onSuccess: (result) => + result.valid + ? null + : { + kind: 'usernameTaken', + message: 'Username taken', + }, + onError: () => ({ + kind: 'serverError', + message: 'Validation failed', + }), +}); +``` + +### Handle errors gracefully + +Provide clear, user-friendly error messages. Log technical details for debugging but show simple messages to users: + +```ts +import {validateHttp} from '@angular/forms/signals'; + +validateHttp(schemaPath.field, { + request: ({value}) => `/api/validate?field=${value()}`, + onSuccess: (result) => { + if (result.valid) return null; + // Use server message when available + return { + kind: 'serverError', + message: result.message || 'Validation failed', + }; + }, + onError: (error) => { + // Log for debugging + console.error('Validation request failed:', error); + + // Show user-friendly message + return { + kind: 'serverError', + message: 'Unable to validate. Please try again later.', + }; + }, +}); +``` + +### Show clear feedback + +Use the `pending()` signal to show when validation is happening. This helps users understand delays and provides better perceived performance: + +```angular-html +@if (field().pending()) { + + + Checking... + +} +@if (field().valid() && !field().pending()) { + Available +} +@if (field().invalid()) { + {{ field().errors()[0]?.message }} +} +``` + +## Next steps + +This guide covered async validation with `validateHttp()` and `validateAsync()`. Related guides explore other aspects of Signal Forms: + + + + + + +For detailed API documentation, see: + +- [`validateHttp()`](api/forms/signals/validateHttp) - HTTP-based async validation +- [`validateAsync()`](api/forms/signals/validateAsync) - Custom resource-based async validation +- [`httpResource()`](api/common/http/httpResource) - Angular's HTTP resource API +- [`resource()`](api/core/resource) - Angular's resource primitive diff --git a/adev-ja/src/content/guide/forms/signals/custom-controls.en.md b/adev-ja/src/content/guide/forms/signals/custom-controls.en.md index 163aee9bc6..30df0a45f8 100644 --- a/adev-ja/src/content/guide/forms/signals/custom-controls.en.md +++ b/adev-ja/src/content/guide/forms/signals/custom-controls.en.md @@ -4,7 +4,7 @@ NOTE: This guide assumes familiarity with [Signal Forms essentials](essentials/s The browser's built-in form controls (like input, select, textarea) handle common cases, but applications often need specialized inputs. A date picker with calendar UI, a rich text editor with formatting toolbar, or a tag selector with autocomplete all require custom implementations. -Signal Forms works with any component that implements specific interfaces. A **control interface** defines the properties and signals that allow your component to communicate with the form system. When your component implements one of these interfaces, the `[field]` directive automatically connects your control to form state, validation, and data binding. +Signal Forms works with any component that implements specific interfaces. A **control interface** defines the properties and signals that allow your component to communicate with the form system. When your component implements one of these interfaces, the `[formField]` directive automatically connects your control to form state, validation, and data binding. ## Creating a basic custom control @@ -15,8 +15,8 @@ Let's start with a minimal implementation and add features as needed. A basic custom input only needs to implement the `FormValueControl` interface and define the required `value` model signal. ```angular-ts -import { Component, model } from '@angular/core'; -import { FormValueControl } from '@angular/forms/signals'; +import {Component, model} from '@angular/core'; +import {FormValueControl} from '@angular/forms/signals'; @Component({ selector: 'app-basic-input', @@ -41,21 +41,17 @@ export class BasicInput implements FormValueControl { A checkbox-style control needs two things: -1. Implement the `FormCheckboxControl` interface so the `Field` directive will recognize it as a form control +1. Implement the `FormCheckboxControl` interface so the `FormField` directive will recognize it as a form control 2. Provide a `checked` model signal ```angular-ts -import { Component, model, ChangeDetectionStrategy } from '@angular/core'; -import { FormCheckboxControl } from '@angular/forms/signals'; +import {Component, model, ChangeDetectionStrategy} from '@angular/core'; +import {FormCheckboxControl} from '@angular/forms/signals'; @Component({ selector: 'app-basic-toggle', template: ` - `, @@ -66,41 +62,36 @@ export class BasicToggle implements FormCheckboxControl { checked = model(false); toggle() { - this.checked.update(val => !val); + this.checked.update((val) => !val); } } ``` ### Using your custom control -Once you've created a control, you can use it anywhere you would use a built-in input by adding the `Field` directive to it: +Once you've created a control, you can use it anywhere you would use a built-in input by adding the `FormField` directive to it: ```angular-ts -import { Component, signal, ChangeDetectionStrategy } from '@angular/core'; -import { form, Field, required } from '@angular/forms/signals'; -import { BasicInput } from './basic-input'; -import { BasicToggle } from './basic-toggle'; +import {Component, signal, ChangeDetectionStrategy} from '@angular/core'; +import {form, FormField, required} from '@angular/forms/signals'; +import {BasicInput} from './basic-input'; +import {BasicToggle} from './basic-toggle'; @Component({ - imports: [Field, BasicInput, BasicToggle], + imports: [FormField, BasicInput, BasicToggle], template: ` -
+ - + `, changeDetection: ChangeDetectionStrategy.OnPush, @@ -108,19 +99,19 @@ import { BasicToggle } from './basic-toggle'; export class Registration { registrationModel = signal({ email: '', - acceptTerms: false + acceptTerms: false, }); registrationForm = form(this.registrationModel, (schemaPath) => { - required(schemaPath.email, { message: 'Email is required' }); - required(schemaPath.acceptTerms, { message: 'You must accept the terms' }); + required(schemaPath.email, {message: 'Email is required'}); + required(schemaPath.acceptTerms, {message: 'You must accept the terms'}); }); } ``` NOTE: The schema callback parameter (`schemaPath` in these examples) is a `SchemaPathTree` object that provides paths to all fields in your form. You can name this parameter anything you like. -The `[field]` directive works identically for custom controls and built-in inputs. Signal Forms treats them the same - validation runs, state updates, and data binding works automatically. +The `[formField]` directive works identically for custom controls and built-in inputs. Signal Forms treats them the same - validation runs, state updates, and data binding works automatically. ## Understanding control interfaces @@ -135,7 +126,7 @@ The `BasicInput` and `BasicToggle` components you created implement specific con `FormValueControl` is the interface for most input types - text inputs, number inputs, date pickers, select dropdowns, and any control that edits a single value. When your component implements this interface: - **Required property**: Your component must provide a `value` model signal -- **What the Field directive does**: Binds the form field's value to your control's `value` signal +- **What the FormField directive does**: Binds the form field's value to your control's `value` signal IMPORTANT: Controls implementing `FormValueControl` must NOT have a `checked` property @@ -144,7 +135,7 @@ IMPORTANT: Controls implementing `FormValueControl` must NOT have a `checked` pr `FormCheckboxControl` is the interface for checkbox-like controls - toggles, switches, and any control that represents a boolean on/off state. When your component implements this interface: - **Required property**: Your component must provide a `checked` model signal -- **What the Field directive does**: Binds the form field's value to your control's `checked` signal +- **What the FormField directive does**: Binds the form field's value to your control's `checked` signal IMPORTANT: Controls implementing `FormCheckboxControl` must NOT have a `value` property @@ -208,23 +199,23 @@ Receive validation constraint values from the form: The "[Adding state signals](#adding-state-signals)" section below shows how to implement these properties in your controls. -### How the Field directive works +### How the FormField directive works -The `[field]` directive detects which interface your control implements and automatically binds the appropriate signals: +The `[formField]` directive detects which interface your control implements and automatically binds the appropriate signals: ```angular-ts -import { Component, signal, ChangeDetectionStrategy } from '@angular/core'; -import { form, Field, required } from '@angular/forms/signals'; -import { CustomInput } from './custom-input'; -import { CustomToggle } from './custom-toggle'; +import {Component, signal, ChangeDetectionStrategy} from '@angular/core'; +import {form, FormField, required} from '@angular/forms/signals'; +import {CustomInput} from './custom-input'; +import {CustomToggle} from './custom-toggle'; @Component({ selector: 'app-my-form', - imports: [Field, CustomInput, CustomToggle], + imports: [FormField, CustomInput, CustomToggle], template: ` -
- - + + + `, changeDetection: ChangeDetectionStrategy.OnPush, @@ -232,18 +223,18 @@ import { CustomToggle } from './custom-toggle'; export class MyForm { formModel = signal({ username: '', - subscribe: false + subscribe: false, }); userForm = form(this.formModel, (schemaPath) => { - required(schemaPath.username, { message: 'Username is required' }); + required(schemaPath.username, {message: 'Username is required'}); }); } ``` TIP: For complete coverage of creating and managing form models, see the [Form Models guide](guide/forms/signals/models). -When you bind `[field]="userForm.username"`, the Field directive: +When you bind `[formField]="userForm.username"`, the FormField directive: 1. Detects your control implements `FormValueControl` 2. Internally accesses `userForm.username().value()` and binds it to your control's `value` model signal @@ -257,9 +248,8 @@ The minimal controls shown above work, but they don't respond to form state. You Here's a comprehensive example that implements common state properties: ```angular-ts -import { Component, model, input, ChangeDetectionStrategy } from '@angular/core'; -import { FormValueControl } from '@angular/forms/signals'; -import type { ValidationError, DisabledReason } from '@angular/forms/signals'; +import {Component, model, input, ChangeDetectionStrategy} from '@angular/core'; +import {FormValueControl, WithOptionalFieldTree, ValidationError, DisabledReason} from '@angular/forms/signals'; @Component({ selector: 'app-stateful-input', @@ -310,40 +300,40 @@ export class StatefulInput implements FormValueControl { readonly = input(false); hidden = input(false); invalid = input(false); - errors = input([]); + errors = input[]>([]); } ``` As a result, you can use the control with validation and state management: ```angular-ts -import { Component, signal, ChangeDetectionStrategy } from '@angular/core'; -import { form, Field, required, email } from '@angular/forms/signals'; -import { StatefulInput } from './stateful-input'; +import {Component, signal, ChangeDetectionStrategy} from '@angular/core'; +import {form, FormField, required, email} from '@angular/forms/signals'; +import {StatefulInput} from './stateful-input'; @Component({ - imports: [Field, StatefulInput], + imports: [FormField, StatefulInput], template: ` -
+ `, changeDetection: ChangeDetectionStrategy.OnPush, }) export class Login { - loginModel = signal({ email: '' }); + loginModel = signal({email: ''}); loginForm = form(this.loginModel, (schemaPath) => { - required(schemaPath.email, { message: 'Email is required' }); - email(schemaPath.email, { message: 'Enter a valid email address' }); + required(schemaPath.email, {message: 'Email is required'}); + email(schemaPath.email, {message: 'Enter a valid email address'}); }); } ``` -When the user types an invalid email, the Field directive automatically updates `invalid()` and `errors()`. Your control can display the validation feedback. +When the user types an invalid email, the FormField directive automatically updates `invalid()` and `errors()`. Your control can display the validation feedback. ### Signal types for state properties @@ -356,8 +346,9 @@ Controls sometimes display values differently than the form model stores them - Use `linkedSignal()` (from `@angular/core`) to transform the model value for display, and handle input events to parse user input back to the storage format: ```angular-ts -import { ChangeDetectionStrategy, Component, linkedSignal, model } from '@angular/core'; -import { FormValueControl } from '@angular/forms/signals'; +import {formatCurrency} from '@angular/common'; +import {ChangeDetectionStrategy, Component, linkedSignal, model} from '@angular/core'; +import {FormValueControl} from '@angular/forms/signals'; @Component({ selector: 'app-currency-input', @@ -376,7 +367,7 @@ export class CurrencyInput implements FormValueControl { readonly value = model.required(); // Stores display value ("1,234.56") - readonly displayValue = linkedSignal(() => formatCurrency(this.value())); + readonly displayValue = linkedSignal(() => formatCurrency(this.value(), 'en', 'USD')); // Update the model from the display value. updateModel() { @@ -384,22 +375,17 @@ export class CurrencyInput implements FormValueControl { } } -// Converts a number to a currency string (e.g. 1234.56 -> "1,234.56"). -function formatCurrency(value: number) { - return value.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ','); -} - -// Converts a currency string to a number (e.g. "1,234.56" -> 1234.56). -function parseCurrency(value: string) { - return parseFloat(value.replace(/,/g, '')); +// Converts a currency string to a number (e.g. "USD1,234.56" -> 1234.56). +function parseCurrency(value: string): number { + return parseFloat(value.replace(/^[^\d-]+/, '').replace(/,/g, '')); } ``` ## Validation integration -Controls display validation state but don't perform validation. Validation happens in the form schema - your control receives `invalid()` and `errors()` signals from the Field directive and displays them (as shown in the StatefulInput example above). +Controls display validation state but don't perform validation. Validation happens in the form schema - your control receives `invalid()` and `errors()` signals from the FormField directive and displays them (as shown in the StatefulInput example above). -The Field directive also passes validation constraint values like `required`, `min`, `max`, `minLength`, `maxLength`, and `pattern`. Your control can use these to enhance the UI: +The FormField directive also passes validation constraint values like `required`, `min`, `max`, `minLength`, `maxLength`, and `pattern`. Your control can use these to enhance the UI: ```ts export class NumberInput implements FormValueControl { @@ -412,11 +398,11 @@ export class NumberInput implements FormValueControl { } ``` -When you add `min()` and `max()` validation rules to the schema, the Field directive passes these values to your control. Use them to apply HTML5 attributes or show constraint hints in your template. +When you add `min()` and `max()` validation rules to the schema, the FormField directive passes these values to your control. Use them to apply HTML5 attributes or show constraint hints in your template. IMPORTANT: Don't implement validation logic in your control. Define validation rules in the form schema and let your control display the results: -```typescript +```ts {avoid} // Avoid: Validation in control export class BadControl implements FormValueControl { value = model(''); @@ -424,7 +410,9 @@ export class BadControl implements FormValueControl { return this.value().length >= 8; } // Don't do this! } +``` +```ts {prefer} // Good: Validation in schema, control displays results accountForm = form(this.accountModel, (schemaPath) => { minLength(schemaPath.password, 8, {message: 'Password must be at least 8 characters'}); diff --git a/adev-ja/src/content/guide/forms/signals/custom-controls.md b/adev-ja/src/content/guide/forms/signals/custom-controls.md index 49aebe6ac2..951ae37bb6 100644 --- a/adev-ja/src/content/guide/forms/signals/custom-controls.md +++ b/adev-ja/src/content/guide/forms/signals/custom-controls.md @@ -4,7 +4,7 @@ NOTE: このガイドは、[Signal Formsの基本](essentials/signal-forms)に ブラウザの組み込みフォームコントロール（`input`、`select`、`textarea`など）は一般的なケースを扱いますが、アプリケーションではしばしば特殊な入力が必要になります。カレンダーUIを持つ日付ピッカー、書式設定ツールバーを持つリッチテキストエディタ、オートコンプリート機能を持つタグセレクターなどは、すべてカスタム実装が必要です。 -シグナルフォームは、特定のインターフェースを実装するあらゆるコンポーネントと連携して動作します。**コントロールインターフェース**は、コンポーネントがフォームシステムと通信するためのプロパティとシグナルを定義します。コンポーネントがこれらのインターフェースのいずれかを実装すると、`[field]`ディレクティブが自動的にコントロールをフォームの状態、バリデーション、データバインディングに接続します。 +シグナルフォームは、特定のインターフェースを実装するあらゆるコンポーネントと連携して動作します。**コントロールインターフェース**は、コンポーネントがフォームシステムと通信するためのプロパティとシグナルを定義します。コンポーネントがこれらのインターフェースのいずれかを実装すると、`[formField]`ディレクティブが自動的にコントロールをフォームの状態、バリデーション、データバインディングに接続します。 ## 基本的なカスタムコントロールの作成 {#creating-a-basic-custom-control} @@ -15,8 +15,8 @@ NOTE: このガイドは、[Signal Formsの基本](essentials/signal-forms)に 基本的なカスタム入力は、`FormValueControl`インターフェースを実装し、必須の`value`モデルシグナルを定義するだけで済みます。 ```angular-ts -import { Component, model } from '@angular/core'; -import { FormValueControl } from '@angular/forms/signals'; +import {Component, model} from '@angular/core'; +import {FormValueControl} from '@angular/forms/signals'; @Component({ selector: 'app-basic-input', @@ -41,21 +41,17 @@ export class BasicInput implements FormValueControl { チェックボックス形式のコントロールには、次の2つが必要です: -1. `Field`ディレクティブがフォームコントロールとして認識できるように、`FormCheckboxControl`インターフェースを実装する +1. `FormField`ディレクティブがフォームコントロールとして認識できるように、`FormCheckboxControl`インターフェースを実装する 2. `checked`モデルシグナルを提供する ```angular-ts -import { Component, model, ChangeDetectionStrategy } from '@angular/core'; -import { FormCheckboxControl } from '@angular/forms/signals'; +import {Component, model, ChangeDetectionStrategy} from '@angular/core'; +import {FormCheckboxControl} from '@angular/forms/signals'; @Component({ selector: 'app-basic-toggle', template: ` - `, @@ -66,41 +62,36 @@ export class BasicToggle implements FormCheckboxControl { checked = model(false); toggle() { - this.checked.update(val => !val); + this.checked.update((val) => !val); } } ``` ### カスタムコントロールの使用 {#using-your-custom-control} -コントロールを作成したら、`Field`ディレクティブを追加することで、組み込みの入力を使用する場所ならどこでも使用できます: +コントロールを作成したら、`FormField`ディレクティブを追加することで、組み込みの入力を使用する場所ならどこでも使用できます: ```angular-ts -import { Component, signal, ChangeDetectionStrategy } from '@angular/core'; -import { form, Field, required } from '@angular/forms/signals'; -import { BasicInput } from './basic-input'; -import { BasicToggle } from './basic-toggle'; +import {Component, signal, ChangeDetectionStrategy} from '@angular/core'; +import {form, FormField, required} from '@angular/forms/signals'; +import {BasicInput} from './basic-input'; +import {BasicToggle} from './basic-toggle'; @Component({ - imports: [Field, BasicInput, BasicToggle], + imports: [FormField, BasicInput, BasicToggle], template: ` -
+ - + `, changeDetection: ChangeDetectionStrategy.OnPush, @@ -108,19 +99,19 @@ import { BasicToggle } from './basic-toggle'; export class Registration { registrationModel = signal({ email: '', - acceptTerms: false + acceptTerms: false, }); registrationForm = form(this.registrationModel, (schemaPath) => { - required(schemaPath.email, { message: 'Email is required' }); - required(schemaPath.acceptTerms, { message: 'You must accept the terms' }); + required(schemaPath.email, {message: 'Email is required'}); + required(schemaPath.acceptTerms, {message: 'You must accept the terms'}); }); } ``` NOTE: スキーマのコールバックパラメータ（この例では`schemaPath`）は、フォーム内のすべてのフィールドへのパスを提供する`SchemaPathTree`オブジェクトです。このパラメータには好きな名前を付けることができます。 -`[field]`ディレクティブは、カスタムコントロールと組み込みの入力で同じように動作します。シグナルフォームはそれらを同じように扱います - バリデーションの実行、状態の更新、データバインディングが自動的に機能します。 +`[formField]`ディレクティブは、カスタムコントロールと組み込みの入力で同じように動作します。シグナルフォームはそれらを同じように扱います - バリデーションの実行、状態の更新、データバインディングが自動的に機能します。 ## コントロールインターフェースの理解 {#understanding-control-interfaces} @@ -135,7 +126,7 @@ NOTE: スキーマのコールバックパラメータ（この例では`schemaP `FormValueControl`は、テキスト入力、数値入力、日付ピッカー、セレクトドロップダウンなど、単一の値を編集するほとんどの入力タイプのためのインターフェースです。コンポーネントがこのインターフェースを実装する場合： - **必須プロパティ**: コンポーネントは`value`モデルシグナルを提供する必要があります -- **Fieldディレクティブの役割**: フォームフィールドの値をコントロールの`value`シグナルにバインドします +- **FormFieldディレクティブの役割**: フォームフィールドの値をコントロールの`value`シグナルにバインドします IMPORTANT: `FormValueControl`を実装するコントロールは`checked`プロパティを持ってはいけません @@ -208,23 +199,23 @@ NOTE: `disabledReasons`は`DisabledReason`オブジェクトの配列です。 以下の「[状態シグナルの追加](#adding-state-signals)」セクションでは、これらのプロパティをコントロールに実装する方法を示します。 -### Fieldディレクティブの仕組み {#how-the-field-directive-works} +### FormFieldディレクティブの仕組み {#how-the-formfield-directive-works} `[field]`ディレクティブは、コントロールがどのインターフェースを実装しているかを検出し、適切なシグナルを自動的にバインドします： ```angular-ts -import { Component, signal, ChangeDetectionStrategy } from '@angular/core'; -import { form, Field, required } from '@angular/forms/signals'; -import { CustomInput } from './custom-input'; -import { CustomToggle } from './custom-toggle'; +import {Component, signal, ChangeDetectionStrategy} from '@angular/core'; +import {form, FormField, required} from '@angular/forms/signals'; +import {CustomInput} from './custom-input'; +import {CustomToggle} from './custom-toggle'; @Component({ selector: 'app-my-form', - imports: [Field, CustomInput, CustomToggle], + imports: [FormField, CustomInput, CustomToggle], template: ` -
- - + + + `, changeDetection: ChangeDetectionStrategy.OnPush, @@ -232,18 +223,18 @@ import { CustomToggle } from './custom-toggle'; export class MyForm { formModel = signal({ username: '', - subscribe: false + subscribe: false, }); userForm = form(this.formModel, (schemaPath) => { - required(schemaPath.username, { message: 'Username is required' }); + required(schemaPath.username, {message: 'Username is required'}); }); } ``` TIP: フォームモデルの作成と管理に関する完全な情報については、[フォームモデルガイド](guide/forms/signals/models)を参照してください。 -`[field]="userForm.username"`をバインドすると、Fieldディレクティブは次のようになります： +`[formField]="userForm.username"`をバインドすると、FormFieldディレクティブは次のようになります: 1. コントロールが`FormValueControl`を実装していることを検出します 2. 内部で`userForm.username().value()`にアクセスし、それをコントロールの`value`モデルシグナルにバインドします @@ -257,9 +248,8 @@ TIP: フォームモデルの作成と管理に関する完全な情報につい 以下は、一般的な状態プロパティを実装する包括的な例です: ```angular-ts -import { Component, model, input, ChangeDetectionStrategy } from '@angular/core'; -import { FormValueControl } from '@angular/forms/signals'; -import type { ValidationError, DisabledReason } from '@angular/forms/signals'; +import {Component, model, input, ChangeDetectionStrategy} from '@angular/core'; +import {FormValueControl, WithOptionalFieldTree, ValidationError, DisabledReason} from '@angular/forms/signals'; @Component({ selector: 'app-stateful-input', @@ -310,40 +300,40 @@ export class StatefulInput implements FormValueControl { readonly = input(false); hidden = input(false); invalid = input(false); - errors = input([]); + errors = input[]>([]); } ``` その結果、バリデーションと状態管理を備えたコントロールを使用できます: ```angular-ts -import { Component, signal, ChangeDetectionStrategy } from '@angular/core'; -import { form, Field, required, email } from '@angular/forms/signals'; -import { StatefulInput } from './stateful-input'; +import {Component, signal, ChangeDetectionStrategy} from '@angular/core'; +import {form, FormField, required, email} from '@angular/forms/signals'; +import {StatefulInput} from './stateful-input'; @Component({ - imports: [Field, StatefulInput], + imports: [FormField, StatefulInput], template: ` -
+ `, changeDetection: ChangeDetectionStrategy.OnPush, }) export class Login { - loginModel = signal({ email: '' }); + loginModel = signal({email: ''}); loginForm = form(this.loginModel, (schemaPath) => { - required(schemaPath.email, { message: 'Email is required' }); - email(schemaPath.email, { message: 'Enter a valid email address' }); + required(schemaPath.email, {message: 'Email is required'}); + email(schemaPath.email, {message: 'Enter a valid email address'}); }); } ``` -ユーザーが無効なメールアドレスを入力すると、`Field`ディレクティブが自動的に`invalid()`と`errors()`を更新します。あなたのコントロールは、そのバリデーションフィードバックを表示できます。 +ユーザーが無効なメールアドレスを入力すると、`FormField`ディレクティブが自動的に`invalid()`と`errors()`を更新します。あなたのコントロールは、そのバリデーションフィードバックを表示できます。 ### 状態プロパティのシグナルタイプ {#signal-types-for-state-properties} @@ -356,8 +346,9 @@ export class Login { `@angular/core`の`linkedSignal()`を使用してモデルの値を表示用に変換し、入力イベントを処理してユーザー入力を格納形式にパースして戻します: ```angular-ts -import { ChangeDetectionStrategy, Component, linkedSignal, model } from '@angular/core'; -import { FormValueControl } from '@angular/forms/signals'; +import {formatCurrency} from '@angular/common'; +import {ChangeDetectionStrategy, Component, linkedSignal, model} from '@angular/core'; +import {FormValueControl} from '@angular/forms/signals'; @Component({ selector: 'app-currency-input', @@ -376,7 +367,7 @@ export class CurrencyInput implements FormValueControl { readonly value = model.required(); // 表示値 (「1,234.56」) を格納します - readonly displayValue = linkedSignal(() => formatCurrency(this.value())); + readonly displayValue = linkedSignal(() => formatCurrency(this.value(), 'en', 'USD')); // 表示値からモデルを更新します updateModel() { @@ -384,22 +375,17 @@ export class CurrencyInput implements FormValueControl { } } -// 数値を通貨文字列に変換します (例: 1234.56 -> 「1,234.56」) -function formatCurrency(value: number) { - return value.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ','); -} - -// 通貨文字列を数値に変換します (例: 「1,234.56」 -> 1234.56) -function parseCurrency(value: string) { - return parseFloat(value.replace(/,/g, '')); +// 通貨文字列を数値に変換します (例: 「USD1,234.56」 -> 1234.56) +function parseCurrency(value: string): number { + return parseFloat(value.replace(/^[^\d-]+/, '').replace(/,/g, '')); } ``` ## バリデーションの統合 {#validation-integration} -コントロールはバリデーションの状態を表示しますが、バリデーションは実行しません。バリデーションはフォームスキーマで行われます。コントロールは`Field`ディレクティブから`invalid()`と`errors()`シグナルを受け取り、それらを表示します（上記の`StatefulInput`の例で示されているように）。 +コントロールはバリデーションの状態を表示しますが、バリデーションは実行しません。バリデーションはフォームスキーマで行われます。コントロールは`FormField`ディレクティブから`invalid()`と`errors()`シグナルを受け取り、それらを表示します（上記の`StatefulInput`の例で示されているように）。 -`Field`ディレクティブは、`required`、`min`、`max`、`minLength`、`maxLength`、`pattern`のようなバリデーション制約の値も渡します。コントロールはこれらを使用してUIを強化できます： +`FormField`ディレクティブは、`required`、`min`、`max`、`minLength`、`maxLength`、`pattern`のようなバリデーション制約の値も渡します。コントロールはこれらを使用してUIを強化できます: ```ts export class NumberInput implements FormValueControl { @@ -412,11 +398,11 @@ export class NumberInput implements FormValueControl { } ``` -スキーマに`min()`と`max()`のバリデーションルールを追加すると、`Field`ディレクティブはこれらの値をコントロールに渡します。これらを使用して、HTML5属性を適用したり、テンプレートに制約のヒントを表示したりします。 +スキーマに`min()`と`max()`のバリデーションルールを追加すると、`FormField`ディレクティブはこれらの値をコントロールに渡します。これらを使用して、HTML5属性を適用したり、テンプレートに制約のヒントを表示したりします。 -IMPORTANT: コントロールにバリデーションロジックを実装しないでください。バリデーションルールはフォームスキーマで定義し、コントロールにはその結果を表示させるようにしてください： +IMPORTANT: コントロールにバリデーションロジックを実装しないでください。バリデーションルールはフォームスキーマで定義し、コントロールにはその結果を表示させるようにしてください: -```typescript +```ts {avoid} // 悪い例：コントロール内でのバリデーション export class BadControl implements FormValueControl { value = model(''); @@ -424,7 +410,9 @@ export class BadControl implements FormValueControl { return this.value().length >= 8; } // これは行わないでください！ } +``` +```ts {prefer} // 良い例：スキーマでバリデーションし、コントロールは結果を表示 accountForm = form(this.accountModel, (schemaPath) => { minLength(schemaPath.password, 8, {message: 'Password must be at least 8 characters'}); diff --git a/adev-ja/src/content/guide/forms/signals/designing-your-form-model.md b/adev-ja/src/content/guide/forms/signals/designing-your-form-model.md index 007f092d3a..750d8ac170 100644 --- a/adev-ja/src/content/guide/forms/signals/designing-your-form-model.md +++ b/adev-ja/src/content/guide/forms/signals/designing-your-form-model.md @@ -109,7 +109,7 @@ interface BeverageOrderFormModel { ### Avoid `undefined` -A form model model must not contain `undefined` values or properties. In Signal Forms the structure of the form is derived from the structure of the model, and `undefined` signifies the _absence of a field_, rather than a field with an empty value. This means you must also avoid optional fields (e.g., `{property?: string}`), as they implicitly allow `undefined`. +A form model must not contain `undefined` values or properties. In Signal Forms the structure of the form is derived from the structure of the model, and `undefined` signifies the _absence of a field_, rather than a field with an empty value. This means you must also avoid optional fields (e.g., `{property?: string}`), as they implicitly allow `undefined`. To represent a property with an empty value in your form model, use a value that the UI control understands to mean "empty" (e.g. `""` for a ``). If you're designing a custom UI control, `null` often works as a good value to signify "empty". @@ -161,12 +161,12 @@ createAccountForm = form( ); ``` -Using this representation, all of the subfields we need now exist, and we can bind them using the `[field]` directive in our template. +Using this representation, all of the subfields we need now exist, and we can bind them using the `[formField]` directive in our template. ```html -First: Last: - Username: - +First: Last: + Username: + ``` #### Fields that are conditionally hidden or unavailable @@ -289,8 +289,8 @@ interface UserProfileFormModel { In the template, we bind the `location` field directly to our custom control: ```html -Username: Location: - +Username: Location: + ``` Here, `` consumes and produces the entire `Location` object (or `null`), and doesn't access `userForm.location.lat` or `userForm.location.lng`. Therefore, `location` can safely have a dynamic shape without violating the principles of model-driven forms. @@ -409,7 +409,7 @@ class MyForm { } ``` -The examples above show a pure conversion from the form model to the domain model. However, it is perfectly acceptable to consider the full form state in addition to just the form model value. For example, to save bytes me might want to only send partial updates to the server based on what the user changed. In this case our conversion function could be designed to take the entire form state and return a sparse domain model based on the form's values and dirtiness. +The examples above show a pure conversion from the form model to the domain model. However, it is perfectly acceptable to consider the full form state in addition to just the form model value. For example, to save bytes we might want to only send partial updates to the server based on what the user changed. In this case our conversion function could be designed to take the entire form state and return a sparse domain model based on the form's values and dirtiness. ```ts type Sparse = T extends object ? { diff --git a/adev-ja/src/content/guide/forms/signals/field-state-management.en.md b/adev-ja/src/content/guide/forms/signals/field-state-management.en.md index 093c603906..4107e939d4 100644 --- a/adev-ja/src/content/guide/forms/signals/field-state-management.en.md +++ b/adev-ja/src/content/guide/forms/signals/field-state-management.en.md @@ -4,21 +4,21 @@ Signal Forms' field state allows you to react to user interactions by providing ## Understanding field state -When you create a form with the `form()` function, it returns a **field tree** - an object structure that mirrors your form model. Each field in the tree is accessible via dot notation (like `form.email`). +When you create a form with the [`form()`](api/forms/signals/form) function, it returns a **field tree** - an object structure that mirrors your form model. Each field in the tree is accessible via dot notation (like [`form.email`](api/forms/signals/form#email)). ### Accessing field state -When you call any field in the field tree as a function (like `form.email()`), it returns a `FieldState` object containing reactive signals that track the field's validation, interaction, and availability state. For example, the `invalid()` signal tells you whether the field has validation errors: +When you call any field in the field tree as a function (like [`form.email()`](api/forms/signals/form#email)), it returns a `FieldState` object containing reactive signals that track the field's validation, interaction, and availability state. For example, the `invalid()` signal tells you whether the field has validation errors: ```angular-ts -import { Component, signal } from '@angular/core' -import { form, Field, required, email } from '@angular/forms/signals' +import {Component, signal} from '@angular/core'; +import {form, FormField, required, email} from '@angular/forms/signals'; @Component({ selector: 'app-registration', - imports: [Field], + imports: [FormField], template: ` - + @if (registrationForm.email().invalid()) {

Email has validation errors:

@@ -28,18 +28,18 @@ import { form, Field, required, email } from '@angular/forms/signals' } } - ` + `, }) export class Registration { registrationModel = signal({ email: '', - password: '' - }) + password: '', + }); registrationForm = form(this.registrationModel, (schemaPath) => { - required(schemaPath.email, { message: 'Email is required' }) - email(schemaPath.email, { message: 'Enter a valid email address' }) - }) + required(schemaPath.email, {message: 'Email is required'}); + email(schemaPath.email, {message: 'Enter a valid email address'}); + }); } ``` @@ -47,7 +47,7 @@ In this example, the template checks `registrationForm.email().invalid()` to det ### Field state signals -The most commonly used signal is `value()`, a [writable signal](guide/forms/signals/models#updating-models) that provides access to the field's current value: +The most commonly used signal is `value()`, a `WritableSignal` that provides access to the field's current value: ```ts const emailValue = registrationForm.email().value(); @@ -83,18 +83,19 @@ Use `valid()` and `invalid()` to check validation status: ```angular-ts @Component({ template: ` - + @if (loginForm.email().invalid()) {

Email is invalid

- } @if (loginForm.email().valid()) { + } + @if (loginForm.email().valid()) {

Email looks good

} - ` + `, }) export class Login { - loginModel = signal({ email: '', password: '' }) - loginForm = form(this.loginModel) + loginModel = signal({email: '', password: ''}); + loginForm = form(this.loginModel); } ``` @@ -109,11 +110,11 @@ When checking validity in code, use `invalid()` instead of `!valid()` if you wan Access the array of validation errors with `errors()`. Each error object contains: -| Property | Description | -| --------- | --------------------------------------------------------------- | -| `kind` | The validation rule that failed (such as "required" or "email") | -| `message` | Optional human-readable error message | -| `field` | Reference to the `FieldTree` where the error occurred | +| Property | Description | +| ----------- | --------------------------------------------------------------- | +| `kind` | The validation rule that failed (such as "required" or "email") | +| `message` | Optional human-readable error message | +| `fieldTree` | Reference to the `FieldTree` where the error occurred | NOTE: The `message` property is optional. Validators can provide custom error messages, but if not specified, you may need to map error `kind` values to your own messages. @@ -122,7 +123,7 @@ Here's an example of how to display errors in your template: ```angular-ts @Component({ template: ` - + @if (loginForm.email().errors().length > 0) {
@@ -144,7 +145,7 @@ The `pending()` signal indicates async validation is in progress: ```angular-ts @Component({ template: ` - + @if (signupForm.email().pending()) {

Checking if email is available...

@@ -176,19 +177,19 @@ The `dirty()` signal becomes `true` when the user modifies an interactive field' ```angular-ts @Component({ template: ` -
- - + + + @if (profileForm().dirty()) {

You have unsaved changes

} - ` + `, }) export class Profile { - profileModel = signal({ name: 'Alice', bio: 'Developer' }) - profileForm = form(this.profileModel) + profileModel = signal({name: 'Alice', bio: 'Developer'}); + profileForm = form(this.profileModel); } ``` @@ -222,14 +223,14 @@ The `disabled()` signal indicates whether a field accepts user input. Disabled f ```angular-ts import { Component, signal } from '@angular/core' -import { form, Field, disabled } from '@angular/forms/signals' +import { form, FormField, disabled } from '@angular/forms/signals' @Component({ selector: 'app-order', - imports: [Field], + imports: [FormField], template: ` - - + + @if (orderForm.couponCode().disabled()) {

Coupon code is only available for orders over $50

@@ -264,35 +265,35 @@ Disabled fields don't contribute to the parent form's validation state. Even if The `hidden()` signal indicates whether a field is conditionally hidden. Use `hidden()` with `@if` to show or hide fields based on conditions: ```angular-ts -import { Component, signal } from '@angular/core' -import { form, Field, hidden } from '@angular/forms/signals' +import {Component, signal} from '@angular/core'; +import {form, FormField, hidden} from '@angular/forms/signals'; @Component({ selector: 'app-profile', - imports: [Field], + imports: [FormField], template: ` @if (!profileForm.publicUrl().hidden()) { } - ` + `, }) export class Profile { profileModel = signal({ isPublic: false, - publicUrl: '' - }) + publicUrl: '', + }); - profileForm = form(this.profileModel, schemaPath => { - hidden(schemaPath.publicUrl, ({valueOf}) => !valueOf(schemaPath.isPublic)) - }) + profileForm = form(this.profileModel, (schemaPath) => { + hidden(schemaPath.publicUrl, ({valueOf}) => !valueOf(schemaPath.isPublic)); + }); } ``` @@ -303,37 +304,37 @@ Hidden fields don't participate in validation. If a required field is hidden, it The `readonly()` signal indicates whether a field is readonly. Readonly fields display their value but users cannot edit them: ```angular-ts -import { Component, signal } from '@angular/core' -import { form, Field, readonly } from '@angular/forms/signals' +import {Component, signal} from '@angular/core'; +import {form, FormField, readonly} from '@angular/forms/signals'; @Component({ selector: 'app-account', - imports: [Field], + imports: [FormField], template: ` - ` + `, }) export class Account { accountModel = signal({ username: 'johndoe', - email: 'john@example.com' - }) + email: 'john@example.com', + }); - accountForm = form(this.accountModel, schemaPath => { - readonly(schemaPath.username) - }) + accountForm = form(this.accountModel, (schemaPath) => { + readonly(schemaPath.username); + }); } ``` -NOTE: The `[field]` directive automatically binds the `readonly` attribute based on the field's `readonly()` state, so you don't need to manually add `[readonly]="field().readonly()"`. +NOTE: The `[formField]` directive automatically binds the `readonly` attribute based on the field's `readonly()` state, so you don't need to manually add `[readonly]="field().readonly()"`. Like disabled and hidden fields, readonly fields are non-interactive and don't affect parent form state. The `readonly()` state affects editability and validation, but does not change the field's value. @@ -354,17 +355,17 @@ The root form is also a field in the field tree. When you call it as a function, ```angular-ts @Component({ template: ` -
- - + + + - ` + `, }) export class Login { - loginModel = signal({ email: '', password: '' }) - loginForm = form(this.loginModel) + loginModel = signal({email: '', password: ''}); + loginForm = form(this.loginModel); } ``` @@ -455,29 +456,29 @@ Field state signals integrate seamlessly with Angular templates, enabling reacti Show errors only after a user has interacted with a field: ```angular-ts -import { Component, signal } from '@angular/core' -import { form, Field, email } from '@angular/forms/signals' +import {Component, signal} from '@angular/core'; +import {form, FormField, email} from '@angular/forms/signals'; @Component({ selector: 'app-signup', - imports: [Field], + imports: [FormField], template: ` @if (signupForm.email().touched() && signupForm.email().invalid()) {

{{ signupForm.email().errors()[0].message }}

} - ` + `, }) export class Signup { - signupModel = signal({ email: '', password: '' }) + signupModel = signal({email: '', password: ''}); - signupForm = form(this.signupModel, schemaPath => { - email(schemaPath.email) - }) + signupForm = form(this.signupModel, (schemaPath) => { + email(schemaPath.email); + }); } ``` @@ -488,35 +489,35 @@ This pattern prevents showing errors before users have had a chance to interact Use the `hidden()` signal with `@if` to show or hide fields conditionally: ```angular-ts -import { Component, signal } from '@angular/core' -import { form, Field, hidden } from '@angular/forms/signals' +import {Component, signal} from '@angular/core'; +import {form, FormField, hidden} from '@angular/forms/signals'; @Component({ selector: 'app-order', - imports: [Field], + imports: [FormField], template: ` @if (!orderForm.shippingAddress().hidden()) { } - ` + `, }) export class Order { orderModel = signal({ requiresShipping: false, - shippingAddress: '' - }) + shippingAddress: '', + }); - orderForm = form(this.orderModel, schemaPath => { - hidden(schemaPath.shippingAddress, ({valueOf}) => !valueOf(schemaPath.requiresShipping)) - }) + orderForm = form(this.orderModel, (schemaPath) => { + hidden(schemaPath.shippingAddress, ({valueOf}) => !valueOf(schemaPath.requiresShipping)); + }); } ``` @@ -594,12 +595,22 @@ While field state typically updates through user interactions (typing, focusing, #### Form submission -When a user submits a form, use the `submit()` function to handle validation and reveal errors: +When a user submits a form, use the `submit()` function to handle validation and reveal errors. -```ts -import {Component, signal} from '@angular/core'; -import {form, submit, required, email} from '@angular/forms/signals'; +Signal Forms handles validation through its own system, so you need to prevent the browser's default form behavior. Add `novalidate` to the `
` element to disable native HTML validation (such as browser tooltip popups for `required` or `type="email"` fields), and call `$event.preventDefault()` in your submit handler to prevent the browser from reloading the page: + +```angular-ts +@Component({ + template: ` + + + + + + + `, +}) export class Registration { registrationModel = signal({username: '', email: '', password: ''}); @@ -609,13 +620,14 @@ export class Registration { required(schemaPath.password); }); - onSubmit() { + onSubmit(event: Event) { + event.preventDefault(); submit(this.registrationForm, async () => { this.submitToServer(); }); } - submitToServer() { + private submitToServer() { // Send data to server } } @@ -653,14 +665,14 @@ This two-step reset ensures the form is ready for new input without showing stal You can apply custom styles to your form by binding CSS classes based on the validation state: ```angular-ts -import { Component, signal } from '@angular/core' -import { form, Field, email } from '@angular/forms/signals' +import {Component, signal} from '@angular/core'; +import {form, FormField, email} from '@angular/forms/signals'; @Component({ template: ` @@ -674,14 +686,14 @@ import { form, Field, email } from '@angular/forms/signals' input.is-valid { border: 2px solid green; } - ` + `, }) export class StyleExample { - model = signal({ email: '' }) + model = signal({email: ''}); - form = form(this.model, schemaPath => { - email(schemaPath.email) - }) + form = form(this.model, (schemaPath) => { + email(schemaPath.email); + }); } ``` diff --git a/adev-ja/src/content/guide/forms/signals/field-state-management.md b/adev-ja/src/content/guide/forms/signals/field-state-management.md index 908c28f8f2..352b1f6a39 100644 --- a/adev-ja/src/content/guide/forms/signals/field-state-management.md +++ b/adev-ja/src/content/guide/forms/signals/field-state-management.md @@ -4,21 +4,21 @@ ## フィールドの状態を理解する -`form()`関数でフォームを作成すると、**フィールドツリー**が返されます。これはフォームモデルを反映したオブジェクト構造です。ツリー内の各フィールドには、ドット記法（`form.email`など）でアクセスできます。 +[`form()`](api/forms/signals/form)関数でフォームを作成すると、**フィールドツリー**が返されます。これはフォームモデルを反映したオブジェクト構造です。ツリー内の各フィールドには、ドット記法（[`form.email`](api/forms/signals/form#email)など）でアクセスできます。 ### フィールドの状態へのアクセス {#accessing-field-state} -フィールドツリー内の任意のフィールドを関数として（`form.email()`のように）呼び出すと、`FieldState`オブジェクトが返されます。これには、フィールドのバリデーション、インタラクション、および可用性の状態を追跡するリアクティブなシグナルが含まれています。たとえば、`invalid()`シグナルは、フィールドにバリデーションエラーがあるかどうかを示します: +フィールドツリー内の任意のフィールドを関数として（[`form.email()`](api/forms/signals/form#email)のように）呼び出すと、`FieldState`オブジェクトが返されます。これには、フィールドのバリデーション、インタラクション、および可用性の状態を追跡するリアクティブなシグナルが含まれています。たとえば、`invalid()`シグナルは、フィールドにバリデーションエラーがあるかどうかを示します: ```angular-ts -import { Component, signal } from '@angular/core' -import { form, Field, required, email } from '@angular/forms/signals' +import {Component, signal} from '@angular/core'; +import {form, FormField, required, email} from '@angular/forms/signals'; @Component({ selector: 'app-registration', - imports: [Field], + imports: [FormField], template: ` - + @if (registrationForm.email().invalid()) {

Email has validation errors:

@@ -28,18 +28,18 @@ import { form, Field, required, email } from '@angular/forms/signals' } } - ` + `, }) export class Registration { registrationModel = signal({ email: '', - password: '' - }) + password: '', + }); registrationForm = form(this.registrationModel, (schemaPath) => { - required(schemaPath.email, { message: 'Email is required' }) - email(schemaPath.email, { message: 'Enter a valid email address' }) - }) + required(schemaPath.email, {message: 'Email is required'}); + email(schemaPath.email, {message: 'Enter a valid email address'}); + }); } ``` @@ -47,7 +47,7 @@ export class Registration { ### フィールドの状態シグナル {#field-state-signals} -最も一般的に使用されるシグナルは`value()`です。これはフィールドの現在の値へのアクセスを提供する[書き込み可能なシグナル](guide/forms/signals/models#updating-models)です: +最も一般的に使用されるシグナルは`value()`です。これはフィールドの現在の値へのアクセスを提供する`WritableSignal`です: ```ts const emailValue = registrationForm.email().value(); @@ -83,18 +83,19 @@ NOTE: このガイドでは、テンプレートやロジックでバリデー ```angular-ts @Component({ template: ` - + @if (loginForm.email().invalid()) {

Email is invalid

- } @if (loginForm.email().valid()) { + } + @if (loginForm.email().valid()) {

Email looks good

} - ` + `, }) export class Login { - loginModel = signal({ email: '', password: '' }) - loginForm = form(this.loginModel) + loginModel = signal({email: '', password: ''}); + loginForm = form(this.loginModel); } ``` @@ -109,11 +110,11 @@ export class Login { `errors()`でバリデーションエラーの配列にアクセスします。各エラーオブジェクトには以下が含まれます: -| プロパティ | 説明 | -| --------- | --------------------------------------------------------------- | -| `kind` | 失敗したバリデーションルール（"required"や"email"など） | -| `message` | オプションの人間が読める形式のエラーメッセージ | -| `field` | エラーが発生した`FieldTree`への参照 | +| プロパティ | 説明 | +| ----------- | --------------------------------------------------------------- | +| `kind` | 失敗したバリデーションルール（"required"や"email"など） | +| `message` | オプションの人間が読める形式のエラーメッセージ | +| `fieldTree` | エラーが発生した`FieldTree`への参照 | NOTE: `message`プロパティはオプションです。バリデーターはカスタムエラーメッセージを提供できますが、指定されていない場合は、エラーの`kind`値を独自メッセージにマッピングする必要があるかもしれません。 @@ -122,7 +123,7 @@ NOTE: `message`プロパティはオプションです。バリデーターは ```angular-ts @Component({ template: ` - + @if (loginForm.email().errors().length > 0) {
@@ -144,7 +145,7 @@ NOTE: `message`プロパティはオプションです。バリデーターは ```angular-ts @Component({ template: ` - + @if (signupForm.email().pending()) {

Checking if email is available...

@@ -176,19 +177,19 @@ NOTE: `message`プロパティはオプションです。バリデーターは ```angular-ts @Component({ template: ` -
- - + + + @if (profileForm().dirty()) {

You have unsaved changes

} - ` + `, }) export class Profile { - profileModel = signal({ name: 'Alice', bio: 'Developer' }) - profileForm = form(this.profileModel) + profileModel = signal({name: 'Alice', bio: 'Developer'}); + profileForm = form(this.profileModel); } ``` @@ -222,14 +223,14 @@ NOTE: 非表示、無効、読み取り専用のフィールドは非インタ ```angular-ts import { Component, signal } from '@angular/core' -import { form, Field, disabled } from '@angular/forms/signals' +import { form, FormField, disabled } from '@angular/forms/signals' @Component({ selector: 'app-order', - imports: [Field], + imports: [FormField], template: ` - - + + @if (orderForm.couponCode().disabled()) {

クーポンコードは50ドルを超える注文でのみ利用可能です

@@ -264,35 +265,35 @@ NOTE: スキーマのコールバックパラメータ（この例では`schemaP `hidden()`シグナルは、フィールドが条件付きで非表示になるかどうかを示します。条件に基づいてフィールドを表示または非表示にするには、`@if`と共に`hidden()`を使用します: ```angular-ts -import { Component, signal } from '@angular/core' -import { form, Field, hidden } from '@angular/forms/signals' +import {Component, signal} from '@angular/core'; +import {form, FormField, hidden} from '@angular/forms/signals'; @Component({ selector: 'app-profile', - imports: [Field], + imports: [FormField], template: ` @if (!profileForm.publicUrl().hidden()) { } - ` + `, }) export class Profile { profileModel = signal({ isPublic: false, - publicUrl: '' - }) + publicUrl: '', + }); - profileForm = form(this.profileModel, schemaPath => { - hidden(schemaPath.publicUrl, ({valueOf}) => !valueOf(schemaPath.isPublic)) - }) + profileForm = form(this.profileModel, (schemaPath) => { + hidden(schemaPath.publicUrl, ({valueOf}) => !valueOf(schemaPath.isPublic)); + }); } ``` @@ -303,37 +304,37 @@ export class Profile { `readonly()`シグナルは、フィールドが読み取り専用かどうかを示します。読み取り専用フィールドは値を表示しますが、ユーザーは編集できません: ```angular-ts -import { Component, signal } from '@angular/core' -import { form, Field, readonly } from '@angular/forms/signals' +import {Component, signal} from '@angular/core'; +import {form, FormField, readonly} from '@angular/forms/signals'; @Component({ selector: 'app-account', - imports: [Field], + imports: [FormField], template: ` - ` + `, }) export class Account { accountModel = signal({ username: 'johndoe', - email: 'john@example.com' - }) + email: 'john@example.com', + }); - accountForm = form(this.accountModel, schemaPath => { - readonly(schemaPath.username) - }) + accountForm = form(this.accountModel, (schemaPath) => { + readonly(schemaPath.username); + }); } ``` -NOTE: `[field]`ディレクティブは、フィールドの`readonly()`状態に基づいて`readonly`属性を自動的にバインドするため、手動で`[readonly]="field().readonly()"`を追加する必要はありません。 +NOTE: `[formField]`ディレクティブは、フィールドの`readonly()`状態に基づいて`readonly`属性を自動的にバインドするため、手動で`[readonly]="field().readonly()"`を追加する必要はありません。 無効フィールドや非表示フィールドと同様に、読み取り専用フィールドは非インタラクティブであり、親フォームの状態に影響を与えません。`readonly()`状態は編集可能性とバリデーションに影響しますが、フィールドの値は変更しません。 @@ -354,17 +355,17 @@ NOTE: `[field]`ディレクティブは、フィールドの`readonly()`状態 ```angular-ts @Component({ template: ` -
- - + + + - ` + `, }) export class Login { - loginModel = signal({ email: '', password: '' }) - loginForm = form(this.loginModel) + loginModel = signal({email: '', password: ''}); + loginForm = form(this.loginModel); } ``` @@ -455,29 +456,29 @@ const orderForm = form(orderModel, (schemaPath) => { ユーザーがフィールドを操作した後にのみエラーを表示します: ```angular-ts -import { Component, signal } from '@angular/core' -import { form, Field, email } from '@angular/forms/signals' +import {Component, signal} from '@angular/core'; +import {form, FormField, email} from '@angular/forms/signals'; @Component({ selector: 'app-signup', - imports: [Field], + imports: [FormField], template: ` @if (signupForm.email().touched() && signupForm.email().invalid()) {

{{ signupForm.email().errors()[0].message }}

} - ` + `, }) export class Signup { - signupModel = signal({ email: '', password: '' }) + signupModel = signal({email: '', password: ''}); - signupForm = form(this.signupModel, schemaPath => { - email(schemaPath.email) - }) + signupForm = form(this.signupModel, (schemaPath) => { + email(schemaPath.email); + }); } ``` @@ -488,35 +489,35 @@ export class Signup { `hidden()`シグナルを`@if`とともに使用して、条件付きでフィールドを表示または非表示にします: ```angular-ts -import { Component, signal } from '@angular/core' -import { form, Field, hidden } from '@angular/forms/signals' +import {Component, signal} from '@angular/core'; +import {form, FormField, hidden} from '@angular/forms/signals'; @Component({ selector: 'app-order', - imports: [Field], + imports: [FormField], template: ` @if (!orderForm.shippingAddress().hidden()) { } - ` + `, }) export class Order { orderModel = signal({ requiresShipping: false, - shippingAddress: '' - }) + shippingAddress: '', + }); - orderForm = form(this.orderModel, schemaPath => { - hidden(schemaPath.shippingAddress, ({valueOf}) => !valueOf(schemaPath.requiresShipping)) - }) + orderForm = form(this.orderModel, (schemaPath) => { + hidden(schemaPath.shippingAddress, ({valueOf}) => !valueOf(schemaPath.requiresShipping)); + }); } ``` @@ -594,12 +595,22 @@ export class Password { #### フォームの送信 {#form-submission} -ユーザーがフォームを送信するときは、`submit()`関数を使用してバリデーションを処理し、エラーを表示します: +ユーザーがフォームを送信するときは、`submit()`関数を使用してバリデーションを処理し、エラーを表示します。 -```ts -import {Component, signal} from '@angular/core'; -import {form, submit, required, email} from '@angular/forms/signals'; +シグナルフォームは独自のバリデーションシステムでバリデーションを処理するため、ブラウザのデフォルトのフォーム動作を防ぐ必要があります。`
`要素に`novalidate`を追加してネイティブHTMLバリデーション（`required`や`type="email"`フィールドに対するブラウザのツールチップポップアップなど）を無効にし、送信ハンドラーで`$event.preventDefault()`を呼び出してブラウザがページをリロードするのを防ぎます: + +```angular-ts +@Component({ + template: ` + + + + + + + `, +}) export class Registration { registrationModel = signal({username: '', email: '', password: ''}); @@ -609,13 +620,14 @@ export class Registration { required(schemaPath.password); }); - onSubmit() { + onSubmit(event: Event) { + event.preventDefault(); submit(this.registrationForm, async () => { this.submitToServer(); }); } - submitToServer() { + private submitToServer() { // Send data to server } } @@ -653,14 +665,14 @@ export class Contact { バリデーション状態に基づいてCSSクラスをバインドすることで、フォームにカスタムスタイルを適用できます: ```angular-ts -import { Component, signal } from '@angular/core' -import { form, Field, email } from '@angular/forms/signals' +import {Component, signal} from '@angular/core'; +import {form, FormField, email} from '@angular/forms/signals'; @Component({ template: ` @@ -674,14 +686,14 @@ import { form, Field, email } from '@angular/forms/signals' input.is-valid { border: 2px solid green; } - ` + `, }) export class StyleExample { - model = signal({ email: '' }) + model = signal({email: ''}); - form = form(this.model, schemaPath => { - email(schemaPath.email) - }) + form = form(this.model, (schemaPath) => { + email(schemaPath.email); + }); } ``` diff --git a/adev-ja/src/content/guide/forms/signals/form-logic.md b/adev-ja/src/content/guide/forms/signals/form-logic.md new file mode 100644 index 0000000000..5aa44718ad --- /dev/null +++ b/adev-ja/src/content/guide/forms/signals/form-logic.md @@ -0,0 +1,866 @@ +# Adding form logic + +Signal Forms allow you to add logic to your form using schemas. Validation logic is covered in the [Validation guide](guide/forms/signals/validation), and this guide discusses other rules available in schemas. You can disable fields conditionally, hide them based on other values, make them readonly, debounce user input, and attach metadata for custom controls. + +This guide shows you how to use rules like `disabled()`, `hidden()`, `readonly()`, `debounce()`, and `metadata()` to control field behavior. + +## When to add form logic + +Use rules when field behavior depends on other field values or needs to update reactively. For example: + +- A coupon code field that's disabled when the order total is too low +- An address field that's hidden unless shipping is required +- A search field that debounces to reduce API calls + +## How rules work + +Rules bind reactive logic to specific fields in your form. Most rules accept a reactive logic function as an optional argument. The reactive logic function automatically recomputes whenever the signals it references change, just like a `computed`. + +```ts +const orderForm = form(this.orderModel, (schemaPath) => { + disabled(schemaPath.couponCode, ({valueOf}) => valueOf(schemaPath.total) < 50); + //~~~~~~ ~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + //rule path reactive logic function +}); +``` + +Reactive logic functions receive a `FieldContext` object that provides access to field values and state through helper functions like `valueOf()` and `stateOf()`. It is often destructured to access these helpers directly. + +NOTE: The schema callback parameter (`schemaPath` in these examples) is a `SchemaPathTree` object that provides paths to all fields in your form. You can name this parameter anything you like. + +For complete details on `FieldContext` properties and methods, see the [Validation guide](guide/forms/signals/validation). + +## Prevent field updates with `disabled()` + +The `disabled()` rule configures a field's disabled state. + +It works with the `[formField]` directive to automatically bind the `disabled` attribute based on the field's state, so you don't need to manually add `[disabled]="yourForm.fieldName().disabled()"` to your template. + +NOTE: Disabled fields skip validation - they don't participate in form validation checks. The field's value is preserved but not validated. For details on validation behavior, see the [Validation guide](guide/forms/signals/validation). + +### Always disabled + +To disable a field permanently, call `disabled()` with just the field path: + +```angular-ts +import {Component, signal} from '@angular/core'; +import {form, FormField, disabled} from '@angular/forms/signals'; + +@Component({ + selector: 'app-settings', + imports: [FormField], + template: ` + + `, +}) +export class Settings { + settingsModel = signal({ + systemId: 'SYS-12345', + userName: '', + }); + + settingsForm = form(this.settingsModel, (schemaPath) => { + disabled(schemaPath.systemId); + }); +} +``` + +### Conditional disabling + +To disable a field based on conditions, provide a reactive logic function that returns `true` (disabled) or `false` (enabled): + +```angular-ts +import {Component, signal} from '@angular/core'; +import {form, FormField, disabled} from '@angular/forms/signals'; + +@Component({ + selector: 'app-order', + imports: [FormField], + template: ` + + + + `, +}) +export class Order { + orderModel = signal({ + total: 25, + couponCode: '', + }); + + orderForm = form(this.orderModel, (schemaPath) => { + disabled(schemaPath.couponCode, ({valueOf}) => valueOf(schemaPath.total) < 50); + }); +} +``` + +In this example, when the order total is less than $50, the coupon code field is disabled. + +### Disabled reasons + +When you disable a field, provide user-facing explanations by returning a string instead of `true`: + +```angular-ts +import {Component, signal} from '@angular/core'; +import {form, FormField, disabled} from '@angular/forms/signals'; + +@Component({ + selector: 'app-order', + imports: [FormField], + template: ` + + + + + @if (orderForm.couponCode().disabled()) { +
+ @for (reason of orderForm.couponCode().disabledReasons(); track reason) { +

{{ reason.message }}

+ } +
+ } + `, +}) +export class Order { + orderModel = signal({ + total: 25, + couponCode: '', + }); + + orderForm = form(this.orderModel, (schemaPath) => { + disabled(schemaPath.couponCode, ({valueOf}) => + valueOf(schemaPath.total) < 50 ? 'Order must be $50 or more to use a coupon' : false, + ); + }); +} +``` + +The reactive logic function returns: + +- A **string** to disable the field with a reason +- `false` to enable the field (not just any falsy value - use `false` explicitly) + +Access the reasons through the `disabledReasons()` signal on the field state. Each reason has a `message` property containing the string you returned. + +#### Multiple disabled reasons + +You can also call `disabled()` multiple times on the same field, and all of the returned reasons accumulate: + +```angular-ts +orderForm = form(this.orderModel, (schemaPath) => { + disabled(schemaPath.promoCode, ({valueOf}) => + !valueOf(schemaPath.hasAccount) ? 'You must have an account to use promo codes' : false, + ); + disabled(schemaPath.promoCode, ({valueOf}) => + valueOf(schemaPath.total) < 25 ? 'Order must be at least $25' : false, + ); +}); +``` + +If both conditions are true, the field shows both disabled reasons. This pattern is useful for complex availability rules that you want to keep separate. + +## Configuring `hidden()` state on fields + +The `hidden()` rule configures a field's hidden state. However, this only sets a programmatic state. **You control whether the field appears in the UI**. + +IMPORTANT: Unlike `disabled` and `readonly`, there is no native DOM property for `hidden` state. The `[formField]` directive does not apply a `hidden` attribute to elements. You must use `@if` or CSS in your template to conditionally render fields based on the `hidden()` state. + +NOTE: Like disabled fields, hidden fields also skip validation. See the [Validation guide](guide/forms/signals/validation) for details. + +### Basic field hiding + +Use `hidden()` with a reactive logic function that returns `true` (hidden) or `false` (visible): + +```angular-ts +import {Component, signal} from '@angular/core'; +import {form, FormField, hidden} from '@angular/forms/signals'; + +@Component({ + selector: 'app-profile', + imports: [FormField], + template: ` + + + @if (!profileForm.publicUrl().hidden()) { + + } + `, +}) +export class Profile { + profileModel = signal({ + isPublic: false, + publicUrl: '', + }); + + profileForm = form(this.profileModel, (schemaPath) => { + hidden(schemaPath.publicUrl, ({valueOf}) => !valueOf(schemaPath.isPublic)); + }); +} +``` + +## Display uneditable fields with `readonly()` + +The `readonly()` rule prevents users from updating a field. The `[FormField]` directive automatically binds this state to the HTML `readonly` attribute, which prevents editing while still allowing users to focus and select text. + +NOTE: Readonly fields skip [validation](guide/forms/signals/validation). + +### Always readonly + +To make a field permanently readonly, call `readonly()` with just the field path: + +```angular-ts +import {Component, signal} from '@angular/core'; +import {form, FormField, readonly} from '@angular/forms/signals'; + +@Component({ + selector: 'app-account', + imports: [FormField], + template: ` + + + + `, +}) +export class Account { + accountModel = signal({ + username: 'johndoe', + email: 'john@example.com', + }); + + accountForm = form(this.accountModel, (schemaPath) => { + readonly(schemaPath.username); + }); +} +``` + +The `[FormField]` directive automatically binds the `readonly` attribute based on the field's state. + +### Conditional readonly + +To make a field readonly based on conditions, provide a reactive logic function: + +```angular-ts +import {Component, signal} from '@angular/core'; +import {form, FormField, readonly} from '@angular/forms/signals'; + +@Component({ + selector: 'app-document', + imports: [FormField], + template: ` + + + + `, +}) +export class Document { + documentModel = signal({ + isLocked: false, + title: 'Untitled', + }); + + documentForm = form(this.documentModel, (schemaPath) => { + readonly(schemaPath.title, ({valueOf}) => valueOf(schemaPath.isLocked)); + }); +} +``` + +When `isLocked` is true, the title field becomes readonly. + +## Choose between hidden, disabled, and readonly + +These three configuration functions control field availability in different ways: + +Choose `hidden()` when the field: + +- Should not appear in the UI at all +- Is irrelevant to the current form state +- Example: Shipping address fields when "same as billing" is checked + +Choose `disabled()` when the field: + +- Should be visible but not editable +- Needs to show why it's unavailable (using disabled reasons) +- Should be excluded from HTML form submission +- Example: Submit button disabled until form is valid, approval fields disabled for non-admin users + +Choose `readonly()` when the field: + +- Should be visible but not editable +- Contains data users need to see, select, or copy +- Should be included in HTML form submission +- Example: Order confirmation number, system-generated reference codes + +All three skip validation and prevent user editing while active. The key differences: + +| Feature | `hidden()` | `disabled()` | `readonly()` | +| -------------------------------- | ---------- | ------------ | ------------ | +| Visible in UI | No | Yes | Yes | +| Users can focus/select | No | No | Yes | +| Included in HTML form submission | No | No | Yes | + +## Delay input operations with `debounce()` + +The `debounce()` rule delays updating the form model. This is useful for performance optimization and reducing unnecessary operations during rapid input. + +### What debouncing does + +Without debouncing, every keystroke immediately updates the form model. This can trigger: + +- Expensive computed signals that recalculate on every change +- Validation checks after each character +- API calls or other side effects tied to the model value + +Debouncing delays these updates and reduces unnecessary work. + +### Basic debouncing + +You can debounce a field by specifying a delay in milliseconds: + +```angular-ts +import {Component, signal} from '@angular/core'; +import {form, FormField, debounce} from '@angular/forms/signals'; + +@Component({ + selector: 'app-search', + imports: [FormField], + template: ` + + +

Searching for: {{ searchForm.query().value() }}

+ `, +}) +export class Search { + searchModel = signal({ + query: '', + }); + + searchForm = form(this.searchModel, (schemaPath) => { + debounce(schemaPath.query, 300); + }); +} +``` + +With a 300ms debounce: + +- User types in the input field +- Form model updates only after 300ms of typing inactivity +- If user keeps typing, the timer resets with each keystroke +- Once user pauses for 300ms, the model updates with the final value + +### Timing guarantees + +The `debounce()` function ensures users don't lose data through these mechanisms: + +- **When marked as touched:** The value syncs immediately, aborting any pending debounce delay. This happens when the field loses focus (blur) or when explicitly marked as touched. +- **On form submission:** All fields are marked as touched before validation, which ensures all debounced values sync immediately. + +This means users can type quickly, tab away, or submit the form without waiting for debounce delays to expire. + +### Custom debounce logic + +For advanced control, provide a debouncer function that controls when to synchronize the value. This function is called every time the control value is updated and can return either `undefined` to synchronize immediately, or a Promise that prevents synchronization until it resolves: + +```angular-ts +import {Component, signal} from '@angular/core'; +import {form, FormField, debounce} from '@angular/forms/signals'; + +@Component({ + selector: 'app-search', + imports: [FormField], + template: ` + + `, +}) +export class Search { + searchModel = signal({ + query: '', + }); + + searchForm = form(this.searchModel, (schemaPath) => { + debounce(schemaPath.query, () => { + // Return a promise that resolves after 500ms + return new Promise((resolve) => { + setTimeout(() => resolve(), 500); + }); + }); + }); +} +``` + +The debouncer function can return: + +- `undefined` to synchronize the value immediately +- A `Promise` that prevents synchronization until it resolves + +Use cases for custom debounce logic: + +- Implementing custom timing logic beyond simple delays +- Coordinating synchronization with external events +- Conditional debouncing based on application state + +### When to use debouncing + +Debouncing is most useful when: + +- You have expensive computed signals that depend on the field value +- The field triggers API calls or other side effects +- You want to reduce validation overhead during rapid typing +- Performance profiling shows model updates are causing slowdowns + +Don't use debouncing if: + +- The field needs immediate updates for good UX (such as calculator inputs) +- The performance benefit is negligible +- Users expect real-time feedback + +## Associate data with a field using `metadata()` + +Metadata allows you to attach computed information to fields that can be read by [custom controls](guide/forms/signals/custom-controls) or form logic. Common use cases include HTML input attributes (min, max, maxlength, pattern), custom UI hints (placeholder text, help text), and accessibility information. + +### Pre-defined metadata keys + +Signal Forms provides six pre-defined metadata keys that validation rules automatically populate: + +- `REQUIRED` - Whether the field is required (`boolean`) +- `MIN` - Minimum numeric value (`number | undefined`) +- `MAX` - Maximum numeric value (`number | undefined`) +- `MIN_LENGTH` - Minimum string/array length (`number | undefined`) +- `MAX_LENGTH` - Maximum string/array length (`number | undefined`) +- `PATTERN` - Regular expression pattern (`RegExp[]` - array to support multiple patterns) + +When you use validation rules like `required()` or `min()`, they automatically set the corresponding metadata. The `metadata()` function provides a way to publish additional data associated with a field. + +### Reading pre-defined metadata + +The `[FormField]` directive automatically binds built-in metadata to HTML attributes. You can also read metadata directly using the built-in accessors on field state: + +```angular-ts +import {Component, signal} from '@angular/core'; +import {form, FormField, required, min, max} from '@angular/forms/signals'; + +@Component({ + selector: 'app-age', + imports: [FormField], + template: ` + + + @if (ageForm.age().required()) { + * + } + `, +}) +export class Age { + ageModel = signal({ + age: 0, + }); + + ageForm = form(this.ageModel, (schemaPath) => { + required(schemaPath.age); + min(schemaPath.age, 18); + max(schemaPath.age, 120); + }); +} +``` + +The `[formField]` directive automatically binds `required`, `min`, and `max` attributes to the input. You can read these values using `field().required()`, `field().min()`, and `field().max()` for display or logic purposes. + +### Setting metadata manually + +Use the `metadata()` function to set metadata values when validation rules don't automatically set them. For built-in metadata like `MIN` and `MAX`, prefer using the validation rules: + +```angular-ts +import {Component, signal} from '@angular/core'; +import {form, FormField, min, max, validate} from '@angular/forms/signals'; + +@Component({ + selector: 'app-custom', + imports: [formField], + template: ` `, +}) +export class Custom { + customModel = signal({score: 0}); + + customForm = form(this.customModel, (schemaPath) => { + // Use built-in validation rules - they automatically set metadata + min(schemaPath.score, 0); + max(schemaPath.score, 100); + + // Add custom validation logic if needed + validate(schemaPath.score, ({value}) => { + const score = value(); + // Custom validation beyond min/max (e.g., must be multiple of 5) + if (score % 5 !== 0) { + return {kind: 'increment', message: 'Score must be a multiple of 5'}; + } + return null; + }); + }); +} +``` + +### Creating custom metadata keys + +Create your own metadata keys for application-specific information: + +```angular-ts +import {createMetadataKey, metadata} from '@angular/forms/signals'; + +// Define at module level (not inside components) +export const PLACEHOLDER = createMetadataKey(); +export const HELP_TEXT = createMetadataKey(); + +// Use in schema +form(model, (schemaPath) => { + metadata(schemaPath.email, PLACEHOLDER, () => 'user@example.com'); + metadata(schemaPath.email, HELP_TEXT, () => 'We will never share your email'); +}); + +// Read in component +const placeholderText = myForm.email().metadata(PLACEHOLDER); +const helpText = myForm.email().metadata(HELP_TEXT); +``` + +By default, custom metadata keys use a "last write wins" strategy - if you call `metadata()` multiple times with the same key, only the last value is kept. + +**Important:** Always define metadata keys at module level, never inside components. Metadata keys rely on object identity, and recreating them loses that identity. + +### Accumulating metadata with reducers + +By default, calling `metadata()` multiple times with the same key uses "last write wins" - only the final value is kept. To accumulate values instead, pass a reducer to `createMetadataKey()`: + +```angular-ts +import {createMetadataKey, metadata, MetadataReducer} from '@angular/forms/signals'; + +// Create a key that accumulates values into an array +export const HINTS = createMetadataKey(MetadataReducer.list()); + +// Multiple calls accumulate values +form(model, (schemaPath) => { + metadata(schemaPath.password, HINTS, () => 'At least 8 characters'); + metadata(schemaPath.password, HINTS, () => 'Include a number'); + metadata(schemaPath.password, HINTS, () => 'Include a special character'); +}); + +// Result: Signal containing the accumulated array +const passwordHints = passwordForm.password().metadata(HINTS)(); +// ['At least 8 characters', 'Include a number', 'Include a special character'] +``` + +Angular provides built-in reducers through `MetadataReducer`: + +- `MetadataReducer.list()` - Accumulates values into an array +- `MetadataReducer.min()` - Keeps the minimum value +- `MetadataReducer.max()` - Keeps the maximum value +- `MetadataReducer.or()` - Logical OR of boolean values +- `MetadataReducer.and()` - Logical AND of boolean values + +### Managed metadata keys + +Use `createManagedMetadataKey()` when you need to compute a new value from the accumulated result. The transform function receives a signal of the reduced value and returns the computed result: + +```angular-ts +import {createManagedMetadataKey, metadata, MetadataReducer} from '@angular/forms/signals'; + +// Accumulate hints and compute additional data from the result +export const HINTS = createManagedMetadataKey( + (signal) => + computed(() => { + const hints = signal(); + return { + messages: hints, + count: hints?.length ?? 0, + }; + }), + MetadataReducer.list(), +); + +// Multiple calls accumulate values +form(model, (schemaPath) => { + metadata(schemaPath.password, HINTS, () => 'At least 8 characters'); + metadata(schemaPath.password, HINTS, () => 'Include a number'); + metadata(schemaPath.password, HINTS, () => 'Include a special character'); +}); + +// Result: Signal with transformed value +const passwordHints = passwordForm.password().metadata(HINTS)(); +// { messages: ['At least 8 characters', 'Include a number', 'Include a special character'], count: 3 } +``` + +The managed metadata key takes two arguments: + +1. **Transform function** - Computes a new value from the accumulated result (receives a signal of the reduced value) +2. **Reducer** - Determines how values accumulate (optional - defaults to "last write wins") + +### Reactive metadata + +Make metadata reactive to other field values: + +```angular-ts +import {Component, signal} from '@angular/core'; +import {form, FormField, max} from '@angular/forms/signals'; + +@Component({ + selector: 'app-inventory', + imports: [formField], + template: ` + + + + `, +}) +export class Inventory { + inventoryModel = signal({ + item: 'widget', + quantity: 0, + }); + + inventoryForm = form(this.inventoryModel, (schemaPath) => { + max(schemaPath.quantity, ({valueOf}) => { + const item = valueOf(schemaPath.item); + return item === 'widget' ? 100 : 50; + }); + }); +} +``` + +The `max()` validation rule sets the `MAX` metadata reactively based on the selected item. This demonstrates how validation rules can have conditional values that change when other fields update. + +### Using metadata in custom controls + +Custom controls can read metadata to configure their HTML attributes and behavior: + +```angular-ts +import {Component, input, computed, model} from '@angular/core'; +import {FormValueControl, Field, PLACEHOLDER} from '@angular/forms/signals'; + +@Component({ + selector: 'custom-input', + template: ` + + `, +}) +export class CustomInput implements FormValueControl { + // Bind to the form field. + formField = input.required>(); + + // Compute the current field state. + state = computed(() => this.formField()()); + + // Required property of the FormValueControl interface. + value = model(0); + + placeholderText = computed(() => this.state().metadata(PLACEHOLDER)() ?? ''); +} +``` + +This pattern allows custom controls to automatically configure themselves based on the validation rules and metadata defined in the schema. + +TIP: For more information on creating custom controls, see the [Custom Controls guide](guide/forms/signals/custom-controls). + +## Combining rules + +You can apply multiple rules to the same field, and you can use conditional logic to apply entire groups of rules based on form state. + +### Multiple rules on one field + +Apply multiple rules to configure all aspects of a field's behavior: + +```angular-ts +import {Component, signal} from '@angular/core'; +import { + form, + FormField, + disabled, + hidden, + debounce, + metadata, + PLACEHOLDER, +} from '@angular/forms/signals'; + +@Component({ + selector: 'app-promo', + imports: [formField], + template: ` + @if (!promoForm.promoCode().hidden()) { + + } + `, +}) +export class Promo { + promoModel = signal({ + hasAccount: false, + subscriptionType: 'free' as 'free' | 'premium', + promoCode: '', + }); + + promoForm = form(this.promoModel, (schemaPath) => { + disabled(schemaPath.promoCode, ({valueOf}) => + !valueOf(schemaPath.hasAccount) ? 'You must have an account' : false, + ); + hidden(schemaPath.promoCode, ({valueOf}) => valueOf(schemaPath.subscriptionType) === 'free'); + debounce(schemaPath.promoCode, 300); + metadata(schemaPath.promoCode, PLACEHOLDER, () => 'Enter promo code'); + }); +} +``` + +These rules work together: + +- Hidden takes precedence - if the field is hidden, disabled state doesn't matter +- Disabled prevents editing regardless of readonly state +- Debouncing affects model updates regardless of other state +- Metadata is independent and always available + +### Conditional logic with applyWhen + +Use `applyWhen()` to conditionally apply entire groups of rules: + +```angular-ts +import {Component, signal} from '@angular/core'; +import {form, FormField, applyWhen, required, pattern} from '@angular/forms/signals'; + +@Component({ + selector: 'app-address', + imports: [formField], + template: ` + + + + `, +}) +export class Address { + addressModel = signal({ + country: 'US', + zipCode: '', + }); + + addressForm = form(this.addressModel, (schemaPath) => { + applyWhen( + schemaPath, + ({valueOf}) => valueOf(schemaPath.country) === 'US', + (schemaPath) => { + // Only applied when country is US + required(schemaPath.zipCode); + pattern(schemaPath.zipCode, /^\d{5}(-\d{4})?$/); + }, + ); + }); +} +``` + +The `applyWhen()` function receives: + +1. A path to apply logic to (often the root form path) +2. A reactive logic function that returns `true` (apply) or `false` (don't apply) +3. A schema function that defines the conditional rules + +The conditional rules only run when the condition is true. This is useful for complex forms where validation rules or behavior changes based on user choices. + +### Reusable schema functions + +Extract common rule configurations into reusable functions: + +```angular-ts +import {SchemaPath, debounce, metadata, maxLength, PLACEHOLDER} from '@angular/forms/signals'; + +function emailFieldConfig(path: SchemaPath) { + debounce(path, 300); + metadata(path, PLACEHOLDER, () => 'user@example.com'); + maxLength(path, 255); +} + +// Use in multiple forms +const contactForm = form(contactModel, (schemaPath) => { + emailFieldConfig(schemaPath.email); + emailFieldConfig(schemaPath.alternateEmail); +}); + +const registrationForm = form(registrationModel, (schemaPath) => { + emailFieldConfig(schemaPath.email); +}); +``` + +This pattern is useful when you have standard field configurations that you use across multiple forms in your application. + +## Next steps + +To learn more about Signal Forms, check out these related guides: + +- [Field State Management](guide/forms/signals/field-state-management) - Learn how to use the state signals created by these functions in your templates and component logic +- [Validation](guide/forms/signals/validation) - Learn about validation rules and error handling +- [Custom Controls](guide/forms/signals/custom-controls) - Learn how custom controls can read metadata and state to configure themselves automatically diff --git a/adev-ja/src/content/guide/forms/signals/migration.md b/adev-ja/src/content/guide/forms/signals/migration.md index ab2d4d82c1..a2041eb07e 100644 --- a/adev-ja/src/content/guide/forms/signals/migration.md +++ b/adev-ja/src/content/guide/forms/signals/migration.md @@ -1,7 +1,7 @@ # Migrating existing forms to Signal Forms This guide provides strategies for migrating existing codebases to Signal Forms, focusing on interoperability with -legacy Reactive Forms. +existing Reactive Forms. ## Top-down migration using `compatForm` @@ -10,7 +10,7 @@ controls that involve: - Complex asynchronous logic. - Intricate RxJS operators that are not yet ported. -- Integration with legacy third-party libraries. +- Integration with existing third-party libraries. ### Integrating a `FormControl` into a signal form @@ -24,7 +24,7 @@ import {signal} from '@angular/core'; import {FormControl, Validators} from '@angular/forms'; import {compatForm} from '@angular/forms/signals/compat'; -// 1. Existing legacy control with a specialized validator +// 1. Existing control with a specialized validator const passwordControl = new FormControl('', { validators: [Validators.required, enterprisePasswordValidator()], nonNullable: true, @@ -33,7 +33,7 @@ const passwordControl = new FormControl('', { // 2. Wrap it inside your form state signal const user = signal({ email: '', - password: passwordControl, // Nest the legacy control directly + password: passwordControl, // Nest the existing control directly }); // 3. Create the form @@ -45,24 +45,24 @@ console.log(f.password().value()); // Current value of passwordControl // Reactive state is proxied automatically const isPasswordValid = f.password().valid(); -const passwordErrors = f.password().errors(); // Returns CompatValidationError if the legacy validator fails +const passwordErrors = f.password().errors(); // Returns CompatValidationError if the existing validator fails ``` In the template, use standard reactive syntax by binding the underlying control: ```angular-html -
+
@if (f.password().touched() && f.password().invalid()) { @@ -83,14 +83,15 @@ In the template, use standard reactive syntax by binding the underlying control: ### Integrating a `FormGroup` into a signal form -You can also wrap an entire `FormGroup`. This is common when a reusable sub-section of a form—such as an **Address Block**—is still managed by legacy Reactive Forms. +You can also wrap an entire `FormGroup`. This is common when a reusable sub-section of a form—such as an +**Address Block**—is still managed by existing Reactive Forms. ```typescript import {signal} from '@angular/core'; import {FormGroup, FormControl, Validators} from '@angular/forms'; import {compatForm} from '@angular/forms/signals/compat'; -// 1. A legacy address group with its own validation logic +// 1. An existing address group with its own validation logic const addressGroup = new FormGroup({ street: new FormControl('123 Angular Way', Validators.required), city: new FormControl('Mountain View', Validators.required), @@ -109,16 +110,16 @@ const f = compatForm(checkoutModel, (p) => { ``` The `shippingAddress` field acts as a branch in your Signal Form tree. You can bind these nested controls in your -template by accessing the underlying legacy controls via `.control()`: +template by accessing the underlying existing controls via `.control()`: ```angular-html - +

Shipping Details

@if (f.customerName().touched() && f.customerName().invalid()) { @@ -135,7 +136,7 @@ template by accessing the underlying legacy controls via `.control()`:
@if (street.touched && street.invalid) {
@@ -148,7 +149,7 @@ template by accessing the underlying legacy controls via `.control()`:
@if (city.touched && city.invalid) {
@@ -161,7 +162,7 @@ template by accessing the underlying legacy controls via `.control()`:
@if (zip.touched && zip.invalid) {
@@ -187,7 +188,7 @@ const passwordControl = new FormControl('password' /** ... */); const user = signal({ email: '', - password: passwordControl, // Nest the legacy control directly + password: passwordControl, // Nest the existing control directly }); const form = compatForm(user); diff --git a/adev-ja/src/content/guide/forms/signals/models.en.md b/adev-ja/src/content/guide/forms/signals/models.en.md index 45580feec4..3c1cf674f7 100644 --- a/adev-ja/src/content/guide/forms/signals/models.en.md +++ b/adev-ja/src/content/guide/forms/signals/models.en.md @@ -15,30 +15,30 @@ Form models solve this by centralizing form data in a single writable signal. Wh A form model is a writable signal created with Angular's `signal()` function. The signal holds an object that represents your form's data structure. ```angular-ts -import { Component, signal } from '@angular/core' -import { form, Field } from '@angular/forms/signals' +import {Component, signal} from '@angular/core'; +import {form, FormField} from '@angular/forms/signals'; @Component({ selector: 'app-login', - imports: [Field], + imports: [FormField], template: ` - - - ` + + + `, }) export class LoginComponent { loginModel = signal({ email: '', - password: '' - }) + password: '', + }); - loginForm = form(this.loginModel) + loginForm = form(this.loginModel); } ``` -The `form()` function accepts the model signal and creates a **field tree** - a special object structure that mirrors your model's shape. The field tree is both navigable (access child fields with dot notation like `loginForm.email`) and callable (call a field as a function to access its state). +The [`form()`](api/forms/signals/form) function accepts the model signal and creates a **field tree** - a special object structure that mirrors your model's shape. The field tree is both navigable (access child fields with dot notation like `loginForm.email`) and callable (call a field as a function to access its state). -The `[field]` directive binds each input element to its corresponding field in the field tree, enabling automatic two-way synchronization between the UI and model. +The `[formField]` directive binds each input element to its corresponding field in the field tree, enabling automatic two-way synchronization between the UI and model. ### Using TypeScript types @@ -74,14 +74,16 @@ const usernameField = loginForm.username; Form models should provide initial values for all fields you want to include in the field tree. -```ts +```ts {prefer} // Good: All fields initialized const userModel = signal({ name: '', email: '', age: 0, }); +``` +```ts {avoid} // Avoid: Missing initial value const userModel = signal({ name: '', @@ -90,7 +92,7 @@ const userModel = signal({ }); ``` -For optional fields, explicitly set them to `null` or an empty value: +For optional fields, explicitly set them to an empty value or `null`: ```ts interface UserData { @@ -106,6 +108,8 @@ const userModel = signal({ }); ``` +HELPFUL: Native text controls like `` and ` + - ` + `, }) export class PasswordFormComponent { passwordModel = signal({ password: '', - bio: '' - }) + bio: '', + }); passwordForm = form(this.passwordModel, (schemaPath) => { - minLength(schemaPath.password, 8, { message: 'Password must be at least 8 characters' }) - maxLength(schemaPath.password, 100, { message: 'Password is too long' }) + minLength(schemaPath.password, 8, {message: 'Password must be at least 8 characters'}); + maxLength(schemaPath.password, 100, {message: 'Password is too long'}); - maxLength(schemaPath.bio, 500, { message: 'Bio cannot exceed 500 characters' }) - }) + maxLength(schemaPath.bio, 500, {message: 'Bio cannot exceed 500 characters'}); + }); } ``` @@ -246,41 +247,41 @@ For strings, "length" means the number of characters. For arrays, "length" means The `pattern()` validation rule validates against a regular expression: ```angular-ts -import { Component, signal } from '@angular/core' -import { form, Field, pattern } from '@angular/forms/signals' +import {Component, signal} from '@angular/core'; +import {form, FormField, pattern} from '@angular/forms/signals'; @Component({ selector: 'app-phone-form', - imports: [Field], + imports: [FormField], template: ` -
+ - ` + `, }) export class PhoneFormComponent { phoneModel = signal({ phone: '', - postalCode: '' - }) + postalCode: '', + }); phoneForm = form(this.phoneModel, (schemaPath) => { pattern(schemaPath.phone, /^\d{3}-\d{3}-\d{4}$/, { - message: 'Phone must be in format: 555-123-4567' - }) + message: 'Phone must be in format: 555-123-4567', + }); pattern(schemaPath.postalCode, /^\d{5}$/, { - message: 'Postal code must be 5 digits' - }) - }) + message: 'Postal code must be 5 digits', + }); + }); } ``` @@ -299,7 +300,7 @@ Forms can include arrays of nested objects (for example, a list of order items). ```ts import {Component, signal} from '@angular/core'; -import {applyEach, Field, form, min, required, SchemaPathTree} from '@angular/forms/signals'; +import {applyEach, FormField, form, min, required, SchemaPathTree} from '@angular/forms/signals'; type Item = {name: string; quantity: number}; @@ -355,44 +356,44 @@ Built-in validation rules automatically set the `kind` property. The `message` p All built-in validation rules accept a `message` option for custom error text: ```angular-ts -import { Component, signal } from '@angular/core' -import { form, Field, required, minLength } from '@angular/forms/signals' +import {Component, signal} from '@angular/core'; +import {form, FormField, required, minLength} from '@angular/forms/signals'; @Component({ selector: 'app-signup', - imports: [Field], + imports: [FormField], template: ` -
+ - ` + `, }) export class SignupComponent { signupModel = signal({ username: '', - password: '' - }) + password: '', + }); signupForm = form(this.signupModel, (schemaPath) => { required(schemaPath.username, { - message: 'Please choose a username' - }) + message: 'Please choose a username', + }); required(schemaPath.password, { - message: 'Password cannot be empty' - }) + message: 'Password cannot be empty', + }); minLength(schemaPath.password, 12, { - message: 'Password must be at least 12 characters for security' - }) - }) + message: 'Password must be at least 12 characters for security', + }); + }); } ``` @@ -428,36 +429,36 @@ The `validate()` function creates custom validation rules. It receives a validat | `null` or `undefined` | Value is valid | ```angular-ts -import { Component, signal } from '@angular/core' -import { form, Field, validate } from '@angular/forms/signals' +import {Component, signal} from '@angular/core'; +import {form, FormField, validate} from '@angular/forms/signals'; @Component({ selector: 'app-url-form', - imports: [Field], + imports: [FormField], template: ` -
+ - ` + `, }) export class UrlFormComponent { - urlModel = signal({ website: '' }) + urlModel = signal({website: ''}); urlForm = form(this.urlModel, (schemaPath) => { validate(schemaPath.website, ({value}) => { if (!value().startsWith('https://')) { return { kind: 'https', - message: 'URL must start with https://' - } + message: 'URL must start with https://', + }; } - return null - }) - }) + return null; + }); + }); } ``` @@ -477,13 +478,53 @@ NOTE: Child fields also have a `key` signal, and array item fields have both `ke Return an error object with `kind` and `message` when validation fails. Return `null` or `undefined` when validation passes. +### Using validateTree() + +The `validateTree()` function creates custom validation rules that can target multiple fields or provide complex validation logic for a whole subtree. + +```angular-ts +import {Component, model} from '@angular/core'; +import {form, FormField, validateTree} from '@angular/forms/signals'; + +interface User { + firstName: string; + lastName: string; +} + +@Component({ + /* ... */ +}) +export class UserFormComponent { + readonly userModel = model({ + firstName: '', + lastName: '', + }); + + userForm = form(this.userModel, (path) => { + validateTree(path, (ctx) => { + if (ctx.valueOf(path.firstName).length < 5) { + return { + kind: 'minLength5', + message: 'First name must be at least 5 characters', + fieldTree: ctx.fieldTree.lastName, + }; + } + + return null; + }); + }); +} +``` + +The `validateTree()` validator function receives the same `FieldContext` object as `validate()`. + ### Reusable validation rules Create reusable validation rule functions by wrapping `validate()`: ```ts -function url(field: any, options?: {message?: string}) { - validate(field, ({value}) => { +function url(path: SchemaPath, options?: {message?: string}) { + validate(path, ({value}) => { try { new URL(value()); return null; @@ -496,8 +537,8 @@ function url(field: any, options?: {message?: string}) { }); } -function phoneNumber(field: any, options?: {message?: string}) { - validate(field, ({value}) => { +function phoneNumber(path: SchemaPath, options?: {message?: string}) { + validate(path, ({value}) => { const phoneRegex = /^\d{3}-\d{3}-\d{4}$/; if (!phoneRegex.test(value())) { @@ -528,54 +569,54 @@ Cross-field validation compares or relates multiple field values. A common scenario for cross-field validation is password confirmation: ```angular-ts -import { Component, signal } from '@angular/core' -import { form, Field, required, minLength, validate } from '@angular/forms/signals' +import {Component, signal} from '@angular/core'; +import {form, FormField, required, minLength, validate} from '@angular/forms/signals'; @Component({ selector: 'app-password-change', - imports: [Field], + imports: [FormField], template: ` -
+ - ` + `, }) export class PasswordChangeComponent { passwordModel = signal({ password: '', - confirmPassword: '' - }) + confirmPassword: '', + }); passwordForm = form(this.passwordModel, (schemaPath) => { - required(schemaPath.password, { message: 'Password is required' }) - minLength(schemaPath.password, 8, { message: 'Password must be at least 8 characters' }) + required(schemaPath.password, {message: 'Password is required'}); + minLength(schemaPath.password, 8, {message: 'Password must be at least 8 characters'}); - required(schemaPath.confirmPassword, { message: 'Please confirm your password' }) + required(schemaPath.confirmPassword, {message: 'Please confirm your password'}); validate(schemaPath.confirmPassword, ({value, valueOf}) => { - const confirmPassword = value() - const password = valueOf(schemaPath.password) + const confirmPassword = value(); + const password = valueOf(schemaPath.password); if (confirmPassword !== password) { return { kind: 'passwordMismatch', - message: 'Passwords do not match' - } + message: 'Passwords do not match', + }; } - return null - }) - }) + return null; + }); + }); } ``` @@ -590,33 +631,30 @@ Async validation handles validation that requires external data sources, like ch The `validateHttp()` function performs HTTP-based validation: ```angular-ts -import { Component, signal, inject } from '@angular/core' -import { HttpClient } from '@angular/common/http' -import { form, Field, required, validateHttp } from '@angular/forms/signals' +import {Component, signal} from '@angular/core'; +import {form, FormField, required, validateHttp} from '@angular/forms/signals'; @Component({ - selector: 'app-username-form', - imports: [Field], + selector: 'app-username-form',| + imports: [FormField], template: ` -
+ - ` + `, }) export class UsernameFormComponent { - http = inject(HttpClient) - - usernameModel = signal({ username: '' }) + usernameModel = signal({username: ''}); usernameForm = form(this.usernameModel, (schemaPath) => { - required(schemaPath.username, { message: 'Username is required' }) + required(schemaPath.username, {message: 'Username is required'}); validateHttp(schemaPath.username, { request: ({value}) => `/api/check-username?username=${value()}`, @@ -624,17 +662,17 @@ export class UsernameFormComponent { if (response.taken) { return { kind: 'usernameTaken', - message: 'Username is already taken' - } + message: 'Username is already taken', + }; } - return null + return null; }, onError: (error) => ({ kind: 'networkError', - message: 'Could not verify username availability' - }) - }) - }) + message: 'Could not verify username availability', + }), + }); + }); } ``` diff --git a/adev-ja/src/content/guide/forms/signals/validation.md b/adev-ja/src/content/guide/forms/signals/validation.md index 1f48d91da4..94058da45a 100644 --- a/adev-ja/src/content/guide/forms/signals/validation.md +++ b/adev-ja/src/content/guide/forms/signals/validation.md @@ -61,48 +61,47 @@ NOTE: スキーマのコールバックパラメータ（この例では`schemaP `required()`バリデーションルールは、フィールドに値があることを保証します: ```angular-ts -import { Component, signal } from '@angular/core' -import { form, Field, required } from '@angular/forms/signals' +import {Component, signal} from '@angular/core'; +import {form, FormField, required} from '@angular/forms/signals'; @Component({ selector: 'app-registration', - imports: [Field], + imports: [FormField], template: ` -
+ - ` + `, }) export class RegistrationComponent { registrationModel = signal({ username: '', - email: '' - }) + email: '', + }); registrationForm = form(this.registrationModel, (schemaPath) => { - required(schemaPath.username, { message: 'Username is required' }) - required(schemaPath.email, { message: 'Email is required' }) - }) + required(schemaPath.username, {message: 'Username is required'}); + required(schemaPath.email, {message: 'Email is required'}); + }); } ``` フィールドは次の場合に「空」と見なされます: -| 条件 | 例 | +| 条件 | 例 | | ------------------------ | ------- | -| 値が`null`である | `null` | -| 値が空文字列である | `''` | -| 値が空の配列である | `[]` | +| 値が`null`である | `null`, | +| 値が空文字列である | `''` | 条件付きの要件には、`when`オプションを使用します: @@ -117,32 +116,34 @@ registrationForm = form(this.registrationModel, (schemaPath) => { バリデーションルールは、`when`関数が`true`を返す場合にのみ実行されます。 +NOTE: `required`は空の配列に対して`true`を返します。配列のバリデーションには[`minLength()`](#minlength-and-maxlength)を使用してください。 + ### email() {#email} `email()`バリデーションルールは、有効なメール形式をチェックします: ```angular-ts -import { Component, signal } from '@angular/core' -import { form, Field, email } from '@angular/forms/signals' +import {Component, signal} from '@angular/core'; +import {form, FormField, email} from '@angular/forms/signals'; @Component({ selector: 'app-contact', - imports: [Field], + imports: [FormField], template: ` -
+ - ` + `, }) export class ContactComponent { - contactModel = signal({ email: '' }) + contactModel = signal({email: ''}); contactForm = form(this.contactModel, (schemaPath) => { - email(schemaPath.email, { message: 'Please enter a valid email address' }) - }) + email(schemaPath.email, {message: 'Please enter a valid email address'}); + }); } ``` @@ -153,39 +154,39 @@ export class ContactComponent { `min()`と`max()`バリデーションルールは、数値に対して機能します: ```angular-ts -import { Component, signal } from '@angular/core' -import { form, Field, min, max } from '@angular/forms/signals' +import {Component, signal} from '@angular/core'; +import {form, FormField, min, max} from '@angular/forms/signals'; @Component({ selector: 'app-age-form', - imports: [Field], + imports: [FormField], template: ` -
+ - ` + `, }) export class AgeFormComponent { ageModel = signal({ age: 0, - rating: 0 - }) + rating: 0, + }); ageForm = form(this.ageModel, (schemaPath) => { - min(schemaPath.age, 18, { message: 'You must be at least 18 years old' }) - max(schemaPath.age, 120, { message: 'Please enter a valid age' }) + min(schemaPath.age, 18, {message: 'You must be at least 18 years old'}); + max(schemaPath.age, 120, {message: 'Please enter a valid age'}); - min(schemaPath.rating, 1, { message: 'Rating must be at least 1' }) - max(schemaPath.rating, 5, { message: 'Rating cannot exceed 5' }) - }) + min(schemaPath.rating, 1, {message: 'Rating must be at least 1'}); + max(schemaPath.rating, 5, {message: 'Rating cannot exceed 5'}); + }); } ``` @@ -204,38 +205,38 @@ ageForm = form(this.ageModel, (schemaPath) => { `minLength()`と`maxLength()`バリデーションルールは、文字列と配列に対して機能します: ```angular-ts -import { Component, signal } from '@angular/core' -import { form, Field, minLength, maxLength } from '@angular/forms/signals' +import {Component, signal} from '@angular/core'; +import {form, FormField, minLength, maxLength} from '@angular/forms/signals'; @Component({ selector: 'app-password-form', - imports: [Field], + imports: [FormField], template: ` -
+ - ` + `, }) export class PasswordFormComponent { passwordModel = signal({ password: '', - bio: '' - }) + bio: '', + }); passwordForm = form(this.passwordModel, (schemaPath) => { - minLength(schemaPath.password, 8, { message: 'Password must be at least 8 characters' }) - maxLength(schemaPath.password, 100, { message: 'Password is too long' }) + minLength(schemaPath.password, 8, {message: 'Password must be at least 8 characters'}); + maxLength(schemaPath.password, 100, {message: 'Password is too long'}); - maxLength(schemaPath.bio, 500, { message: 'Bio cannot exceed 500 characters' }) - }) + maxLength(schemaPath.bio, 500, {message: 'Bio cannot exceed 500 characters'}); + }); } ``` @@ -246,41 +247,41 @@ export class PasswordFormComponent { `pattern()`バリデーションルールは、正規表現に対してバリデーションを行います: ```angular-ts -import { Component, signal } from '@angular/core' -import { form, Field, pattern } from '@angular/forms/signals' +import {Component, signal} from '@angular/core'; +import {form, FormField, pattern} from '@angular/forms/signals'; @Component({ selector: 'app-phone-form', - imports: [Field], + imports: [FormField], template: ` -
+ - ` + `, }) export class PhoneFormComponent { phoneModel = signal({ phone: '', - postalCode: '' - }) + postalCode: '', + }); phoneForm = form(this.phoneModel, (schemaPath) => { pattern(schemaPath.phone, /^\d{3}-\d{3}-\d{4}$/, { - message: 'Phone must be in format: 555-123-4567' - }) + message: 'Phone must be in format: 555-123-4567', + }); pattern(schemaPath.postalCode, /^\d{5}$/, { - message: 'Postal code must be 5 digits' - }) - }) + message: 'Postal code must be 5 digits', + }); + }); } ``` @@ -299,7 +300,7 @@ export class PhoneFormComponent { ```ts import {Component, signal} from '@angular/core'; -import {applyEach, Field, form, min, required, SchemaPathTree} from '@angular/forms/signals'; +import {applyEach, FormField, form, min, required, SchemaPathTree} from '@angular/forms/signals'; type Item = {name: string; quantity: number}; @@ -355,44 +356,44 @@ NOTE: このセクションでは、バリデーションルールが生成す すべての組み込みバリデーションルールは、カスタムエラーテキストのために`message`オプションを受け入れます: ```angular-ts -import { Component, signal } from '@angular/core' -import { form, Field, required, minLength } from '@angular/forms/signals' +import {Component, signal} from '@angular/core'; +import {form, FormField, required, minLength} from '@angular/forms/signals'; @Component({ selector: 'app-signup', - imports: [Field], + imports: [FormField], template: ` -
+ - ` + `, }) export class SignupComponent { signupModel = signal({ username: '', - password: '' - }) + password: '', + }); signupForm = form(this.signupModel, (schemaPath) => { required(schemaPath.username, { - message: 'Please choose a username' - }) + message: 'Please choose a username', + }); required(schemaPath.password, { - message: 'Password cannot be empty' - }) + message: 'Password cannot be empty', + }); minLength(schemaPath.password, 12, { - message: 'Password must be at least 12 characters for security' - }) - }) + message: 'Password must be at least 12 characters for security', + }); + }); } ``` @@ -428,36 +429,36 @@ TIP: テンプレートで`touched() && invalid()`パターンを使用すると | `null` または `undefined` | 値は有効です | ```angular-ts -import { Component, signal } from '@angular/core' -import { form, Field, validate } from '@angular/forms/signals' +import {Component, signal} from '@angular/core'; +import {form, FormField, validate} from '@angular/forms/signals'; @Component({ selector: 'app-url-form', - imports: [Field], + imports: [FormField], template: ` -
+ - ` + `, }) export class UrlFormComponent { - urlModel = signal({ website: '' }) + urlModel = signal({website: ''}); urlForm = form(this.urlModel, (schemaPath) => { validate(schemaPath.website, ({value}) => { if (!value().startsWith('https://')) { return { kind: 'https', - message: 'URL must start with https://' - } + message: 'URL must start with https://', + }; } - return null - }) - }) + return null; + }); + }); } ``` @@ -477,13 +478,53 @@ NOTE: 子フィールドには`key`シグナルもあり、配列アイテムの バリデーションが失敗した場合は`kind`と`message`を持つエラーオブジェクトを返します。バリデーションが成功した場合は`null`または`undefined`を返します。 +### validateTree()の使用 {#using-validatetree} + +`validateTree()`関数は、複数のフィールドをターゲットにしたり、サブツリー全体に複雑なバリデーションロジックを提供したりできるカスタムバリデーションルールを作成します。 + +```angular-ts +import {Component, model} from '@angular/core'; +import {form, FormField, validateTree} from '@angular/forms/signals'; + +interface User { + firstName: string; + lastName: string; +} + +@Component({ + /* ... */ +}) +export class UserFormComponent { + readonly userModel = model({ + firstName: '', + lastName: '', + }); + + userForm = form(this.userModel, (path) => { + validateTree(path, (ctx) => { + if (ctx.valueOf(path.firstName).length < 5) { + return { + kind: 'minLength5', + message: 'First name must be at least 5 characters', + fieldTree: ctx.fieldTree.lastName, + }; + } + + return null; + }); + }); +} +``` + +`validateTree()`バリデーター関数は、`validate()`と同じ`FieldContext`オブジェクトを受け取ります。 + ### 再利用可能なバリデーションルール {#reusable-validation-rules} `validate()`をラップして、再利用可能なバリデーションルール関数を作成します: ```ts -function url(field: any, options?: {message?: string}) { - validate(field, ({value}) => { +function url(path: SchemaPath, options?: {message?: string}) { + validate(path, ({value}) => { try { new URL(value()); return null; @@ -496,8 +537,8 @@ function url(field: any, options?: {message?: string}) { }); } -function phoneNumber(field: any, options?: {message?: string}) { - validate(field, ({value}) => { +function phoneNumber(path: SchemaPath, options?: {message?: string}) { + validate(path, ({value}) => { const phoneRegex = /^\d{3}-\d{3}-\d{4}$/; if (!phoneRegex.test(value())) { @@ -528,54 +569,54 @@ urlForm = form(this.urlModel, (schemaPath) => { クロスフィールドバリデーションの一般的なシナリオは、パスワードの確認です: ```angular-ts -import { Component, signal } from '@angular/core' -import { form, Field, required, minLength, validate } from '@angular/forms/signals' +import {Component, signal} from '@angular/core'; +import {form, FormField, required, minLength, validate} from '@angular/forms/signals'; @Component({ selector: 'app-password-change', - imports: [Field], + imports: [FormField], template: ` -
+ - ` + `, }) export class PasswordChangeComponent { passwordModel = signal({ password: '', - confirmPassword: '' - }) + confirmPassword: '', + }); passwordForm = form(this.passwordModel, (schemaPath) => { - required(schemaPath.password, { message: 'Password is required' }) - minLength(schemaPath.password, 8, { message: 'Password must be at least 8 characters' }) + required(schemaPath.password, {message: 'Password is required'}); + minLength(schemaPath.password, 8, {message: 'Password must be at least 8 characters'}); - required(schemaPath.confirmPassword, { message: 'Please confirm your password' }) + required(schemaPath.confirmPassword, {message: 'Please confirm your password'}); validate(schemaPath.confirmPassword, ({value, valueOf}) => { - const confirmPassword = value() - const password = valueOf(schemaPath.password) + const confirmPassword = value(); + const password = valueOf(schemaPath.password); if (confirmPassword !== password) { return { kind: 'passwordMismatch', - message: 'Passwords do not match' - } + message: 'Passwords do not match', + }; } - return null - }) - }) + return null; + }); + }); } ``` @@ -590,33 +631,30 @@ export class PasswordChangeComponent { `validateHttp()`関数は、HTTPベースのバリデーションを実行します: ```angular-ts -import { Component, signal, inject } from '@angular/core' -import { HttpClient } from '@angular/common/http' -import { form, Field, required, validateHttp } from '@angular/forms/signals' +import {Component, signal} from '@angular/core'; +import {form, FormField, required, validateHttp} from '@angular/forms/signals'; @Component({ - selector: 'app-username-form', - imports: [Field], + selector: 'app-username-form',| + imports: [FormField], template: ` -
+ - ` + `, }) export class UsernameFormComponent { - http = inject(HttpClient) - - usernameModel = signal({ username: '' }) + usernameModel = signal({username: ''}); usernameForm = form(this.usernameModel, (schemaPath) => { - required(schemaPath.username, { message: 'Username is required' }) + required(schemaPath.username, {message: 'Username is required'}); validateHttp(schemaPath.username, { request: ({value}) => `/api/check-username?username=${value()}`, @@ -624,17 +662,17 @@ export class UsernameFormComponent { if (response.taken) { return { kind: 'usernameTaken', - message: 'Username is already taken' - } + message: 'Username is already taken', + }; } - return null + return null; }, onError: (error) => ({ kind: 'networkError', - message: 'Could not verify username availability' - }) - }) - }) + message: 'Could not verify username availability', + }), + }); + }); } ``` diff --git a/adev-ja/src/content/guide/forms/template-driven-forms.md b/adev-ja/src/content/guide/forms/template-driven-forms.md index d293c46d1e..d8d4c48747 100644 --- a/adev-ja/src/content/guide/forms/template-driven-forms.md +++ b/adev-ja/src/content/guide/forms/template-driven-forms.md @@ -169,7 +169,7 @@ Angularは、割り当てられた名前を使用して、親`
`要素に Angularは、フォームが送信された後に`form`要素に`ng-submitted`クラスを適用します。このクラスは、フォームが送信された後にフォームのスタイルを変更するために使用できます。 -## コントロールの状態を追跡する +## コントロールの状態を追跡する {#track-control-states} コントロールに`NgModel`ディレクティブを追加すると、コントロールの状態を表すクラス名がコントロールに追加されます。 これらのクラスは、コントロールの状態に基づいてコントロールのスタイルを変更するために使用できます。 diff --git a/adev-ja/src/content/guide/http/interceptors.en.md b/adev-ja/src/content/guide/http/interceptors.en.md index cb8ae2d7c5..5561365175 100644 --- a/adev-ja/src/content/guide/http/interceptors.en.md +++ b/adev-ja/src/content/guide/http/interceptors.en.md @@ -45,7 +45,7 @@ In order for this interceptor to actually intercept requests, you must configure You declare the set of interceptors to use when configuring `HttpClient` through dependency injection, by using the `withInterceptors` feature: ```ts -bootstrapApplication(AppComponent, { +bootstrapApplication(App, { providers: [provideHttpClient(withInterceptors([loggingInterceptor, cachingInterceptor]))], }); ``` @@ -275,7 +275,7 @@ export class LoggingInterceptor implements HttpInterceptor { DI-based interceptors are configured through a dependency injection multi-provider: ```ts -bootstrapApplication(AppComponent, { +bootstrapApplication(App, { providers: [ provideHttpClient( // DI-based interceptors must be explicitly enabled. diff --git a/adev-ja/src/content/guide/http/interceptors.md b/adev-ja/src/content/guide/http/interceptors.md index c85bf21caf..86f89948de 100644 --- a/adev-ja/src/content/guide/http/interceptors.md +++ b/adev-ja/src/content/guide/http/interceptors.md @@ -45,7 +45,7 @@ export function loggingInterceptor( `HttpClient` を構成するときに使用するインターセプターのセットは、`withInterceptors` 機能を使用して、依存性の注入によって宣言します。 ```ts -bootstrapApplication(AppComponent, { +bootstrapApplication(App, { providers: [provideHttpClient(withInterceptors([loggingInterceptor, cachingInterceptor]))], }); ``` @@ -275,7 +275,7 @@ export class LoggingInterceptor implements HttpInterceptor { DIベースのインターセプターは、依存性の注入のマルチプロバイダーによって構成されます。 ```ts -bootstrapApplication(AppComponent, { +bootstrapApplication(App, { providers: [ provideHttpClient( // DI ベースのインターセプターは明示的に有効にする必要があります。 diff --git a/adev-ja/src/content/guide/http/making-requests.en.md b/adev-ja/src/content/guide/http/making-requests.en.md index da3792294f..7ba303fe2b 100644 --- a/adev-ja/src/content/guide/http/making-requests.en.md +++ b/adev-ja/src/content/guide/http/making-requests.en.md @@ -648,7 +648,7 @@ export class UserService { Within a component, you can combine `@if` with the `async` pipe to render the UI for the data only after it's finished loading: ```angular-ts -import { AsyncPipe } from '@angular/common'; +import {AsyncPipe} from '@angular/common'; @Component({ imports: [AsyncPipe], @@ -659,7 +659,7 @@ import { AsyncPipe } from '@angular/common'; } `, }) -export class UserProfileComponent { +export class UserProfile { userId = input.required(); user$!: Observable; diff --git a/adev-ja/src/content/guide/http/making-requests.md b/adev-ja/src/content/guide/http/making-requests.md index a1a548fabf..88e70561f7 100644 --- a/adev-ja/src/content/guide/http/making-requests.md +++ b/adev-ja/src/content/guide/http/making-requests.md @@ -648,7 +648,7 @@ export class UserService { コンポーネント内で、`@if` を `async` パイプと組み合わせて、データの読み込みが完了した後にのみ、データのUIをレンダリングできます。 ```angular-ts -import { AsyncPipe } from '@angular/common'; +import {AsyncPipe} from '@angular/common'; @Component({ imports: [AsyncPipe], @@ -659,7 +659,7 @@ import { AsyncPipe } from '@angular/common'; } `, }) -export class UserProfileComponent { +export class UserProfile { userId = input.required(); user$!: Observable; diff --git a/adev-ja/src/content/guide/hybrid-rendering.en.md b/adev-ja/src/content/guide/hybrid-rendering.en.md deleted file mode 100644 index 8db63ebf99..0000000000 --- a/adev-ja/src/content/guide/hybrid-rendering.en.md +++ /dev/null @@ -1,324 +0,0 @@ -# Hybrid rendering - -## What is hybrid rendering? - -Hybrid rendering combines the benefits of server-side rendering (SSR), pre-rendering (also known as "static site generation" or SSG) and client-side rendering (CSR) to optimize your Angular application. It allows you to render different parts of your application using different strategies, giving you fine-grained control over how your app is delivered to users. - -Angular’s new **developer preview** server rendering APIs offer a more efficient and adaptable approach to building modern web applications. These APIs give you complete control over your app’s rendering, allowing for optimizations that enhance performance, Search Engine Optimization (SEO), and overall user experience. - -**Benefits of these new APIs:** - -- **Greater flexibility:** - - Leverage fine-grained control over rendering allows you to optimize for performance and user experience in different parts of your application. - - Choose the best rendering strategy for each route, whether it's server-side rendering for fast initial load times, client-side rendering for dynamic interactivity, or a hybrid approach. -- **Built-in internationalization (i18n):** - - Easily adapt your application to different languages and regions with out-of-the-box i18n support. -- **Environment agnostic:** - - Use these APIs with any JavaScript runtime environment, not just Node.js. - - Enjoy the benefits of enhanced rendering capabilities regardless of your technology stack. -- **Seamless dev server integration:** - - Take advantage of a smooth and efficient development experience from a fully integrated development server. - -This developer preview gives you a first look at these powerful new features. The Angular team encourages you to explore them and provide feedback to help shape the future of Angular server rendering. - -## Setting up hybrid rendering - -You can create a **new** project with server-side routing with the Angular CLI: - -```shell -ng new --ssr --server-routing -``` - -You can also add server-side routing to an existing project with the `ng add` command: - -```shell -ng add @angular/ssr --server-routing -``` - -## Server routing - -### Configuring server routes - -You can create a server route config by declaring an array of [`ServerRoute`](api/ssr/ServerRoute 'API reference') objects. This configuration typically lives in a file named `app.routes.server.ts`. - -```typescript -// app.routes.server.ts -import { RenderMode, ServerRoute } from '@angular/ssr'; - -export const serverRoutes: ServerRoute[] = [ - { - path: '', // This renders the "/" route on the client (CSR) - renderMode: RenderMode.Client, - }, - { - path: 'about', // This page is static, so we prerender it (SSG) - renderMode: RenderMode.Prerender, - }, - { - path: 'profile', // This page requires user-specific data, so we use SSR - renderMode: RenderMode.Server, - }, - { - path: '**', // All other routes will be rendered on the server (SSR) - renderMode: RenderMode.Server, - }, -]; -``` - -You can add this config to your application using the [`provideServerRouting`](api/ssr/provideServerRouting 'API reference') function. - -```typescript -import { provideServerRouting } from '@angular/ssr'; -import { serverRoutes } from './app.routes.server'; - -// app.config.server.ts -const serverConfig: ApplicationConfig = { - providers: [ - provideServerRendering(), - provideServerRouting(serverRoutes), - // ... other providers ... - ] -}; -``` - -When using the [App shell pattern](ecosystem/service-workers/app-shell), you must specify the route to be used as the app shell for client-side rendered routes. To do this, provide an options object with the `appShellRoute` property to [`provideServerRouting`](api/ssr/provideServerRouting 'API reference'): - -```typescript -import { provideServerRouting, withAppShell } from '@angular/ssr'; -import { AppShellComponent } from './app-shell/app-shell.component'; - -const serverConfig: ApplicationConfig = { - providers: [ - provideServerRouting(serverRoutes, withAppShell(AppShellComponent)), - // ... other providers ... - ] -}; -``` - -### Rendering modes - -The server routing configuration lets you specify how each route in your application should render by setting a [`RenderMode`](api/ssr/RenderMode 'API reference'): - -| Rendering mode | Description | -| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Server (SSR)** | Renders the application on the server for each request, sending a fully populated HTML page to the browser. See the [Server-Side Rendering (SSR) guide](guide/ssr) for more information. | -| **Client (CSR)** | Renders the application in the browser. This is the default Angular behavior. | -| **Prerender (SSG)** | Prerenders the application at build time, generating static HTML files for each route. See the [Prerendering guide](guide/prerendering) for more information. | - -#### Choosing a rendering mode - -Each rendering mode has different benefits and drawbacks. You can choose rendering modes based on the specific needs of your application. - -##### Client-side rendering - -Client-side rendering has the simplest development model, as you can write code that assumes it always runs in a web browser. This lets you use a wide range of client-side libraries that also assume they run in a browser. - -Client-side rendering generally has worse performance than other rendering modes, as it must download, parse, and execute your page's JavaScript before the user can see any rendered content. If your page fetches more data from the server as it renders, users also have to wait for those additional requests before they can view the complete content. - -If your page is indexed by search crawlers, client-side rendering may negatively affect search engine optimization (SEO), as search crawlers have limits to how much JavaScript they execute when indexing a page. - -When client-side rendering, the server does not need to do any work to render a page beyond serving static JavaScript assets. You may consider this factor if server cost is a concern. - -Applications that support installable, offline experiences with [service workers](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) can rely on client-side rendering without needing to communicate with a server. - -##### Server-side rendering - -Server-side rendering offers faster page loads than client-side rendering. Instead of waiting for JavaScript to download and run, the server directly renders an HTML document upon receiving a request from the browser. The user experiences only the latency necessary for the server to fetch data and render the requested page. This mode also eliminates the need for additional network requests from the browser, as your code can fetch data during rendering on the server. - -Server-side rendering generally has excellent search engine optimization (SEO), as search crawlers receive a fully rendered HTML document. - -Server-side rendering requires you to author code that does not strictly depend on browser APIs and limits your selection of JavaScript libraries that assume they run in a browser. - -When server-side rendering, your server runs Angular to produce an HTML response for every request. This additional cost may affect server hosting costs. - -##### Build-time prerendering - -Prerendering offers faster page loads than both client-side rendering and server-side rendering. Because prerendering creates HTML documents at _build-time_, the server can directly respond to requests with the static HTML document without any additional work. - -Prerendering requires that all information necessary to render a page is available at _build-time_. This means that prerendered pages cannot include any data to the specific user loading the page. This means that prerendering is primarily useful for pages that are the same for all users of your application. - -Because prerendering occurs at build-time, it may add significant time to your production builds. Using [`getPrerenderParams`](api/ssr/ServerRoutePrerenderWithParams#getPrerenderParams 'API reference') to produce a large number of HTML documents may affect the total file size of your deployments, and thus lead to slower deployments. - -It may also add time to your deployments based on the number of static HTML documents included in your build output. - -Prerendering generally has excellent search engine optimization (SEO), as search crawlers receive a fully rendered HTML document. - -Prerendering requires you to author code that does not strictly depend on browser APIs and limits your selection of JavaScript libraries that assume they run in a browser. - -Prerendering incurs extremely little overhead per server request, as your server responds with static HTML documents. Static files are also easily cached by Content Delivery Networks (CDNs), browsers, and intermediate caching layers for even faster subsequent page loads. Deploying static HTML files to a CDN improves scalability by offloading work from your application web server, which is impactful for high-traffic applications. - -### Setting headers and status codes - -You can set custom headers and status codes for individual server routes using the `headers` and `status` properties in the `ServerRoute` configuration. - -```typescript -// app.routes.server.ts -import { RenderMode, ServerRoute } from '@angular/ssr'; - -export const serverRoutes: ServerRoute[] = [ - { - path: 'profile', - renderMode: RenderMode.Server, - headers: { - 'X-My-Custom-Header': 'some-value', - }, - status: 201, - }, - // ... other routes -]; -``` - -### Redirects - -Angular handles redirects specified by the [`redirectTo`](api/ssr/ServerRoutePrerenderWithParams#getPrerenderParams 'API reference') property in route configurations, differently on the server-side. - -**Server-Side Rendering (SSR)** -Redirects are performed using standard HTTP redirects (e.g., 301, 302) within the server-side rendering process. - -**Prerendering (SSG)** -Redirects are implemented as "soft redirects" using `` tags in the prerendered HTML. This allows for redirects without requiring a round trip to the server. - -### Customizing build-time prerendering (SSG) - -When using [`RenderMode.Prerender`](api/ssr/RenderMode#Prerender 'API reference'), you can specify several configuration options to customize the prerendering and serving process. - -#### Parameterized routes - -For each route with [`RenderMode.Prerender`](api/ssr/RenderMode#Prerender 'API reference'), you can specify a [`getPrerenderParams`](api/ssr/ServerRoutePrerenderWithParams#getPrerenderParams 'API reference') function. This function lets you control which specific parameters produce separate prerendered documents. - -The [`getPrerenderParams`](api/ssr/ServerRoutePrerenderWithParams#getPrerenderParams 'API reference') function returns a `Promise` that resolves to an array of objects. Each object is a key-value map of route parameter name to value. For example, if you define a route like `posts/:id`, `getPrerenderParams ` could return the array `[{id: 123}, {id: 456}]`, and thus render separate documents for `posts/123` and `posts/456`. - -The body of [`getPrerenderParams`](api/ssr/ServerRoutePrerenderWithParams#getPrerenderParams 'API reference') can use Angular's [`inject`](api/core/inject 'API reference') function to inject dependencies and perform any work to determine which routes to prerender. This typically includes making requests to fetch data to construct the array of parameter values. - -```typescript -// app.routes.server.ts -import { RenderMode, ServerRoute } from '@angular/ssr'; - -export const serverRoutes: ServerRoute[] = [ - { - path: 'post/:id', - renderMode: RenderMode.Prerender, - async getPrerenderParams() { - const dataService = inject(PostService); - const ids = await dataService.getIds(); // Assuming this returns ['1', '2', '3'] - - return ids.map(id => ({ id })); // Transforms IDs into an array of objects for prerendering - - // This will prerender the paths: `/post/1`, `/post/2` and `/post/3` - }, - }, -]; -``` - -Because [`getPrerenderParams`](api/ssr/ServerRoutePrerenderWithParams#getPrerenderParams 'API reference') exclusively applies to [`RenderMode.Prerender`](api/ssr/RenderMode#Prerender 'API reference'), this function always runs at _build-time_. `getPrerenderParams` must not rely on any browser-specific or server-specific APIs for data. If the route does not specify a [`fallback`](api/ssr/ServerRoutePrerenderWithParams#fallback 'API reference') option, the route falls back to [`PrerenderFallback.Server`](api/ssr/PrerenderFallback#Server 'API reference') (SSR) by default. - -IMPORTANT: When using [`inject`](api/core/inject 'API reference') inside `getPrerenderParams`, please remember that `inject` must be used synchronously. It cannot be invoked within asynchronous callbacks or following any `await` statements. For more information, refer to [`runInInjectionContext` API reference](api/core/runInInjectionContext). - -#### Fallback strategies - -When using [`RenderMode.Prerender`](api/ssr/RenderMode#Prerender 'API reference') mode, you can specify a fallback strategy to handle requests for paths that haven't been prerendered. - -The available fallback strategies are: - -- **Server:** Fallback to server-side rendering. This is the **default** behavior if no `fallback` property is specified. -- **Client:** Fallback to client-side rendering. -- **None:** No fallback. Angular will not handle requests for paths that are not prerendered. - -```typescript -// app.routes.server.ts -import { RenderMode, PrerenderFallback, ServerRoute } from '@angular/ssr'; - -export const serverRoutes: ServerRoute[] = [ - { - path: 'post/:id', - renderMode: RenderMode.Prerender, - fallback: PrerenderFallback.Client, // Fallback to CSR if not prerendered - async getPrerenderParams() { - // This function returns an array of objects representing prerendered posts at the paths: - // `/post/1`, `/post/2`, and `/post/3`. - // The path `/post/4` will utilize the fallback behavior if it's requested. - return [{ id: 1 }, { id: 2 }, { id: 3 }]; - }, - }, -]; -``` - -## Accessing Request and Response via DI - -The `@angular/core` package provides several tokens for interacting with the server-side rendering environment. These tokens give you access to crucial information and objects within your Angular application during SSR. - -- **[`REQUEST`](api/core/REQUEST 'API reference'):** Provides access to the current request object, which is of type [`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request) from the Web API. This allows you to access headers, cookies, and other request information. -- **[`RESPONSE_INIT`](api/core/RESPONSE_INIT 'API reference'):** Provides access to the response initialization options, which is of type [`ResponseInit`](https://developer.mozilla.org/en-US/docs/Web/API/Response/Response#parameters) from the Web API. This allows you to set headers and the status code for the response dynamically. Use this token to set headers or status codes that need to be determined at runtime. -- **[`REQUEST_CONTEXT`](api/core/REQUEST_CONTEXT 'API reference'):** Provides access to additional context related to the current request. This context can be passed as the second parameter of the [`handle`](api/ssr/AngularAppEngine#handle 'API reference') function. Typically, this is used to provide additional request-related information that is not part of the standard Web API. - -```angular-ts -import { inject, REQUEST } from '@angular/core'; - -@Component({ - selector: 'app-my-component', - template: `

My Component

`, -}) -export class MyComponent { - constructor() { - const request = inject(REQUEST); - console.log(request?.url); - } -} -``` - -IMPORTANT: The above tokens will be `null` in the following scenarios: -- During the build processes. -- When the application is rendered in the browser (client-side rendering). -- When performing static site generation (SSG). -- During route extraction in development (at the time of the request). - -## Configuring a non-Node.js Server - -The `@angular/ssr` provides essential APIs for server-side rendering your Angular application on platforms other than Node.js. It leverages the standard [`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request) and [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response) objects from the Web API, enabling you to integrate Angular SSR into various server environments. For detailed information and examples, refer to the [`@angular/ssr` API reference](api/ssr/AngularAppEngine). - -```typescript -// server.ts -import { AngularAppEngine, createRequestHandler } from '@angular/ssr'; - -const angularApp = new AngularAppEngine(); - -/** - * This is a request handler used by the Angular CLI (dev-server and during build). - */ -const reqHandler = createRequestHandler(async (req: Request) => { - const res: Response|null = await angularApp.render(req); - - // ... -}); -``` - -## Configuring a Node.js Server - -The `@angular/ssr/node` extends `@angular/ssr` specifically for Node.js environments. It provides APIs that make it easier to implement server-side rendering within your Node.js application. For a complete list of functions and usage examples, refer to the [`@angular/ssr/node` API reference](api/ssr/node/AngularNodeAppEngine) API reference. - -```typescript -// server.ts -import { AngularNodeAppEngine, createNodeRequestHandler, writeResponseToNodeResponse } from '@angular/ssr/node'; -import express from 'express'; - -const app = express(); -const angularApp = new AngularNodeAppEngine(); - -app.use('*', (req, res, next) => { - angularApp - .handle(req) - .then(response => { - if (response) { - writeResponseToNodeResponse(response, res); - } else { - next(); // Pass control to the next middleware - } - }) - .catch(next); -}); - -/** - * The request handler used by the Angular CLI (dev-server and during build). - */ -export const reqHandler = createNodeRequestHandler(app); -``` diff --git a/adev-ja/src/content/guide/hybrid-rendering.md b/adev-ja/src/content/guide/hybrid-rendering.md deleted file mode 100644 index 25ccb93220..0000000000 --- a/adev-ja/src/content/guide/hybrid-rendering.md +++ /dev/null @@ -1,325 +0,0 @@ -# ハイブリッドレンダリング - -## ハイブリッドレンダリングとは何か？ - -ハイブリッドレンダリングは、サーバーサイドレンダリング（SSR）、プリレンダリング（「静的サイト生成」またはSSGとしても知られています）、クライアントサイドレンダリング（CSR）の利点を組み合わせて、Angularアプリケーションを最適化します。これにより、アプリケーションのさまざまな部分を異なる戦略を使用してレンダリングでき、アプリケーションがユーザーに配信される方法をきめ細かく制御できます。 - -Angularの新しい**開発者プレビュー**のサーバーレンダリングAPIは、最新のウェブアプリケーションを構築するためのより効率的で適応性の高いアプローチを提供します。これらのAPIは、アプリケーションのレンダリングを完全に制御できるため、パフォーマンスや検索エンジン最適化（SEO）、および全体的なユーザー体験を向上させる最適化が可能です。 - -**これらの新しいAPIのメリット：** - -- **柔軟性の向上：** - - レンダリングに対するきめ細かい制御を活用することで、アプリケーションのさまざまな部分のパフォーマンスとユーザー体験を最適化できます。 - - 各ルートに最適なレンダリング戦略を選択できます。高速な初期ロード時間のためのサーバーサイドレンダリング、動的なインタラクティブ性のためのクライアントサイドレンダリング、またはハイブリッドアプローチなどです。 -- **組み込みの国際化（i18n）：** - - すぐに使えるi18nサポートにより、アプリケーションをさまざまな言語や地域に簡単に適応させることができます。 -- **環境に依存しない：** - - Node.jsだけでなく、任意のJavaScriptランタイム環境でこれらのAPIを使用できます。 - - テクノロジースタックに関係なく、強化されたレンダリング機能の利点を享受できます。 -- **シームレスな開発サーバー統合：** - - 完全統合された開発サーバーからスムーズで効率的な開発エクスペリエンスを活用できます。 - -この開発者プレビューでは、これらの強力な新機能をいち早く確認できます。Angularチームは、みなさんがこれらの機能を探索し、フィードバックを提供してAngularサーバーレンダリングの将来を形作ることを奨励しています。 - -## ハイブリッドレンダリングの設定 - -Angular CLIを使用して、サーバーサイドルーティングを備えた**新しい**プロジェクトを作成できます。 - -```shell -ng new --ssr --server-routing -``` - -`ng add`コマンドを使用して、既存のプロジェクトにサーバーサイドルーティングの追加もできます。 - -```shell -ng add @angular/ssr --server-routing -``` - -## サーバールーティング - -### サーバールートの設定 - -`ServerRoute`オブジェクトの配列を宣言することで、サーバールート設定を作成できます。この設定は、通常`app.routes.server.ts`という名前のファイルに格納されます。 - -```typescript -// app.routes.server.ts -import { RenderMode, ServerRoute } from '@angular/ssr'; - -export const serverRoutes: ServerRoute[] = [ - { - path: '', // これはクライアントで "/" ルートをレンダリングします (CSR) - renderMode: RenderMode.Client, - }, - { - path: 'about', // このページは静的なので、プリレンダリングします (SSG) - renderMode: RenderMode.Prerender, - }, - { - path: 'profile', // このページはユーザー固有のデータが必要なので、SSR を使用します - renderMode: RenderMode.Server, - }, - { - path: '**', // その他すべてのルートはサーバーでレンダリングされます (SSR) - renderMode: RenderMode.Server, - }, -]; -``` - -[`provideServerRouting`](api/ssr/provideServerRouting 'API reference')関数を使用して、この設定をアプリケーションに追加できます。 - -```typescript -import { provideServerRouting } from '@angular/ssr'; -import { serverRoutes } from './app.routes.server'; - -// app.config.server.ts -const serverConfig: ApplicationConfig = { - providers: [ - provideServerRendering(), - provideServerRouting(serverRoutes), - // ... other providers ... - ] -}; -``` - -[App Shellパターン](ecosystem/service-workers/app-shell)を使用する場合は、クライアントサイドでレンダリングされたルートのアプリケーションシェルとして使用するルートを指定する必要があります。これを行うには、`appShellRoute`プロパティを持つオプションオブジェクトを[`provideServerRouting`](api/ssr/provideServerRouting 'API reference')に提供します。 - -```typescript -import { provideServerRouting, withAppShell } from '@angular/ssr'; -import { AppShellComponent } from './app-shell/app-shell.component'; - -const serverConfig: ApplicationConfig = { - providers: [ - provideServerRouting(serverRoutes, withAppShell(AppShellComponent)), - // ... other providers ... - ] -}; -``` - -### レンダリングモード - -サーバールーティング設定では、`RenderMode`を設定することで、アプリケーションの各ルートがどのようにレンダリングされるかを指定できます。 - -| レンダリングモード | 説明 | -| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Server (SSR)** | 各リクエストに対してサーバーでアプリケーションをレンダリングし、完全に完成したHTMLページをブラウザに送信します。詳細については、[サーバーサイドレンダリング（SSR）ガイド](guide/ssr)を参照してください。 | -| **Client (CSR)** | ブラウザでアプリケーションをレンダリングします。これはAngularのデフォルトの動作です。 | -| **Prerender (SSG)** | ビルド時にアプリケーションをプリレンダリングし、各ルートの静的HTMLファイルを生成します。詳細については、[プリレンダリングガイド](guide/prerendering)を参照してください。 | - -#### レンダリングモードの選択 - -各レンダリングモードには、それぞれ異なる利点と欠点があります。アプリケーションの具体的なニーズに基づいてレンダリングモードを選択できます。 - -##### クライアントサイドレンダリング - -クライアントサイドレンダリングは、常にウェブブラウザで実行されると仮定してコードを記述できるため、最もシンプルな開発モデルです。これにより、ブラウザで実行されると仮定する広範なクライアントサイドライブラリを使用できます。 - -クライアントサイドレンダリングは、一般的に他のレンダリングモードよりもパフォーマンスが劣ります。ユーザーがレンダリングされたコンテンツを表示する前に、ページのJavaScriptをダウンロード、解析、および実行する必要があるためです。ページがレンダリング中にサーバーからさらにデータを取得する場合、ユーザーは完全なコンテンツを表示する前に、それらの追加リクエストを待つ必要もあります。 - -ページが検索クローラーによってインデックス付けされている場合、クライアントサイドレンダリングは検索エンジン最適化（SEO）に悪影響を与える可能性があります。検索クローラーは、ページをインデックス付けする際に実行するJavaScriptの量に制限があるためです。 - -クライアントサイドレンダリングの場合、サーバーは静的JavaScriptアセットを提供する以外に、ページをレンダリングするための作業はありません。サーバーコストが懸念事項である場合は、この要素を考慮できます。 - -[サービスワーカー](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)を使用してインストール可能なオフラインエクスペリエンスをサポートするアプリケーションは、サーバーと通信する必要なく、クライアントサイドレンダリングに依存できます。 - -##### サーバーサイドレンダリング - -サーバーサイドレンダリングは、クライアントサイドレンダリングよりもページのロードが高速になります。JavaScriptのダウンロードと実行を待つ代わりに、サーバーはブラウザからリクエストを受信すると、直接HTMLドキュメントをレンダリングします。ユーザーは、サーバーがデータを取得して要求されたページをレンダリングするために必要な待ち時間しか経験しません。このモードでは、ブラウザからの追加のネットワークリクエストも不要になります。コードはサーバーでレンダリング中にデータを取得できるためです。 - -サーバーサイドレンダリングは、一般的に検索エンジン最適化（SEO）に優れています。検索クローラーは完全にレンダリングされたHTMLドキュメントを受け取るためです。 - -サーバーサイドレンダリングでは、ブラウザAPIに厳密に依存しないコードを作成する必要があり、ブラウザで実行されると仮定するJavaScriptライブラリの選択が制限されます。 - -サーバーサイドレンダリングの場合、サーバーはAngularを実行して、すべてのリクエストに対してHTMLレスポンスを生成します。この追加コストは、サーバーのホスティングコストに影響を与える可能性があります。 - -##### ビルド時のプリレンダリング - -プリレンダリングは、クライアントサイドレンダリングとサーバーサイドレンダリングの両方よりもページのロードが高速になります。プリレンダリングは_ビルド時_にHTMLドキュメントを作成するため、サーバーは追加の作業をすることなく、静的HTMLドキュメントですぐにリクエストに応答できます。 - -プリレンダリングでは、ページをレンダリングするために必要なすべての情報が_ビルド時_に利用可能である必要があります。つまり、プリレンダリングされたページには、ページを読み込んでいる特定のユーザーへのデータを含めることができません。これは、プリレンダリングは主に、アプリケーションのすべてのユーザーに対して同じであるページに役立つことを意味します。 - -プリレンダリングはビルド時に行われるため、本番ビルドにかなりの時間がかかる可能性があります。[`getPrerenderParams`](api/ssr/ServerRoutePrerenderWithParams#getPrerenderParams 'API reference')を使用して多数のHTMLドキュメントを生成すると、展開ファイルの総サイズに影響し、デプロイが遅くなる可能性があります。 - -ビルド出力に含まれる静的HTMLドキュメントの数によっては、デプロイ時間が長くなる可能性もあります。 - -プリレンダリングは、一般的に検索エンジン最適化（SEO）に優れています。検索クローラーは完全にレンダリングされたHTMLドキュメントを受け取るためです。 - -プリレンダリングでは、ブラウザAPIに厳密に依存しないコードを作成する必要があり、ブラウザで実行されると仮定するJavaScriptライブラリの選択が制限されます。 - -プリレンダリングは、サーバーが静的HTMLドキュメントで応答するため、サーバーリクエストごとのオーバーヘッドが非常に少なくなります。静的ファイルは、コンテンツデリバリーネットワーク（CDN）、ブラウザ、および中間キャッシュレイヤーによって簡単にキャッシュされるため、その後のページロードがさらに高速になります。静的HTMLファイルをCDNに展開すると、アプリケーションウェブサーバーからの作業負荷を軽減できるため、トラフィックの多いアプリケーションにとって大きな影響があります。 - -### ヘッダーとステータスコードの設定 - -`ServerRoute`設定の`headers`プロパティと`status`プロパティを使用して、個々のサーバールートのカスタムヘッダーとステータスコードを設定できます。 - -```typescript -// app.routes.server.ts -import { RenderMode, ServerRoute } from '@angular/ssr'; - -export const serverRoutes: ServerRoute[] = [ - { - path: 'profile', - renderMode: RenderMode.Server, - headers: { - 'X-My-Custom-Header': 'some-value', - }, - status: 201, - }, - // ... other routes -]; -``` - -### リダイレクト - -Angularは、ルート設定の[`redirectTo`](api/ssr/ServerRoutePrerenderWithParams#getPrerenderParams 'API reference')プロパティで指定されたリダイレクトを、サーバーサイドでは異なる方法で処理します。 - -**サーバーサイドレンダリング（SSR）** -リダイレクトは、サーバーサイドレンダリングプロセス内で標準のHTTPリダイレクト（例：301、302）を使用して実行されます。 - -**プリレンダリング（SSG）** -リダイレクトは、プリレンダリングされたHTMLで``タグを使用して「ソフトリダイレクト」として実装されます。これにより、サーバーへのラウンドトリップを行うことなくリダイレクトが可能になります。 - -### ビルド時のプリレンダリング（SSG）のカスタマイズ - -[`RenderMode.Prerender`](api/ssr/RenderMode#Prerender 'API reference')を使用する場合、プリレンダリングとサービスプロセスをカスタマイズするためのいくつかの設定オプションを指定できます。 - -#### パラメータ化されたルート - -[`RenderMode.Prerender`](api/ssr/RenderMode#Prerender 'API reference')を持つ各ルートについて、[`getPrerenderParams`](api/ssr/ServerRoutePrerenderWithParams#getPrerenderParams 'API reference')関数を指定できます。この関数を使用すると、どの特定のパラメータで個別のプリレンダリングされたドキュメントを生成するかを制御できます。 - -[`getPrerenderParams`](api/ssr/ServerRoutePrerenderWithParams#getPrerenderParams 'API reference')関数は、オブジェクトの配列に解決される`Promise`を返します。各オブジェクトは、ルートパラメータ名と値のキーと値のマップです。たとえば、`posts/:id`のようなルートを定義した場合、`getPrerenderParams`は配列`[{id: 123}, {id: 456}]`を返し、`posts/123`と`posts/456`の個別のドキュメントをレンダリングします。 - -[`getPrerenderParams`](api/ssr/ServerRoutePrerenderWithParams#getPrerenderParams 'API reference')の本文では、Angularの[`inject`](api/core/inject 'API reference')関数を使用して依存関係を注入し、プリレンダリングするルートを決定するための任意の作業ができます。これには、通常、データを取得するためのリクエストを実行して、パラメータ値の配列を作成することが含まれます。 - -```typescript -// app.routes.server.ts -import { RenderMode, ServerRoute } from '@angular/ssr'; - -export const serverRoutes: ServerRoute[] = [ - { - path: 'post/:id', - renderMode: RenderMode.Prerender, - async getPrerenderParams() { - const dataService = inject(PostService); - const ids = await dataService.getIds(); // これは ['1', '2', '3'] を返すことを想定しています - - return ids.map(id => ({ id })); // プリレンダリング用のオブジェクトの配列に変換します - - // これにより、パス `/post/1`、`/post/2`、`/post/3` がプリレンダリングされます - }, - }, -]; -``` - -[`getPrerenderParams`](api/ssr/ServerRoutePrerenderWithParams#getPrerenderParams 'API reference')は[`RenderMode.Prerender`](api/ssr/RenderMode#Prerender 'API reference')のみに適用されるため、この関数は常に_ビルド時_に実行されます。`getPrerenderParams`は、データに対してブラウザ固有またはサーバー固有のAPIに依存してはなりません。ルートが[`fallback`](api/ssr/ServerRoutePrerenderWithParams#fallback 'API reference')オプションを指定しない場合、ルートはデフォルトで[`PrerenderFallback.Server`](api/ssr/PrerenderFallback#Server 'API reference')（SSR）にフォールバックします。 - -IMPORTANT: `getPrerenderParams`内で[`inject`](api/core/inject 'API reference')を使用する場合は、`inject`を同期的に使用する必要があることを覚えておいてください。非同期コールバック内、または`await`ステートメントの後で使用できません。詳細については、[`runInInjectionContext` APIリファレンス](api/core/runInInjectionContext)を参照してください。 - -#### フォールバック戦略 - -[`RenderMode.Prerender`](api/ssr/RenderMode#Prerender 'API reference')モードを使用する場合、プリレンダリングされていないパスのリクエストを処理するためのフォールバック戦略を指定できます。 - -利用可能なフォールバック戦略は次のとおりです。 - -- **Server:** サーバーサイドレンダリングにフォールバックします。これは、`fallback`プロパティが指定されていない場合の**デフォルト**の動作です。 -- **Client:** クライアントサイドレンダリングにフォールバックします。 -- **None:** フォールバックはありません。Angularは、プリレンダリングされていないパスのリクエストを処理しません。 - -```typescript -// app.routes.server.ts -import { RenderMode, PrerenderFallback, ServerRoute } from '@angular/ssr'; - -export const serverRoutes: ServerRoute[] = [ - { - path: 'post/:id', - renderMode: RenderMode.Prerender, - fallback: PrerenderFallback.Client, // プリレンダリングされていない場合はCSRにフォールバックします - async getPrerenderParams() { - // この関数は、パス `/post/1`、`/post/2`、`/post/3` で - // プリレンダリングされた投稿を表すオブジェクトの配列を返します。 - // パス `/post/4` は、要求された場合にフォールバック動作を使用します。 - return [{ id: 1 }, { id: 2 }, { id: 3 }]; - }, - }, -]; -``` - -## DIによるリクエストとレスポンスへのアクセス - -`@angular/core`パッケージは、サーバーサイドレンダリング環境とやり取りするためのいくつかのトークンを提供します。これらのトークンを使用すると、SSR中にAngularアプリケーション内で重要な情報とオブジェクトにアクセスできます。 - -- **[`REQUEST`](api/core/REQUEST 'API reference'):** Web APIの[`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request)型である現在のリクエストオブジェクトへのアクセスを提供します。これにより、ヘッダー、Cookie、その他のリクエスト情報にアクセスできます。 -- **[`RESPONSE_INIT`](api/core/RESPONSE_INIT 'API reference'):** Web APIの[`ResponseInit`](https://developer.mozilla.org/en-US/docs/Web/API/Response/Response#parameters)型であるレスポンス初期化オプションへのアクセスを提供します。これにより、ヘッダーとレスポンスのステータスコードを動的に設定できます。ランタイムで決定する必要があるヘッダーまたはステータスコードを設定するには、このトークンを使用します。 -- **[`REQUEST_CONTEXT`](api/core/REQUEST_CONTEXT 'API reference'):** 現在のリクエストに関する追加のコンテキストへのアクセスを提供します。このコンテキストは、[`handle`](api/ssr/AngularAppEngine#handle 'API reference')関数の2番目のパラメータとして渡すことができます。通常、これは標準のWeb APIの一部ではない追加のリクエスト関連情報を提供するために使用されます。 - -```angular-ts -import { inject, REQUEST } from '@angular/core'; - -@Component({ - selector: 'app-my-component', - template: `

My Component

`, -}) -export class MyComponent { - constructor() { - const request = inject(REQUEST); - console.log(request?.url); - } -} -``` - -IMPORTANT: 上記のトークンは、次のシナリオでは`null`になります。 - -- ビルドプロセス中。 -- アプリケーションがブラウザでレンダリングされる場合（クライアントサイドレンダリング）。 -- 静的サイト生成（SSG）を実行する場合。 -- 開発中のルート抽出時（リクエスト時）。 - -## Node.js以外のサーバーの設定 - -`@angular/ssr`は、Node.js以外のプラットフォームでAngularアプリケーションをサーバーサイドレンダリングするための重要なAPIを提供します。Web APIの標準的な[`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request)と[`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response)オブジェクトを活用することで、さまざまなサーバー環境にAngular SSRを統合できます。詳細情報と例については、[`@angular/ssr` APIリファレンス](api/ssr/AngularAppEngine)を参照してください。 - -```typescript -// server.ts -import { AngularAppEngine, createRequestHandler } from '@angular/ssr'; - -const angularApp = new AngularAppEngine(); - -/** - * これはAngular CLI（開発サーバーとビルド中）で使用されるリクエストハンドラーです。 - */ -const reqHandler = createRequestHandler(async (req: Request) => { - const res: Response|null = await angularApp.render(req); - - // ... -}); -``` - -## Node.jsサーバーの設定 - -`@angular/ssr/node`は、Node.js環境用に`@angular/ssr`を拡張したものです。Node.jsアプリケーション内でサーバーサイドレンダリングを実装しやすくするためのAPIを提供します。関数の完全なリストと使用例については、[`@angular/ssr/node` APIリファレンス](api/ssr/node/AngularNodeAppEngine) APIリファレンスを参照してください。 - -```typescript -// server.ts -import { AngularNodeAppEngine, createNodeRequestHandler, writeResponseToNodeResponse } from '@angular/ssr/node'; -import express from 'express'; - -const app = express(); -const angularApp = new AngularNodeAppEngine(); - -app.use('*', (req, res, next) => { - angularApp - .handle(req) - .then(response => { - if (response) { - writeResponseToNodeResponse(response, res); - } else { - next(); // 次のミドルウェアに制御を渡します - } - }) - .catch(next); -); - -/** - * Angular CLI（開発サーバーとビルド中）で使用されるリクエストハンドラーです。 - */ -export const reqHandler = createNodeRequestHandler(app); -``` diff --git a/adev-ja/src/content/guide/hydration.en.md b/adev-ja/src/content/guide/hydration.en.md index e9e71a0a6c..2201aa8892 100644 --- a/adev-ja/src/content/guide/hydration.en.md +++ b/adev-ja/src/content/guide/hydration.en.md @@ -29,7 +29,7 @@ import { } from '@angular/platform-browser'; ... -bootstrapApplication(AppComponent, { +bootstrapApplication(App, { providers: [provideClientHydration()] }); ``` @@ -41,9 +41,9 @@ import {provideClientHydration} from '@angular/platform-browser'; import {NgModule} from '@angular/core'; @NgModule({ - declarations: [AppComponent], - exports: [AppComponent], - bootstrap: [AppComponent], + declarations: [App], + exports: [App], + bootstrap: [App], providers: [provideClientHydration()], }) export class AppModule {} @@ -183,7 +183,7 @@ import {provideStabilityDebugging} from '@angular/core'; import {bootstrapApplication} from '@angular/platform-browser'; import 'zone.js/plugins/task-tracking'; // Use if you have Zone.js with `provideZoneChangeDetection` -bootstrapApplication(AppComponent, { +bootstrapApplication(App, { providers: [provideStabilityDebugging()], }); ``` @@ -206,7 +206,7 @@ import { } from '@angular/platform-browser'; ... -bootstrapApplication(AppComponent, { +bootstrapApplication(App, { providers: [provideClientHydration(withI18nSupport())] }); ``` diff --git a/adev-ja/src/content/guide/hydration.md b/adev-ja/src/content/guide/hydration.md index db78050ae5..3e61a20657 100644 --- a/adev-ja/src/content/guide/hydration.md +++ b/adev-ja/src/content/guide/hydration.md @@ -29,7 +29,7 @@ import { } from '@angular/platform-browser'; ... -bootstrapApplication(AppComponent, { +bootstrapApplication(App, { providers: [provideClientHydration()] }); ``` @@ -41,9 +41,9 @@ import {provideClientHydration} from '@angular/platform-browser'; import {NgModule} from '@angular/core'; @NgModule({ - declarations: [AppComponent], - exports: [AppComponent], - bootstrap: [AppComponent], + declarations: [App], + exports: [App], + bootstrap: [App], providers: [provideClientHydration()], }) export class AppModule {} @@ -183,7 +183,7 @@ import {provideStabilityDebugging} from '@angular/core'; import {bootstrapApplication} from '@angular/platform-browser'; import 'zone.js/plugins/task-tracking'; // `provideZoneChangeDetection` でZone.jsを使用している場合に使用 -bootstrapApplication(AppComponent, { +bootstrapApplication(App, { providers: [provideStabilityDebugging()], }); ``` @@ -206,7 +206,7 @@ import { } from '@angular/platform-browser'; ... -bootstrapApplication(AppComponent, { +bootstrapApplication(App, { providers: [provideClientHydration(withI18nSupport())] }); ``` diff --git a/adev-ja/src/content/guide/i18n/format-data-locale.md b/adev-ja/src/content/guide/i18n/format-data-locale.md index 8f90ef869f..3565cf2efc 100644 --- a/adev-ja/src/content/guide/i18n/format-data-locale.md +++ b/adev-ja/src/content/guide/i18n/format-data-locale.md @@ -25,7 +25,7 @@ Add the `locale` parameter to the pipe to override the current value of `LOCALE_ To force the currency to use American English \(`en-US`\), use the following format for the `CurrencyPipe` ```angular-html -{{ amount | currency : 'en-US' }} +{{ amount | currency: 'en-US' }} ``` HELPFUL: The locale specified for the `CurrencyPipe` overrides the global `LOCALE_ID` token of your application. diff --git a/adev-ja/src/content/guide/image-optimization.en.md b/adev-ja/src/content/guide/image-optimization.en.md index 014f83ec3b..d5b6c958d2 100644 --- a/adev-ja/src/content/guide/image-optimization.en.md +++ b/adev-ja/src/content/guide/image-optimization.en.md @@ -369,6 +369,40 @@ There is an additional attribute supported by the `NgOptimizedImage` directive, A common use for `loaderParams` is controlling advanced image CDN features. +### Using the `transform` property with built-in loaders + +The built-in loaders for Cloudinary, Cloudflare, ImageKit, and Imgix support a special `transform` property within `loaderParams`. This property allows you to apply custom image transformations provided by your CDN. + +The `transform` property accepts two formats: + +#### String format + +Provide transformations as a comma-separated string using your CDN's transformation syntax: + +```html + +``` + +#### Object format + +Provide transformations as an object with key-value pairs. + +```html + +``` + +NOTE: The `transform` property is not supported by the Netlify loader, as Netlify's image CDN does not provide custom transformation parameters. + ### Example custom loader The following shows an example of a custom loader function. This example function concatenates `src` and `width`, and uses `loaderParams` to control a custom CDN feature for rounded corners: diff --git a/adev-ja/src/content/guide/image-optimization.md b/adev-ja/src/content/guide/image-optimization.md index 8945183c4f..734dbc1afd 100644 --- a/adev-ja/src/content/guide/image-optimization.md +++ b/adev-ja/src/content/guide/image-optimization.md @@ -55,7 +55,7 @@ NgOptimizedImageを使用するために画像ローダーは**必須ではあ [組み込みのサードパーティローダー](#built-in-loaders)を使用している場合は、`src`からベースURLパスを省略してください。これはローダーによって自動的に前置されます。 - + ページの[LCP画像](https://web.dev/lcp/#what-elements-are-considered)は、その読み込みを優先するために常に`priority`としてマークしてください。 ```html @@ -369,6 +369,40 @@ NOTE: `width`プロパティが常に存在するとは限りませんが、`ngS `loaderParams`の一般的な用途は、高度な画像CDN機能を制御することです。 +### 組み込みローダーでの`transform`プロパティの使用 {#using-the-transform-property-with-built-in-loaders} + +Cloudinary、Cloudflare、ImageKit、Imgix用の組み込みローダーは、`loaderParams`内で特別な`transform`プロパティをサポートしています。このプロパティを使用すると、CDNによって提供されるカスタム画像変換を適用できます。 + +`transform`プロパティは2つの形式を受け入れます。 + +#### 文字列形式 {#string-format} + +CDNの変換構文を使用して、カンマ区切りの文字列として変換を提供します。 + +```html + +``` + +#### オブジェクト形式 {#object-format} + +キーと値のペアを持つオブジェクトとして変換を提供します。 + +```html + +``` + +NOTE: `transform`プロパティは、Netlifyのローダーではサポートされていません。Netlifyの画像CDNはカスタム変換パラメーターを提供していないためです。 + ### カスタムローダーの例 {#example-custom-loader} 以下にカスタムローダー関数の例を示します。この例の関数は`src`と`width`を連結し、`loaderParams`を使用して角丸のためのカスタムCDN機能を制御します。 diff --git a/adev-ja/src/content/guide/incremental-hydration.en.md b/adev-ja/src/content/guide/incremental-hydration.en.md index dab1cb49b8..a4f5606bd2 100644 --- a/adev-ja/src/content/guide/incremental-hydration.en.md +++ b/adev-ja/src/content/guide/incremental-hydration.en.md @@ -22,7 +22,7 @@ import { } from '@angular/platform-browser'; ... -bootstrapApplication(AppComponent, { +bootstrapApplication(App, { providers: [provideClientHydration(withIncrementalHydration())] }); ``` @@ -31,7 +31,7 @@ Incremental Hydration depends on and enables [event replay](guide/hydration#capt ## How does incremental hydration work? -Incremental hydration builds on top of full-application [hydration](guide/hydration), [deferrable views](guide/defer), and [event replay](guide/hydration#capturing-and-replaying-events). With incremental hydration, you can add additional triggers to `@defer` blocks that define incremental hydration boundaries. Adding a `hydrate` trigger to a defer block tells Angular that it should load that defer block's dependencies during server-side rendering and render the main template rather than the `@placeholder`. When client-side rendering, the dependencies are still deferred, and the defer block content stays dehydrated until its `hydrate` trigger fires. That trigger tells the defer block to fetch its dependencies and hydrate the content. Any browser events, specifically those that match listeners registered in your component, that are triggered by the user prior to hydration are queued up and replayed once the hydration process is complete. +Incremental hydration builds on top of full-application [hydration](guide/hydration), [deferrable views](/guide/templates/defer), and [event replay](guide/hydration#capturing-and-replaying-events). With incremental hydration, you can add additional triggers to `@defer` blocks that define incremental hydration boundaries. Adding a `hydrate` trigger to a defer block tells Angular that it should load that defer block's dependencies during server-side rendering and render the main template rather than the `@placeholder`. When client-side rendering, the dependencies are still deferred, and the defer block content stays dehydrated until its `hydrate` trigger fires. That trigger tells the defer block to fetch its dependencies and hydrate the content. Any browser events, specifically those that match listeners registered in your component, that are triggered by the user prior to hydration are queued up and replayed once the hydration process is complete. ## Controlling hydration of content with triggers @@ -175,7 +175,7 @@ Hydrate triggers are additional triggers that are used alongside regular trigger ```angular-html @defer (on idle; hydrate on interaction) { -} @placeholder{ +} @placeholder {
Example Placeholder
} ``` @@ -194,7 +194,7 @@ Angular's component and dependency system is hierarchical, which means hydrating } @placeholder {
Child placeholder
} -} @placeholder{ +} @placeholder {
Parent Placeholder
} ``` diff --git a/adev-ja/src/content/guide/incremental-hydration.md b/adev-ja/src/content/guide/incremental-hydration.md index 3f3bf90391..dc83c22026 100644 --- a/adev-ja/src/content/guide/incremental-hydration.md +++ b/adev-ja/src/content/guide/incremental-hydration.md @@ -22,7 +22,7 @@ import { } from '@angular/platform-browser'; ... -bootstrapApplication(AppComponent, { +bootstrapApplication(App, { providers: [provideClientHydration(withIncrementalHydration())] }); ``` @@ -31,7 +31,7 @@ bootstrapApplication(AppComponent, { ## インクリメンタルハイドレーションの動作方法 -インクリメンタルハイドレーションは、完全なアプリケーション[ハイドレーション](guide/hydration)、[遅延可能ビュー](guide/defer)、および[イベントリプレイ](guide/hydration#capturing-and-replaying-events)を基盤として構築されています。インクリメンタルハイドレーションを使用すると、インクリメンタルハイドレーションの境界を定義する`@defer`ブロックに追加のトリガーを追加できます。`defer`ブロックに`hydrate`トリガーを追加すると、Angularはサーバーサイドレンダリング中にその`defer`ブロックの依存関係をロードし、`@placeholder`ではなくメインテンプレートをレンダリングする必要があることを認識します。クライアントサイドレンダリングの場合、依存関係はまだ遅延され、`hydrate`トリガーが起動するまで`defer`ブロックのコンテンツは非ハイドレーション状態のままです。そのトリガーは、`defer`ブロックに依存関係を取得してコンテンツをハイドレーションするよう指示します。ハイドレーションの前にユーザーによってトリガーされたブラウザイベント、特にコンポーネントに登録されたリスナーと一致するイベントは、キューに入れられ、ハイドレーションプロセスが完了すると再生されます。 +インクリメンタルハイドレーションは、完全なアプリケーション[ハイドレーション](guide/hydration)、[遅延可能ビュー](/guide/templates/defer)、および[イベントリプレイ](guide/hydration#capturing-and-replaying-events)を基盤として構築されています。インクリメンタルハイドレーションを使用すると、インクリメンタルハイドレーションの境界を定義する`@defer`ブロックに追加のトリガーを追加できます。`defer`ブロックに`hydrate`トリガーを追加すると、Angularはサーバーサイドレンダリング中にその`defer`ブロックの依存関係をロードし、`@placeholder`ではなくメインテンプレートをレンダリングする必要があることを認識します。クライアントサイドレンダリングの場合、依存関係はまだ遅延され、`hydrate`トリガーが起動するまで`defer`ブロックのコンテンツは非ハイドレーション状態のままです。そのトリガーは、`defer`ブロックに依存関係を取得してコンテンツをハイドレーションするよう指示します。ハイドレーションの前にユーザーによってトリガーされたブラウザイベント、特にコンポーネントに登録されたリスナーと一致するイベントは、キューに入れられ、ハイドレーションプロセスが完了すると再生されます。 ## トリガーによるコンテンツのハイドレーション制御 @@ -175,7 +175,7 @@ NOTE: `hydrate never`を使用すると、指定された`@defer`ブロックの ```angular-html @defer (on idle; hydrate on interaction) { -} @placeholder{ +} @placeholder {
Example Placeholder
} ``` @@ -194,7 +194,7 @@ Angularのコンポーネントと依存関係のシステムは階層的であ } @placeholder {
Child placeholder
} -} @placeholder{ +} @placeholder {
Parent Placeholder
} ``` diff --git a/adev-ja/src/content/guide/ngmodules/overview.md b/adev-ja/src/content/guide/ngmodules/overview.md index 76739afcee..a66b961245 100644 --- a/adev-ja/src/content/guide/ngmodules/overview.md +++ b/adev-ja/src/content/guide/ngmodules/overview.md @@ -1,6 +1,6 @@ # NgModules -IMPORTANT: The Angular team recommends using [standalone components](guide/components/anatomy-of-components#-imports-in-the-component-decorator) instead of `NgModule` for all new code. Use this guide to understand existing code built with `@NgModule`. +IMPORTANT: The Angular team recommends using [standalone components](guide/components) instead of `NgModule` for all new code. Use this guide to understand existing code built with `@NgModule`. An NgModule is a class marked by the `@NgModule` decorator. This decorator accepts _metadata_ that tells Angular how to compile component templates and configure dependency injection. @@ -173,7 +173,7 @@ IMPORTANT: The Angular team recommends using [bootstrapApplication](api/platform The `@NgModule` decorator accepts an optional `bootstrap` array that may contain one or more components. -You can use the [`bootstrapModule`](/api/core/PlatformRef#bootstrapModule) method from either [`platformBrowser`](api/platform-browser/platformBrowser) or [`platformServer`](api/platform-server/platformServer) to start an Angular application. When run, this function locates any elements on the page with a CSS selector that matches the listed componet(s) and renders those components on the page. +You can use the [`bootstrapModule`](/api/core/PlatformRef#bootstrapModule) method from either [`platformBrowser`](api/platform-browser/platformBrowser) or [`platformServer`](api/platform-server/platformServer) to start an Angular application. When run, this function locates any elements on the page with a CSS selector that matches the listed component(s) and renders those components on the page. ```typescript import {platformBrowser} from '@angular/platform-browser'; diff --git a/adev-ja/src/content/guide/routing/common-router-tasks.en.md b/adev-ja/src/content/guide/routing/common-router-tasks.en.md index 61c29c5ead..743028df8d 100644 --- a/adev-ja/src/content/guide/routing/common-router-tasks.en.md +++ b/adev-ja/src/content/guide/routing/common-router-tasks.en.md @@ -62,18 +62,18 @@ If you want to use the parent components route info you will need to set the rou ## Displaying a 404 page -To display a 404 page, set up a [wildcard route](guide/routing/common-router-tasks#setting-up-wildcard-routes) with the `component` property set to the component you'd like to use for your 404 page as follows: +To display a 404 page, set up a [wildcard route](guide/routing/define-routes#wildcards) with the `component` property set to the component you'd like to use for your 404 page as follows: ```ts const routes: Routes = [ - {path: 'first-component', component: FirstComponent}, - {path: 'second-component', component: SecondComponent}, - {path: '**', component: PageNotFoundComponent}, // Wildcard route for a 404 page + {path: 'first-component', component: First}, + {path: 'second-component', component: Second}, + {path: '**', component: PageNotFound}, // Wildcard route for a 404 page ]; ``` The last route with the `path` of `**` is a wildcard route. -The router selects this route if the requested URL doesn't match any of the paths earlier in the list and sends the user to the `PageNotFoundComponent`. +The router selects this route if the requested URL doesn't match any of the paths earlier in the list and sends the user to the `PageNotFound`. ## Link parameters array @@ -92,14 +92,15 @@ The following is a two-element array when specifying a route parameter: ```angular-html - {{ hero.id }}{{ hero.name }} + {{ hero.id }}{{ hero.name }} ``` Provide optional route parameters in an object, as in `{ foo: 'foo' }`: ```angular-html -Crisis Center +Crisis Center ``` This syntax passes matrix parameters, which are optional parameters associated with a specific URL segment. Learn more about [matrix parameters](/guide/routing/read-route-state#matrix-parameters). @@ -118,7 +119,7 @@ Review the following: - The first item in the array identifies the parent route \(`/crisis-center`\) - There are no parameters for this parent route - There is no default for the child route so you need to pick one -- You're navigating to the `CrisisListComponent`, whose route path is `/`, but you don't need to explicitly add the slash +- You're navigating to the `CrisisList`, whose route path is `/`, but you don't need to explicitly add the slash Consider the following router link that navigates from the root of the application down to the Dragon Crisis: @@ -133,7 +134,7 @@ Consider the following router link that navigates from the root of the applicati - You added the `id` of the Dragon Crisis as the second item in the array \(`1`\) - The resulting path is `/crisis-center/1` -You could also redefine the `AppComponent` template with Crisis Center routes exclusively: +You could also redefine the `App` template with Crisis Center routes exclusively: ```angular-ts @Component({ @@ -141,13 +142,13 @@ You could also redefine the `AppComponent` template with Crisis Center routes ex

Angular Router

- ` + `, }) -export class AppComponent {} +export class App {} ``` In summary, you can write applications with one, two or more levels of routing. @@ -184,4 +185,4 @@ The router supports both styles with two `LocationStrategy` providers: The `RouterModule.forRoot()` function sets the `LocationStrategy` to the `PathLocationStrategy`, which makes it the default strategy. You also have the option of switching to the `HashLocationStrategy` with an override during the bootstrapping process. -HELPFUL: For more information on providers and the bootstrap process, see [Dependency Injection](guide/di/dependency-injection-providers). +HELPFUL: For more information on providers and the bootstrap process, see [Dependency Injection](guide/di/defining-dependency-providers). diff --git a/adev-ja/src/content/guide/routing/common-router-tasks.md b/adev-ja/src/content/guide/routing/common-router-tasks.md index e58eba4c51..0dcdccf656 100644 --- a/adev-ja/src/content/guide/routing/common-router-tasks.md +++ b/adev-ja/src/content/guide/routing/common-router-tasks.md @@ -62,18 +62,18 @@ NOTE: 静的なルートデータ、解決されたルートデータ、パス ## 404 ページの表示 {#displaying-a-404-page} -404ページを表示するには、[ワイルドカードルート](guide/routing/common-router-tasks#setting-up-wildcard-routes) を設定します。このルートの `component` プロパティは、404ページに使用したいコンポーネントに設定します。 +404ページを表示するには、[ワイルドカードルート](guide/routing/define-routes#wildcards) を設定します。このルートの `component` プロパティは、404ページに使用したいコンポーネントに設定します。 ```ts const routes: Routes = [ - {path: 'first-component', component: FirstComponent}, - {path: 'second-component', component: SecondComponent}, - {path: '**', component: PageNotFoundComponent}, // Wildcard route for a 404 page + {path: 'first-component', component: First}, + {path: 'second-component', component: Second}, + {path: '**', component: PageNotFound}, // Wildcard route for a 404 page ]; ``` `path` が `**` の最後のルートは、ワイルドカードルートです。 -ルーターは、要求されたURLがリストの先頭にあるパスと一致しない場合、このルートを選択し、ユーザーを `PageNotFoundComponent` にルーティングします。 +ルーターは、要求されたURLがリストの先頭にあるパスと一致しない場合、このルートを選択し、ユーザーを `PageNotFound` にルーティングします。 ## リンクパラメータ配列 {#link-parameters-array} @@ -92,14 +92,15 @@ const routes: Routes = [ ```angular-html - {{ hero.id }}{{ hero.name }} + {{ hero.id }}{{ hero.name }} ``` オプションのルートパラメータは、`{ foo: 'foo' }` のようにオブジェクトで指定します。 ```angular-html -Crisis Center +Crisis Center ``` この構文はマトリックスパラメータを渡します。これは、特定のURLセグメントに関連付けられたオプションのパラメータです。[マトリックスパラメータ](/guide/routing/read-route-state#matrix-parameters)の詳細をご覧ください。 @@ -118,9 +119,9 @@ const routes: Routes = [ - 配列の最初の項目は、親ルート \(`/crisis-center`\) を識別します - この親ルートのパラメータはありません - 子ルートのデフォルトがないため、1つを選択する必要があります -- `CrisisListComponent` にナビゲートしており、そのルートパスは `/` ですが、スラッシュを明示的に追加する必要はありません +- `CrisisList` にナビゲートしており、そのルートパスは `/` ですが、スラッシュを明示的に追加する必要はありません -危機センターのルートを排他的に使用して、`AppComponent` テンプレートを再定義できます。 +危機センターのルートを排他的に使用して、`App` テンプレートを再定義できます。 ```angular-html Dragon Crisis @@ -133,7 +134,7 @@ const routes: Routes = [ - 配列の2番目の項目として、Dragon Crisisの `id` を追加しました。 - 結果のパスは `/crisis-center/1` です。 -また、`AppComponent`テンプレートを危機センターのルート専用に再定義できます： +また、`App`テンプレートを危機センターのルート専用に再定義できます： ```angular-ts @Component({ @@ -141,13 +142,13 @@ const routes: Routes = [

Angular Router

- ` + `, }) -export class AppComponent {} +export class App {} ``` 要約すると、ルーティングが1レベル、2レベル、または複数レベルのアプリケーションを作成できます。 @@ -184,4 +185,4 @@ localhost:3002/src/#/crisis-center `RouterModule.forRoot()` 関数は、`LocationStrategy` を `PathLocationStrategy` に設定します。これにより、デフォルトの戦略になります。 ブートストラッププロセス中にオーバーライドを使用して、`HashLocationStrategy` に切り替えることもできます。 -HELPFUL: プロバイダーとブートストラッププロセスの詳細については、[依存性の注入](guide/di/dependency-injection-providers) を参照してください。 +HELPFUL: プロバイダーとブートストラッププロセスの詳細については、[依存性の注入](guide/di/defining-dependency-providers) を参照してください。 diff --git a/adev-ja/src/content/guide/routing/customizing-route-behavior.en.md b/adev-ja/src/content/guide/routing/customizing-route-behavior.en.md index ae063dd423..9c082aae9e 100644 --- a/adev-ja/src/content/guide/routing/customizing-route-behavior.en.md +++ b/adev-ja/src/content/guide/routing/customizing-route-behavior.en.md @@ -78,7 +78,7 @@ export const routes: Routes = [ @Component({ /* ... */ }) -export class CustomerComponent { +export class Customer { private route = inject(ActivatedRoute); orgId = this.route.parent?.parent?.snapshot.params['orgId']; @@ -97,7 +97,7 @@ Using `'always'` ensures matrix parameters, route data, and resolved values are @Component({ /* ... */ }) -export class CustomerComponent { +export class Customer { private route = inject(ActivatedRoute); // All parent parameters are available directly @@ -224,7 +224,7 @@ When implementing a custom `RouteReuseStrategy`, you may need to manually destro Since `DetachedRouteHandle` is an opaque type, you cannot call a destroy method directly on it. Instead, use the `destroyDetachedRouteHandle` function provided by the Router. ```ts -import { destroyDetachedRouteHandle } from '@angular/router'; +import {destroyDetachedRouteHandle} from '@angular/router'; // ... inside your strategy if (this.handles.size > MAX_CACHE_SIZE) { @@ -245,12 +245,10 @@ By default, Angular does not destroy the injectors of detached routes, even if t To enable automatic cleanup of unused route injectors, you can use the `withExperimentalAutoCleanupInjectors` feature in your router configuration. This feature checks which routes are currently stored by the strategy after navigations and destroys the injectors of any detached routes that are not currently stored by the reuse strategy. ```ts -import { provideRouter, withExperimentalAutoCleanupInjectors } from '@angular/router'; +import {provideRouter, withExperimentalAutoCleanupInjectors} from '@angular/router'; export const appConfig: ApplicationConfig = { - providers: [ - provideRouter(routes, withExperimentalAutoCleanupInjectors()) - ] + providers: [provideRouter(routes, withExperimentalAutoCleanupInjectors())], }; ``` @@ -298,17 +296,17 @@ Routes can opt into reuse behavior through route configuration metadata. This ap export const routes: Routes = [ { path: 'products', - component: ProductListComponent, + component: ProductList, data: {reuse: true}, // Component state persists across navigations }, { path: 'products/:id', - component: ProductDetailComponent, + component: ProductDetail, // No reuse flag - component recreates on each navigation }, { path: 'search', - component: SearchComponent, + component: Search, data: {reuse: true}, // Preserves search results and filter state }, ]; @@ -516,7 +514,7 @@ export function versionMatcher(segments: UrlSegment[]): UrlMatchResult | null { export const routes: Routes = [ { matcher: versionMatcher, - component: DocumentationComponent, + component: Documentation, }, { path: 'latest/docs', @@ -528,8 +526,8 @@ export const routes: Routes = [ The component receives the extracted parameters through route inputs: ```angular-ts -import { Component, input, inject } from '@angular/core'; -import { resource } from '@angular/core'; +import {Component, input, inject} from '@angular/core'; +import {resource} from '@angular/core'; @Component({ selector: 'app-documentation', @@ -541,12 +539,12 @@ import { resource } from '@angular/core'; } @else if (documentation.value(); as docs) {
{{ docs.content }}
} - ` + `, }) -export class DocumentationComponent { +export class Documentation { // Route parameters are automatically bound to signal inputs - version = input.required(); // Receives the version parameter - section = input.required(); // Receives the section parameter + version = input.required(); // Receives the version parameter + section = input.required(); // Receives the section parameter private docsService = inject(DocumentationService); @@ -557,13 +555,13 @@ export class DocumentationComponent { return { version: this.version(), - section: this.section() - } + section: this.section(), + }; }, - loader: ({ params }) => { + loader: ({params}) => { return this.docsService.loadDocumentation(params.version, params.section); - } - }) + }, + }); } ``` diff --git a/adev-ja/src/content/guide/routing/customizing-route-behavior.md b/adev-ja/src/content/guide/routing/customizing-route-behavior.md index aae7263fbe..d28704d0ea 100644 --- a/adev-ja/src/content/guide/routing/customizing-route-behavior.md +++ b/adev-ja/src/content/guide/routing/customizing-route-behavior.md @@ -78,7 +78,7 @@ export const routes: Routes = [ @Component({ /* ... */ }) -export class CustomerComponent { +export class Customer { private route = inject(ActivatedRoute); orgId = this.route.parent?.parent?.snapshot.params['orgId']; @@ -97,7 +97,7 @@ export class CustomerComponent { @Component({ /* ... */ }) -export class CustomerComponent { +export class Customer { private route = inject(ActivatedRoute); // All parent parameters are available directly @@ -248,9 +248,7 @@ NOTE: `canMatch`ガードが関与している場合、重複したエントリ import {provideRouter, withExperimentalAutoCleanupInjectors} from '@angular/router'; export const appConfig: ApplicationConfig = { - providers: [ - provideRouter(routes, withExperimentalAutoCleanupInjectors()) - ] + providers: [provideRouter(routes, withExperimentalAutoCleanupInjectors())], }; ``` @@ -298,17 +296,17 @@ export class CustomRouteReuseStrategy implements RouteReuseStrategy { export const routes: Routes = [ { path: 'products', - component: ProductListComponent, + component: ProductList, data: {reuse: true}, // Component state persists across navigations }, { path: 'products/:id', - component: ProductDetailComponent, + component: ProductDetail, // No reuse flag - component recreates on each navigation }, { path: 'search', - component: SearchComponent, + component: Search, data: {reuse: true}, // Preserves search results and filter state }, ]; @@ -516,7 +514,7 @@ export function versionMatcher(segments: UrlSegment[]): UrlMatchResult | null { export const routes: Routes = [ { matcher: versionMatcher, - component: DocumentationComponent, + component: Documentation, }, { path: 'latest/docs', @@ -528,8 +526,8 @@ export const routes: Routes = [ コンポーネントは、ルート入力を介して抽出されたパラメーターを受け取ります: ```angular-ts -import { Component, input, inject } from '@angular/core'; -import { resource } from '@angular/core'; +import {Component, input, inject} from '@angular/core'; +import {resource} from '@angular/core'; @Component({ selector: 'app-documentation', @@ -541,12 +539,12 @@ import { resource } from '@angular/core'; } @else if (documentation.value(); as docs) {
{{ docs.content }}
} - ` + `, }) -export class DocumentationComponent { +export class Documentation { // Route parameters are automatically bound to signal inputs - version = input.required(); // Receives the version parameter - section = input.required(); // Receives the section parameter + version = input.required(); // Receives the version parameter + section = input.required(); // Receives the section parameter private docsService = inject(DocumentationService); @@ -557,13 +555,13 @@ export class DocumentationComponent { return { version: this.version(), - section: this.section() - } + section: this.section(), + }; }, - loader: ({ params }) => { + loader: ({params}) => { return this.docsService.loadDocumentation(params.version, params.section); - } - }) + }, + }); } ``` diff --git a/adev-ja/src/content/guide/routing/data-resolvers.en.md b/adev-ja/src/content/guide/routing/data-resolvers.en.md index 11eb4d8a95..232d688f5d 100644 --- a/adev-ja/src/content/guide/routing/data-resolvers.en.md +++ b/adev-ja/src/content/guide/routing/data-resolvers.en.md @@ -76,17 +76,17 @@ You can learn more about the [`resolve` configuration in the API docs](api/route You can access the resolved data in a component by accessing the snapshot data from the `ActivatedRoute` using the `signal` function: ```angular-ts -import { Component, inject, computed } from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; -import { toSignal } from '@angular/core/rxjs-interop'; -import type { User, Settings } from './types'; +import {Component, inject, computed} from '@angular/core'; +import {ActivatedRoute} from '@angular/router'; +import {toSignal} from '@angular/core/rxjs-interop'; +import type {User, Settings} from './types'; @Component({ template: `

{{ user().name }}

{{ user().email }}

Theme: {{ settings().theme }}
- ` + `, }) export class UserDetail { private route = inject(ActivatedRoute); @@ -113,15 +113,15 @@ bootstrapApplication(App, { With this configuration, you can define inputs in your component that match the resolver keys using the `input` function and `input.required` for required inputs: ```angular-ts -import { Component, input } from '@angular/core'; -import type { User, Settings } from './types'; +import {Component, input} from '@angular/core'; +import type {User, Settings} from './types'; @Component({ template: `

{{ user().name }}

{{ user().email }}

Theme: {{ settings().theme }}
- ` + `, }) export class UserDetail { user = input.required(); @@ -186,10 +186,10 @@ export const userResolver: ResolveFn = (route) => { You can also handle resolver errors by subscribing to router events and listening for `NavigationError` events. This approach gives you more granular control over error handling and allows you to implement custom error recovery logic. ```angular-ts -import { Component, inject, signal } from '@angular/core'; -import { Router, NavigationError } from '@angular/router'; -import { toSignal } from '@angular/core/rxjs-interop'; -import { map } from 'rxjs'; +import {Component, inject, signal} from '@angular/core'; +import {Router, NavigationError} from '@angular/router'; +import {toSignal} from '@angular/core/rxjs-interop'; +import {map} from 'rxjs'; @Component({ selector: 'app-root', @@ -201,7 +201,7 @@ import { map } from 'rxjs';
} - ` + `, }) export class App { private router = inject(Router); @@ -209,20 +209,20 @@ export class App { private navigationErrors = toSignal( this.router.events.pipe( - map(event => { + map((event) => { if (event instanceof NavigationError) { this.lastFailedUrl.set(event.url); if (event.error) { - console.error('Navigation error', event.error) + console.error('Navigation error', event.error); } return 'Navigation failed. Please try again.'; } return ''; - }) + }), ), - { initialValue: '' } + {initialValue: ''}, ); errorMessage = this.navigationErrors; @@ -275,8 +275,8 @@ While data resolvers prevent loading states within components, they introduce a To improve user experience during resolver execution, you can listen to router events and show loading indicators: ```angular-ts -import { Component, inject } from '@angular/core'; -import { Router } from '@angular/router'; +import {Component, inject} from '@angular/core'; +import {Router} from '@angular/router'; @Component({ selector: 'app-root', @@ -285,7 +285,7 @@ import { Router } from '@angular/router';
Loading...
} - ` + `, }) export class App { private router = inject(Router); diff --git a/adev-ja/src/content/guide/routing/data-resolvers.md b/adev-ja/src/content/guide/routing/data-resolvers.md index 2ef9791434..0d7acd981e 100644 --- a/adev-ja/src/content/guide/routing/data-resolvers.md +++ b/adev-ja/src/content/guide/routing/data-resolvers.md @@ -76,17 +76,17 @@ export const routes: Routes = [ `signal`関数を使用して`ActivatedRoute`からスナップショットデータにアクセスすることで、コンポーネントで解決済みデータにアクセスできます。 ```angular-ts -import { Component, inject, computed } from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; -import { toSignal } from '@angular/core/rxjs-interop'; -import type { User, Settings } from './types'; +import {Component, inject, computed} from '@angular/core'; +import {ActivatedRoute} from '@angular/router'; +import {toSignal} from '@angular/core/rxjs-interop'; +import type {User, Settings} from './types'; @Component({ template: `

{{ user().name }}

{{ user().email }}

Theme: {{ settings().theme }}
- ` + `, }) export class UserDetail { private route = inject(ActivatedRoute); @@ -113,15 +113,15 @@ bootstrapApplication(App, { この設定により、`input`関数と、必須入力には`input.required`を使用して、リゾルバーキーと一致する入力をコンポーネントで定義できます。 ```angular-ts -import { Component, input } from '@angular/core'; -import type { User, Settings } from './types'; +import {Component, input} from '@angular/core'; +import type {User, Settings} from './types'; @Component({ template: `

{{ user().name }}

{{ user().email }}

Theme: {{ settings().theme }}
- ` + `, }) export class UserDetail { user = input.required(); @@ -186,10 +186,10 @@ export const userResolver: ResolveFn = (route) => { ルーターイベントをサブスクライブし、`NavigationError`イベントをリッスンすることで、リゾルバーのエラーを処理できます。このアプローチにより、エラー処理をよりきめ細かく制御でき、カスタムのエラー回復ロジックを実装できます。 ```angular-ts -import { Component, inject, signal } from '@angular/core'; -import { Router, NavigationError } from '@angular/router'; -import { toSignal } from '@angular/core/rxjs-interop'; -import { map } from 'rxjs'; +import {Component, inject, signal} from '@angular/core'; +import {Router, NavigationError} from '@angular/router'; +import {toSignal} from '@angular/core/rxjs-interop'; +import {map} from 'rxjs'; @Component({ selector: 'app-root', @@ -201,7 +201,7 @@ import { map } from 'rxjs';
} - ` + `, }) export class App { private router = inject(Router); @@ -209,20 +209,20 @@ export class App { private navigationErrors = toSignal( this.router.events.pipe( - map(event => { + map((event) => { if (event instanceof NavigationError) { this.lastFailedUrl.set(event.url); if (event.error) { - console.error('Navigation error', event.error) + console.error('Navigation error', event.error); } return 'Navigation failed. Please try again.'; } return ''; - }) + }), ), - { initialValue: '' } + {initialValue: ''}, ); errorMessage = this.navigationErrors; @@ -275,8 +275,8 @@ export const userResolver: ResolveFn = (route) => { リゾルバーの実行中のユーザー体験を向上させるには、ルーターイベントをリッスンして読み込みインジケーターを表示できます。 ```angular-ts -import { Component, inject } from '@angular/core'; -import { Router } from '@angular/router'; +import {Component, inject} from '@angular/core'; +import {Router} from '@angular/router'; @Component({ selector: 'app-root', @@ -285,7 +285,7 @@ import { Router } from '@angular/router';
Loading...
} - ` + `, }) export class App { private router = inject(Router); diff --git a/adev-ja/src/content/guide/routing/define-routes.en.md b/adev-ja/src/content/guide/routing/define-routes.en.md index 420e73976a..1e55a6459e 100644 --- a/adev-ja/src/content/guide/routing/define-routes.en.md +++ b/adev-ja/src/content/guide/routing/define-routes.en.md @@ -9,7 +9,7 @@ In Angular, a **route** is an object that defines which component should render Here is a basic example of a route: ```ts -import {AdminPage} from './app-admin/app-admin.component'; +import {AdminPage} from './app-admin'; const adminPage = { path: 'admin', @@ -27,8 +27,8 @@ A collection of routes looks like this: ```ts import {Routes} from '@angular/router'; -import {HomePage} from './home-page/home-page.component'; -import {AdminPage} from './about-page/admin-page.component'; +import {HomePage} from './home-page'; +import {AdminPage} from './about-page'; export const routes: Routes = [ { @@ -107,8 +107,8 @@ You can also define paths with multiple parameters: ```ts import {Routes} from '@angular/router'; -import {UserProfile} from './user-profile/user-profile.component'; -import {SocialMediaFeed} from './user-profile/social–media-feed.component'; +import {UserProfile} from './user-profile'; +import {SocialMediaFeed} from './social-media-feed'; const routes: Routes = [ {path: 'user/:id/:social-media', component: SocialMediaFeed}, @@ -127,9 +127,9 @@ When you need to catch all routes for a specific path, the solution is a wildcar A common example is defining a Page Not Found component. ```ts -import {Home} from './home/home.component'; -import {UserProfile} from './user-profile/user-profile.component'; -import {NotFound} from './not-found/not-found.component'; +import {Home} from './home/home'; +import {UserProfile} from './user-profile'; +import {NotFound} from './not-found'; const routes: Routes = [ {path: 'home', component: Home}, @@ -150,11 +150,11 @@ The following example shows routes defined from most-specific to least specific: ```ts const routes: Routes = [ - {path: '', component: HomeComponent}, // Empty path - {path: 'users/new', component: NewUserComponent}, // Static, most specific - {path: 'users/:id', component: UserDetailComponent}, // Dynamic - {path: 'users', component: UsersComponent}, // Static, less specific - {path: '**', component: NotFoundComponent}, // Wildcard - always last + {path: '', component: Home}, // Empty path + {path: 'users/new', component: NewUser}, // Static, most specific + {path: 'users/:id', component: UserDetail}, // Dynamic + {path: 'users', component: Users}, // Static, less specific + {path: '**', component: NotFound}, // Wildcard - always last ]; ``` @@ -264,7 +264,7 @@ NOTE: While lazy routes have the upfront performance benefit of reducing the amo You can define a route that redirects to another route instead of rendering a component: ```ts -import {BlogComponent} from './home/blog.component'; +import {Blog} from './home/blog'; const routes: Routes = [ { @@ -273,7 +273,7 @@ const routes: Routes = [ }, { path: 'blog', - component: BlogComponent, + component: Blog, }, ]; ``` @@ -286,19 +286,19 @@ You can associate a **title** with each route. Angular automatically updates the ```ts import {Routes} from '@angular/router'; -import {HomeComponent} from './home/home.component'; -import {AboutComponent} from './about/about.component'; -import {ProductsComponent} from './products/products.component'; +import {Home} from './home'; +import {About} from './about'; +import {Products} from './products'; const routes: Routes = [ { path: '', - component: HomeComponent, + component: Home, title: 'Home Page', }, { path: 'about', - component: AboutComponent, + component: About, title: 'About Us', }, ]; @@ -311,7 +311,7 @@ const titleResolver: ResolveFn = (route) => route.queryParams['id']; const routes: Routes = [ ...{ path: 'products', - component: ProductsComponent, + component: Products, title: titleResolver, }, ]; @@ -366,8 +366,8 @@ export const ROUTES: Route[] = [ path: 'admin', providers: [AdminService, {provide: ADMIN_API_KEY, useValue: '12345'}], children: [ - {path: 'users', component: AdminUsersComponent}, - {path: 'teams', component: AdminTeamsComponent}, + {path: 'users', component: AdminUsers}, + {path: 'teams', component: AdminTeams}, ], }, // ... other application routes that don't @@ -391,19 +391,19 @@ You can associate arbitrary static data with a route via the `data` property in ```ts import {Routes} from '@angular/router'; -import {HomeComponent} from './home/home.component'; -import {AboutComponent} from './about/about.component'; -import {ProductsComponent} from './products/products.component'; +import {Home} from './home'; +import {About} from './about'; +import {Products} from './products'; const routes: Routes = [ { path: 'about', - component: AboutComponent, + component: About, data: {analyticsId: '456'}, }, { path: '', - component: HomeComponent, + component: Home, data: {analyticsId: '123'}, }, ]; @@ -429,15 +429,15 @@ You can add child routes to any route definition with the `children` property: const routes: Routes = [ { path: 'product/:id', - component: ProductComponent, + component: Product, children: [ { path: 'info', - component: ProductInfoComponent, + component: ProductInfo, }, { path: 'reviews', - component: ProductReviewsComponent, + component: ProductReviews, }, ], }, @@ -448,10 +448,10 @@ The above example defines a route for a product page that allows a user to chang The `children` property accepts an array of `Route` objects. -To display child routes, the parent component (`ProductComponent` in the example above) includes its own ``. +To display child routes, the parent component (`Product` in the example above) includes its own ``. ```angular-html - +

Product {{ id }}

diff --git a/adev-ja/src/content/guide/routing/define-routes.md b/adev-ja/src/content/guide/routing/define-routes.md index 8ac32f2718..6e7323120f 100644 --- a/adev-ja/src/content/guide/routing/define-routes.md +++ b/adev-ja/src/content/guide/routing/define-routes.md @@ -9,7 +9,7 @@ Angularでは、**ルート**は特定のURLパスまたはパターンに対し 次にルートの基本的な例を示します。 ```ts -import {AdminPage} from './app-admin/app-admin.component'; +import {AdminPage} from './app-admin'; const adminPage = { path: 'admin', @@ -27,8 +27,8 @@ const adminPage = { ```ts import {Routes} from '@angular/router'; -import {HomePage} from './home-page/home-page.component'; -import {AdminPage} from './about-page/admin-page.component'; +import {HomePage} from './home-page'; +import {AdminPage} from './about-page'; export const routes: Routes = [ { @@ -107,8 +107,8 @@ const routes: Routes = [{path: 'user/:id', component: UserProfile}]; ```ts import {Routes} from '@angular/router'; -import {UserProfile} from './user-profile/user-profile.component'; -import {SocialMediaFeed} from './user-profile/social–media-feed.component'; +import {UserProfile} from './user-profile'; +import {SocialMediaFeed} from './social-media-feed'; const routes: Routes = [ {path: 'user/:id/:social-media', component: SocialMediaFeed}, @@ -127,9 +127,9 @@ const routes: Routes = [ 一般的な例は、ページが見つかりませんコンポーネントの定義です。 ```ts -import {Home} from './home/home.component'; -import {UserProfile} from './user-profile/user-profile.component'; -import {NotFound} from './not-found/not-found.component'; +import {Home} from './home/home'; +import {UserProfile} from './user-profile'; +import {NotFound} from './not-found'; const routes: Routes = [ {path: 'home', component: Home}, @@ -150,11 +150,11 @@ Tip: ワイルドカードルートは通常、ルート配列の最後に配置 ```ts const routes: Routes = [ - {path: '', component: HomeComponent}, // 空のパス - {path: 'users/new', component: NewUserComponent}, // 静的、最も具体的 - {path: 'users/:id', component: UserDetailComponent}, // 動的 - {path: 'users', component: UsersComponent}, // 静的、具体的でない - {path: '**', component: NotFoundComponent}, // ワイルドカード - 常に最後 + {path: '', component: Home}, // 空のパス + {path: 'users/new', component: NewUser}, // 静的、最も具体的 + {path: 'users/:id', component: UserDetail}, // 動的 + {path: 'users', component: Users}, // 静的、具体的でない + {path: '**', component: NotFound}, // ワイルドカード - 常に最後 ]; ``` @@ -264,7 +264,7 @@ NOTE: 遅延ルートは、ユーザーが要求する初期データの量を コンポーネントをレンダリングする代わりに、別のルートにリダイレクトするルートを定義できます。 ```ts -import {BlogComponent} from './home/blog.component'; +import {Blog} from './home/blog'; const routes: Routes = [ { @@ -273,7 +273,7 @@ const routes: Routes = [ }, { path: 'blog', - component: BlogComponent, + component: Blog, }, ]; ``` @@ -286,18 +286,19 @@ const routes: Routes = [ ```ts import {Routes} from '@angular/router'; -import {HomeComponent} from './home/home.component'; -import {AboutComponent} from './about/about.component'; +import {Home} from './home'; +import {About} from './about'; +import {Products} from './products'; const routes: Routes = [ { path: '', - component: HomeComponent, + component: Home, title: 'Home Page', }, { path: 'about', - component: AboutComponent, + component: About, title: 'About Us', }, ]; @@ -310,7 +311,7 @@ const titleResolver: ResolveFn = (route) => route.queryParams['id']; const routes: Routes = [ ...{ path: 'products', - component: ProductsComponent, + component: Products, title: titleResolver, }, ]; @@ -365,8 +366,8 @@ export const ROUTES: Route[] = [ path: 'admin', providers: [AdminService, {provide: ADMIN_API_KEY, useValue: '12345'}], children: [ - {path: 'users', component: AdminUsersComponent}, - {path: 'teams', component: AdminTeamsComponent}, + {path: 'users', component: AdminUsers}, + {path: 'teams', component: AdminTeams}, ], }, // ... other application routes that don't @@ -390,19 +391,19 @@ Angularのプロバイダーと注入に関する詳細については、[依存 ```ts import {Routes} from '@angular/router'; -import {HomeComponent} from './home/home.component'; -import {AboutComponent} from './about/about.component'; -import {ProductsComponent} from './products/products.component'; +import {Home} from './home'; +import {About} from './about'; +import {Products} from './products'; const routes: Routes = [ { path: 'about', - component: AboutComponent, + component: About, data: {analyticsId: '456'}, }, { path: '', - component: HomeComponent, + component: Home, data: {analyticsId: '123'}, }, ]; @@ -428,15 +429,15 @@ const routes: Routes = [ const routes: Routes = [ { path: 'product/:id', - component: ProductComponent, + component: Product, children: [ { path: 'info', - component: ProductInfoComponent, + component: ProductInfo, }, { path: 'reviews', - component: ProductReviewsComponent, + component: ProductReviews, }, ], }, @@ -447,10 +448,10 @@ const routes: Routes = [ `children`プロパティは`Route`オブジェクトの配列を受け入れます。 -子ルートを表示するには、親コンポーネント（上記の例では`ProductComponent`）に独自の``を含めます。 +子ルートを表示するには、親コンポーネント（上記の例では`Product`）に独自の``を含めます。 ```angular-html - +

Product {{ id }}

@@ -462,4 +463,3 @@ const routes: Routes = [ ## 次のステップ {#next-steps} [アウトレットでルートのコンテンツを表示する方法](/guide/routing/show-routes-with-outlets)を学びましょう。 - diff --git a/adev-ja/src/content/guide/routing/lifecycle-and-events.en.md b/adev-ja/src/content/guide/routing/lifecycle-and-events.en.md index c4f7132309..8a05cd3704 100644 --- a/adev-ja/src/content/guide/routing/lifecycle-and-events.en.md +++ b/adev-ja/src/content/guide/routing/lifecycle-and-events.en.md @@ -32,11 +32,13 @@ When you want to run code during specific navigation lifecycle events, you can d ```ts // Example of subscribing to router events -import { Component, inject, signal, effect } from '@angular/core'; -import { Event, Router, NavigationStart, NavigationEnd } from '@angular/router'; +import {Component, inject, signal, effect} from '@angular/core'; +import {Event, Router, NavigationStart, NavigationEnd} from '@angular/router'; -@Component({ ... }) -export class RouterEventsComponent { +@Component({ + /*...*/ +}) +export class RouterEvents { private readonly router = inject(Router); constructor() { @@ -67,7 +69,7 @@ When you need to inspect a Router event sequence, you can enable logging for int import {provideRouter, withDebugTracing} from '@angular/router'; const appRoutes: Routes = []; -bootstrapApplication(AppComponent, { +bootstrapApplication(App, { providers: [provideRouter(appRoutes, withDebugTracing())], }); ``` @@ -83,8 +85,8 @@ Router events enable many practical features in real-world applications. Here ar Show loading indicators during navigation: ```angular-ts -import { Component, inject } from '@angular/core'; -import { Router } from '@angular/router'; +import {Component, inject} from '@angular/core'; +import {Router} from '@angular/router'; @Component({ selector: 'app-root', @@ -93,7 +95,7 @@ import { Router } from '@angular/router';
Loading...
} - ` + `, }) export class App { private router = inject(Router); @@ -138,9 +140,15 @@ export class AnalyticsService { Handle navigation errors gracefully and provide user feedback: ```angular-ts -import { Component, inject, signal } from '@angular/core'; -import { Router, NavigationStart, NavigationError, NavigationCancel, NavigationCancellationCode } from '@angular/router'; -import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; +import {Component, inject, signal} from '@angular/core'; +import { + Router, + NavigationStart, + NavigationError, + NavigationCancel, + NavigationCancellationCode, +} from '@angular/router'; +import {takeUntilDestroyed} from '@angular/core/rxjs-interop'; @Component({ selector: 'app-error-handler', @@ -151,14 +159,14 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
} - ` + `, }) -export class ErrorHandlerComponent { +export class ErrorHandler { private router = inject(Router); readonly errorMessage = signal(''); constructor() { - this.router.events.pipe(takeUntilDestroyed()).subscribe(event => { + this.router.events.pipe(takeUntilDestroyed()).subscribe((event) => { if (event instanceof NavigationStart) { this.errorMessage.set(''); } else if (event instanceof NavigationError) { diff --git a/adev-ja/src/content/guide/routing/lifecycle-and-events.md b/adev-ja/src/content/guide/routing/lifecycle-and-events.md index 3cbd8a52ff..4519ee449e 100644 --- a/adev-ja/src/content/guide/routing/lifecycle-and-events.md +++ b/adev-ja/src/content/guide/routing/lifecycle-and-events.md @@ -32,11 +32,13 @@ Angularルーターは、ナビゲーションライフサイクルを追跡す ```ts // Example of subscribing to router events -import { Component, inject, signal, effect } from '@angular/core'; -import { Event, Router, NavigationStart, NavigationEnd } from '@angular/router'; +import {Component, inject, signal, effect} from '@angular/core'; +import {Event, Router, NavigationStart, NavigationEnd} from '@angular/router'; -@Component({ ... }) -export class RouterEventsComponent { +@Component({ + /*...*/ +}) +export class RouterEvents { private readonly router = inject(Router); constructor() { @@ -67,7 +69,7 @@ NOTE: `@angular/router`の[`Event`](api/router/Event)型は、通常のグロー import {provideRouter, withDebugTracing} from '@angular/router'; const appRoutes: Routes = []; -bootstrapApplication(AppComponent, { +bootstrapApplication(App, { providers: [provideRouter(appRoutes, withDebugTracing())], }); ``` @@ -83,8 +85,8 @@ bootstrapApplication(AppComponent, { ナビゲーション中にローディングインジケーターを表示します。 ```angular-ts -import { Component, inject } from '@angular/core'; -import { Router } from '@angular/router'; +import {Component, inject} from '@angular/core'; +import {Router} from '@angular/router'; @Component({ selector: 'app-root', @@ -93,7 +95,7 @@ import { Router } from '@angular/router';
Loading...
} - ` + `, }) export class App { private router = inject(Router); @@ -138,9 +140,15 @@ export class AnalyticsService { ナビゲーションエラーを適切に処理し、ユーザーフィードバックを提供します。 ```angular-ts -import { Component, inject, signal } from '@angular/core'; -import { Router, NavigationStart, NavigationError, NavigationCancel, NavigationCancellationCode } from '@angular/router'; -import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; +import {Component, inject, signal} from '@angular/core'; +import { + Router, + NavigationStart, + NavigationError, + NavigationCancel, + NavigationCancellationCode, +} from '@angular/router'; +import {takeUntilDestroyed} from '@angular/core/rxjs-interop'; @Component({ selector: 'app-error-handler', @@ -151,14 +159,14 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
} - ` + `, }) -export class ErrorHandlerComponent { +export class ErrorHandler { private router = inject(Router); readonly errorMessage = signal(''); constructor() { - this.router.events.pipe(takeUntilDestroyed()).subscribe(event => { + this.router.events.pipe(takeUntilDestroyed()).subscribe((event) => { if (event instanceof NavigationStart) { this.errorMessage.set(''); } else if (event instanceof NavigationError) { diff --git a/adev-ja/src/content/guide/routing/navigate-to-routes.en.md b/adev-ja/src/content/guide/routing/navigate-to-routes.en.md index f49889f8f1..99e5fa9da5 100644 --- a/adev-ja/src/content/guide/routing/navigate-to-routes.en.md +++ b/adev-ja/src/content/guide/routing/navigate-to-routes.en.md @@ -15,7 +15,7 @@ import {RouterLink} from '@angular/router'; User profile Settings - ` + `, imports: [RouterLink], ... }) @@ -36,7 +36,7 @@ export class App {} In this example, the first example contains the full path with the protocol (i.e., `https://`) and the root domain (i.e., `angular.dev`) explicitly defined for the essentials page. In contrast, the second example assumes the user is already on the correct root domain for `/essentials`. -Generally speaking, relative URLs are preferred because they are more maintainable across applications because they don’t need to know their absolute position within the routing hierarchy. +Generally speaking, relative URLs are preferred as they are more maintainable across applications since they don’t need to know their absolute position within the routing hierarchy. ### How relative URLs work @@ -56,7 +56,7 @@ When you need to define dynamic parameters in a relative URL, use the array synt Current User ``` -In addition, Angular routing allows you specify whether you want the path to be relative to the current URL or to the root domain based on whether the relative path is prefixed with a forward slash (`/`) or not. +In addition, Angular routing allows you to specify whether you want the path to be relative to the current URL or to the root domain based on whether the relative path is prefixed with a forward slash (`/`) or not. For example, if the user is on `example.com/settings`, here is how different relative paths can be defined for various scenarios: @@ -67,7 +67,7 @@ For example, if the user is on `example.com/settings`, here is how different rel User 456 -Current User” +Current User ``` ## Programmatic navigation to routes @@ -79,13 +79,11 @@ While `RouterLink` handles declarative navigation in templates, Angular provides You can use the `router.navigate()` method to programmatically navigate between routes by specifying a URL path array. ```angular-ts -import { Router } from '@angular/router'; +import {Router} from '@angular/router'; @Component({ selector: 'app-dashboard', - template: ` - - ` + template: ` `, }) export class AppDashboard { private router = inject(Router); @@ -99,11 +97,11 @@ export class AppDashboard { // With query parameters this.router.navigate(['/search'], { - queryParams: { category: 'books', sort: 'price' } + queryParams: {category: 'books', sort: 'price'}, }); // With matrix parameters - this.router.navigate(['/products', { featured: true, onSale: true }]); + this.router.navigate(['/products', {featured: true, onSale: true}]); } } ``` @@ -113,33 +111,31 @@ export class AppDashboard { You can also build dynamic navigation paths relative to your component’s location in the routing tree using the `relativeTo` option. ```angular-ts -import { Router, ActivatedRoute } from '@angular/router'; +import {Router, ActivatedRoute} from '@angular/router'; @Component({ selector: 'app-user-detail', template: ` - ` + `, }) -export class UserDetailComponent { +export class UserDetail { private route = inject(ActivatedRoute); private router = inject(Router); - constructor() {} - // Navigate to a sibling route navigateToEdit() { // From: /users/123 // To: /users/123/edit - this.router.navigate(['edit'], { relativeTo: this.route }); + this.router.navigate(['edit'], {relativeTo: this.route}); } // Navigate to parent navigateToParent() { // From: /users/123 // To: /users - this.router.navigate(['..'], { relativeTo: this.route }); + this.router.navigate(['..'], {relativeTo: this.route}); } } ``` diff --git a/adev-ja/src/content/guide/routing/navigate-to-routes.md b/adev-ja/src/content/guide/routing/navigate-to-routes.md index 9aab81eed4..b4834752e1 100644 --- a/adev-ja/src/content/guide/routing/navigate-to-routes.md +++ b/adev-ja/src/content/guide/routing/navigate-to-routes.md @@ -15,7 +15,7 @@ import {RouterLink} from '@angular/router'; User profile Settings - ` + `, imports: [RouterLink], ... }) @@ -36,7 +36,7 @@ Angularルーティングにおける**相対URL**は、現在のルートの場 この例では、最初の例は、基本概念ページに対してプロトコル（つまり`https://`）とルートドメイン（つまり`angular.dev`）が明示的に定義された完全なパスを含んでいます。対照的に、2番目の例は、ユーザーがすでに`/essentials`の正しいルートドメインにいることを前提としています。 -一般的に、相対URLは、ルーティング階層内での絶対位置を知る必要がないため、アプリケーション全体で保守しやすいため、推奨されます。 +一般的に、相対URLは、ルーティング階層内での絶対位置を知る必要がないため、アプリケーション全体でより保守しやすく、推奨されます。 ### 相対URLの仕組み {#how-relative-urls-work} @@ -56,7 +56,7 @@ HELPFUL: 文字列を渡すのが、相対URLを定義する最も一般的な Current User ``` -さらに、Angularルーティングでは、相対パスがスラッシュ（`/`）で始まるかどうかによって、パスを現在のURLに対する相対パスにするか、ルートドメインに対する相対パスにするかを指定できます。 +さらに、Angularルーティングでは、相対パスの先頭にスラッシュ（`/`）を付けるかどうかによって、パスを現在のURLに対する相対パスにするか、ルートドメインに対する相対パスにするかを指定できます。 たとえば、ユーザーが`example.com/settings`にいる場合、さまざまなシナリオで異なる相対パスを定義する方法を次に示します。 @@ -67,7 +67,7 @@ HELPFUL: 文字列を渡すのが、相対URLを定義する最も一般的な User 456 -Current User” +Current User ``` ## ルートへのプログラムによるナビゲーション {#programmatic-navigation-to-routes} @@ -79,13 +79,11 @@ HELPFUL: 文字列を渡すのが、相対URLを定義する最も一般的な `router.navigate()`メソッドを使用して、URLパス配列を指定することで、ルート間をプログラムでナビゲートできます。 ```angular-ts -import { Router } from '@angular/router'; +import {Router} from '@angular/router'; @Component({ selector: 'app-dashboard', - template: ` - - ` + template: ` `, }) export class AppDashboard { private router = inject(Router); @@ -99,11 +97,11 @@ export class AppDashboard { // With query parameters this.router.navigate(['/search'], { - queryParams: { category: 'books', sort: 'price' } + queryParams: {category: 'books', sort: 'price'}, }); // With matrix parameters - this.router.navigate(['/products', { featured: true, onSale: true }]); + this.router.navigate(['/products', {featured: true, onSale: true}]); } } ``` @@ -113,33 +111,31 @@ export class AppDashboard { また、`relativeTo`オプションを使用して、ルーティングツリー内のコンポーネントの場所に対する動的なナビゲーションパスを構築できます。 ```angular-ts -import { Router, ActivatedRoute } from '@angular/router'; +import {Router, ActivatedRoute} from '@angular/router'; @Component({ selector: 'app-user-detail', template: ` - ` + `, }) -export class UserDetailComponent { +export class UserDetail { private route = inject(ActivatedRoute); private router = inject(Router); - constructor() {} - // Navigate to a sibling route navigateToEdit() { // From: /users/123 // To: /users/123/edit - this.router.navigate(['edit'], { relativeTo: this.route }); + this.router.navigate(['edit'], {relativeTo: this.route}); } // Navigate to parent navigateToParent() { // From: /users/123 // To: /users - this.router.navigate(['..'], { relativeTo: this.route }); + this.router.navigate(['..'], {relativeTo: this.route}); } } ``` diff --git a/adev-ja/src/content/guide/routing/read-route-state.en.md b/adev-ja/src/content/guide/routing/read-route-state.en.md index 6377858eee..5f14761cae 100644 --- a/adev-ja/src/content/guide/routing/read-route-state.en.md +++ b/adev-ja/src/content/guide/routing/read-route-state.en.md @@ -7,13 +7,13 @@ Angular Router allows you to read and use information associated with a route to `ActivatedRoute` is a service from `@angular/router` that provides all the information associated with the current route. ```angular-ts -import { Component } from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; +import {Component} from '@angular/core'; +import {ActivatedRoute} from '@angular/router'; @Component({ selector: 'app-product', }) -export class ProductComponent { +export class Product { private activatedRoute = inject(ActivatedRoute); constructor() { @@ -42,10 +42,12 @@ Route snapshots contain essential information about the route, including its par Here’s an example of how you’d access a route snapshot: ```angular-ts -import { ActivatedRoute, ActivatedRouteSnapshot } from '@angular/router'; +import {ActivatedRoute, ActivatedRouteSnapshot} from '@angular/router'; -@Component({ ... }) -export class UserProfileComponent { +@Component({ + /*...*/ +}) +export class UserProfile { readonly userId: string; private route = inject(ActivatedRoute); @@ -58,11 +60,11 @@ export class UserProfileComponent { // Access multiple route elements const snapshot = this.route.snapshot; console.log({ - url: snapshot.url, // https://www.angular.dev + url: snapshot.url, // https://www.angular.dev // Route parameters object: {id: '123'} params: snapshot.params, // Query parameters object: {role: 'admin', status: 'active'} - queryParams: snapshot.queryParams, // Query parameters + queryParams: snapshot.queryParams, // Query parameters }); } } @@ -81,25 +83,23 @@ Route parameters allow you to pass data to a component through the URL. This is You can [define route parameters](/guide/routing/define-routes#define-url-paths-with-route-parameters) by prefixing the parameter name with a colon (`:`). ```angular-ts -import { Routes } from '@angular/router'; -import { ProductComponent } from './product/product.component'; +import {Routes} from '@angular/router'; +import {Product} from './product'; -const routes: Routes = [ - { path: 'product/:id', component: ProductComponent } -]; +const routes: Routes = [{path: 'product/:id', component: Product}]; ``` You can access parameters by subscribing to `route.params`. ```angular-ts -import { Component, inject, signal } from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; +import {Component, inject, signal} from '@angular/core'; +import {ActivatedRoute} from '@angular/router'; @Component({ selector: 'app-product-detail', template: `

Product Details: {{ productId() }}

`, }) -export class ProductDetailComponent { +export class ProductDetail { productId = signal(''); private activatedRoute = inject(ActivatedRoute); @@ -120,7 +120,7 @@ export class ProductDetailComponent { // Single parameter structure // /products?category=electronics router.navigate(['/products'], { - queryParams: { category: 'electronics' } + queryParams: {category: 'electronics'}, }); // Multiple parameters @@ -129,17 +129,17 @@ router.navigate(['/products'], { queryParams: { category: 'electronics', sort: 'price', - page: 1 - } + page: 1, + }, }); ``` You can access query parameters with `route.queryParams`. -Here is an example of a `ProductListComponent` that updates the query parameters that affect how it displays a list of products: +Here is an example of a `ProductList` that updates the query parameters that affect how it displays a list of products: ```angular-ts -import { ActivatedRoute, Router } from '@angular/router'; +import {ActivatedRoute, Router} from '@angular/router'; @Component({ selector: 'app-product-list', @@ -151,15 +151,15 @@ import { ActivatedRoute, Router } from '@angular/router';
- ` + `, }) -export class ProductListComponent implements OnInit { +export class ProductList { private route = inject(ActivatedRoute); private router = inject(Router); constructor() { // Access query parameters reactively - this.route.queryParams.subscribe(params => { + this.route.queryParams.subscribe((params) => { const sort = params['sort'] || 'price'; const page = Number(params['page']) || 1; this.loadProducts(sort, page); @@ -170,8 +170,8 @@ export class ProductListComponent implements OnInit { const sort = (event.target as HTMLSelectElement).value; // Update URL with new query parameter this.router.navigate([], { - queryParams: { sort }, - queryParamsHandling: 'merge' // Preserve other query parameters + queryParams: {sort}, + queryParamsHandling: 'merge', // Preserve other query parameters }); } } @@ -224,16 +224,21 @@ You can use the `RouterLinkActive` directive to dynamically style navigation ele ```angular-html @@ -260,12 +265,8 @@ If you want to define a different value for aria, you’ll need to explicitly se By default, `RouterLinkActive` considers any ancestors in the route a match. ```angular-html - - User - - - Role - + User + Role ``` When the user visits `/user/jane/role/admin`, both links would have the `active-link` class. @@ -275,13 +276,15 @@ When the user visits `/user/jane/role/admin`, both links would have the `active- If you only want to apply the class on an exact match, you need to provide the `routerLinkActiveOptions` directive with a configuration object that contains the value `exact: true`. ```angular-html - User - @@ -323,3 +326,30 @@ The RouterLinkActive directive can also be applied to an ancestor element in ord ``` For more information, check out the [API docs for RouterLinkActive](/api/router/RouterLinkActive). + +## Check if a URL is active + +The `isActive` function returns a computed signal that tracks whether a given URL is currently active in the router. The signal automatically updates as the router state changes. + +```angular-ts +import {Component, inject} from '@angular/core'; +import {isActive, Router} from '@angular/router'; + +@Component({ + template: ` +
+

Settings

+
+ `, +}) +export class Panel { + private router = inject(Router); + + isSettingsActive = isActive('/settings', this.router, { + paths: 'subset', + queryParams: 'ignored', + fragment: 'ignored', + matrixParams: 'ignored', + }); +} +``` diff --git a/adev-ja/src/content/guide/routing/read-route-state.md b/adev-ja/src/content/guide/routing/read-route-state.md index e436570ad8..be4580385f 100644 --- a/adev-ja/src/content/guide/routing/read-route-state.md +++ b/adev-ja/src/content/guide/routing/read-route-state.md @@ -7,13 +7,13 @@ Angularルーターを使用すると、ルートに関連付けられた情報 `ActivatedRoute`は、現在のルートに関連付けられたすべての情報を提供する`@angular/router`からのサービスです。 ```angular-ts -import { Component } from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; +import {Component} from '@angular/core'; +import {ActivatedRoute} from '@angular/router'; @Component({ selector: 'app-product', }) -export class ProductComponent { +export class Product { private activatedRoute = inject(ActivatedRoute); constructor() { @@ -42,10 +42,12 @@ export class ProductComponent { ルートスナップショットにアクセスする方法の例を次に示します。 ```angular-ts -import { ActivatedRoute, ActivatedRouteSnapshot } from '@angular/router'; +import {ActivatedRoute, ActivatedRouteSnapshot} from '@angular/router'; -@Component({ ... }) -export class UserProfileComponent { +@Component({ + /*...*/ +}) +export class UserProfile { readonly userId: string; private route = inject(ActivatedRoute); @@ -58,11 +60,11 @@ export class UserProfileComponent { // 複数のルート要素にアクセス const snapshot = this.route.snapshot; console.log({ - url: snapshot.url, // https://www.angular.dev + url: snapshot.url, // https://www.angular.dev // ルートパラメーターオブジェクト: {id: '123'} params: snapshot.params, // クエリパラメーターオブジェクト: {role: 'admin', status: 'active'} - queryParams: snapshot.queryParams, // クエリパラメーター + queryParams: snapshot.queryParams, // クエリパラメーター }); } } @@ -81,25 +83,23 @@ export class UserProfileComponent { パラメーター名の前にコロン (`:`) を付けることで、[ルートパラメーターを定義](/guide/routing/define-routes#define-url-paths-with-route-parameters)できます。 ```angular-ts -import { Routes } from '@angular/router'; -import { ProductComponent } from './product/product.component'; +import {Routes} from '@angular/router'; +import {Product} from './product'; -const routes: Routes = [ - { path: 'product/:id', component: ProductComponent } -]; +const routes: Routes = [{path: 'product/:id', component: Product}]; ``` `route.params`を購読することでパラメーターにアクセスできます。 ```angular-ts -import { Component, inject, signal } from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; +import {Component, inject, signal} from '@angular/core'; +import {ActivatedRoute} from '@angular/router'; @Component({ selector: 'app-product-detail', template: `

Product Details: {{ productId() }}

`, }) -export class ProductDetailComponent { +export class ProductDetail { productId = signal(''); private activatedRoute = inject(ActivatedRoute); @@ -120,7 +120,7 @@ export class ProductDetailComponent { // 単一パラメーターの構造 // /products?category=electronics router.navigate(['/products'], { - queryParams: { category: 'electronics' } + queryParams: {category: 'electronics'}, }); // 複数パラメーター @@ -129,17 +129,17 @@ router.navigate(['/products'], { queryParams: { category: 'electronics', sort: 'price', - page: 1 - } + page: 1, + }, }); ``` `route.queryParams`でクエリパラメーターにアクセスできます。 -次に、製品リストの表示方法に影響を与えるクエリパラメーターを更新する`ProductListComponent`の例を示します。 +次に、製品リストの表示方法に影響を与えるクエリパラメーターを更新する`ProductList`の例を示します。 ```angular-ts -import { ActivatedRoute, Router } from '@angular/router'; +import {ActivatedRoute, Router} from '@angular/router'; @Component({ selector: 'app-product-list', @@ -151,15 +151,15 @@ import { ActivatedRoute, Router } from '@angular/router';
- ` + `, }) -export class ProductListComponent implements OnInit { +export class ProductList { private route = inject(ActivatedRoute); private router = inject(Router); constructor() { // クエリパラメーターにリアクティブにアクセス - this.route.queryParams.subscribe(params => { + this.route.queryParams.subscribe((params) => { const sort = params['sort'] || 'price'; const page = Number(params['page']) || 1; this.loadProducts(sort, page); @@ -170,8 +170,8 @@ export class ProductListComponent implements OnInit { const sort = (event.target as HTMLSelectElement).value; // 新しいクエリパラメーターでURLを更新 this.router.navigate([], { - queryParams: { sort }, - queryParamsHandling: 'merge' // 他のクエリパラメーターを保持 + queryParams: {sort}, + queryParamsHandling: 'merge', // 他のクエリパラメーターを保持 }); } } @@ -224,16 +224,21 @@ NOTE: `ActivatedRoute`を使用する代わりに、`withComponentInputBinding` ```angular-html @@ -260,12 +265,8 @@ ariaに異なる値を定義したい場合は、`ariaCurrentWhenActive`ディ デフォルトでは、`RouterLinkActive`はルート内のすべての祖先を一致と見なします。 ```angular-html - - User - - - Role - + User + Role ``` ユーザーが`/user/jane/role/admin`にアクセスすると、両方のリンクに`active-link`クラスが適用されます。 @@ -275,13 +276,15 @@ ariaに異なる値を定義したい場合は、`ariaCurrentWhenActive`ディ 厳密な一致の場合にのみクラスを適用したい場合は、`routerLinkActiveOptions`ディレクティブに`exact: true`という値を含む設定オブジェクトを提供する必要があります。 ```angular-html - User - @@ -323,3 +326,30 @@ ariaに異なる値を定義したい場合は、`ariaCurrentWhenActive`ディ ``` 詳細については、[RouterLinkActiveのAPIドキュメント](/api/router/RouterLinkActive)を参照してください。 + +## URLがアクティブかどうかを確認する {#check-if-a-url-is-active} + +`isActive`関数は、指定されたURLがルーターで現在アクティブかどうかを追跡するcomputedシグナルを返します。シグナルはルーターの状態が変化すると自動的に更新されます。 + +```angular-ts +import {Component, inject} from '@angular/core'; +import {isActive, Router} from '@angular/router'; + +@Component({ + template: ` +
+

Settings

+
+ `, +}) +export class Panel { + private router = inject(Router); + + isSettingsActive = isActive('/settings', this.router, { + paths: 'subset', + queryParams: 'ignored', + fragment: 'ignored', + matrixParams: 'ignored', + }); +} +``` diff --git a/adev-ja/src/content/guide/routing/redirecting-routes.en.md b/adev-ja/src/content/guide/routing/redirecting-routes.en.md index b58f60ab41..4eb399e6ce 100644 --- a/adev-ja/src/content/guide/routing/redirecting-routes.en.md +++ b/adev-ja/src/content/guide/routing/redirecting-routes.en.md @@ -98,7 +98,7 @@ Here is an example where the user is redirected to different menu based on the t ```ts import {Routes} from '@angular/router'; -import {MenuComponent} from './menu/menu.component'; +import {Menu} from './menu'; export const routes: Routes = [ { @@ -124,9 +124,9 @@ export const routes: Routes = [ }, // Destination routes - {path: 'restaurant/:location/menu/breakfast', component: MenuComponent}, - {path: 'restaurant/:location/menu/lunch', component: MenuComponent}, - {path: 'restaurant/:location/menu/dinner', component: MenuComponent}, + {path: 'restaurant/:location/menu/breakfast', component: Menu}, + {path: 'restaurant/:location/menu/lunch', component: Menu}, + {path: 'restaurant/:location/menu/dinner', component: Menu}, // Default redirect {path: '', redirectTo: '/restaurant/downtown/menu', pathMatch: 'full'}, diff --git a/adev-ja/src/content/guide/routing/redirecting-routes.md b/adev-ja/src/content/guide/routing/redirecting-routes.md index 9ef0a769b6..0785e94272 100644 --- a/adev-ja/src/content/guide/routing/redirecting-routes.md +++ b/adev-ja/src/content/guide/routing/redirecting-routes.md @@ -98,7 +98,7 @@ export const routes: Routes = [{path: 'news', redirectTo: '/blog', pathMatch: 'f ```ts import {Routes} from '@angular/router'; -import {MenuComponent} from './menu/menu.component'; +import {Menu} from './menu'; export const routes: Routes = [ { @@ -124,9 +124,9 @@ export const routes: Routes = [ }, // Destination routes - {path: 'restaurant/:location/menu/breakfast', component: MenuComponent}, - {path: 'restaurant/:location/menu/lunch', component: MenuComponent}, - {path: 'restaurant/:location/menu/dinner', component: MenuComponent}, + {path: 'restaurant/:location/menu/breakfast', component: Menu}, + {path: 'restaurant/:location/menu/lunch', component: Menu}, + {path: 'restaurant/:location/menu/dinner', component: Menu}, // Default redirect {path: '', redirectTo: '/restaurant/downtown/menu', pathMatch: 'full'}, diff --git a/adev-ja/src/content/guide/routing/route-guards.en.md b/adev-ja/src/content/guide/routing/route-guards.en.md index a08c5e6beb..43dc343c99 100644 --- a/adev-ja/src/content/guide/routing/route-guards.en.md +++ b/adev-ja/src/content/guide/routing/route-guards.en.md @@ -101,8 +101,8 @@ It has access to the following default arguments: It can return the [standard return guard types](#route-guard-return-types). ```ts -export const unsavedChangesGuard: CanDeactivateFn = ( - component: FormComponent, +export const unsavedChangesGuard: CanDeactivateFn = ( + component: Form, currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot, nextState: RouterStateSnapshot, @@ -172,21 +172,21 @@ const routes: Routes = [ // Basic CanActivate - requires authentication { path: 'dashboard', - component: DashboardComponent, + component: Dashboard, canActivate: [authGuard], }, // Multiple CanActivate guards - requires authentication AND admin role { path: 'admin', - component: AdminComponent, + component: Admin, canActivate: [authGuard, adminGuard], }, // CanActivate + CanDeactivate - protected route with unsaved changes check { path: 'profile', - component: ProfileComponent, + component: Profile, canActivate: [authGuard], canDeactivate: [canDeactivateGuard], }, @@ -197,23 +197,23 @@ const routes: Routes = [ canActivateChild: [authGuard], children: [ // /users/list - PROTECTED - {path: 'list', component: UserListComponent}, + {path: 'list', component: UserList}, // /users/detail/:id - PROTECTED - {path: 'detail/:id', component: UserDetailComponent}, + {path: 'detail/:id', component: UserDetail}, ], }, // CanMatch - conditionally matches route based on feature flag { path: 'beta-feature', - component: BetaFeatureComponent, + component: BetaFeature, canMatch: [featureToggleGuard], }, // Fallback route if beta feature is disabled { path: 'beta-feature', - component: ComingSoonComponent, + component: ComingSoon, }, ]; ``` diff --git a/adev-ja/src/content/guide/routing/route-guards.md b/adev-ja/src/content/guide/routing/route-guards.md index b42818a654..6ddfb09cbc 100644 --- a/adev-ja/src/content/guide/routing/route-guards.md +++ b/adev-ja/src/content/guide/routing/route-guards.md @@ -101,8 +101,8 @@ export const adminChildGuard: CanActivateChildFn = ( [標準のガード戻り値の型](#route-guard-return-types)を返すことができます。 ```ts -export const unsavedChangesGuard: CanDeactivateFn = ( - component: FormComponent, +export const unsavedChangesGuard: CanDeactivateFn = ( + component: Form, currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot, nextState: RouterStateSnapshot, @@ -172,21 +172,21 @@ const routes: Routes = [ // Basic CanActivate - 認証が必要 { path: 'dashboard', - component: DashboardComponent, + component: Dashboard, canActivate: [authGuard], }, // 複数のCanActivateガード - 認証と管理者ロールが必要 { path: 'admin', - component: AdminComponent, + component: Admin, canActivate: [authGuard, adminGuard], }, // CanActivate + CanDeactivate - 未保存の変更チェック付き保護ルート { path: 'profile', - component: ProfileComponent, + component: Profile, canActivate: [authGuard], canDeactivate: [canDeactivateGuard], }, @@ -197,23 +197,23 @@ const routes: Routes = [ canActivateChild: [authGuard], children: [ // /users/list - 保護されている - {path: 'list', component: UserListComponent}, + {path: 'list', component: UserList}, // /users/detail/:id - 保護されている - {path: 'detail/:id', component: UserDetailComponent}, + {path: 'detail/:id', component: UserDetail}, ], }, // CanMatch - 機能フラグに基づいてルートを条件付きでマッチング { path: 'beta-feature', - component: BetaFeatureComponent, + component: BetaFeature, canMatch: [featureToggleGuard], }, // ベータ機能が無効な場合のフォールバックルート { path: 'beta-feature', - component: ComingSoonComponent, + component: ComingSoon, }, ]; ``` diff --git a/adev-ja/src/content/guide/routing/route-transition-animations.en.md b/adev-ja/src/content/guide/routing/route-transition-animations.en.md index bacb0b8e12..4f7cafacc2 100644 --- a/adev-ja/src/content/guide/routing/route-transition-animations.en.md +++ b/adev-ja/src/content/guide/routing/route-transition-animations.en.md @@ -1,6 +1,6 @@ # Route transition animations -Route transition animations enhance user experience by providing smooth visual transitions when navigating between different views in your Angular application. [Angular Router](/guide/routing/overview) includes built-in support for the browser's View Transitions API, enabling seamless animations between route changes in supported browsers. +Route transition animations enhance user experience by providing smooth visual transitions when navigating between different views in your Angular application. [Angular Router](/guide/routing) includes built-in support for the browser's View Transitions API, enabling seamless animations between route changes in supported browsers. HELPFUL: The Router's native View Transitions integration is currently in [developer preview](/reference/releases#developer-preview). Native View Transitions are a relatively new browser feature with limited support across all browsers. @@ -27,7 +27,7 @@ For more details about the browser API, see the [Chrome Explainer](https://devel Angular Router integrates view transitions into the navigation lifecycle to create seamless route changes. During navigation, the Router: -1. **Completes navigation preparation** - Route matching, [lazy loading](/guide/routing/define-routes#lazily-loaded-components), [guards](/guide/routing/route-guards), and [resolvers](/guide/routing/data-resolvers) execute +1. **Completes navigation preparation** - Route matching, [lazy loading](/guide/routing/define-routes#lazily-loaded-components-and-routes), [guards](/guide/routing/route-guards), and [resolvers](/guide/routing/data-resolvers) execute 2. **Initiates the view transition** - Router calls `startViewTransition` when routes are ready for activation 3. **Updates the DOM** - Router activates new routes and deactivates old ones within the transition callback 4. **Finalizes the transition** - The transition Promise resolves when Angular completes rendering @@ -104,7 +104,7 @@ Here's an example that adds a rotation effect to a counter element: } ``` -IMPORTANT: Define view transition animations in your global styles file, not in component styles. Angular's [view encapsulation](/guide/components/styling#view-encapsulation) scopes component styles, which prevents them from targeting the transition pseudo-elements correctly. +IMPORTANT: Define view transition animations in your global styles file, not in component styles. Angular's [view encapsulation](/guide/components/styling#style-scoping) scopes component styles, which prevents them from targeting the transition pseudo-elements correctly. [Try the updated “count” example on StackBlitz](https://stackblitz.com/edit/stackblitz-starters-fwn4i7?file=src%2Fmain.ts) @@ -122,7 +122,7 @@ Use this callback to customize transition behavior based on navigation context. ```ts import {inject} from '@angular/core'; -import {Router, withViewTransitions} from '@angular/router'; +import {Router, withViewTransitions, isActive} from '@angular/router'; withViewTransitions({ onViewTransitionCreated: ({transition}) => { @@ -137,7 +137,9 @@ withViewTransitions({ queryParams: 'ignored', }; - if (router.isActive(targetUrl, config)) { + const isTargetRouteCurrent = isActive(targetUrl, router, config); + + if (isTargetRouteCurrent()) { transition.skipTransition(); } }, diff --git a/adev-ja/src/content/guide/routing/route-transition-animations.md b/adev-ja/src/content/guide/routing/route-transition-animations.md index 4eace74818..7103f41b47 100644 --- a/adev-ja/src/content/guide/routing/route-transition-animations.md +++ b/adev-ja/src/content/guide/routing/route-transition-animations.md @@ -1,6 +1,6 @@ # ルート遷移アニメーション -ルート遷移アニメーションは、Angularアプリケーション内の異なるビュー間を移動する際にスムーズな視覚的遷移を提供することで、ユーザー体験を向上させます。[Angular Router](/guide/routing/overview)は、ブラウザのView Transitions APIの組み込みサポートを含んでおり、サポートされているブラウザでルート変更間のシームレスなアニメーションを可能にします。 +ルート遷移アニメーションは、Angularアプリケーション内の異なるビュー間を移動する際にスムーズな視覚的遷移を提供することで、ユーザー体験を向上させます。[Angular Router](/guide/routing)は、ブラウザのView Transitions APIの組み込みサポートを含んでおり、サポートされているブラウザでルート変更間のシームレスなアニメーションを可能にします。 HELPFUL: RouterのネイティブView Transitions統合は現在[デベロッパープレビュー](/reference/releases#developer-preview)中です。ネイティブView Transitionsは比較的新しいブラウザ機能であり、すべてのブラウザでのサポートは限られています。 @@ -27,7 +27,7 @@ document.startViewTransition(async () => { Angular Routerは、シームレスなルート変更を作成するために、ナビゲーションライフサイクルにビュー遷移を統合します。ナビゲーション中、Routerは以下を行います。 -1. **ナビゲーションの準備を完了する** - ルートのマッチング、[遅延ロード](/guide/routing/define-routes#lazily-loaded-components)、[ガード](/guide/routing/route-guards)、および[リゾルバー](/guide/routing/data-resolvers)が実行されます +1. **ナビゲーションの準備を完了する** - ルートのマッチング、[遅延ロード](/guide/routing/define-routes#lazily-loaded-components-and-routes)、[ガード](/guide/routing/route-guards)、および[リゾルバー](/guide/routing/data-resolvers)が実行されます 2. **ビュー遷移を開始する** - ルートがアクティベーションの準備ができたときに、Routerは`startViewTransition`を呼び出します 3. **DOMを更新する** - Routerは、遷移コールバック内で新しいルートをアクティブ化し、古いルートを非アクティブ化します 4. **遷移を完了する** - Angularがレンダリングを完了すると、遷移Promiseが解決されます @@ -104,7 +104,7 @@ CSSを使用してビューのトランジションをカスタマイズし、 } ``` -IMPORTANT: ビューのトランジションアニメーションは、コンポーネントスタイルではなく、グローバルスタイルファイルで定義してください。Angularの[ビューカプセル化](/guide/components/styling#view-encapsulation)はコンポーネントスタイルをスコープするため、トランジション擬似要素を正しくターゲットできなくなります。 +IMPORTANT: ビューのトランジションアニメーションは、コンポーネントスタイルではなく、グローバルスタイルファイルで定義してください。Angularの[ビューカプセル化](/guide/components/styling#style-scoping)はコンポーネントスタイルをスコープするため、トランジション擬似要素を正しくターゲットできなくなります。 [StackBlitzで更新された「count」の例を試す](https://stackblitz.com/edit/stackblitz-starters-fwn4i7?file=src%2Fmain.ts) @@ -122,7 +122,7 @@ IMPORTANT: ビューのトランジションアニメーションは、コンポ ```ts import {inject} from '@angular/core'; -import {Router, withViewTransitions} from '@angular/router'; +import {Router, withViewTransitions, isActive} from '@angular/router'; withViewTransitions({ onViewTransitionCreated: ({transition}) => { @@ -137,7 +137,9 @@ withViewTransitions({ queryParams: 'ignored', }; - if (router.isActive(targetUrl, config)) { + const isTargetRouteCurrent = isActive(targetUrl, router, config); + + if (isTargetRouteCurrent()) { transition.skipTransition(); } }, diff --git a/adev-ja/src/content/guide/routing/router-reference.en.md b/adev-ja/src/content/guide/routing/router-reference.en.md index 2038c2c4c4..9df1c92341 100644 --- a/adev-ja/src/content/guide/routing/router-reference.en.md +++ b/adev-ja/src/content/guide/routing/router-reference.en.md @@ -56,7 +56,7 @@ The in-application URLs can be indistinguishable from server URLs. Modern HTML5 browsers were the first to support `pushState` which is why many people refer to these URLs as "HTML5 style" URLs. HELPFUL: HTML5 style navigation is the router default. -In the [LocationStrategy and browser URL styles](common-router-tasks#locationstrategy-and-browser-url-styles) section, learn why HTML5 style is preferable, how to adjust its behavior, and how to switch to the older hash \(`#`\) style, if necessary. +In the [LocationStrategy and browser URL styles](guide/routing/common-router-tasks#locationstrategy-and-browser-url-styles) section, learn why HTML5 style is preferable, how to adjust its behavior, and how to switch to the older hash \(`#`\) style, if necessary. You must add a [`` element](https://developer.mozilla.org/docs/Web/HTML/Element/base 'base href') to the application's `index.html` for `pushState` routing to work. The browser uses the `` value to prefix relative URLs when referencing CSS files, scripts, and images. @@ -64,7 +64,9 @@ The browser uses the `` value to prefix relative URLs when referencin Add the `` element just after the `` tag. If the `app` folder is the application root, as it is for this application, set the `href` value in `index.html` as shown here. - +```html + +``` ### HTML5 URLs and the `` @@ -83,7 +85,7 @@ While the router uses the [HTML5 pushState](https://developer.mozilla.org/docs/W The preferred way to configure the strategy is to add a [`` element](https://developer.mozilla.org/docs/Web/HTML/Element/base 'base href') tag in the `` of the `index.html`. ```angular-html - + ``` Without that tag, the browser might not be able to load resources \(images, CSS, scripts\) when "deep linking" into the application. diff --git a/adev-ja/src/content/guide/routing/router-reference.md b/adev-ja/src/content/guide/routing/router-reference.md index 7178fd397e..229d934631 100644 --- a/adev-ja/src/content/guide/routing/router-reference.md +++ b/adev-ja/src/content/guide/routing/router-reference.md @@ -56,7 +56,7 @@ 最新のHTML5ブラウザが最初に`pushState`をサポートしたため、多くの人がこれらのURLを「HTML5スタイル」URLと呼んでいます。 HELPFUL: HTML5スタイルのナビゲーションはルーターのデフォルトです。 -[LocationStrategyとブラウザURLスタイル](common-router-tasks#locationstrategy-and-browser-url-styles)のセクションで、HTML5スタイルが推奨される理由、その動作を調整する方法、必要に応じて古いハッシュ\(`#`\)スタイルに切り替える方法を学びましょう。 +[LocationStrategyとブラウザURLスタイル](guide/routing/common-router-tasks#locationstrategy-and-browser-url-styles)のセクションで、HTML5スタイルが推奨される理由、その動作を調整する方法、必要に応じて古いハッシュ\(`#`\)スタイルに切り替える方法を学びましょう。 `pushState`ルーティングを機能させるには、アプリケーションの`index.html`に[``要素](https://developer.mozilla.org/docs/Web/HTML/Element/base 'base href')を追加する必要があります。 ブラウザは、CSSファイル、スクリプト、画像を相対URLで参照する際に、``の値をプレフィックスとして使用します。 @@ -64,7 +64,9 @@ HELPFUL: HTML5スタイルのナビゲーションはルーターのデフォル ``要素は``タグの直後に追加します。 `app`フォルダがこのアプリケーションのアプリケーションルートである場合、`index.html`の`href`値をここに示されているように設定します。 - +```html + +``` ### HTML5 URLと`` {#html5-urls-and-the-base-href} @@ -83,7 +85,7 @@ scheme authority path query fragment この戦略を設定する推奨される方法は、`index.html`の``に[``要素](https://developer.mozilla.org/docs/Web/HTML/Element/base 'base href')タグを追加することです。 ```angular-html - + ``` そのタグがないと、アプリケーションに「ディープリンク」した場合、ブラウザがリソース（画像、CSS、スクリプト）をロードできない可能性があります。 diff --git a/adev-ja/src/content/guide/routing/router-tutorial.en.md b/adev-ja/src/content/guide/routing/router-tutorial.en.md deleted file mode 100644 index d816c1e74a..0000000000 --- a/adev-ja/src/content/guide/routing/router-tutorial.en.md +++ /dev/null @@ -1,276 +0,0 @@ -# Using Angular routes in a single-page application - -This tutorial describes how to build a single-page application, SPA that uses multiple Angular routes. - -In a Single Page Application \(SPA\), all of your application's functions exist in a single HTML page. -As users access your application's features, the browser needs to render only the parts that matter to the user, instead of loading a new page. -This pattern can significantly improve your application's user experience. - -To define how users navigate through your application, you use routes. -Add routes to define how users navigate from one part of your application to another. -You can also configure routes to guard against unexpected or unauthorized behavior. - -## Objectives - -- Organize a sample application's features into modules. -- Define how to navigate to a component. -- Pass information to a component using a parameter. -- Structure routes by nesting several routes. -- Check whether users can access a route. -- Control whether the application can discard unsaved changes. -- Improve performance by pre-fetching route data and lazy loading feature modules. -- Require specific criteria to load components. - -## Create a sample application - -Using the Angular CLI, create a new application, _angular-router-sample_. -This application will have two components: _crisis-list_ and _heroes-list_. - -1. Create a new Angular project, _angular-router-sample_. - - ```shell - ng new angular-router-sample - ``` - - When prompted with `Would you like to add Angular routing?`, select `N`. - - When prompted with `Which stylesheet format would you like to use?`, select `CSS`. - - After a few moments, a new project, `angular-router-sample`, is ready. - -1. From your terminal, navigate to the `angular-router-sample` directory. -1. Create a component, _crisis-list_. - -```shell -ng generate component crisis-list -``` - -1. In your code editor, locate the file, `crisis-list.component.html` and replace the placeholder content with the following HTML. - - - -1. Create a second component, _heroes-list_. - -```shell -ng generate component heroes-list -``` - -1. In your code editor, locate the file, `heroes-list.component.html` and replace the placeholder content with the following HTML. - - - -1. In your code editor, open the file, `app.component.html` and replace its contents with the following HTML. - - - -1. Verify that your new application runs as expected by running the `ng serve` command. - -```shell -ng serve -``` - -1. Open a browser to `http://localhost:4200`. - - You should see a single web page, consisting of a title and the HTML of your two components. - -## Define your routes - -In this section, you'll define two routes: - -- The route `/crisis-center` opens the `crisis-center` component. -- The route `/heroes-list` opens the `heroes-list` component. - -A route definition is a JavaScript object. -Each route typically has two properties. -The first property, `path`, is a string that specifies the URL path for the route. -The second property, `component`, is a string that specifies what component your application should display for that path. - -1. From your code editor, create and open the `app.routes.ts` file. -1. Create and export a routes list for your application: - - ```ts - import {Routes} from '@angular/router'; - - export const routes = []; - ``` - -1. Add two routes for your first two components: - - ```ts - {path: 'crisis-list', component: CrisisListComponent}, - {path: 'heroes-list', component: HeroesListComponent}, - ``` - -This routes list is an array of JavaScript objects, with each object defining the properties of a route. - -## Import `provideRouter` from `@angular/router` - -Routing lets you display specific views of your application depending on the URL path. -To add this functionality to your sample application, you need to update the `app.config.ts` file to use the router providers function, `provideRouter`. -You import this provider function from `@angular/router`. - -1. From your code editor, open the `app.config.ts` file. -1. Add the following import statements: - - ```ts - import {provideRouter} from '@angular/router'; - import {routes} from './app.routes'; - ``` - -1. Update the providers in the `appConfig`: - - ```ts - providers: [provideRouter(routes)]; - ``` - -For `NgModule` based applications, put the `provideRouter` in the `providers` list of the `AppModule`, or whichever module is passed to `bootstrapModule` in the application. - -## Update your component with `router-outlet` - -At this point, you have defined two routes for your application. -However, your application still has both the `crisis-list` and `heroes-list` components hard-coded in your `app.component.html` template. -For your routes to work, you need to update your template to dynamically load a component based on the URL path. - -To implement this functionality, you add the `router-outlet` directive to your template file. - -1. From your code editor, open the `app.component.html` file. -1. Delete the following lines. - - - -1. Add the `router-outlet` directive. - - - -1. Add `RouterOutlet` to the imports of the `AppComponent` in `app.component.ts` - - ```ts - imports: [RouterOutlet], - ``` - -View your updated application in your browser. -You should see only the application title. -To view the `crisis-list` component, add `crisis-list` to the end of the path in your browser's address bar. -For example: - - -http://localhost:4200/crisis-list - - -Notice that the `crisis-list` component displays. -Angular is using the route you defined to dynamically load the component. -You can load the `heroes-list` component the same way: - - -http://localhost:4200/heroes-list - - -## Control navigation with UI elements - -Currently, your application supports two routes. -However, the only way to use those routes is for the user to manually type the path in the browser's address bar. -In this section, you'll add two links that users can click to navigate between the `heroes-list` and `crisis-list` components. -You'll also add some CSS styles. -While these styles are not required, they make it easier to identify the link for the currently-displayed component. -You'll add that functionality in the next section. - -1. Open the `app.component.html` file and add the following HTML below the title. - - - - This HTML uses an Angular directive, `routerLink`. - This directive connects the routes you defined to your template files. - -1. Add the `RouterLink` directive to the imports list of `AppComponent` in `app.component.ts`. - -1. Open the `app.component.css` file and add the following styles. - - - -If you view your application in the browser, you should see these two links. -When you click on a link, the corresponding component appears. - -## Identify the active route - -While users can navigate your application using the links you added in the previous section, they don't have a straightforward way to identify what the active route is. -Add this functionality using Angular's `routerLinkActive` directive. - -1. From your code editor, open the `app.component.html` file. -1. Update the anchor tags to include the `routerLinkActive` directive. - - - -1. Add the `RouterLinkActive` directive to the `imports` list of `AppComponent` in `app.component.ts`. - -View your application again. -As you click one of the buttons, the style for that button updates automatically, identifying the active component to the user. -By adding the `routerLinkActive` directive, you inform your application to apply a specific CSS class to the active route. -In this tutorial, that CSS class is `activebutton`, but you could use any class that you want. - -Note that we are also specifying a value for the `routerLinkActive`'s `ariaCurrentWhenActive`. This makes sure that visually impaired users (which may not perceive the different styling being applied) can also identify the active button. For more information see the Accessibility Best Practices [Active links identification section](/best-practices/a11y#active-links-identification). - -## Adding a redirect - -In this step of the tutorial, you add a route that redirects the user to display the `/heroes-list` component. - -1. From your code editor, open the `app.routes.ts` file. -1. Update the `routes` section as follows. - - ```ts - {path: '', redirectTo: '/heroes-list', pathMatch: 'full'}, - ``` - - Notice that this new route uses an empty string as its path. - In addition, it replaces the `component` property with two new ones: - - | Properties | Details | - | :----------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | - | `redirectTo` | This property instructs Angular to redirect from an empty path to the `heroes-list` path. | - | `pathMatch` | This property instructs Angular on how much of the URL to match. For this tutorial, you should set this property to `full`. This strategy is recommended when you have an empty string for a path. For more information about this property, see the [Route API documentation](api/router/Route). | - -Now when you open your application, it displays the `heroes-list` component by default. - -## Adding a 404 page - -It is possible for a user to try to access a route that you have not defined. -To account for this behavior, the best practice is to display a 404 page. -In this section, you'll create a 404 page and update your route configuration to show that page for any unspecified routes. - -1. From the terminal, create a new component, `PageNotFound`. - -```shell -ng generate component page-not-found -``` - -1. From your code editor, open the `page-not-found.component.html` file and replace its contents with the following HTML. - - - -1. Open the `app.routes.ts` file and add the following route to the routes list: - - ```ts - {path: '**', component: PageNotFoundComponent} - ``` - - The new route uses a path, `**`. - This path is how Angular identifies a wildcard route. - Any route that does not match an existing route in your configuration will use this route. - -IMPORTANT: Notice that the wildcard route is placed at the end of the array. -The order of your routes is important, as Angular applies routes in order and uses the first match it finds. - -Try navigating to a non-existing route on your application, such as `http://localhost:4200/powers`. -This route doesn't match anything defined in your `app.routes.ts` file. -However, because you defined a wildcard route, the application automatically displays your `PageNotFound` component. - -## Next steps - -At this point, you have a basic application that uses Angular's routing feature to change what components the user can see based on the URL address. -You have extended these features to include a redirect, as well as a wildcard route to display a custom 404 page. - -For more information about routing, see the following topics: - - - - - diff --git a/adev-ja/src/content/guide/routing/router-tutorial.md b/adev-ja/src/content/guide/routing/router-tutorial.md deleted file mode 100644 index 1344245075..0000000000 --- a/adev-ja/src/content/guide/routing/router-tutorial.md +++ /dev/null @@ -1,276 +0,0 @@ -# シングルページアプリケーションでAngularルートを使う - -このチュートリアルでは、複数のAngularルートを使用するシングルページアプリケーション（SPA）を構築する方法について説明します。 - -シングルページアプリケーション（SPA）では、アプリケーションのすべての機能が単一のHTMLページに存在します。 -ユーザーがアプリケーションの機能にアクセスすると、ブラウザは新しいページを読み込む代わりに、ユーザーにとって重要な部分のみをレンダリングする必要があります。 -このパターンは、アプリケーションのユーザー体験を大幅に向上させることができます。 - -ユーザーがアプリケーション内をどのように移動するかを定義するには、ルートを使用します。 -ユーザーがアプリケーションのある部分から別の部分へ移動する方法を定義するために、ルートを追加します。 -また、予期せぬ動作や不正な動作から保護するために、ルートを設定できます。 - -## 目的 {#objectives} - -- サンプルアプリケーションの機能をモジュールに整理する。 -- コンポーネントへのナビゲーション方法を定義する。 -- パラメーターを使用してコンポーネントに情報を渡す。 -- 複数のルートをネストしてルートを構成する。 -- ユーザーがルートにアクセスできるか確認する。 -- アプリケーションが未保存の変更を破棄できるかどうかを制御する。 -- ルートデータのプリフェッチと機能モジュールの遅延読み込みによってパフォーマンスを向上させる。 -- コンポーネントをロードするための特定の条件を要求する。 - -## サンプルアプリケーションを作成 {#create-a-sample-application} - -Angular CLIを使用して、新しいアプリケーション_angular-router-sample_を作成します。 -このアプリケーションには、_crisis-list_と_heroes-list_の2つのコンポーネントが含まれます。 - -1. 新しいAngularプロジェクト_angular-router-sample_を作成します。 - - ```shell - ng new angular-router-sample - ``` - - `Would you like to add Angular routing?`と表示されたら、`N`を選択します。 - - `Which stylesheet format would you like to use?`と表示されたら、`CSS`を選択します。 - - しばらくすると、新しいプロジェクト`angular-router-sample`の準備が整います。 - -1. ターミナルから、`angular-router-sample`ディレクトリに移動します。 -1. コンポーネント_crisis-list_を作成します。 - -```shell -ng generate component crisis-list -``` - -1. コードエディターで、ファイル`crisis-list.component.html`を見つけて、プレースホルダーの内容を以下のHTMLに置き換えます。 - - - -1. 2番目のコンポーネント_heroes-list_を作成します。 - -```shell -ng generate component heroes-list -``` - -1. コードエディターで、ファイル`heroes-list.component.html`を見つけて、プレースホルダーの内容を以下のHTMLに置き換えます。 - - - -1. コードエディターで、ファイル`app.component.html`を開き、その内容を以下のHTMLに置き換えます。 - - - -1. 新しいアプリケーションが期待どおりに動作することを確認するには、`ng serve`コマンドを実行します。 - -```shell -ng serve -``` - -1. ブラウザで`http://localhost:4200`を開きます。 - - タイトルと2つのコンポーネントのHTMLで構成される単一のWebページが表示されるはずです。 - -## ルートを定義する {#define-your-routes} - -このセクションでは、2つのルートを定義します。 - -- ルート`/crisis-center`は`crisis-center`コンポーネントを開きます。 -- ルート`/heroes-list`は`heroes-list`コンポーネントを開きます。 - -ルート定義はJavaScriptオブジェクトです。 -各ルートには通常2つのプロパティがあります。 -最初のプロパティである`path`は、ルートのURLパスを指定する文字列です。 -2番目のプロパティである`component`は、アプリケーションがそのパスに表示すべきコンポーネントを指定する文字列です。 - -1. コードエディターから、`app.routes.ts`ファイルを作成して開きます。 -1. アプリケーションのルートリストを作成してエクスポートします。 - - ```ts - import {Routes} from '@angular/router'; - - export const routes = []; - ``` - -1. 最初の2つのコンポーネントに2つのルートを追加します。 - - ```ts - {path: 'crisis-list', component: CrisisListComponent}, - {path: 'heroes-list', component: HeroesListComponent}, - ``` - -このルートリストはJavaScriptオブジェクトの配列であり、各オブジェクトがルートのプロパティを定義しています。 - -## `@angular/router`から`provideRouter`をインポートする {#import-providerouter-from-angularrouter} - -ルーティングを使用すると、URLパスに応じてアプリケーションの特定のビューを表示できます。 -この機能をサンプルアプリケーションに追加するには、`app.config.ts`ファイルを更新して、ルータープロバイダー関数である`provideRouter`を使用する必要があります。 -このプロバイダー関数は`@angular/router`からインポートします。 - -1. コードエディターで`app.config.ts`ファイルを開きます。 -1. 次のインポートステートメントを追加します。 - - ```ts - import {provideRouter} from '@angular/router'; - import {routes} from './app.routes'; - ``` - -1. `appConfig`のプロバイダーを更新します。 - - ```ts - providers: [provideRouter(routes)]; - ``` - -`NgModule`ベースのアプリケーションの場合、`provideRouter`は`AppModule`の`providers`リスト、またはアプリケーションで`bootstrapModule`に渡されるモジュールに配置します。 - -## `router-outlet`を使ってコンポーネントを更新する {#update-your-component-with-router-outlet} - -この時点で、アプリケーションに2つのルートを定義しました。 -しかし、アプリケーションの`app.component.html`テンプレートには、`crisis-list`と`heroes-list`の両コンポーネントがまだハードコードされています。 -ルートが機能するためには、URLパスに基づいてコンポーネントを動的にロードするようにテンプレートを更新する必要があります。 - -この機能を実装するには、テンプレートファイルに`router-outlet`ディレクティブを追加します。 - -1. コードエディターで`app.component.html`ファイルを開きます。 -1. 以下の行を削除します。 - - - -1. `router-outlet`ディレクティブを追加します。 - - - -1. `app.component.ts`の`AppComponent`のインポートに`RouterOutlet`を追加します。 - - ```ts - imports: [RouterOutlet], - ``` - -更新されたアプリケーションをブラウザで表示します。 -アプリケーションのタイトルのみが表示されるはずです。 -`crisis-list`コンポーネントを表示するには、ブラウザのアドレスバーのパスの末尾に`crisis-list`を追加します。 -例: - - -http://localhost:4200/crisis-list - - -`crisis-list`コンポーネントが表示されることに注目してください。 -Angularは、定義したルートを使用してコンポーネントを動的にロードしています。 -同じ方法で`heroes-list`コンポーネントをロードできます。 - - -http://localhost:4200/heroes-list - - -## UI要素でナビゲーションを制御する {#control-navigation-with-ui-elements} - -現在、アプリケーションは2つのルートをサポートしています。 -しかし、これらのルートを使用する唯一の方法は、ユーザーがブラウザのアドレスバーにパスを手動で入力することです。 -このセクションでは、ユーザーがクリックして`heroes-list`コンポーネントと`crisis-list`コンポーネント間を移動できる2つのリンクを追加します。 -また、いくつかのCSSスタイルも追加します。 -これらのスタイルは必須ではありませんが、現在表示されているコンポーネントのリンクを識別しやすくします。 -この機能は次のセクションで追加します。 - -1. `app.component.html`ファイルを開き、タイトルの下に以下のHTMLを追加します。 - - - - このHTMLはAngularディレクティブである`routerLink`を使用しています。 - このディレクティブは、定義したルートをテンプレートファイルに接続します。 - -1. `app.component.ts`の`AppComponent`のimportsリストに`RouterLink`ディレクティブを追加します。 - -1. `app.component.css`ファイルを開き、以下のスタイルを追加します。 - - - -ブラウザでアプリケーションを表示すると、これら2つのリンクが表示されるはずです。 -リンクをクリックすると、対応するコンポーネントが表示されます。 - -## アクティブルートの特定 {#identify-the-active-route} - -ユーザーは前のセクションで追加したリンクを使用してアプリケーションをナビゲートできますが、アクティブルートが何かを特定する簡単な方法がありません。 -Angularの`routerLinkActive`ディレクティブを使用してこの機能を追加します。 - -1. コードエディターで、`app.component.html`ファイルを開きます。 -1. アンカータグを更新して、`routerLinkActive`ディレクティブを含めるようにします。 - - - -1. `app.component.ts`の`AppComponent`の`imports`リストに`RouterLinkActive`ディレクティブを追加します。 - -アプリケーションを再度表示します。 -いずれかのボタンをクリックすると、そのボタンのスタイルが自動的に更新され、アクティブなコンポーネントをユーザーに特定します。 -`routerLinkActive`ディレクティブを追加することで、アプリケーションに特定のCSSクラスをアクティブルートに適用するよう指示します。 -このチュートリアルでは、そのCSSクラスは`activebutton`ですが、好きな任意のクラスを使用できます。 - -Note: `routerLinkActive`の`ariaCurrentWhenActive`に値を指定していることにも注意してください。これにより、視覚に障がいのあるユーザー（適用されている異なるスタイルを認識できない可能性のあるユーザー）もアクティブなボタンを特定できます。詳細については、アクセシビリティのベストプラクティス[アクティブリンクの識別セクション](/best-practices/a11y#active-links-identification)を参照してください。 - -## リダイレクトの追加 {#adding-a-redirect} - -このチュートリアルのステップでは、ユーザーを`/heroes-list`コンポーネントの表示にリダイレクトするルートを追加します。 - -1. コードエディターで`app.routes.ts`ファイルを開きます。 -1. `routes`セクションを次のように更新します。 - - ```ts - {path: '', redirectTo: '/heroes-list', pathMatch: 'full'}, - ``` - - この新しいルートは、パスとして空の文字列を使用していることに注意してください。 - さらに、`component`プロパティを2つの新しいプロパティに置き換えます。 - - | プロパティ | 詳細 | - | :----------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | - | `redirectTo` | このプロパティは、Angularに空のパスから`heroes-list`パスへのリダイレクトを指示します。 | - | `pathMatch` | このプロパティは、AngularにURLのどの部分を一致させるかを指示します。このチュートリアルでは、このプロパティを`full`に設定する必要があります。この戦略は、パスに空の文字列がある場合に推奨されます。このプロパティの詳細については、[Route API documentation](api/router/Route)を参照してください。 | - -これでアプリケーションを開くと、デフォルトで`heroes-list`コンポーネントが表示されます。 - -## 404ページを追加する {#adding-a-404-page} - -ユーザーが未定義のルートにアクセスしようとする可能性があります。 -この動作に対応するには、404ページを表示するのがベストプラクティスです。 -このセクションでは、404ページを作成し、未指定のルートに対してそのページを表示するようにルート設定を更新します。 - -1. ターミナルから、新しいコンポーネント`PageNotFound`を作成します。 - -```shell -ng generate component page-not-found -``` - -1. コードエディターで、`page-not-found.component.html`ファイルを開き、その内容を以下のHTMLに置き換えます。 - - - -1. `app.routes.ts`ファイルを開き、以下のルートをルートリストに追加します。 - - ```ts - {path: '**', component: PageNotFoundComponent} - ``` - - 新しいルートはパス`**`を使用します。 - このパスは、Angularがワイルドカードルートを識別する方法です。 - 設定内の既存のルートと一致しないルートは、すべてこのルートを使用します。 - -IMPORTANT: ワイルドカードルートが配列の最後に配置されていることに注意してください。 -Angularはルートを順番に適用し、最初に見つかった一致を使用するため、ルートの順序は重要です。 - -`http://localhost:4200/powers`のような、アプリケーション上に存在しないルートに移動してみてください。 -このルートは、`app.routes.ts`ファイルで定義されているものと一致しません。 -しかし、ワイルドカードルートを定義したため、アプリケーションは自動的に`PageNotFound`コンポーネントを表示します。 - -## 次のステップ {#next-steps} - -この時点で、Angularのルーティング機能を使用して、URLアドレスに基づいてユーザーが見ることができるコンポーネントを変更する基本的なアプリケーションができています。 -これらの機能を拡張して、リダイレクトや、カスタムの404ページを表示するためのワイルドカードルートを含めました。 - -ルーティングの詳細については、以下のトピックを参照してください。 - - - - - diff --git a/adev-ja/src/content/guide/routing/routing-with-urlmatcher.en.md b/adev-ja/src/content/guide/routing/routing-with-urlmatcher.en.md index 04f68bcaff..c161a28f1d 100644 --- a/adev-ja/src/content/guide/routing/routing-with-urlmatcher.en.md +++ b/adev-ja/src/content/guide/routing/routing-with-urlmatcher.en.md @@ -35,13 +35,13 @@ In addition to the default Angular application framework, you will also create a ng generate component profile ``` -1. In your code editor, locate the file, `profile.component.html` and replace the placeholder content with the following HTML. +1. In your code editor, locate the file, `profile.html` and replace the placeholder content with the following HTML. - + -1. In your code editor, locate the file, `app.component.html` and replace the placeholder content with the following HTML. +1. In your code editor, locate the file, `app.html` and replace the placeholder content with the following HTML. - + ## Configure your routes for your application @@ -77,7 +77,7 @@ HELPFUL: A custom URL matcher behaves like any other route definition. Define ch With the custom matcher in place, you can now bind the route parameter in the `profile` component. -In your code editor, open your `profile.component.ts` file and create an `input` matching the `username` parameter. +In your code editor, open your `profile.ts` file and create an `input` matching the `username` parameter. We added the `withComponentInputBinding` feature earlier in `provideRouter`. This allows the `Router` to bind information directly to the route components. diff --git a/adev-ja/src/content/guide/routing/routing-with-urlmatcher.md b/adev-ja/src/content/guide/routing/routing-with-urlmatcher.md index fe4ae5a97b..de32a56e8c 100644 --- a/adev-ja/src/content/guide/routing/routing-with-urlmatcher.md +++ b/adev-ja/src/content/guide/routing/routing-with-urlmatcher.md @@ -35,13 +35,13 @@ Angular CLIを使用して、新しいアプリケーション_angular-custom-ro ng generate component profile ``` -1. コードエディタで`profile.component.html`ファイルを見つけ、プレースホルダーコンテンツを次のHTMLに置き換えます。 +1. コードエディタで`profile.html`ファイルを見つけ、プレースホルダーコンテンツを次のHTMLに置き換えます。 - + -1. コードエディタで`app.component.html`ファイルを見つけ、プレースホルダーコンテンツを次のHTMLに置き換えます。 +1. コードエディタで`app.html`ファイルを見つけ、プレースホルダーコンテンツを次のHTMLに置き換えます。 - + ## アプリケーションのルートを構成する @@ -77,7 +77,7 @@ HELPFUL: カスタムURLマッチャーは、他のルート定義と同じよ カスタムマッチャーが設定されたので、`profile`コンポーネントでルートパラメーターをバインドできます。 -コードエディタで`profile.component.ts`ファイルを開き、`username`パラメーターと一致する`input`を作成します。 +コードエディタで`profile.ts`ファイルを開き、`username`パラメーターと一致する`input`を作成します。 以前、`provideRouter`で`withComponentInputBinding`機能を追加しました。 これにより、`Router`はルートコンポーネントに直接情報をバインドできます。 diff --git a/adev-ja/src/content/guide/routing/show-routes-with-outlets.en.md b/adev-ja/src/content/guide/routing/show-routes-with-outlets.en.md index b46b4ecb18..cec174d981 100644 --- a/adev-ja/src/content/guide/routing/show-routes-with-outlets.en.md +++ b/adev-ja/src/content/guide/routing/show-routes-with-outlets.en.md @@ -2,9 +2,10 @@ The `RouterOutlet` directive is a placeholder that marks the location where the router should render the component for the current URL. -```angular-html +```html - + + ``` @@ -15,28 +16,28 @@ import {RouterOutlet} from '@angular/router'; @Component({ selector: 'app-root', imports: [RouterOutlet], - templateUrl: './app.component.html', - styleUrl: './app.component.css', + templateUrl: './app.html', + styleUrl: './app.css', }) -export class AppComponent {} +export class App {} ``` In this example, if an application has the following routes defined: ```ts import {Routes} from '@angular/router'; -import {HomeComponent} from './home/home.component'; -import {ProductsComponent} from './products/products.component'; +import {Home} from './home'; +import {Products} from './products'; const routes: Routes = [ { path: '', - component: HomeComponent, + component: Home, title: 'Home Page', }, { path: 'products', - component: ProductsComponent, + component: Products, title: 'Our Products', }, ]; @@ -99,16 +100,16 @@ A child route is like any other route, in that it needs both a `path` and a `com ```ts const routes: Routes = [ { - path: 'settings-component', - component: SettingsComponent, // this is the component with the in the template + path: 'settings', + component: Settings, // this is the component with the in the template children: [ { path: 'profile', // child route path - component: ProfileComponent, // child route component that the router renders + component: Profile, // child route component that the router renders }, { path: 'security', - component: SecurityComponent, // another child route component that the router renders + component: Security, // another child route component that the router renders }, ], }, @@ -124,8 +125,8 @@ Pages may have multiple outlets— you can assign a name to each outlet to speci ```angular-html - - + + ``` @@ -156,10 +157,10 @@ You can add event listeners with the standard event binding syntax: ```angular-html ``` @@ -170,36 +171,36 @@ Check out the [API docs for RouterOutlet](/api/router/RouterOutlet?tab=api) if y Passing contextual data to routed components often requires global state or complicated route configurations. To make this easier, each `RouterOutlet` supports a `routerOutletData` input. Routed components and their children can read this data as a signal using the `ROUTER_OUTLET_DATA` injection token, allowing outlet-specific configuration without modifying route definitions. ```angular-ts -import { Component } from '@angular/core'; -import { RouterOutlet } from '@angular/router'; +import {Component} from '@angular/core'; +import {RouterOutlet} from '@angular/router'; @Component({ selector: 'app-dashboard', imports: [RouterOutlet], template: `

Dashboard

- + `, }) -export class DashboardComponent {} +export class Dashboard {} ``` The routed component can inject the provided outlet data using `ROUTER_OUTLET_DATA`: ```angular-ts -import { Component, inject } from '@angular/core'; -import { ROUTER_OUTLET_DATA } from '@angular/router'; +import {Component, inject} from '@angular/core'; +import {ROUTER_OUTLET_DATA} from '@angular/router'; @Component({ selector: 'app-stats', template: `

Stats view (layout: {{ outletData().layout }})

`, }) -export class StatsComponent { - outletData = inject(ROUTER_OUTLET_DATA) as Signal<{ layout: string }>; +export class Stats { + outletData = inject(ROUTER_OUTLET_DATA) as Signal<{layout: string}>; } ``` -When Angular activates the `StatsComponent` in that outlet, it receives `{ layout: 'sidebar' }` as injected data. +When Angular activates the `Stats` in that outlet, it receives `{ layout: 'sidebar' }` as injected data. NOTE: When the `routerOutletData` input is unset, the injected value is null by default. diff --git a/adev-ja/src/content/guide/routing/show-routes-with-outlets.md b/adev-ja/src/content/guide/routing/show-routes-with-outlets.md index 0ccbab5f48..9f128fce04 100644 --- a/adev-ja/src/content/guide/routing/show-routes-with-outlets.md +++ b/adev-ja/src/content/guide/routing/show-routes-with-outlets.md @@ -2,9 +2,10 @@ `RouterOutlet`ディレクティブは、ルーターが現在のURLに対応するコンポーネントをレンダリングする場所を示すプレースホルダーです。 -```angular-html +```html - + + ``` @@ -15,28 +16,28 @@ import {RouterOutlet} from '@angular/router'; @Component({ selector: 'app-root', imports: [RouterOutlet], - templateUrl: './app.component.html', - styleUrl: './app.component.css', + templateUrl: './app.html', + styleUrl: './app.css', }) -export class AppComponent {} +export class App {} ``` この例では、アプリケーションに次のルートが定義されている場合: ```ts import {Routes} from '@angular/router'; -import {HomeComponent} from './home/home.component'; -import {ProductsComponent} from './products/products.component'; +import {Home} from './home'; +import {Products} from './products'; const routes: Routes = [ { path: '', - component: HomeComponent, + component: Home, title: 'Home Page', }, { path: 'products', - component: ProductsComponent, + component: Products, title: 'Our Products', }, ]; @@ -99,16 +100,16 @@ const routes: Routes = [ ```ts const routes: Routes = [ { - path: 'settings-component', - component: SettingsComponent, // これはテンプレートにを持つコンポーネントです + path: 'settings', + component: Settings, // これはテンプレートにを持つコンポーネントです children: [ { path: 'profile', // 子ルートのパス - component: ProfileComponent, // ルーターがレンダリングする子ルートコンポーネント + component: Profile, // ルーターがレンダリングする子ルートコンポーネント }, { path: 'security', - component: SecurityComponent, // ルーターがレンダリングする別の子ルートコンポーネント + component: Security, // ルーターがレンダリングする別の子ルートコンポーネント }, ], }, @@ -124,8 +125,8 @@ const routes: Routes = [ ```angular-html - - + + ``` @@ -156,10 +157,10 @@ Angularは、各ルートで定義された`outlet`プロパティにアウト ```angular-html ``` @@ -178,10 +179,10 @@ import {RouterOutlet} from '@angular/router'; imports: [RouterOutlet], template: `

Dashboard

- + `, }) -export class DashboardComponent {} +export class Dashboard {} ``` ルーティングされたコンポーネントは、`ROUTER_OUTLET_DATA`を使用して提供されたアウトレットデータをインジェクトできます。 @@ -194,12 +195,12 @@ import {ROUTER_OUTLET_DATA} from '@angular/router'; selector: 'app-stats', template: `

Stats view (layout: {{ outletData().layout }})

`, }) -export class StatsComponent { - outletData = inject(ROUTER_OUTLET_DATA) as Signal<{ layout: string }>; +export class Stats { + outletData = inject(ROUTER_OUTLET_DATA) as Signal<{layout: string}>; } ``` -Angularがそのアウトレット内で`StatsComponent`をアクティブ化すると、インジェクトされたデータとして`{ layout: 'sidebar' }`を受け取ります。 +Angularがそのアウトレット内で`Stats`をアクティブ化すると、インジェクトされたデータとして`{ layout: 'sidebar' }`を受け取ります。 NOTE: `routerOutletData`入力が設定されていない場合、インジェクトされる値はデフォルトでnullです。 diff --git a/adev-ja/src/content/guide/routing/testing.en.md b/adev-ja/src/content/guide/routing/testing.en.md index 8684a7dd1e..ac9ba97764 100644 --- a/adev-ja/src/content/guide/routing/testing.en.md +++ b/adev-ja/src/content/guide/routing/testing.en.md @@ -18,8 +18,7 @@ Components often rely on route parameters from the URL to fetch data, like a use The following example shows how to test a `UserProfile` component that displays a user ID from the route. -```ts -// user-profile.component.spec.ts +```ts { header: 'user-profile.spec.ts'} import {TestBed} from '@angular/core/testing'; import {Router} from '@angular/router'; import {RouterTestingHarness} from '@angular/router/testing'; @@ -41,13 +40,12 @@ describe('UserProfile', () => { }); ``` -```angular-ts -// user-profile.component.ts -import { Component, inject } from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; +```angular-ts {header: 'user-profile.ts'} +import {Component, inject} from '@angular/core'; +import {ActivatedRoute} from '@angular/router'; @Component({ - template: '

User Profile: {{userId}}

' + template: '

User Profile: {{userId}}

', }) export class UserProfile { private route = inject(ActivatedRoute); @@ -61,8 +59,8 @@ Route guards control access to routes based on conditions like authentication or The following example tests an `authGuard` that allows navigation for authenticated users and redirects unauthenticated users to a login page. -```ts -// auth.guard.spec.ts +```ts {header: 'auth.guard.spec.ts'} +import {vi, type Mocked} from 'vitest'; import {RouterTestingHarness} from '@angular/router/testing'; import {provideRouter, Router} from '@angular/router'; import {authGuard} from './auth.guard'; @@ -71,25 +69,24 @@ import {Component} from '@angular/core'; import {TestBed} from '@angular/core/testing'; @Component({template: '

Protected Page

'}) -class ProtectedComponent {} +class Protected {} @Component({template: '

Login Page

'}) -class LoginComponent {} +class Login {} describe('authGuard', () => { - let authStore: jasmine.SpyObj; + let authStore: Mocked; let harness: RouterTestingHarness; async function setup(isAuthenticated: boolean) { - authStore = jasmine.createSpyObj('AuthStore', ['isAuthenticated']); - authStore.isAuthenticated.and.returnValue(isAuthenticated); + authStore = {isAuthenticated: vi.fn().mockReturnValue(isAuthenticated)} as Mocked; TestBed.configureTestingModule({ providers: [ {provide: AuthStore, useValue: authStore}, provideRouter([ - {path: 'protected', component: ProtectedComponent, canActivate: [authGuard]}, - {path: 'login', component: LoginComponent}, + {path: 'protected', component: Protected, canActivate: [authGuard]}, + {path: 'login', component: Login}, ]), ], }); @@ -99,22 +96,21 @@ describe('authGuard', () => { it('allows navigation when user is authenticated', async () => { await setup(true); - await harness.navigateByUrl('/protected', ProtectedComponent); + await harness.navigateByUrl('/protected', Protected); // The protected component should render when authenticated expect(harness.routeNativeElement?.textContent).toContain('Protected Page'); }); it('redirects to login when user is not authenticated', async () => { await setup(false); - await harness.navigateByUrl('/protected', LoginComponent); + await harness.navigateByUrl('/protected', Login); // The login component should render after redirect expect(harness.routeNativeElement?.textContent).toContain('Login Page'); }); }); ``` -```ts -// auth.guard.ts +```ts {header: 'auth.guard.ts'} import {inject} from '@angular/core'; import {CanActivateFn, Router} from '@angular/router'; import {AuthStore} from './auth-store'; @@ -132,8 +128,7 @@ Router outlet tests are more of an integration test since you're essentially tes Here's an example of how to set up a test that verifies different components are displayed for different routes: -```ts -// app.component.spec.ts +```ts {header: 'app.spec.ts'} import {TestBed} from '@angular/core/testing'; import {RouterTestingHarness} from '@angular/router/testing'; import {provideRouter} from '@angular/router'; @@ -181,10 +176,9 @@ describe('App Router Outlet', () => { }); ``` -```angular-ts -// app.component.ts -import { Component } from '@angular/core'; -import { RouterOutlet, RouterLink } from '@angular/router'; +```angular-ts {header: 'app.ts'} +import {Component} from '@angular/core'; +import {RouterOutlet, RouterLink} from '@angular/router'; @Component({ imports: [RouterOutlet, RouterLink], @@ -194,7 +188,7 @@ import { RouterOutlet, RouterLink } from '@angular/router'; About - ` + `, }) export class App {} ``` @@ -211,8 +205,7 @@ You need to verify that: Here's an example of testing a parent-child route structure: -```ts -// nested-routes.spec.ts +```ts {header: 'nested-routes.spec.ts'} import {TestBed} from '@angular/core/testing'; import {RouterTestingHarness} from '@angular/router/testing'; import {provideRouter} from '@angular/router'; @@ -247,22 +240,21 @@ describe('Nested Routes', () => { }); ``` -```angular-ts -// nested-components.ts -import { Component } from '@angular/core'; -import { RouterOutlet } from '@angular/router'; +```angular-ts {header: 'nested.ts'} +import {Component} from '@angular/core'; +import {RouterOutlet} from '@angular/router'; @Component({ imports: [RouterOutlet], template: `

Parent Component

- ` + `, }) export class Parent {} @Component({ - template: '

Child Component

' + template: '

Child Component

', }) export class Child {} ``` @@ -275,8 +267,7 @@ Unlike route parameters that are part of the route definition, query parameters Here's an example of how to test query parameters and fragments: -```ts -// search.component.spec.ts +```ts {header: 'search.spec.ts'} import {TestBed} from '@angular/core/testing'; import {Router, provideRouter} from '@angular/router'; import {RouterTestingHarness} from '@angular/router/testing'; @@ -303,18 +294,17 @@ describe('Search', () => { }); ``` -```angular-ts -// search.component.ts -import { Component, inject, computed } from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; -import { toSignal } from '@angular/core/rxjs-interop'; +```angular-ts {header: 'search.ts'} +import {Component, inject, computed} from '@angular/core'; +import {ActivatedRoute} from '@angular/router'; +import {toSignal} from '@angular/core/rxjs-interop'; @Component({ - template: '
Search term: {{searchTerm()}}
' + template: '
Search term: {{searchTerm()}}
', }) export class Search { private route = inject(ActivatedRoute); - private queryParams = toSignal(this.route.queryParams, { initialValue: {} }); + private queryParams = toSignal(this.route.queryParams, {initialValue: {}}); searchTerm = computed(() => this.queryParams()['q'] || null); } diff --git a/adev-ja/src/content/guide/routing/testing.md b/adev-ja/src/content/guide/routing/testing.md index b3977de749..b46e6db00a 100644 --- a/adev-ja/src/content/guide/routing/testing.md +++ b/adev-ja/src/content/guide/routing/testing.md @@ -18,8 +18,7 @@ 以下の例は、ルートからユーザーIDを表示する`UserProfile`コンポーネントをテストする方法を示しています。 -```ts -// user-profile.component.spec.ts +```ts { header: 'user-profile.spec.ts'} import {TestBed} from '@angular/core/testing'; import {Router} from '@angular/router'; import {RouterTestingHarness} from '@angular/router/testing'; @@ -41,13 +40,12 @@ describe('UserProfile', () => { }); ``` -```angular-ts -// user-profile.component.ts -import { Component, inject } from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; +```angular-ts {header: 'user-profile.ts'} +import {Component, inject} from '@angular/core'; +import {ActivatedRoute} from '@angular/router'; @Component({ - template: '

User Profile: {{userId}}

' + template: '

User Profile: {{userId}}

', }) export class UserProfile { private route = inject(ActivatedRoute); @@ -61,8 +59,8 @@ export class UserProfile { 以下の例は、認証されたユーザーのナビゲーションを許可し、認証されていないユーザーをログインページにリダイレクトする`authGuard`をテストします。 -```ts -// auth.guard.spec.ts +```ts {header: 'auth.guard.spec.ts'} +import {vi, type Mocked} from 'vitest'; import {RouterTestingHarness} from '@angular/router/testing'; import {provideRouter, Router} from '@angular/router'; import {authGuard} from './auth.guard'; @@ -71,25 +69,24 @@ import {Component} from '@angular/core'; import {TestBed} from '@angular/core/testing'; @Component({template: '

Protected Page

'}) -class ProtectedComponent {} +class Protected {} @Component({template: '

Login Page

'}) -class LoginComponent {} +class Login {} describe('authGuard', () => { - let authStore: jasmine.SpyObj; + let authStore: Mocked; let harness: RouterTestingHarness; async function setup(isAuthenticated: boolean) { - authStore = jasmine.createSpyObj('AuthStore', ['isAuthenticated']); - authStore.isAuthenticated.and.returnValue(isAuthenticated); + authStore = {isAuthenticated: vi.fn().mockReturnValue(isAuthenticated)} as Mocked; TestBed.configureTestingModule({ providers: [ {provide: AuthStore, useValue: authStore}, provideRouter([ - {path: 'protected', component: ProtectedComponent, canActivate: [authGuard]}, - {path: 'login', component: LoginComponent}, + {path: 'protected', component: Protected, canActivate: [authGuard]}, + {path: 'login', component: Login}, ]), ], }); @@ -99,22 +96,21 @@ describe('authGuard', () => { it('allows navigation when user is authenticated', async () => { await setup(true); - await harness.navigateByUrl('/protected', ProtectedComponent); + await harness.navigateByUrl('/protected', Protected); // The protected component should render when authenticated expect(harness.routeNativeElement?.textContent).toContain('Protected Page'); }); it('redirects to login when user is not authenticated', async () => { await setup(false); - await harness.navigateByUrl('/protected', LoginComponent); + await harness.navigateByUrl('/protected', Login); // The login component should render after redirect expect(harness.routeNativeElement?.textContent).toContain('Login Page'); }); }); ``` -```ts -// auth.guard.ts +```ts {header: 'auth.guard.ts'} import {inject} from '@angular/core'; import {CanActivateFn, Router} from '@angular/router'; import {AuthStore} from './auth-store'; @@ -132,8 +128,7 @@ export const authGuard: CanActivateFn = () => { 異なるルートに対して異なるコンポーネントが表示されることを検証するテストを設定する方法の例を以下に示します。 -```ts -// app.component.spec.ts +```ts {header: 'app.spec.ts'} import {TestBed} from '@angular/core/testing'; import {RouterTestingHarness} from '@angular/router/testing'; import {provideRouter} from '@angular/router'; @@ -181,10 +176,9 @@ describe('App Router Outlet', () => { }); ``` -```angular-ts -// app.component.ts -import { Component } from '@angular/core'; -import { RouterOutlet, RouterLink } from '@angular/router'; +```angular-ts {header: 'app.ts'} +import {Component} from '@angular/core'; +import {RouterOutlet, RouterLink} from '@angular/router'; @Component({ imports: [RouterOutlet, RouterLink], @@ -194,7 +188,7 @@ import { RouterOutlet, RouterLink } from '@angular/router'; About - ` + `, }) export class App {} ``` @@ -211,8 +205,7 @@ export class App {} 親子のルート構造をテストする例を以下に示します。 -```ts -// nested-routes.spec.ts +```ts {header: 'nested-routes.spec.ts'} import {TestBed} from '@angular/core/testing'; import {RouterTestingHarness} from '@angular/router/testing'; import {provideRouter} from '@angular/router'; @@ -247,22 +240,21 @@ describe('Nested Routes', () => { }); ``` -```angular-ts -// nested-components.ts -import { Component } from '@angular/core'; -import { RouterOutlet } from '@angular/router'; +```angular-ts {header: 'nested.ts'} +import {Component} from '@angular/core'; +import {RouterOutlet} from '@angular/router'; @Component({ imports: [RouterOutlet], template: `

Parent Component

- ` + `, }) export class Parent {} @Component({ - template: '

Child Component

' + template: '

Child Component

', }) export class Child {} ``` @@ -275,8 +267,7 @@ export class Child {} クエリパラメーターとフラグメントをテストする方法の例を以下に示します。 -```ts -// search.component.spec.ts +```ts {header: 'search.spec.ts'} import {TestBed} from '@angular/core/testing'; import {Router, provideRouter} from '@angular/router'; import {RouterTestingHarness} from '@angular/router/testing'; @@ -303,18 +294,17 @@ describe('Search', () => { }); ``` -```angular-ts -// search.component.ts -import { Component, inject, computed } from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; -import { toSignal } from '@angular/core/rxjs-interop'; +```angular-ts {header: 'search.ts'} +import {Component, inject, computed} from '@angular/core'; +import {ActivatedRoute} from '@angular/router'; +import {toSignal} from '@angular/core/rxjs-interop'; @Component({ - template: '
Search term: {{searchTerm()}}
' + template: '
Search term: {{searchTerm()}}
', }) export class Search { private route = inject(ActivatedRoute); - private queryParams = toSignal(this.route.queryParams, { initialValue: {} }); + private queryParams = toSignal(this.route.queryParams, {initialValue: {}}); searchTerm = computed(() => this.queryParams()['q'] || null); } diff --git a/adev-ja/src/content/guide/security.en.md b/adev-ja/src/content/guide/security.en.md index ecee243eea..699631a40f 100644 --- a/adev-ja/src/content/guide/security.en.md +++ b/adev-ja/src/content/guide/security.en.md @@ -148,7 +148,7 @@ default-src 'self'; style-src 'self' 'nonce-randomNonceGoesHere'; script-src 'se When serving your Angular application, the server should include a randomly-generated nonce in the HTTP header for each request. You must provide this nonce to Angular so that the framework can render `
Cell 1 Cell 2