diff --git a/adev-ja/src/content/ai/develop-with-ai.md b/adev-ja/src/content/ai/develop-with-ai.md index 8c75f8e4f5..ccb7584b0b 100644 --- a/adev-ja/src/content/ai/develop-with-ai.md +++ b/adev-ja/src/content/ai/develop-with-ai.md @@ -31,6 +31,6 @@ Several editors, such as llms.txt - an index file providing links to key files and resources. -* llms-full.txt - a more robust compiled set of resources describing how Angular works and how to build Angular applications. +* llms-full.txt - a more robust compiled set of resources describing how Angular works and how to build Angular applications. Be sure [to check out the overview page](/ai) for more information on how to integrate AI into your Angular applications. diff --git a/adev-ja/src/content/guide/http/http-resource.md b/adev-ja/src/content/guide/http/http-resource.md index 40d4950b45..131169ff55 100644 --- a/adev-ja/src/content/guide/http/http-resource.md +++ b/adev-ja/src/content/guide/http/http-resource.md @@ -38,9 +38,13 @@ user = httpResource(() => ({ 'fast': 'yes', }, reportProgress: true, - withCredentials: true, transferCache: true, - keepalive: true, + keepalive: true, + mode: 'cors', + redirect: 'error', + priority: 'high', + cache : 'force-cache', + credentials: 'include', })); ``` 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 5b528691a6..96b22ea1fe 100644 --- a/adev-ja/src/content/guide/http/making-requests.en.md +++ b/adev-ja/src/content/guide/http/making-requests.en.md @@ -198,12 +198,13 @@ Each `HttpEvent` reported in the event stream has a `type` which distinguishes w ## Handling request failure -There are two ways an HTTP request can fail: +There are three ways an HTTP request can fail: * A network or connection error can prevent the request from reaching the backend server. +* A request didn't respond in time when the timeout option was set. * The backend can receive the request but fail to process it, and return an error response. -`HttpClient` captures both kinds of errors in an `HttpErrorResponse` which it returns through the `Observable`'s error channel. Network errors have a `status` code of `0` and an `error` which is an instance of [`ProgressEvent`](https://developer.mozilla.org/docs/Web/API/ProgressEvent). Backend errors have the failing `status` code returned by the backend, and the error response as the `error`. Inspect the response to identify the error's cause and the appropriate action to handle the error. +`HttpClient` captures all of the above kinds of errors in an `HttpErrorResponse` which it returns through the `Observable`'s error channel. Network and timeout errors have a `status` code of `0` and an `error` which is an instance of [`ProgressEvent`](https://developer.mozilla.org/docs/Web/API/ProgressEvent). Backend errors have the failing `status` code returned by the backend, and the error response as the `error`. Inspect the response to identify the error's cause and the appropriate action to handle the error. The [RxJS library](https://rxjs.dev/) offers several operators which can be useful for error handling. @@ -211,6 +212,228 @@ You can use the `catchError` operator to transform an error response into a valu Sometimes transient errors such as network interruptions can cause a request to fail unexpectedly, and simply retrying the request will allow it to succeed. RxJS provides several *retry* operators which automatically re-subscribe to a failed `Observable` under certain conditions. For example, the `retry()` operator will automatically attempt to re-subscribe a specified number of times. +### Timeouts + +To set a timeout for a request, you can set the `timeout` option to a number of milliseconds along other request options. If the backend request does not complete within the specified time, the request will be aborted and an error will be emitted. + +NOTE: The timeout will only apply to the backend HTTP request itself. It is not a timeout for the entire request handling chain. Therefore, this option is not affected by any delay introduced by interceptors. + + +http.get('/api/config', { + timeout: 3000, +}).subscribe({ + next: config => { + console.log('Config fetched successfully:', config); + }, + error: err => { + // If the request times out, an error will have been emitted. + } +}); + + +## Advanced fetch options + +When using the `withFetch()` provider, Angular's `HttpClient` provides access to advanced fetch API options that can improve performance and user experience. These options are only available when using the fetch backend. + +### Fetch options + +The following options provide fine-grained control over request behavior when using the fetch backend. + +#### Keep-alive connections + +The `keepalive` option allows a request to outlive the page that initiated it. This is particularly useful for analytics or logging requests that need to complete even if the user navigates away from the page. + + +http.post('/api/analytics', analyticsData, { + keepalive: true +}).subscribe(); + + +#### HTTP caching control + +The `cache` option controls how the request interacts with the browser's HTTP cache, which can significantly improve performance for repeated requests. + + +// Use cached response regardless of freshness +http.get('/api/config', { + cache: 'force-cache' +}).subscribe(config => { + // ... +}); + +// Always fetch from network, bypass cache +http.get('/api/live-data', { + cache: 'no-cache' +}).subscribe(data => { + // ... +}); + +// Use cached response only, fail if not in cache +http.get('/api/static-data', { + cache: 'only-if-cached' +}).subscribe(data => { + // ... +}); + + +#### Request priority for Core Web Vitals + +The `priority` option allows you to indicate the relative importance of a request, helping browsers optimize resource loading for better Core Web Vitals scores. + + +// High priority for critical resources +http.get('/api/user-profile', { + priority: 'high' +}).subscribe(profile => { + // ... +}); + +// Low priority for non-critical resources +http.get('/api/recommendations', { + priority: 'low' +}).subscribe(recommendations => { + // ... +}); + +// Auto priority (default) lets the browser decide +http.get('/api/settings', { + priority: 'auto' +}).subscribe(settings => { + // ... +}); + + +Available `priority` values: +- `'high'`: High priority, loaded early (e.g., critical user data, above-the-fold content) +- `'low'`: Low priority, loaded when resources are available (e.g., analytics, prefetch data) +- `'auto'`: Browser determines priority based on request context (default) + +TIP: Use `priority: 'high'` for requests that affect Largest Contentful Paint (LCP) and `priority: 'low'` for requests that don't impact initial user experience. + +#### Request mode + +The `mode` option controls how the request handles cross-origin requests and determines the response type. + + +// Same-origin requests only +http.get('/api/local-data', { + mode: 'same-origin' +}).subscribe(data => { + // ... +}); + +// CORS-enabled cross-origin requests +http.get('https://api.external.com/data', { + mode: 'cors' +}).subscribe(data => { + // ... +}); + +// No-CORS mode for simple cross-origin requests +http.get('https://external-api.com/public-data', { + mode: 'no-cors' +}).subscribe(data => { + // ... +}); + + +Available `mode` values: +- `'same-origin'`: Only allow same-origin requests, fail for cross-origin requests +- `'cors'`: Allow cross-origin requests with CORS (default) +- `'no-cors'`: Allow simple cross-origin requests without CORS, response is opaque + +TIP: Use `mode: 'same-origin'` for sensitive requests that should never go cross-origin. + +#### Redirect handling + +The `redirect` option specifies how to handle redirect responses from the server. + + +// Follow redirects automatically (default behavior) +http.get('/api/resource', { + redirect: 'follow' +}).subscribe(data => { + // ... +}); + +// Prevent automatic redirects +http.get('/api/resource', { + redirect: 'manual' +}).subscribe(response => { + // Handle redirect manually +}); + +// Treat redirects as errors +http.get('/api/resource', { + redirect: 'error' +}).subscribe({ + next: data => { + // Success response + }, + error: err => { + // Redirect responses will trigger this error handler + } +}); + + +Available `redirect` values: +- `'follow'`: Automatically follow redirects (default) +- `'error'`: Treat redirects as errors +- `'manual'`: Don't follow redirects automatically, return redirect response + +TIP: Use `redirect: 'manual'` when you need to handle redirects with custom logic. + +#### Credentials handling + +The `credentials` option controls whether cookies, authorization headers, and other credentials are sent with cross-origin requests. This is particularly important for authentication scenarios. + + +// Include credentials for cross-origin requests +http.get('https://api.example.com/protected-data', { + credentials: 'include' +}).subscribe(data => { + // ... +}); + +// Never send credentials (default for cross-origin) +http.get('https://api.example.com/public-data', { + credentials: 'omit' +}).subscribe(data => { + // ... +}); + +// Send credentials only for same-origin requests +http.get('/api/user-data', { + credentials: 'same-origin' +}).subscribe(data => { + // ... +}); + +// withCredentials overrides credentials setting +http.get('https://api.example.com/data', { + credentials: 'omit', // This will be ignored + withCredentials: true // This forces credentials: 'include' +}).subscribe(data => { + // Request will include credentials despite credentials: 'omit' +}); + +// Legacy approach (still supported) +http.get('https://api.example.com/data', { + withCredentials: true +}).subscribe(data => { + // Equivalent to credentials: 'include' +}); + + +IMPORTANT: The `withCredentials` option takes precedence over the `credentials` option. If both are specified, `withCredentials: true` will always result in `credentials: 'include'`, regardless of the explicit `credentials` value. + +Available `credentials` values: +- `'omit'`: Never send credentials +- `'same-origin'`: Send credentials only for same-origin requests (default) +- `'include'`: Always send credentials, even for cross-origin requests + +TIP: Use `credentials: 'include'` when you need to send authentication cookies or headers to a different domain that supports CORS. Avoid mixing `credentials` and `withCredentials` options to prevent confusion. + ## Http `Observable`s Each request method on `HttpClient` constructs and returns an `Observable` of the requested response type. Understanding how these `Observable`s work is important when using `HttpClient`. diff --git a/adev-ja/src/content/guide/http/making-requests.md b/adev-ja/src/content/guide/http/making-requests.md index 4ab2bb2c4d..de0c612bee 100644 --- a/adev-ja/src/content/guide/http/making-requests.md +++ b/adev-ja/src/content/guide/http/making-requests.md @@ -198,12 +198,13 @@ http.post('/api/upload', myData, { ## リクエスト失敗の処理 {#handling-request-failure} -HTTPリクエストは、次の2つの方法で失敗する可能性があります。 +HTTPリクエストは、次の3つの方法で失敗する可能性があります。 * ネットワークエラーまたは接続エラーにより、リクエストがバックエンドサーバーに到達できない場合があります。 +* timeoutオプションが設定されている場合に、リクエストが時間内に応答しませんでした。 * バックエンドがリクエストを受け取りますが、処理に失敗し、エラーレスポンスを返す場合があります。 -`HttpClient` は、`HttpErrorResponse` に両方の種類のエラーを捕捉し、`Observable` のエラーチャネルを通じて返します。ネットワークエラーの `status` コードは `0` で、`error` は [`ProgressEvent`](https://developer.mozilla.org/docs/Web/API/ProgressEvent) のインスタンスです。バックエンドエラーの `status` コードは、バックエンドによって返された失敗したコードであり、`error` はエラーレスポンスです。レスポンスを調べて、エラーの原因とエラーを処理するための適切なアクションを特定します。 +`HttpClient` は、上記のすべての種類のエラーを `HttpErrorResponse` に捕捉し、`Observable` のエラーチャネルを通じて返します。ネットワークエラーとタイムアウトエラーの `status` コードは `0` で、`error` は [`ProgressEvent`](https://developer.mozilla.org/docs/Web/API/ProgressEvent) のインスタンスです。バックエンドエラーの `status` コードは、バックエンドによって返された失敗したコードであり、`error` はエラーレスポンスです。レスポンスを調べて、エラーの原因とエラーを処理するための適切なアクションを特定します。 [RxJS ライブラリ](https://rxjs.dev/) は、エラー処理に役立つ演算子をいくつか提供しています。 @@ -211,6 +212,228 @@ HTTPリクエストは、次の2つの方法で失敗する可能性がありま ネットワークの中断など、一時的なエラーにより、予期せずリクエストが失敗することがあります。リクエストを再試行するだけで成功する場合があります。RxJSは、特定の条件下で失敗した `Observable` に自動的に再購読する、複数の*再試行*演算子を提供しています。たとえば、`retry()` 演算子は、指定された回数だけ自動的に再サブスクライブを試みます。 +### タイムアウト + +リクエストにタイムアウトを設定するには、他のリクエストオプションと一緒に `timeout` オプションをミリ秒数に設定できます。バックエンドリクエストが指定された時間内に完了しない場合、リクエストは中止され、エラーが発行されます。 + +NOTE: タイムアウトは、バックエンドHTTPリクエスト自体にのみ適用されます。リクエスト処理チェーン全体のタイムアウトではありません。したがって、このオプションは、インターセプターによって導入される遅延の影響を受けません。 + + +http.get('/api/config', { + timeout: 3000, +}).subscribe({ + next: config => { + console.log('設定の取得に成功:', config); + }, + error: err => { + // リクエストがタイムアウトした場合、エラーが発行されます。 + } +}); + + +## 高度な fetch オプション + +`withFetch()` プロバイダーを使用する場合、Angularの `HttpClient` は、パフォーマンスとユーザー体験を改善できる高度なfetch APIオプションへのアクセスを提供します。これらのオプションは、fetchバックエンドを使用する場合にのみ利用できます。 + +### Fetch オプション + +以下のオプションは、fetchバックエンドを使用する際のリクエスト動作を細かく制御します。 + +#### Keep-alive 接続 + +`keepalive` オプションにより、リクエストはそれを開始したページよりも長く存続できます。これは、ユーザーがページから移動した場合でも完了する必要がある分析やログリクエストに特に有用です。 + + +http.post('/api/analytics', analyticsData, { + keepalive: true +}).subscribe(); + + +#### HTTP キャッシュ制御 + +`cache` オプションは、リクエストがブラウザのHTTPキャッシュとどのように相互作用するかを制御し、繰り返しリクエストのパフォーマンスを大幅に改善できます。 + + +// 新鮮度に関係なくキャッシュされたレスポンスを使用 +http.get('/api/config', { + cache: 'force-cache' +}).subscribe(config => { + // ... +}); + +// 常にネットワークから取得、キャッシュをバイパス +http.get('/api/live-data', { + cache: 'no-cache' +}).subscribe(data => { + // ... +}); + +// キャッシュされたレスポンスのみを使用、キャッシュにない場合は失敗 +http.get('/api/static-data', { + cache: 'only-if-cached' +}).subscribe(data => { + // ... +}); + + +#### Core Web Vitals のためのリクエスト優先度 + +`priority` オプションを使用すると、リクエストの相対的な重要度を示すことができ、ブラウザがより良いCore Web Vitalsスコアのためにリソースの読み込みを最適化するのに役立ちます。 + + +// 重要なリソースの高優先度 +http.get('/api/user-profile', { + priority: 'high' +}).subscribe(profile => { + // ... +}); + +// 重要でないリソースの低優先度 +http.get('/api/recommendations', { + priority: 'low' +}).subscribe(recommendations => { + // ... +}); + +// 自動優先度 (デフォルト) はブラウザーが決定 +http.get('/api/settings', { + priority: 'auto' +}).subscribe(settings => { + // ... +}); + + +利用可能な `priority` 値： +- `'high'`: 高優先度、早期に読み込まれる（例：重要なユーザーデータ、above-the-foldコンテンツ） +- `'low'`: 低優先度、リソースが利用可能なときに読み込まれる（例：分析、プリフェッチデータ） +- `'auto'`: ブラウザがリクエストコンテキストに基づいて優先度を決定（デフォルト） + +TIP: Largest Contentful Paint (LCP) に影響するリクエストには `priority: 'high'` を使用し、初期ユーザー体験に影響しないリクエストには `priority: 'low'` を使用してください。 + +#### リクエストモード + +`mode` オプションは、リクエストがクロスオリジンリクエストを処理する方法を制御し、レスポンスタイプを決定します。 + + +// 同一オリジンリクエストのみ +http.get('/api/local-data', { + mode: 'same-origin' +}).subscribe(data => { + // ... +}); + +// CORS が有効なクロスオリジンリクエスト +http.get('https://api.external.com/data', { + mode: 'cors' +}).subscribe(data => { + // ... +}); + +// シンプルなクロスオリジンリクエストの No-CORS モード +http.get('https://external-api.com/public-data', { + mode: 'no-cors' +}).subscribe(data => { + // ... +}); + + +利用可能な `mode` 値： +- `'same-origin'`: 同一オリジンリクエストのみを許可、クロスオリジンリクエストは失敗 +- `'cors'`: CORSでクロスオリジンリクエストを許可（デフォルト） +- `'no-cors'`: CORSなしでシンプルなクロスオリジンリクエストを許可、レスポンスは不透明 + +TIP: クロスオリジンに行くべきでない機密リクエストには `mode: 'same-origin'` を使用してください。 + +#### リダイレクト処理 + +`redirect` オプションは、サーバーからのリダイレクトレスポンスを処理する方法を指定します。 + + +// リダイレクトを自動的に追跡（デフォルトの動作） +http.get('/api/resource', { + redirect: 'follow' +}).subscribe(data => { + // ... +}); + +// 自動リダイレクトを防ぐ +http.get('/api/resource', { + redirect: 'manual' +}).subscribe(response => { + // リダイレクトを手動で処理 +}); + +// リダイレクトをエラーとして扱う +http.get('/api/resource', { + redirect: 'error' +}).subscribe({ + next: data => { + // 成功レスポンス + }, + error: err => { + // リダイレクトレスポンスはこのエラーハンドラーをトリガーします + } +}); + + +利用可能な `redirect` 値： +- `'follow'`: リダイレクトを自動的に追跡（デフォルト） +- `'error'`: リダイレクトをエラーとして扱う +- `'manual'`: リダイレクトを自動的に追跡せず、リダイレクトレスポンスを返す + +TIP: カスタムロジックでリダイレクトを処理する必要がある場合は `redirect: 'manual'` を使用してください。 + +#### 認証情報の処理 + +`credentials` オプションは、Cookie、認証ヘッダー、その他の認証情報がクロスオリジンリクエストと一緒に送信されるかどうかを制御します。これは認証シナリオで特に重要です。 + + +// クロスオリジンリクエストに認証情報を含める +http.get('https://api.example.com/protected-data', { + credentials: 'include' +}).subscribe(data => { + // ... +}); + +// 認証情報を送信しない（クロスオリジンのデフォルト） +http.get('https://api.example.com/public-data', { + credentials: 'omit' +}).subscribe(data => { + // ... +}); + +// 同一オリジンリクエストのみに認証情報を送信 +http.get('/api/user-data', { + credentials: 'same-origin' +}).subscribe(data => { + // ... +}); + +// withCredentials は credentials 設定を上書きします +http.get('https://api.example.com/data', { + credentials: 'omit', // これは無視されます + withCredentials: true // これにより credentials: 'include' が強制されます +}).subscribe(data => { + // credentials: 'omit' にもかかわらず、リクエストは認証情報を含みます +}); + +// レガシーアプローチ（まだサポートされています） +http.get('https://api.example.com/data', { + withCredentials: true +}).subscribe(data => { + // credentials: 'include' と同等 +}); + + +IMPORTANT: `withCredentials` オプションは `credentials` オプションより優先されます。両方が指定されている場合、明示的な `credentials` 値に関係なく、`withCredentials: true` は常に `credentials: 'include'` になります。 + +利用可能な `credentials` 値： +- `'omit'`: 認証情報を送信しない +- `'same-origin'`: 同一オリジンリクエストのみに認証情報を送信（デフォルト） +- `'include'`: クロスオリジンリクエストでも常に認証情報を送信 + +TIP: CORSをサポートする異なるドメインに認証Cookieやヘッダーを送信する必要がある場合は `credentials: 'include'` を使用してください。混乱を避けるため、`credentials` と `withCredentials` オプションを混在させることは避けてください。 + ## Http `Observable` `HttpClient` の各リクエストメソッドは、要求されたレスポンス型の `Observable` を構築して返します。これらの `Observable` の仕組みを理解することは、`HttpClient` を使用する場合に重要です。 diff --git a/adev-ja/src/content/guide/templates/expression-syntax.en.md b/adev-ja/src/content/guide/templates/expression-syntax.en.md index d3b497afb6..9cccd66037 100644 --- a/adev-ja/src/content/guide/templates/expression-syntax.en.md +++ b/adev-ja/src/content/guide/templates/expression-syntax.en.md @@ -17,7 +17,6 @@ Angular supports a subset of [literal values](https://developer.mozilla.org/en-U | Array | `['Onion', 'Cheese', 'Garlic']` | | null | `null` | | Template string | `` `Hello ${name}` `` | -| Tagged template string | `` tag`Hello ${name}` `` | ### Unsupported literals @@ -46,27 +45,34 @@ For example, `@for` blocks make several local variables corresponding to informa Angular supports the following operators from standard JavaScript. -| Operator | Example(s) | -| --------------------- | ---------------------------------------- | -| Add / Concatenate | `1 + 2` | -| Subtract | `52 - 3` | -| Multiply | `41 * 6` | -| Divide | `20 / 4` | -| Remainder (Modulo) | `17 % 5` | -| Exponentiation | `10 ** 3` | -| Parenthesis | `9 * (8 + 4)` | -| Conditional (Ternary) | `a > b ? true : false` | -| And (Logical) | `&&` | -| Or (Logical) | `\|\|` | -| Not (Logical) | `!` | -| Nullish Coalescing | `possiblyNullValue ?? 'default'` | -| Comparison Operators | `<`, `<=`, `>`, `>=`, `==`, `===`, `!==` | -| Unary Negation | `-x` | -| Unary Plus | `+y` | -| Property Accessor | `person['name']` | -| typeof | `typeof 42` | -| void | `void 1` | -| in | `'model' in car` | +| Operator | Example(s) | +| ------------------------------- | ---------------------------------------- | +| Add / Concatenate | `1 + 2` | +| Subtract | `52 - 3` | +| Multiply | `41 * 6` | +| Divide | `20 / 4` | +| Remainder (Modulo) | `17 % 5` | +| Exponentiation | `10 ** 3` | +| Parenthesis | `9 * (8 + 4)` | +| Conditional (Ternary) | `a > b ? true : false` | +| And (Logical) | `&&` | +| Or (Logical) | `\|\|` | +| Not (Logical) | `!` | +| Nullish Coalescing | `possiblyNullValue ?? 'default'` | +| Comparison Operators | `<`, `<=`, `>`, `>=`, `==`, `===`, `!==` | +| Unary Negation | `-x` | +| Unary Plus | `+y` | +| Property Accessor | `person['name']` | +| Assignment | `a = b` | +| Addition Assignment | `a += b` | +| Subtraction Assignment | `a -= b` | +| Multiplication Assignment | `a *= b` | +| Division Assignment | `a /= b` | +| Remainder Assignment | `a %= b` | +| Exponentiation Assignment | `a **= b` | +| Logical AND Assignment | `a &&= b` | +| Logical OR Assignment | `a \|\|= b` | +| Nullish Coalescing Assignment | `a ??= b` | Angular expressions additionally also support the following non-standard operators: @@ -83,13 +89,9 @@ NOTE: Optional chaining behaves differently from the standard JavaScript version | Operator | Example(s) | | --------------------- | --------------------------------- | | All bitwise operators | `&`, `&=`, `~`, `\|=`, `^=`, etc. | -| Assignment operators | `=` | | Object destructuring | `const { name } = person` | | Array destructuring | `const [firstItem] = items` | | Comma operator | `x = (x++, x)` | -| in | `'model' in car` | -| typeof | `typeof 42` | -| void | `void 1` | | instanceof | `car instanceof Automobile` | | new | `new Car()` | diff --git a/adev-ja/src/content/guide/templates/expression-syntax.md b/adev-ja/src/content/guide/templates/expression-syntax.md index 4c132dbaec..1e591fc3ae 100644 --- a/adev-ja/src/content/guide/templates/expression-syntax.md +++ b/adev-ja/src/content/guide/templates/expression-syntax.md @@ -23,7 +23,6 @@ Angularは、[リテラル値](https://developer.mozilla.org/en-US/docs/Glossary | Literal type | Example value | | ---------------------- | ------------------------ | | RegExp | `/\d+/` | -| Tagged template string | `` tag`Hello ${name}` `` | ## グローバル @@ -46,27 +45,34 @@ Angularは、特定のコンテキストで式に使用できる特別なロー Angularは、標準JavaScriptの次の演算子をサポートしています。 -| 演算子 | 例(複数) | -| --------------------- | ---------------------------------------- | -| 加算/連結 | `1 + 2` | -| 減算 | `52 - 3` | -| 乗算 | `41 * 6` | -| 除算 | `20 / 4` | -| 余り（剰余） | `17 % 5` | -| Exponentiation | `10 ** 3` | -| 括弧 | `9 * (8 + 4)` | -| 条件式（三項演算子） | `a > b ? true : false` | -| 論理積 | `&&` | -| 論理和 | `\|\|` | -| 論理否定 | `!` | -| Nullish Coalescing | `possiblyNullValue ?? 'default'` | -| 比較演算子 | `<`, `<=`, `>`, `>=`, `==`, `===`, `!==` | -| Unary Negation | `-x` | -| Unary Plus | `+y` | -| Property Accessor | `person['name']` | -| typeof | `typeof 42` | -| void | `void 1` | -| in | `'model' in car` | +| 演算子 | 例(複数) | +| ------------------------------- | ---------------------------------------- | +| 加算/連結 | `1 + 2` | +| 減算 | `52 - 3` | +| 乗算 | `41 * 6` | +| 除算 | `20 / 4` | +| 余り（剰余） | `17 % 5` | +| Exponentiation | `10 ** 3` | +| 括弧 | `9 * (8 + 4)` | +| 条件式（三項演算子） | `a > b ? true : false` | +| 論理積 | `&&` | +| 論理和 | `\|\|` | +| 論理否定 | `!` | +| Nullish Coalescing | `possiblyNullValue ?? 'default'` | +| 比較演算子 | `<`, `<=`, `>`, `>=`, `==`, `===`, `!==` | +| Unary Negation | `-x` | +| Unary Plus | `+y` | +| Property Accessor | `person['name']` | +| 代入 | `a = b` | +| 加算代入 | `a += b` | +| 減算代入 | `a -= b` | +| 乗算代入 | `a *= b` | +| 除算代入 | `a /= b` | +| 余り代入 | `a %= b` | +| Exponentiation Assignment | `a **= b` | +| 論理積代入 | `a &&= b` | +| 論理和代入 | `a \|\|= b` | +| Nullish Coalescing Assignment | `a ??= b` | Angular式は、さらに次の非標準の演算子もサポートしています。 @@ -83,13 +89,9 @@ NOTE: オプショナルチェーンは、標準JavaScriptバージョンとは | 演算子 | 例(複数) | | --------------------- | --------------------------------- | | すべてのビット演算子 | `&`, `&=`, `~`, `\|=`, `^=`, etc. | -| 代入演算子 | `=` | | オブジェクトのデストラクタリング | `const { name } = person` | | 配列のデストラクタリング | `const [firstItem] = items` | | カンマ演算子 | `x = (x++, x)` | -| in | `'model' in car` | -| typeof | `typeof 42` | -| void | `void 1` | | instanceof | `car instanceof Automobile` | | new | `new Car()` | diff --git a/adev-ja/src/content/tutorials/first-app/intro/config.json b/adev-ja/src/content/tutorials/first-app/intro/config.json index 0f79c0f9b5..ade7c20555 100644 --- a/adev-ja/src/content/tutorials/first-app/intro/config.json +++ b/adev-ja/src/content/tutorials/first-app/intro/config.json @@ -1,7 +1,6 @@ { "title": "Your first Angular app", "type": "editor", - "src": "../steps/14-http/src", - "nextTutorial": "learn-angular", + "nextTutorial": "first-app", "openFiles": ["src/app/app.ts"] } diff --git a/adev-ja/src/content/tutorials/first-app/steps/02-Home/README.md b/adev-ja/src/content/tutorials/first-app/steps/02-Home/README.md index c0556a3160..ab4d3119c0 100644 --- a/adev-ja/src/content/tutorials/first-app/steps/02-Home/README.md +++ b/adev-ja/src/content/tutorials/first-app/steps/02-Home/README.md @@ -100,7 +100,7 @@ In the **Edit** pane of your IDE: 1. In the `first-app` directory, open `home.ts` in the editor. 1. In `home.ts`, in `@Component`, update the `template` property with this code. - + 1. Next, open `home.css` in the editor and update the content with these styles. diff --git a/adev-ja/src/content/tutorials/first-app/steps/03-HousingLocation/README.md b/adev-ja/src/content/tutorials/first-app/steps/03-HousingLocation/README.md index 4d45d8b2d9..68c52e5536 100644 --- a/adev-ja/src/content/tutorials/first-app/steps/03-HousingLocation/README.md +++ b/adev-ja/src/content/tutorials/first-app/steps/03-HousingLocation/README.md @@ -47,7 +47,7 @@ In the **Edit** pane of your IDE: 1. Open `home.ts` in the editor. 1. In `home.ts`, import `HousingLocation` by adding this line to the file level imports. - + 1. Next update the `imports` property of the `@Component` metadata by adding `HousingLocation` to the array. diff --git a/adev-ja/src/content/tutorials/first-app/steps/04-interfaces/README.md b/adev-ja/src/content/tutorials/first-app/steps/04-interfaces/README.md index d82c564d69..0c1f6ddac1 100644 --- a/adev-ja/src/content/tutorials/first-app/steps/04-interfaces/README.md +++ b/adev-ja/src/content/tutorials/first-app/steps/04-interfaces/README.md @@ -66,7 +66,7 @@ There are a few more lessons to complete before that happens. 1. In the **Edit** pane of your IDE, open `src/app/home/home.ts`. 1. In `src/app/home/home.ts`, add this import statement after the existing `import` statements so that `Home` can use the new interface. - + 1. In `src/app/home/home.ts`, replace the empty `export class Home {}` definition with this code to create a single instance of the new interface in the component. @@ -74,7 +74,7 @@ There are a few more lessons to complete before that happens. 1. Confirm that your `home.ts` file matches this example. - + By adding the `housingLocation` property of type `HousingLocation` to the `Home` class, we're able to confirm that the data matches the description of the interface. If the data didn't satisfy the description of the interface, the IDE has enough information to give us helpful errors. diff --git a/adev-ja/src/content/tutorials/first-app/steps/05-inputs/README.md b/adev-ja/src/content/tutorials/first-app/steps/05-inputs/README.md index 3aaacc94f8..e15c0e15fe 100644 --- a/adev-ja/src/content/tutorials/first-app/steps/05-inputs/README.md +++ b/adev-ja/src/content/tutorials/first-app/steps/05-inputs/README.md @@ -4,41 +4,43 @@ This tutorial lesson demonstrates how to create a component `input` and use it t +NOTE: This video reflects an older syntax, but the main concepts remain valid. + ## What you'll learn + Your app's `HousingLocation` template has a `HousingLocation` property to receive input. ## Conceptual preview of Inputs -[Inputs](api/core/input) allow components to share data. The direction of the data sharing is from parent component to child component. +[Inputs](api/core/input) allow components to specify data that can be passed to it from a parent component. -In this lesson, you'll define an `input` property in the `HousingLocation` component which will enable you to customize the data displayed in the component. +In this lesson, you'll define an `input` property in the `HousingLocation` component that enables you to customize the data displayed in the component. Learn more in the [Accepting data with input properties](guide/components/inputs) and [Custom events with outputs](guide/components/outputs) guides. -This step imports the `input()` function into the class. - -In the code editor: - -1. Navigate to `src/app/housing-location/housing-location.ts` -1. Update the file imports to include `input` and `HousingLocation`: +In the code editor, import the `input` helper method from `@angular/core` into the `HousingLocation` component. - + -1. In the same file, add a property called `housingLocation` and initialize it using `input.required()` with the type `HousingLocationInfo`. To set the type, use a generic parameter, by writing <HousingLocationInfo> immediately after .required: +Add a required property called `housingLocation` and initialize it using `input.required()` with the type `HousingLocationInfo`. - + + +You have to invoke the `required` method on `input` to indicate that the parent component must provide a value. In our example application, we know this value will always be passed in — this is by design. The `.required()` call ensures that the TypeScript compiler enforces this and treats the property as non-nullable when this component is used in a template. + + - You have to add `.required` after `input` to indicate that the parent component must provide a value. In our example application, we know this value will always be passed in — this is by design. The `.required()` call ensures that the TypeScript compiler enforces this and treats the property as non-nullable when this component is used in a template. + +Send the `housingLocation` value from the `Home` component to the `housingLocation` property of the HousingLocation component. -1. Save your changes and confirm the app does not have any errors. + -1. Correct any errors before you continue to the next step. diff --git a/adev-ja/src/content/tutorials/first-app/steps/05-inputs/config.json b/adev-ja/src/content/tutorials/first-app/steps/05-inputs/config.json index 46294c0b7a..e580823fa3 100644 --- a/adev-ja/src/content/tutorials/first-app/steps/05-inputs/config.json +++ b/adev-ja/src/content/tutorials/first-app/steps/05-inputs/config.json @@ -3,5 +3,5 @@ "type": "editor", "answerSrc": "../06-property-binding/src", "answerRootDir": "../06-property-binding/", - "openFiles": ["src/app/housing-location/housing-location.ts"] + "openFiles": ["src/app/housing-location/housing-location.ts", "src/app/home/home.ts","src/app/housinglocations.ts"] } diff --git a/adev-ja/src/content/tutorials/first-app/steps/06-property-binding/README.md b/adev-ja/src/content/tutorials/first-app/steps/06-property-binding/README.md index a03c898c22..1a4cf9f68a 100644 --- a/adev-ja/src/content/tutorials/first-app/steps/06-property-binding/README.md +++ b/adev-ja/src/content/tutorials/first-app/steps/06-property-binding/README.md @@ -26,7 +26,7 @@ In the code editor: 1. Navigate to `src/app/home/home.ts` 1. In the template property of the `@Component` decorator, update the code to match the code below: - + When adding a property binding to a component tag, we use the `[attribute] = "value"` syntax to notify Angular that the assigned value should be treated as a property from the component class and not a string value. diff --git a/adev-ja/src/content/tutorials/first-app/steps/07-dynamic-template-values/README.md b/adev-ja/src/content/tutorials/first-app/steps/07-dynamic-template-values/README.md index 1f479d8a00..e9d294a562 100644 --- a/adev-ja/src/content/tutorials/first-app/steps/07-dynamic-template-values/README.md +++ b/adev-ja/src/content/tutorials/first-app/steps/07-dynamic-template-values/README.md @@ -11,9 +11,9 @@ This tutorial lesson demonstrates how to add interpolation to Angular templates ## Conceptual preview of interpolation -In this step you will display values (properties and `Input` values) in a template using interpolation. +In this step you will display values read from `input` properties in a template using interpolation. -Using the `{{ expression }}` in Angular templates, you can render values from properties, `Inputs` and valid JavaScript expressions. +Using the `{{ expression }}` in Angular templates, you can render values from properties, `inputs`, and valid JavaScript expressions. For a more in depth explanation, please refer to the [Displaying values with interpolation](guide/templates/binding#render-dynamic-text-with-text-interpolation) guide. @@ -27,7 +27,7 @@ In the code editor: 1. Navigate to `src/app/housing-location/housing-location.ts` 1. In the template property of the `@Component` decorator, replace the existing HTML markup with the following code: - + In this updated template code you have used property binding to bind the `housingLocation.photo` to the `src` attribute. The `alt` attribute uses interpolation to give more context to the alt text of the image. diff --git a/adev-ja/src/content/tutorials/first-app/steps/08-ngFor/README.md b/adev-ja/src/content/tutorials/first-app/steps/08-ngFor/README.md index 67d45115c2..9ecc63e52b 100644 --- a/adev-ja/src/content/tutorials/first-app/steps/08-ngFor/README.md +++ b/adev-ja/src/content/tutorials/first-app/steps/08-ngFor/README.md @@ -1,21 +1,23 @@ -# Use *ngFor to list objects in component +# Use @for to list objects in component -This tutorial lesson demonstrates how to use `ngFor` directive in Angular templates in order to display dynamically repeated data in a template. +This tutorial lesson demonstrates how to use `@for` block in Angular templates in order to display dynamically repeated data in a template. +NOTE: This video reflects an older syntax, but the main concepts remain valid. + ## What you'll learn * You will have added a data set to the app -* Your app will display a list of elements from the new data set using `ngFor` +* Your app will display a list of elements from the new data set using `@for` -## Conceptual preview of ngFor +## Conceptual preview of `@for` -In Angular, `ngFor` is a specific type of [directive](guide/directives) used to dynamically repeat data in a template. In plain JavaScript you would use a for loop - ngFor provides similar functionality for Angular templates. +In Angular, `@for` is a specific type of [control flow block](/guide/templates/control-flow) used to dynamically repeat data in a template. In plain JavaScript you would use a for loop - `@for` provides similar functionality for Angular templates. -You can utilize `ngFor` to iterate over arrays and even asynchronous values. In this lesson, you'll add a new array of data to iterate over. +You can utilize `@for` to iterate over arrays and even asynchronous values. In this lesson, you'll add a new array of data to iterate over. -For a more in depth explanation, please refer to the [Built-in directives](guide/directives#ngFor) guide. +For a more in depth explanation, please refer to the [control flow](guide/templates/control-flow#repeat-content-with-the-for-block) guide. @@ -25,21 +27,19 @@ In the `Home` there is only a single housing location. In this step, you will ad 1. In `src/app/home/home.ts`, remove the `housingLocation` property from the `Home` class. 1. Update the `Home` class to have a property called `housingLocationList`. Update your code to match the following code: - + IMPORTANT: Do not remove the `@Component` decorator, you will update that code in an upcoming step. - -Now the app has a dataset that you can use to display the entries in the browser using the `ngFor` directive. + +Now the app has a dataset that you can use to display the entries in the browser using the `@for` block. 1. Update the `` tag in the template code to this: - - - Note, in the code `[housingLocation] = "housingLocation"` the `housingLocation` value now refers to the variable used in the `ngFor` directive. Before this change, it referred to the property on the `Home` class. + - IMPORTANT: Don't forget to import the `NgFor` directive in your `Home` class. + Note, in the code `[housingLocation] = "housingLocation"` the `housingLocation` value now refers to the variable used in the `@for` block. Before this change, it referred to the property on the `Home` class. 1. Save all changes. @@ -53,14 +53,14 @@ Now the app has a dataset that you can use to display the entries in the browser -SUMMARY: In this lesson, you used the `ngFor` directive to repeat data dynamically in Angular templates. You also added a new array of data to be used in the Angular app. The application now dynamically renders a list of housing locations in the browser. +SUMMARY: In this lesson, you used the `@for` block to repeat data dynamically in Angular templates. You also added a new array of data to be used in the Angular app. The application now dynamically renders a list of housing locations in the browser. The app is taking shape, great job. For more information about the topics covered in this lesson, visit: - - - + + + diff --git a/adev-ja/src/content/tutorials/first-app/steps/08-ngFor/config.json b/adev-ja/src/content/tutorials/first-app/steps/08-ngFor/config.json index 3819203bbb..c7172d5bf6 100644 --- a/adev-ja/src/content/tutorials/first-app/steps/08-ngFor/config.json +++ b/adev-ja/src/content/tutorials/first-app/steps/08-ngFor/config.json @@ -1,5 +1,5 @@ { - "title": "Use *ngFor in templates", + "title": "Use the `@for` block in templates", "type": "editor", "answerSrc": "../09-services/src", "answerRootDir": "../09-services/", diff --git a/adev-ja/src/content/tutorials/first-app/steps/09-services/README.md b/adev-ja/src/content/tutorials/first-app/steps/09-services/README.md index b189ecdda8..f4e75eec23 100644 --- a/adev-ja/src/content/tutorials/first-app/steps/09-services/README.md +++ b/adev-ja/src/content/tutorials/first-app/steps/09-services/README.md @@ -81,13 +81,13 @@ In the **Edit** pane of your IDE, in `src/app/home/home.ts`: 1. Add a new file level import for the `HousingService`: - + 1. From `Home`, delete the `housingLocationList` array entries and assign `housingLocationList` the value of empty array (`[]`). In a few steps you will update the code to pull the data from the `HousingService`. 1. In `Home`, add the following code to inject the new service and initialize the data for the app. The `constructor` is the first function that runs when this component is created. The code in the `constructor` will assign the `housingLocationList` the value returned from the call to `getAllHousingLocations`. - + 1. Save the changes to `src/app/home/home.ts` and confirm your app builds without error. Correct any errors before you continue to the next step. diff --git a/adev-ja/src/content/tutorials/first-app/steps/10-routing/README.md b/adev-ja/src/content/tutorials/first-app/steps/10-routing/README.md index fc57ba74fd..a2a2c3f42d 100644 --- a/adev-ja/src/content/tutorials/first-app/steps/10-routing/README.md +++ b/adev-ja/src/content/tutorials/first-app/steps/10-routing/README.md @@ -49,11 +49,11 @@ In this lesson, you will enable routing in your application to navigate to the d 1. Add `RouterModule` to the `@Component` metadata imports - + 1. In the `template` property, replace the `` tag with the `` directive and add a link back to the home page. Your code should match this code: - + diff --git a/adev-ja/src/content/tutorials/first-app/steps/11-details-page/README.md b/adev-ja/src/content/tutorials/first-app/steps/11-details-page/README.md index ba7d28f90d..09b4790c6f 100644 --- a/adev-ja/src/content/tutorials/first-app/steps/11-details-page/README.md +++ b/adev-ja/src/content/tutorials/first-app/steps/11-details-page/README.md @@ -29,7 +29,7 @@ In this case, `:id` is dynamic and will change based on how the route is request 1. In `src/app/housing-location/housing-location.ts`, add an anchor tag to the `section` element and include the `routerLink` directive: - + The `routerLink` directive enables Angular's router to create dynamic links in the application. The value assigned to the `routerLink` is an array with two entries: the static portion of the path and the dynamic data. @@ -45,7 +45,7 @@ In this step, you will get the route parameter in the `Details`. Currently, the 1. In `src/app/details/details.ts` update the template to import the functions, classes and services that you'll need to use in the `Details`: - + 1. Update the `template` property of the `@Component` decorator to display the value `housingLocationId`: @@ -56,13 +56,13 @@ In this step, you will get the route parameter in the `Details`. Currently, the 1. Update the body of the `Details` class with the following code: - export class Details { - route: ActivatedRoute = inject(ActivatedRoute); - housingLocationId = -1; - constructor() { - this.housingLocationId = Number(this.route.snapshot.params['id']); - } - } + export class Details { + route: ActivatedRoute = inject(ActivatedRoute); + housingLocationId = -1; + constructor() { + this.housingLocationId = Number(this.route.snapshot.params['id']); + } + } This code gives the `Details` access to the `ActivatedRoute` router feature that enables you to have access to the data about the current route. In the `constructor`, the code converts the `id` parameter acquired from the route from a string to a number. @@ -79,13 +79,13 @@ To access the data you will add a call to the `HousingService`. 1. Update the template code to match the following code: - + Notice that the `housingLocation` properties are being accessed with the optional chaining operator `?`. This ensures that if the `housingLocation` value is null or undefined the application doesn't crash. 1. Update the body of the `Details` class to match the following code: - + Now the component has the code to display the correct information based on the selected housing location. The `constructor` now includes a call to the `HousingService` to pass the route parameter as an argument to the `getHousingLocationById` service function. @@ -93,7 +93,10 @@ To access the data you will add a call to the `HousingService`. -1. Save your changes. + and save your changes + +1. In `Details` use the just created `details.css` file as the source for the styles: + 1. In the browser refresh the page and confirm that when you click on the "Learn More" link for a given housing location the details page displays the correct information based on the data for that selected item. @@ -101,14 +104,14 @@ To access the data you will add a call to the `HousingService`. - + In a previous lesson you updated the `App` template to include a `routerLink`. Adding that code updated your app to enable navigation back to the `Home` whenever the logo is clicked. 1. Confirm that your code matches the following: - + - Your code may already be up-to-date but confirm to be sure. + Your code should already be up-to-date but confirm to be sure. diff --git a/adev-ja/src/content/tutorials/first-app/steps/12-forms/README.md b/adev-ja/src/content/tutorials/first-app/steps/12-forms/README.md index 6ef7acf53c..cded7ac8f1 100644 --- a/adev-ja/src/content/tutorials/first-app/steps/12-forms/README.md +++ b/adev-ja/src/content/tutorials/first-app/steps/12-forms/README.md @@ -38,7 +38,7 @@ In the **Edit** pane of your IDE, in `src/app/details/details.ts`: 1. After the `import` statements at the top of the file, add the following code to import the Angular form classes. - + 1. In the `Details` decorator metadata, update the `imports` property with the following code: @@ -67,7 +67,7 @@ In the **Edit** pane of your IDE, in `src/app/details/details.ts`: 1. In the `Details` decorator metadata, update the `template` HTML to match the following code to add the form's markup. - + The template now includes an event handler `(submit)="submitApplication()"`. Angular uses parentheses syntax around the event name to define events in the template code. The code on the right hand side of the equals sign is the code that should be executed when this event is triggered. You can bind to browser events and custom events. diff --git a/adev-ja/src/content/tutorials/first-app/steps/13-search/README.md b/adev-ja/src/content/tutorials/first-app/steps/13-search/README.md index 3bd4aeeaa8..d972657435 100644 --- a/adev-ja/src/content/tutorials/first-app/steps/13-search/README.md +++ b/adev-ja/src/content/tutorials/first-app/steps/13-search/README.md @@ -20,13 +20,13 @@ In this step, you'll update the `Home` class to store data in a new array proper 1. In `src/app/home/home.ts`, add new property to the class called `filteredLocationList`. - + The `filteredLocationList` hold the values that match the search criteria entered by the user. 1. The `filteredLocationList` should contain the total set of housing locations values by default when the page loads. Update the `constructor` for the `Home` to set the value. - + @@ -35,25 +35,18 @@ The `Home` already contains an input field that you will use to capture input fr 1. Update the `Home` template to include a template variable in the `input` element called `#filter`. - - - - + This example uses a [template reference variable](guide/templates) to get access to the `input` element as its value. 1. Next, update the component template to attach an event handler to the "Search" button. - - - + By binding to the `click` event on the `button` element, you are able to call the `filterResults` function. The argument to the function is the `value` property of the `filter` template variable. Specifically, the `.value` property from the `input` HTML element. -1. The last template update is to the `ngFor` directive. Update the `ngFor` value to iterate over values from the `filteredLocationList` array. +1. The last template update is to the `@for` directive. Update the `@for` to iterate over values from the `filteredLocationList` array. - - - + diff --git a/adev-ja/src/content/tutorials/first-app/steps/14-http/README.md b/adev-ja/src/content/tutorials/first-app/steps/14-http/README.md index 12202b6d62..c9bd6e9119 100644 --- a/adev-ja/src/content/tutorials/first-app/steps/14-http/README.md +++ b/adev-ja/src/content/tutorials/first-app/steps/14-http/README.md @@ -26,110 +26,110 @@ JSON Server is an open source tool used to create mock REST APIs. You'll use it 1. Open `db.json` and copy the following code into the file + { + "locations": [ { - "locations": [ - { - "id": 0, - "name": "Acme Fresh Start Housing", - "city": "Chicago", - "state": "IL", - "photo": "https://angular.dev/assets/images/tutorials/common/bernard-hermant-CLKGGwIBTaY-unsplash.jpg", - "availableUnits": 4, - "wifi": true, - "laundry": true - }, - { - "id": 1, - "name": "A113 Transitional Housing", - "city": "Santa Monica", - "state": "CA", - "photo": "https://angular.dev/assets/images/tutorials/common/brandon-griggs-wR11KBaB86U-unsplash.jpg", - "availableUnits": 0, - "wifi": false, - "laundry": true - }, - { - "id": 2, - "name": "Warm Beds Housing Support", - "city": "Juneau", - "state": "AK", - "photo": "https://angular.dev/assets/images/tutorials/common/i-do-nothing-but-love-lAyXdl1-Wmc-unsplash.jpg", - "availableUnits": 1, - "wifi": false, - "laundry": false - }, - { - "id": 3, - "name": "Homesteady Housing", - "city": "Chicago", - "state": "IL", - "photo": "https://angular.dev/assets/images/tutorials/common/ian-macdonald-W8z6aiwfi1E-unsplash.jpg", - "availableUnits": 1, - "wifi": true, - "laundry": false - }, - { - "id": 4, - "name": "Happy Homes Group", - "city": "Gary", - "state": "IN", - "photo": "https://angular.dev/assets/images/tutorials/common/krzysztof-hepner-978RAXoXnH4-unsplash.jpg", - "availableUnits": 1, - "wifi": true, - "laundry": false - }, - { - "id": 5, - "name": "Hopeful Apartment Group", - "city": "Oakland", - "state": "CA", - "photo": "https://angular.dev/assets/images/tutorials/common/r-architecture-JvQ0Q5IkeMM-unsplash.jpg", - "availableUnits": 2, - "wifi": true, - "laundry": true - }, - { - "id": 6, - "name": "Seriously Safe Towns", - "city": "Oakland", - "state": "CA", - "photo": "https://angular.dev/assets/images/tutorials/common/phil-hearing-IYfp2Ixe9nM-unsplash.jpg", - "availableUnits": 5, - "wifi": true, - "laundry": true - }, - { - "id": 7, - "name": "Hopeful Housing Solutions", - "city": "Oakland", - "state": "CA", - "photo": "https://angular.dev/assets/images/tutorials/common/r-architecture-GGupkreKwxA-unsplash.jpg", - "availableUnits": 2, - "wifi": true, - "laundry": true - }, - { - "id": 8, - "name": "Seriously Safe Towns", - "city": "Oakland", - "state": "CA", - "photo": "https://angular.dev/assets/images/tutorials/common/saru-robert-9rP3mxf8qWI-unsplash.jpg", - "availableUnits": 10, - "wifi": false, - "laundry": false - }, - { - "id": 9, - "name": "Capital Safe Towns", - "city": "Portland", - "state": "OR", - "photo": "https://angular.dev/assets/images/tutorials/common/webaliser-_TPTXZd9mOo-unsplash.jpg", - "availableUnits": 6, - "wifi": true, - "laundry": true - } - ] + "id": 0, + "name": "Acme Fresh Start Housing", + "city": "Chicago", + "state": "IL", + "photo": "https://angular.dev/assets/images/tutorials/common/bernard-hermant-CLKGGwIBTaY-unsplash.jpg", + "availableUnits": 4, + "wifi": true, + "laundry": true + }, + { + "id": 1, + "name": "A113 Transitional Housing", + "city": "Santa Monica", + "state": "CA", + "photo": "https://angular.dev/assets/images/tutorials/common/brandon-griggs-wR11KBaB86U-unsplash.jpg", + "availableUnits": 0, + "wifi": false, + "laundry": true + }, + { + "id": 2, + "name": "Warm Beds Housing Support", + "city": "Juneau", + "state": "AK", + "photo": "https://angular.dev/assets/images/tutorials/common/i-do-nothing-but-love-lAyXdl1-Wmc-unsplash.jpg", + "availableUnits": 1, + "wifi": false, + "laundry": false + }, + { + "id": 3, + "name": "Homesteady Housing", + "city": "Chicago", + "state": "IL", + "photo": "https://angular.dev/assets/images/tutorials/common/ian-macdonald-W8z6aiwfi1E-unsplash.jpg", + "availableUnits": 1, + "wifi": true, + "laundry": false + }, + { + "id": 4, + "name": "Happy Homes Group", + "city": "Gary", + "state": "IN", + "photo": "https://angular.dev/assets/images/tutorials/common/krzysztof-hepner-978RAXoXnH4-unsplash.jpg", + "availableUnits": 1, + "wifi": true, + "laundry": false + }, + { + "id": 5, + "name": "Hopeful Apartment Group", + "city": "Oakland", + "state": "CA", + "photo": "https://angular.dev/assets/images/tutorials/common/r-architecture-JvQ0Q5IkeMM-unsplash.jpg", + "availableUnits": 2, + "wifi": true, + "laundry": true + }, + { + "id": 6, + "name": "Seriously Safe Towns", + "city": "Oakland", + "state": "CA", + "photo": "https://angular.dev/assets/images/tutorials/common/phil-hearing-IYfp2Ixe9nM-unsplash.jpg", + "availableUnits": 5, + "wifi": true, + "laundry": true + }, + { + "id": 7, + "name": "Hopeful Housing Solutions", + "city": "Oakland", + "state": "CA", + "photo": "https://angular.dev/assets/images/tutorials/common/r-architecture-GGupkreKwxA-unsplash.jpg", + "availableUnits": 2, + "wifi": true, + "laundry": true + }, + { + "id": 8, + "name": "Seriously Safe Towns", + "city": "Oakland", + "state": "CA", + "photo": "https://angular.dev/assets/images/tutorials/common/saru-robert-9rP3mxf8qWI-unsplash.jpg", + "availableUnits": 10, + "wifi": false, + "laundry": false + }, + { + "id": 9, + "name": "Capital Safe Towns", + "city": "Portland", + "state": "OR", + "photo": "https://angular.dev/assets/images/tutorials/common/webaliser-_TPTXZd9mOo-unsplash.jpg", + "availableUnits": 6, + "wifi": true, + "laundry": true } + ] + } 1. Save this file. @@ -150,33 +150,31 @@ The data source has been configured, the next step is to update your web app to 1. In `src/app/housing.service.ts`, make the following changes: - 1. Update the code to remove `housingLocationList` property and the array containing the data. +1. Update the code to remove `housingLocationList` property and the array containing the data, as well as the `baseUrl` property. - 1. Add a string property called `url` and set its value to `'http://localhost:3000/locations'` +1. Add a string property called `url` and set its value to `'http://localhost:3000/locations'` - - url = 'http://localhost:3000/locations'; - + - This code will result in errors in the rest of the file because it depends on the `housingLocationList` property. We're going to update the service methods next. + This code will result in errors in the rest of the file because it depends on the `housingLocationList` property. We're going to update the service methods next. - 1. Update the `getAllHousingLocations` function to make a call to the web server you configured. +1. Update the `getAllHousingLocations` function to make a call to the web server you configured. - + - The code now uses asynchronous code to make a **GET** request over HTTP. + The code now uses asynchronous code to make a **GET** request over HTTP. - HELPFUL: For this example, the code uses `fetch`. For more advanced use cases consider using `HttpClient` provided by Angular. + HELPFUL: For this example, the code uses `fetch`. For more advanced use cases consider using `HttpClient` provided by Angular. - 1. Update the `getHousingLocationsById` function to make a call to the web server you configured. - - HELPFUL: Notice the `fetch` method has been updated to _query_ the data for location with a matching `id` property value. See [URL Search Parameter](https://developer.mozilla.org/en-US/docs/Web/API/URL/search) for more information. +1. Update the `getHousingLocationsById` function to make a call to the web server you configured. - + HELPFUL: Notice the `fetch` method has been updated to _query_ the data for location with a matching `id` property value. See [URL Search Parameter](https://developer.mozilla.org/en-US/docs/Web/API/URL/search) for more information. - 1. Once all the updates are complete, your updated service should match the following code. + - +1. Once all the updates are complete, your updated service should match the following code. + + @@ -185,15 +183,14 @@ The server is now reading data from the HTTP request but the components that rel 1. In `src/app/home/home.ts`, update the `constructor` to use the new asynchronous version of the `getAllHousingLocations` method. - + 1. In `src/app/details/details.ts`, update the `constructor` to use the new asynchronous version of the `getHousingLocationById` method. - - -1. Save your code. + +2. Save your code. -1. Open the application in the browser and confirm that it runs without any errors. +3. Open the application in the browser and confirm that it runs without any errors. diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/11-optimizing-images/README.en.md b/adev-ja/src/content/tutorials/learn-angular/steps/11-optimizing-images/README.en.md index 6c085fe927..f40d54d5e2 100644 --- a/adev-ja/src/content/tutorials/learn-angular/steps/11-optimizing-images/README.en.md +++ b/adev-ja/src/content/tutorials/learn-angular/steps/11-optimizing-images/README.en.md @@ -35,7 +35,8 @@ To enable the `NgOptimizedImage` directive, swap out the `src` attribute for `ng import { NgOptimizedImage } from '@angular/common'; @Component({ -template: ` ... + template: ` + ...
  • Static Image: Angular logo @@ -46,7 +47,7 @@ template: ` ...
    • ... `, -imports: [NgOptimizedImage], + imports: [NgOptimizedImage], })     diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/11-optimizing-images/README.md b/adev-ja/src/content/tutorials/learn-angular/steps/11-optimizing-images/README.md index 097c3a4a38..3fcc93abe9 100644 --- a/adev-ja/src/content/tutorials/learn-angular/steps/11-optimizing-images/README.md +++ b/adev-ja/src/content/tutorials/learn-angular/steps/11-optimizing-images/README.md @@ -47,7 +47,7 @@ import { NgOptimizedImage } from '@angular/common'; ... `, - imports:[NgOptimizedImage], + imports: [NgOptimizedImage], })     diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/12-enable-routing/README.en.md b/adev-ja/src/content/tutorials/learn-angular/steps/12-enable-routing/README.en.md index 3009baa314..fd0fbfef48 100644 --- a/adev-ja/src/content/tutorials/learn-angular/steps/12-enable-routing/README.en.md +++ b/adev-ja/src/content/tutorials/learn-angular/steps/12-enable-routing/README.en.md @@ -39,7 +39,7 @@ import {provideRouter} from '@angular/router'; import {routes} from './app.routes'; export const appConfig: ApplicationConfig = { -providers: [provideRouter(routes)], + providers: [provideRouter(routes)], };     @@ -55,15 +55,16 @@ Update the template for `App` by adding `` import {RouterOutlet} from '@angular/router'; @Component({ -... -template: ` `, - imports:[RouterOutlet], + imports: [RouterOutlet], }) export class App {}     diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/13-define-a-route/README.en.md b/adev-ja/src/content/tutorials/learn-angular/steps/13-define-a-route/README.en.md index 61fc58fb0d..307ede1c9e 100644 --- a/adev-ja/src/content/tutorials/learn-angular/steps/13-define-a-route/README.en.md +++ b/adev-ja/src/content/tutorials/learn-angular/steps/13-define-a-route/README.en.md @@ -21,7 +21,6 @@ To define a route, add a route object to the `routes` array in `app.routes.ts` t ```ts import {Routes} from '@angular/router'; - import {Home} from './home/home'; export const routes: Routes = [ @@ -46,15 +45,14 @@ In `app.routes.ts`, add the `title` property to the default route (`path: ''`) a import {Routes} from '@angular/router'; - import {Home} from './home/home'; export const routes: Routes = [ -{ -path: '', -title: 'App Home Page', -component: Home, -}, + { + path: '', + title: 'App Home Page', + component: Home, + }, ]; diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/13-define-a-route/README.md b/adev-ja/src/content/tutorials/learn-angular/steps/13-define-a-route/README.md index aec9cd10a3..539a55e52a 100644 --- a/adev-ja/src/content/tutorials/learn-angular/steps/13-define-a-route/README.md +++ b/adev-ja/src/content/tutorials/learn-angular/steps/13-define-a-route/README.md @@ -21,7 +21,6 @@ NOTE: [基本的なルートの定義方法についての詳細ガイド](/guid ```ts import {Routes} from '@angular/router'; - import {Home} from './home/home'; export const routes: Routes = [ @@ -46,10 +45,9 @@ export const routes: Routes = [ import {Routes} from '@angular/router'; - import {Home} from './home/home'; -export const routes: Routes =[ +export const routes: Routes = [ { path: '', title: 'App Home Page', diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/15-forms/README.en.md b/adev-ja/src/content/tutorials/learn-angular/steps/15-forms/README.en.md index e58201ad60..29544a418c 100644 --- a/adev-ja/src/content/tutorials/learn-angular/steps/15-forms/README.en.md +++ b/adev-ja/src/content/tutorials/learn-angular/steps/15-forms/README.en.md @@ -36,8 +36,8 @@ import {Component} from '@angular/core'; import {FormsModule} from '@angular/forms'; @Component({ -... -imports: [FormsModule], + ... + imports: [FormsModule], }) export class User {} diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/15-forms/README.md b/adev-ja/src/content/tutorials/learn-angular/steps/15-forms/README.md index efccd79eb3..24bff68c2d 100644 --- a/adev-ja/src/content/tutorials/learn-angular/steps/15-forms/README.md +++ b/adev-ja/src/content/tutorials/learn-angular/steps/15-forms/README.md @@ -37,7 +37,7 @@ import {FormsModule} from '@angular/forms'; @Component({ ... - imports:[FormsModule], + imports: [FormsModule], }) export class User {}     diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/16-form-control-values/README.en.md b/adev-ja/src/content/tutorials/learn-angular/steps/16-form-control-values/README.en.md index c8ac0f1f84..531058c09d 100644 --- a/adev-ja/src/content/tutorials/learn-angular/steps/16-form-control-values/README.en.md +++ b/adev-ja/src/content/tutorials/learn-angular/steps/16-form-control-values/README.en.md @@ -51,9 +51,9 @@ export class User { favoriteFramework = ''; ... -showFramework() { -alert(this.favoriteFramework); -} + showFramework() { + alert(this.favoriteFramework); + } }     diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/19-creating-an-injectable-service/README.en.md b/adev-ja/src/content/tutorials/learn-angular/steps/19-creating-an-injectable-service/README.en.md index d5c0f68590..88aafe5cde 100644 --- a/adev-ja/src/content/tutorials/learn-angular/steps/19-creating-an-injectable-service/README.en.md +++ b/adev-ja/src/content/tutorials/learn-angular/steps/19-creating-an-injectable-service/README.en.md @@ -14,10 +14,10 @@ To make a service eligible to be injected by the DI system use the `@Injectable` @Injectable({ - providedIn: 'root' + providedIn: 'root' }) class UserService { - // methods to retrieve and return data + // methods to retrieve and return data } diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/19-creating-an-injectable-service/README.md b/adev-ja/src/content/tutorials/learn-angular/steps/19-creating-an-injectable-service/README.md index 5c70504783..bc8b4a69a8 100644 --- a/adev-ja/src/content/tutorials/learn-angular/steps/19-creating-an-injectable-service/README.md +++ b/adev-ja/src/content/tutorials/learn-angular/steps/19-creating-an-injectable-service/README.md @@ -16,10 +16,10 @@ NOTE: [エッセンシャルガイドの依存性の注入](/essentials/dependen @Injectable({ - providedIn: 'root' + providedIn: 'root' }) class UserService { - // データを取得して返すためのメソッド + // データを取得して返すためのメソッド } diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/20-inject-based-di/README.en.md b/adev-ja/src/content/tutorials/learn-angular/steps/20-inject-based-di/README.en.md index c0f01583aa..e02e67ec6c 100644 --- a/adev-ja/src/content/tutorials/learn-angular/steps/20-inject-based-di/README.en.md +++ b/adev-ja/src/content/tutorials/learn-angular/steps/20-inject-based-di/README.en.md @@ -13,7 +13,7 @@ It is often helpful to initialize class properties with values provided by the D @Component({...}) class PetCareDashboard { - petRosterService = inject(PetRosterService); + petRosterService = inject(PetRosterService); } diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/20-inject-based-di/README.md b/adev-ja/src/content/tutorials/learn-angular/steps/20-inject-based-di/README.md index 1e2b2245d9..7c7cbb16bd 100644 --- a/adev-ja/src/content/tutorials/learn-angular/steps/20-inject-based-di/README.md +++ b/adev-ja/src/content/tutorials/learn-angular/steps/20-inject-based-di/README.md @@ -13,7 +13,7 @@ DIシステムから提供される値でクラスのプロパティを初期化 @Component({...}) class PetCareDashboard { - petRosterService = inject(PetRosterService); + petRosterService = inject(PetRosterService); } diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/22-pipes/README.en.md b/adev-ja/src/content/tutorials/learn-angular/steps/22-pipes/README.en.md index 7ffde709cb..08d243af67 100644 --- a/adev-ja/src/content/tutorials/learn-angular/steps/22-pipes/README.en.md +++ b/adev-ja/src/content/tutorials/learn-angular/steps/22-pipes/README.en.md @@ -14,12 +14,12 @@ To use a pipe in a template include it in an interpolated expression. Check out import {UpperCasePipe} from '@angular/common'; @Component({ -... -template: `{{ loudMessage | uppercase }}`, -imports: [UpperCasePipe], + ... + template: `{{ loudMessage | uppercase }}`, + imports: [UpperCasePipe], }) class App { -loudMessage = 'we think you are doing great!' + loudMessage = 'we think you are doing great!' }     @@ -41,8 +41,8 @@ Next, update `@Component()` decorator `imports` to include a reference to `Lower @Component({ - ... - imports: [LowerCasePipe] + ... + imports: [LowerCasePipe] }) diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/22-pipes/README.md b/adev-ja/src/content/tutorials/learn-angular/steps/22-pipes/README.md index 208f3b50b3..be981c9219 100644 --- a/adev-ja/src/content/tutorials/learn-angular/steps/22-pipes/README.md +++ b/adev-ja/src/content/tutorials/learn-angular/steps/22-pipes/README.md @@ -14,12 +14,12 @@ NOTE: 詳しくは、[パイプの詳細ガイド](/guide/templates/pipes)をご import {UpperCasePipe} from '@angular/common'; @Component({ - ... - template: `{{ loudMessage | uppercase }}`, - imports:[UpperCasePipe], + ... + template: `{{ loudMessage | uppercase }}`, + imports: [UpperCasePipe], }) class App { - loudMessage = 'we think you are doing great!' + loudMessage = 'we think you are doing great!' }     @@ -41,8 +41,8 @@ import { LowerCasePipe } from '@angular/common'; @Component({ - ... - imports: [LowerCasePipe] + ... + imports: [LowerCasePipe] }) diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/23-pipes-format-data/README.en.md b/adev-ja/src/content/tutorials/learn-angular/steps/23-pipes-format-data/README.en.md index b0df4b440c..07cfe9e69a 100644 --- a/adev-ja/src/content/tutorials/learn-angular/steps/23-pipes-format-data/README.en.md +++ b/adev-ja/src/content/tutorials/learn-angular/steps/23-pipes-format-data/README.en.md @@ -26,8 +26,8 @@ In `app.ts`, update the template to include parameter for the `decimal` pipe. template: ` - ... -
  • Number with "decimal" {{ num | number:"3.2-2" }}
    • + ... +
  • Number with "decimal" {{ num | number:"3.2-2" }}
    • `     @@ -41,8 +41,8 @@ Now, update the template to use the `date` pipe. template: ` - ... -
  • Date with "date" {{ birthday | date: 'medium' }}
    • + ... +
  • Date with "date" {{ birthday | date: 'medium' }}
    • `     @@ -56,8 +56,8 @@ For your last task, update the template to use the `currency` pipe. template: ` - ... -
  • Currency with "currency" {{ cost | currency }}
    • + ... +
  • Currency with "currency" {{ cost | currency }}
    • `     diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/23-pipes-format-data/README.md b/adev-ja/src/content/tutorials/learn-angular/steps/23-pipes-format-data/README.md index 74a3f0b6d2..6312d5ded0 100644 --- a/adev-ja/src/content/tutorials/learn-angular/steps/23-pipes-format-data/README.md +++ b/adev-ja/src/content/tutorials/learn-angular/steps/23-pipes-format-data/README.md @@ -26,8 +26,8 @@ template: `{{ date | date:'medium' }}`; template: ` - ... -
  • Number with "decimal" {{ num | number:"3.2-2" }}
    • + ... +
  • Number with "decimal" {{ num | number:"3.2-2" }}
    • `     @@ -41,8 +41,8 @@ NOTE: このフォーマットは何でしょう？`DecimalPipe` のパラメー template: ` - ... -
  • Date with "date" {{ birthday | date: 'medium' }}
    • + ... +
  • Date with "date" {{ birthday | date: 'medium' }}
    • `     @@ -56,8 +56,8 @@ template: ` template: ` - ... -
  • Currency with "currency" {{ cost | currency }}
    • + ... +
  • Currency with "currency" {{ cost | currency }}
    • `     diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/24-create-a-pipe/README.en.md b/adev-ja/src/content/tutorials/learn-angular/steps/24-create-a-pipe/README.en.md index 405669e790..b6f2fef2fd 100644 --- a/adev-ja/src/content/tutorials/learn-angular/steps/24-create-a-pipe/README.en.md +++ b/adev-ja/src/content/tutorials/learn-angular/steps/24-create-a-pipe/README.en.md @@ -38,7 +38,7 @@ In `reverse.pipe.ts` add the `@Pipe` decorator to the `ReversePipe` class and pr ```ts @Pipe({ - name: 'reverse' + name: 'reverse' }) ``` @@ -50,16 +50,15 @@ Now the `ReversePipe` class is a pipe. Update the `transform` function to add th export class ReversePipe implements PipeTransform { - transform(value: string): string { - let reverse = ''; - - for (let i = value.length - 1; i >= 0; i--) { - reverse += value[i]; - } + transform(value: string): string { + let reverse = ''; - return reverse; + for (let i = value.length - 1; i >= 0; i--) { + reverse += value[i]; } + return reverse; + } } @@ -70,9 +69,9 @@ With the pipe logic implemented, the final step is to use it in the template. In @Component({ - ... - template: `Reverse Machine: {{ word | reverse }}` - imports: [ReversePipe] + ... + template: `Reverse Machine: {{ word | reverse }}` + imports: [ReversePipe] }) diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/24-create-a-pipe/README.md b/adev-ja/src/content/tutorials/learn-angular/steps/24-create-a-pipe/README.md index f1d72aefef..c8ae2cee74 100644 --- a/adev-ja/src/content/tutorials/learn-angular/steps/24-create-a-pipe/README.md +++ b/adev-ja/src/content/tutorials/learn-angular/steps/24-create-a-pipe/README.md @@ -38,7 +38,7 @@ export class StarPipe implements PipeTransform { ```ts @Pipe({ - name: 'reverse' + name: 'reverse' }) ``` @@ -50,16 +50,16 @@ export class StarPipe implements PipeTransform { export class ReversePipe implements PipeTransform { - transform(value: string): string { - let reverse = ''; - - for (let i = value.length - 1; i >= 0; i--) { - reverse += value[i]; - } + transform(value: string): string { + let reverse = ''; - return reverse; + for (let i = value.length - 1; i >= 0; i--) { + reverse += value[i]; } + return reverse; + } + } @@ -70,9 +70,9 @@ export class ReversePipe implements PipeTransform { @Component({ - ... - template: `Reverse Machine: {{ word | reverse }}` - imports: [ReversePipe] + ... + template: `Reverse Machine: {{ word | reverse }}` + imports: [ReversePipe] }) diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/6-property-binding/README.en.md b/adev-ja/src/content/tutorials/learn-angular/steps/6-property-binding/README.en.md index a74f6791b2..fd72fb0a23 100644 --- a/adev-ja/src/content/tutorials/learn-angular/steps/6-property-binding/README.en.md +++ b/adev-ja/src/content/tutorials/learn-angular/steps/6-property-binding/README.en.md @@ -25,7 +25,7 @@ Update the code in `app.ts` by adding a property to the `App` class called `isEd export class App { - isEditable = true; + isEditable = true; } @@ -35,8 +35,8 @@ Next, bind the `contentEditable` attribute of the `div` to the `isEditable` prop @Component({ - ... - template: `
    `, + ... + template: `
    `, })     diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/6-property-binding/README.md b/adev-ja/src/content/tutorials/learn-angular/steps/6-property-binding/README.md index 2dd8e763a2..3342c95c66 100644 --- a/adev-ja/src/content/tutorials/learn-angular/steps/6-property-binding/README.md +++ b/adev-ja/src/content/tutorials/learn-angular/steps/6-property-binding/README.md @@ -25,7 +25,7 @@ NOTE: 詳しくは、[エッセンシャルガイドの動的なプロパティ export class App { - isEditable = true; + isEditable = true; } @@ -35,8 +35,8 @@ export class App { @Component({ - ... - template: `
    `, + ... + template: `
    `, })     diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/7-event-handling/README.en.md b/adev-ja/src/content/tutorials/learn-angular/steps/7-event-handling/README.en.md index 19d59608ef..49cbf52e4a 100644 --- a/adev-ja/src/content/tutorials/learn-angular/steps/7-event-handling/README.en.md +++ b/adev-ja/src/content/tutorials/learn-angular/steps/7-event-handling/README.en.md @@ -12,13 +12,13 @@ In Angular you bind to events with the parentheses syntax `()`. On a given eleme ```angular-ts @Component({ - ... - template: `