From f284422e3f287230ab45434efe93abee23997267 Mon Sep 17 00:00:00 2001 From: Suguru Inatomi Date: Wed, 16 Jul 2025 09:09:02 +0900 Subject: [PATCH 1/7] fix: update origin --- origin | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/origin b/origin index 5766ba6a5..bf1b51cef 160000 --- a/origin +++ b/origin @@ -1 +1 @@ -Subproject commit 5766ba6a5ec583a8bf92abf4dd99f5b214f9b48a +Subproject commit bf1b51cefe0854babad092ad6afade7d732f9452 From 593b06d9edec7fb6d90957bdd1ee22bdaf7e6b62 Mon Sep 17 00:00:00 2001 From: Suguru Inatomi Date: Wed, 16 Jul 2025 09:09:40 +0900 Subject: [PATCH 2/7] fix: migrate untranslated files --- adev-ja/src/content/ai/develop-with-ai.md | 2 +- .../src/content/guide/http/http-resource.md | 8 +- .../first-app/steps/02-Home/README.md | 2 +- .../steps/03-HousingLocation/README.md | 2 +- .../first-app/steps/04-interfaces/README.md | 4 +- .../first-app/steps/05-inputs/README.md | 30 ++- .../steps/06-property-binding/README.md | 2 +- .../07-dynamic-template-values/README.md | 6 +- .../first-app/steps/08-ngFor/README.md | 36 +-- .../first-app/steps/09-services/README.md | 4 +- .../first-app/steps/10-routing/README.md | 4 +- .../first-app/steps/11-details-page/README.md | 33 +-- .../first-app/steps/12-forms/README.md | 4 +- .../first-app/steps/13-search/README.md | 19 +- .../first-app/steps/14-http/README.md | 243 +++++++++--------- 15 files changed, 199 insertions(+), 200 deletions(-) diff --git a/adev-ja/src/content/ai/develop-with-ai.md b/adev-ja/src/content/ai/develop-with-ai.md index 8c75f8e4f..ccb7584b0 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 40d4950b4..131169ff5 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/tutorials/first-app/steps/02-Home/README.md b/adev-ja/src/content/tutorials/first-app/steps/02-Home/README.md index c0556a316..ab4d3119c 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 4d45d8b2d..68c52e553 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 d82c564d6..0c1f6ddac 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 3aaacc94f..e15c0e15f 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/06-property-binding/README.md b/adev-ja/src/content/tutorials/first-app/steps/06-property-binding/README.md index a03c898c2..1a4cf9f68 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 1f479d8a0..e9d294a56 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 67d45115c..9ecc63e52 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/09-services/README.md b/adev-ja/src/content/tutorials/first-app/steps/09-services/README.md index b189ecdda..f4e75eec2 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 fc57ba74f..a2a2c3f42 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 ba7d28f90..09b4790c6 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 6ef7acf53..cded7ac8f 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 3bd4aeeaa..d97265743 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 12202b6d6..c9bd6e911 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. From 525ebb8f94badbcf1ed20af8481e6643f398c554 Mon Sep 17 00:00:00 2001 From: Suguru Inatomi Date: Wed, 16 Jul 2025 09:28:13 +0900 Subject: [PATCH 3/7] fix: migrate translated markdown files and config updates --- .../content/guide/http/making-requests.en.md | 227 +++++++++++++++++- .../guide/templates/expression-syntax.en.md | 54 +++-- .../tutorials/first-app/intro/config.json | 3 +- .../first-app/steps/05-inputs/config.json | 2 +- .../first-app/steps/08-ngFor/config.json | 2 +- .../steps/11-optimizing-images/README.en.md | 5 +- .../steps/12-enable-routing/README.en.md | 9 +- .../steps/13-define-a-route/README.en.md | 12 +- .../learn-angular/steps/15-forms/README.en.md | 4 +- .../steps/16-form-control-values/README.en.md | 6 +- .../README.en.md | 4 +- .../steps/20-inject-based-di/README.en.md | 2 +- .../learn-angular/steps/22-pipes/README.en.md | 12 +- .../steps/23-pipes-format-data/README.en.md | 12 +- .../steps/24-create-a-pipe/README.en.md | 21 +- .../steps/6-property-binding/README.en.md | 6 +- .../steps/7-event-handling/README.en.md | 12 +- .../learn-angular/steps/9-output/README.en.md | 13 +- 18 files changed, 314 insertions(+), 92 deletions(-) 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 5b528691a..96b22ea1f 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/templates/expression-syntax.en.md b/adev-ja/src/content/guide/templates/expression-syntax.en.md index d3b497afb..9cccd6603 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/tutorials/first-app/intro/config.json b/adev-ja/src/content/tutorials/first-app/intro/config.json index 0f79c0f9b..ade7c2055 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/05-inputs/config.json b/adev-ja/src/content/tutorials/first-app/steps/05-inputs/config.json index 46294c0b7..e580823fa 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/08-ngFor/config.json b/adev-ja/src/content/tutorials/first-app/steps/08-ngFor/config.json index 3819203bb..c7172d5bf 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/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 6c085fe92..f40d54d5e 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/12-enable-routing/README.en.md b/adev-ja/src/content/tutorials/learn-angular/steps/12-enable-routing/README.en.md index 3009baa31..fd0fbfef4 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.md b/adev-ja/src/content/tutorials/learn-angular/steps/13-define-a-route/README.md index aec9cd10a..539a55e52 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.md b/adev-ja/src/content/tutorials/learn-angular/steps/15-forms/README.md index efccd79eb..24bff68c2 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/19-creating-an-injectable-service/README.md b/adev-ja/src/content/tutorials/learn-angular/steps/19-creating-an-injectable-service/README.md index 5c7050478..bc8b4a69a 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.md b/adev-ja/src/content/tutorials/learn-angular/steps/20-inject-based-di/README.md index 1e2b2245d..7c7cbb16b 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.md b/adev-ja/src/content/tutorials/learn-angular/steps/22-pipes/README.md index 208f3b50b..be981c921 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.md b/adev-ja/src/content/tutorials/learn-angular/steps/23-pipes-format-data/README.md index 74a3f0b6d..6312d5ded 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.md b/adev-ja/src/content/tutorials/learn-angular/steps/24-create-a-pipe/README.md index f1d72aefe..c8ae2cee7 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.md b/adev-ja/src/content/tutorials/learn-angular/steps/6-property-binding/README.md index 2dd8e763a..3342c95c6 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.md b/adev-ja/src/content/tutorials/learn-angular/steps/7-event-handling/README.md index 58a69d05c..09c96ddf3 100644 --- a/adev-ja/src/content/tutorials/learn-angular/steps/7-event-handling/README.md +++ b/adev-ja/src/content/tutorials/learn-angular/steps/7-event-handling/README.md @@ -12,13 +12,13 @@ Angularでは、`()`ずいう構文を䜿っおむベントにバむンドした ```angular-ts @Component({ - ... - template: `