From ee61a6ce7aa1d0f4f175de99c29ea8081fcb0261 Mon Sep 17 00:00:00 2001 From: Suguru Inatomi Date: Wed, 16 Aug 2023 12:19:03 +0900 Subject: [PATCH 1/8] update origin --- origin | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/origin b/origin index f48c0bc4e3..8f944e0752 160000 --- a/origin +++ b/origin @@ -1 +1 @@ -Subproject commit f48c0bc4e3dd51096f6af72ec9a979ff589f3608 +Subproject commit 8f944e075293477e511ef51c83a271c4bb75580e From c4190b1d1770cfae0bf7017d1342037c9d8e05e2 Mon Sep 17 00:00:00 2001 From: Suguru Inatomi Date: Wed, 16 Aug 2023 12:20:59 +0900 Subject: [PATCH 2/8] migrate untranslated files --- aio-ja/content/errors/NG05104.md | 33 ++++++++++ .../guide/dependency-injection-context.md | 63 +++++++++++++++++++ aio-ja/content/guide/deprecations.md | 7 +++ .../content/guide/developer-guide-overview.md | 2 +- aio-ja/content/guide/doc-editing.md | 2 +- aio-ja/content/guide/doc-select-issue.md | 2 +- aio-ja/content/guide/docs-style-guide.md | 2 +- aio-ja/content/guide/esbuild.md | 8 ++- aio-ja/content/guide/example-apps-list.md | 2 +- .../guide/http-server-communication.md | 2 +- aio-ja/content/guide/http-test-requests.md | 2 +- aio-ja/content/guide/hydration.md | 16 ++++- .../content/guide/localized-documentation.md | 1 - aio-ja/content/guide/pipes.md | 2 +- aio-ja/content/guide/router.md | 4 +- aio-ja/content/guide/rxjs-interop.md | 2 +- aio-ja/content/marketing/README.md | 1 - aio-ja/content/marketing/contributors.json | 26 ++++---- aio-ja/content/marketing/presskit.html | 2 +- aio-ja/content/marketing/resources.json | 6 +- .../tutorial/first-app/first-app-lesson-08.md | 43 +++++-------- .../tutorial/first-app/first-app-lesson-09.md | 49 ++++++--------- .../tutorial/first-app/first-app-lesson-10.md | 33 ++++------ .../tutorial/first-app/first-app-lesson-11.md | 52 ++++++--------- .../tutorial/first-app/first-app-lesson-12.md | 47 ++++++-------- .../tutorial/first-app/first-app-lesson-13.md | 43 +++++-------- .../tutorial/first-app/first-app-lesson-14.md | 49 +++++++-------- aio-ja/content/tutorial/tutorial-template.md | 2 +- 28 files changed, 274 insertions(+), 229 deletions(-) create mode 100644 aio-ja/content/errors/NG05104.md create mode 100644 aio-ja/content/guide/dependency-injection-context.md diff --git a/aio-ja/content/errors/NG05104.md b/aio-ja/content/errors/NG05104.md new file mode 100644 index 0000000000..f41075c998 --- /dev/null +++ b/aio-ja/content/errors/NG05104.md @@ -0,0 +1,33 @@ +@name Root element was not found. +@category runtime +@shortDescription Root element was not found during bootstrap. + +@description +Boostraped components are defined in the `bootstrap` property of an `@NgModule` decorator or as the first parameter of `boopstrapApplication` for standalone components. + +This error happens when Angular tries to boostrap one of these components but cannot find its corresponing node in the DOM. + +@debugging + +This issue occurs when the selector mismatches the tag + +```typescript +@Component({ + selector: 'my-app', + ... +}) +class AppComponent {} +``` + +```html + + + +``` +Replace the tag with the correct one: + +```html + + + +``` \ No newline at end of file diff --git a/aio-ja/content/guide/dependency-injection-context.md b/aio-ja/content/guide/dependency-injection-context.md new file mode 100644 index 0000000000..1c4227a53b --- /dev/null +++ b/aio-ja/content/guide/dependency-injection-context.md @@ -0,0 +1,63 @@ +# Injection context + +The dependency injection (DI) system relies internaly on a runtime context where the current injector is available. +This means that injectors can only work when code is executed in this context. + +The injection context is available in these situations: + +* Construction (via the `constructor`) of a class being instantiated by the DI system, such as an `@Injectable` or `@Component`. +* In the initializer for fields of such classes. +* In the factory function specified for `useFactory` of a `Provider` or an `@Injectable`. +* In the `factory` function specified for an `InjectionToken`. +* Within a stack frame that is run in a injection context. + +Knowing when your are in an injection context, will allow you to use the [`inject`](api/core/inject) function to inject instances. + +## Class constructors + +Everytime the DI system instantiates a class, this is done in an injection context. This is being handled by the framework itself. The constructor of the class is executed in that runtime context thus allowing to inject a token using the [`inject`](api/core/inject) function. + + +class MyComponent { + private service1: Service1; + private service2: Service2 = inject(Service2); // In context + + constructor() { + this.service1 = inject(HeroService) // In context + } +} + + +## Stack frame in context + +Some APIs are designed to be run in an injection context. This is the case, for example, of the router guards. It allows the use of [`inject`](api/core/inject) to access a service within the guard function. + +Here is an example for `CanActivateFn` + +const canActivateTeam: CanActivateFn = + (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => { + return inject(PermissionsService).canActivate(inject(UserToken), route.params.id); + }; + + +## Run within an injection context + +When you want to run a given function in an injection context without being in one, you can do it with `runInInjectionContext`. +This requires to have access to a given injector like the `EnvironmentInjector` for example. + + + + +Note that `inject` will return an instance only if the injector can resolve the required token. + +## Asserts the context + +Angular provides `assertInInjectionContext` helper function to assert that the current context is an injection context. + +## Using DI outside of a context + +Calling [`inject`](api/core/inject) or calling `assertInInjectionContext` outside of an injection context will throw [error NG0203](/errors/NG0203). + + + +@reviewed 2023-04-11 \ No newline at end of file diff --git a/aio-ja/content/guide/deprecations.md b/aio-ja/content/guide/deprecations.md index b1429b2728..35197c9b1e 100644 --- a/aio-ja/content/guide/deprecations.md +++ b/aio-ja/content/guide/deprecations.md @@ -124,6 +124,13 @@ v16 - v19 | `@angular/platform-browser` | [`BrowserModule.withServerTransition`](api/platform-browser/BrowserModule#withservertransition) | v16 | v18 | | `@angular/platform-browser` | [`makeStateKey`, `StateKey` and `TransferState`](#platform-browser), symbols were moved to `@angular/core` | v16 | v18 | + +### Deprecated features that can be removed in v19 or later + +| Area | API or Feature | Deprecated in | May be removed in | +|:--- |:--- |:--- |:--- | +| `@angular/core` | `PACKAGE_ROOT_URL` | v17 | v19 | + ### Deprecated features with no planned removal version | Area | API or Feature | Deprecated in | May be removed in | diff --git a/aio-ja/content/guide/developer-guide-overview.md b/aio-ja/content/guide/developer-guide-overview.md index 84f859f3d4..e1c08a656d 100644 --- a/aio-ja/content/guide/developer-guide-overview.md +++ b/aio-ja/content/guide/developer-guide-overview.md @@ -27,7 +27,7 @@ To get the most out of these developer guides, you should review the following t

Learn about the two approaches to forms in Angular: template-driven and reactive.

Forms

- +
HTTP

Learn how to connect to a server using the HTTP client service in Angular.

HTTP client

diff --git a/aio-ja/content/guide/doc-editing.md b/aio-ja/content/guide/doc-editing.md index 043e477742..4feb9a1ac9 100644 --- a/aio-ja/content/guide/doc-editing.md +++ b/aio-ja/content/guide/doc-editing.md @@ -257,7 +257,7 @@ Perform these steps from a command-line tool on your local computer or in the **
**IMPORTANT**:
- Files that are not tracked by `git` are not committed or pushed to your repo on `github.com` and they do not appear in your pull request. + Files that are not tracked by `git` are not committed or pushed to your repo on `github.com`, and they do not appear in your pull request.
diff --git a/aio-ja/content/guide/doc-select-issue.md b/aio-ja/content/guide/doc-select-issue.md index 7b17322b04..c14f761910 100644 --- a/aio-ja/content/guide/doc-select-issue.md +++ b/aio-ja/content/guide/doc-select-issue.md @@ -3,7 +3,7 @@ This topic describes how to select an Angular documentation issue to fix. Angular documentation issues are stored in the **Issues** tab of the [angular/angular](https://github.com/angular/angular) repo. -Documentation issues can be identified by the `area: docs` label and they are labeled by priority. +Documentation issues can be identified by the `area: docs` label, and they are labeled by priority. You are welcome to work on [any issue](#links-to-documentation-issues) that someone else isn't already working on. If you know of a problem in the documentation that hasn't been reported, you can also [create a new documentation issue](https://github.com/angular/angular/issues/new?assignees=&labels=&template=3-docs-bug.yaml). diff --git a/aio-ja/content/guide/docs-style-guide.md b/aio-ja/content/guide/docs-style-guide.md index f6e783ece9..cf7b96d98a 100644 --- a/aio-ja/content/guide/docs-style-guide.md +++ b/aio-ja/content/guide/docs-style-guide.md @@ -21,7 +21,7 @@ The categories of Angular documentation include: | Angular documentation categories | Details | |:--- |:--- | -| [Guides](docs) | Much of what's in the [documentation section of angular.io](docs). Guides walk the reader step-by-step through tasks to demonstrate concepts and are often accompanied by a working example. These include [Getting Started](start), [Tour of Heroes](tutorial/tour-of-heroes), and pages about [Forms](guide/forms-overview), [Dependency Injection](guide/dependency-injection), and [HttpClient](guide/http). Contributing members of the community and Angular team members maintain this documentation in [Markdown](https://daringfireball.net/projects/markdown/syntax "Markdown"). | +| [Guides](docs) | Much of what's in the [documentation section of angular.io](docs). Guides walk the reader step-by-step through tasks to demonstrate concepts and are often accompanied by a working example. These include [Getting Started](start), [Tour of Heroes](tutorial/tour-of-heroes), and pages about [Forms](guide/forms-overview), [Dependency Injection](guide/dependency-injection), and [HttpClient](guide/understanding-communicating-with-http). Contributing members of the community and Angular team members maintain this documentation in [Markdown](https://daringfireball.net/projects/markdown/syntax "Markdown"). | | [API documentation](api) | Reference documents for the [Angular Application Programming Interface, or API](api). These are more succinct than guides and serve as a reference for Angular features. They are especially helpful for people already acquainted with Angular concepts. The [angular.io](https://angular.io) infrastructure generates these documents from source code and comments that contributors edit. | | [CLI documentation](cli) | The [angular.io](https://angular.io) infrastructure generates these documents from CLI source code. | diff --git a/aio-ja/content/guide/esbuild.md b/aio-ja/content/guide/esbuild.md index 6ad416c2aa..9eb1e87897 100644 --- a/aio-ja/content/guide/esbuild.md +++ b/aio-ja/content/guide/esbuild.md @@ -164,9 +164,13 @@ Avoiding the use of modules with non-local side effects (outside of polyfills) i -### Hashed filenames for non-injected global styles/scripts +### Long build times when using Sass combined with pnpm or yarn PnP -If your application currently uses the [`inject`](guide/workspace-config#styles-and-scripts-configuration) sub-option for any global styles and scripts via the `styles` or `scripts` build options, the output file names for those styles/scripts will incorrectly contain a hash. Depending on the usage of the output files, this may cause runtime failures for your application. See the related [issue](https://github.com/angular/angular-cli/issues/25098) for more information. +Applications may have increased build times due to the need to workaround Sass resolution incompabilities when using either the pnpm or Yarn PnP package managers. +Sass files with `@import` or `@use` directives referencing a package when using either of these package managers can trigger the performance problem. + +An alternative workaround that alleviates the build time increases is in development and will be available before the build system moves to stable status. +Both the Yarn package manager in node modules mode and the `npm` package manager are not affected by this problem. ## Bug reports diff --git a/aio-ja/content/guide/example-apps-list.md b/aio-ja/content/guide/example-apps-list.md index 236d485391..9c5cb9347e 100644 --- a/aio-ja/content/guide/example-apps-list.md +++ b/aio-ja/content/guide/example-apps-list.md @@ -408,7 +408,7 @@ For more information, see [Angular documentation style guide](guide/docs-style-g Demonstrates server interaction using HTTP. -For more information, see [Communicating with backend services using HTTP](guide/http). +For more information, see [Communicating with backend services using HTTP](guide/understanding-communicating-with-http). ## Workflow diff --git a/aio-ja/content/guide/http-server-communication.md b/aio-ja/content/guide/http-server-communication.md index eb7c11ff28..4244ae705a 100644 --- a/aio-ja/content/guide/http-server-communication.md +++ b/aio-ja/content/guide/http-server-communication.md @@ -62,7 +62,7 @@ Important options include the *observe* and *responseType* properties. Use the `options` object to configure various other aspects of an outgoing request. In adding headers, for example, the service set the default headers using the `headers` option property. -Use the `params` property to configure a request with [TTP URL parameters, and the `reportProgress` option to listen for progress events when transferring large amounts of data. +Use the `params` property to configure a request with HTTP URL parameters, and the `reportProgress` option to listen for progress events when transferring large amounts of data. diff --git a/aio-ja/content/guide/http-test-requests.md b/aio-ja/content/guide/http-test-requests.md index 60ecdd8e8b..8d5feefbbf 100644 --- a/aio-ja/content/guide/http-test-requests.md +++ b/aio-ja/content/guide/http-test-requests.md @@ -12,7 +12,7 @@ At the end, tests can verify that the app made no unexpected requests.
-You can run these sample tests in a live coding environment. +You can run these sample tests in a live coding environment. The tests described in this guide are in `src/testing/http-client.spec.ts`. There are also tests of an application data service that call `HttpClient` in `src/app/heroes/heroes.service.spec.ts`. diff --git a/aio-ja/content/guide/hydration.md b/aio-ja/content/guide/hydration.md index 8866e6957a..023d8cf388 100644 --- a/aio-ja/content/guide/hydration.md +++ b/aio-ja/content/guide/hydration.md @@ -65,7 +65,13 @@ After you've followed these steps and have started up your server, load your app
-While running an application in dev mode, you can confirm hydration is enabled by opening the Developer Tools in your browser and viewing the console. You should see a message that includes hydration-related stats, such as the number of components and nodes hydrated. Note: Angular calculates the stats based on all components rendered on a page, including those that come from third-party libraries. +While running an application in dev mode, you can confirm hydration is enabled by opening the Developer Tools in your browser and viewing the console. You should see a message that includes hydration-related stats, such as the number of components and nodes hydrated. + +
+ +Angular calculates the stats based on all components rendered on a page, including those that come from third-party libraries. + +
 @@ -91,6 +97,8 @@ This is because Angular is unaware of these DOM changes and cannot resolve them It is best to refactor your component to avoid this sort of DOM manipulation. Try to use Angular APIs to do this work, if you can. If you cannot refactor this behavior, use the `ngSkipHydration` attribute ([described below](#ngskiphydration)) until you can refactor into a hydration friendly solution. + + ### Valid HTML structure There are a few cases where if you have a component template that does not have valid HTML structure, this could result in a DOM mismatch error during hydration. @@ -128,7 +136,7 @@ Providing a custom or a "noop" Zone.js implementation may lead to a different ti ## Errors -There are several hydration related errors you may encounter ranging from node mismatches to cases when the `ngSkipHydration` was used on an invalid host node. The most common error case that may occur is due to direct DOM manipulation using native APIs that results in hydration being unable to find or match the expected DOM tree structure on the client that was rendered by the server. The other case you may encounter this type of error was mentioned in the prior section on Valid HTML structures. So, make sure the HTML in your templates are using valid structure, and you'll avoid that error case. +There are several hydration related errors you may encounter ranging from node mismatches to cases when the `ngSkipHydration` was used on an invalid host node. The most common error case that may occur is due to direct DOM manipulation using native APIs that results in hydration being unable to find or match the expected DOM tree structure on the client that was rendered by the server. The other case you may encounter this type of error was mentioned in the [Valid HTML structure](#valid-html) section earlier. So, make sure the HTML in your templates are using valid structure, and you'll avoid that error case. For a full reference on hydration related errors, visit the [Errors Reference Guide](/errors). @@ -136,7 +144,7 @@ For a full reference on hydration related errors, visit the [Errors Reference Gu ## How to skip hydration for particular components -Some components may not work properly with hydration enabled due to some of the aforementioned issues, like direct DOM manipulation. As a workaround, you can add the `ngSkipHydration` attribute to a component's tag in order to skip hydrating the entire component. +Some components may not work properly with hydration enabled due to some of the aforementioned issues, like [Direct DOM Manipulation](#dom-manipulation). As a workaround, you can add the `ngSkipHydration` attribute to a component's tag in order to skip hydrating the entire component. ```html @@ -175,3 +183,5 @@ re-rendering those components from scratch. ## Third Party Libraries with DOM Manipulation There are a number of third party libraries that depend on DOM manipulation to be able to render. D3 charts is a prime example. These libraries worked without hydration, but they may cause DOM mismatch errors when hydration is enabled. For now, if you encounter DOM mismatch errors using one of these libraries, you can add the `ngSkipHydration` attribute to the component that renders using that library. + +@reviewed 2023-06-21 diff --git a/aio-ja/content/guide/localized-documentation.md b/aio-ja/content/guide/localized-documentation.md index 47ea211749..7e5bb01bf8 100644 --- a/aio-ja/content/guide/localized-documentation.md +++ b/aio-ja/content/guide/localized-documentation.md @@ -2,7 +2,6 @@ This topic lists localized versions of the Angular documentation. -* [Español](http://docs.angular.lat) * [简体中文版](https://angular.cn) * [正體中文版](https://angular.tw) * [日本語版](https://angular.jp) diff --git a/aio-ja/content/guide/pipes.md b/aio-ja/content/guide/pipes.md index 3ee48eaf83..6fe4d32d4a 100644 --- a/aio-ja/content/guide/pipes.md +++ b/aio-ja/content/guide/pipes.md @@ -335,7 +335,7 @@ The following code example binds an observable of message strings ## Caching HTTP requests -To [communicate with backend services using HTTP](guide/http "Communicating with backend services using HTTP"), the `HttpClient` service uses observables and offers the `HttpClient.get()` method to fetch data from a server. +To [communicate with backend services using HTTP](guide/understanding-communicating-with-http "Communicating with backend services using HTTP"), the `HttpClient` service uses observables and offers the `HttpClient.get()` method to fetch data from a server. The asynchronous method sends an HTTP request, and returns an observable that emits the requested data for the response. As shown in the previous section, use the impure `AsyncPipe` to accept an observable as input and subscribe to the input automatically. diff --git a/aio-ja/content/guide/router.md b/aio-ja/content/guide/router.md index 92d97bf952..1ef1032ca3 100644 --- a/aio-ja/content/guide/router.md +++ b/aio-ja/content/guide/router.md @@ -135,7 +135,9 @@ To get information from a route: **NOTE:**
You can bind all route data with key, value pairs to component inputs: static or resolved route data, path parameters, matrix parameters, and query parameters. - +
+ If you want to use the parent components route info you will need to set the router {@link paramsInheritanceStrategy} option: + `withRouterConfig({paramsInheritanceStrategy: 'always'})` diff --git a/aio-ja/content/guide/rxjs-interop.md b/aio-ja/content/guide/rxjs-interop.md index 0f34d8a4f6..8c54d1441b 100644 --- a/aio-ja/content/guide/rxjs-interop.md +++ b/aio-ja/content/guide/rxjs-interop.md @@ -83,7 +83,7 @@ As the `query` signal changes, the `query$` Observable emits the latest query an ### Injection context -`toObservable` by default needs to run in an injection context, such as during construction of a component or service. If an injection context is not available, an `Injector` can instead be explicitly specified. +`toObservable` by default needs to run in an [injection context](/guide/dependency-injection-context), such as during construction of a component or service. If an injection context is not available, an `Injector` can instead be explicitly specified. ### Timing of `toObservable` diff --git a/aio-ja/content/marketing/README.md b/aio-ja/content/marketing/README.md index 9e3b32d4f0..4b2e409771 100644 --- a/aio-ja/content/marketing/README.md +++ b/aio-ja/content/marketing/README.md @@ -9,7 +9,6 @@ The `contributors.json` should be maintained to keep our "org chart" in a single There are two pages: * https://developers.google.com/experts/all/technology/angular -(Googlers: source at http://google3/googledata/devsite/content/en/experts/all/technology/angular.html) which is maintained by Dawid Ostrowski based on a spreadsheet https://docs.google.com/spreadsheets/d/1_Ls2Kle7NxPBIG8f3OEVZ4gJZ8OCTtBxGYwMPb1TUVE/edit#gid=0. * [Ours](/about?group=GDE) which is derived from `contributors.json`. diff --git a/aio-ja/content/marketing/contributors.json b/aio-ja/content/marketing/contributors.json index 18c3f996dc..ec1a563ed1 100644 --- a/aio-ja/content/marketing/contributors.json +++ b/aio-ja/content/marketing/contributors.json @@ -307,9 +307,9 @@ "devversion": { "name": "Paul Gschwendtner", "picture": "devversion.jpg", - "twitter": "DevVersion", - "website": "https://github.com/DevVersion", - "bio": "Paul is a 17-year-old developer living in Germany. While he attends school, Paul works as a core team member on Angular Material. Paul focuses on tooling and building components for Angular.", + "twitter": "devversion", + "website": "https://github.com/devversion", + "bio": "Paul is a Software Engineer at Google. He is part of the Angular team since 2016.", "groups": ["Angular"], "lead": "jelbourn" }, @@ -421,7 +421,7 @@ }, "jeanmeche": { "name": "Matthieu Riegler", - "picture":"jeanmeche.jpg", + "picture": "jeanmeche.jpg", "twitter": "jean__meche", "bio": "Software engineer from the french Alps. Matthieu was born and raised with the web and now he love's building it! He currently works for Viseo.", "groups": ["Collaborators"] @@ -652,9 +652,7 @@ "twitter": "mwycliffe_dev", "website": "https://mainawycliffe.dev/", "bio": "Wycliffe is a Software Engineer from Kenya passionate about Teaching, Speaking, Writing, Open Source, and Mentorship. On top of that, he is passionate about Typescript and loves teaching developers how to get the most out of it.", - "groups": [ - "GDE" - ] + "groups": ["GDE"] }, "manekinekko": { "name": "Wassim Chegham", @@ -886,12 +884,12 @@ "groups": ["GDE"] }, "selintunc": { - "name": "Selin Tunc", - "picture": "selin.jpeg", - "twitter": "selintunc_", - "website": "https://www.linkedin.com/in/selinkaragulletunc", - "bio": "Selin is a Software Developer Expert using Angular and Java at Garanti BBVA Technology in Turkey. She is the first woman Angular GDE in Turkey. She spends her spare time with her family, especially her little son, and by keeping herself up-to-date.", - "groups": ["GDE"] + "name": "Selin Tunc", + "picture": "selin.jpeg", + "twitter": "selintunc_", + "website": "https://www.linkedin.com/in/selinkaragulletunc", + "bio": "Selin is a Software Developer Expert using Angular and Java at Garanti BBVA Technology in Turkey. She is the first woman Angular GDE in Turkey. She spends her spare time with her family, especially her little son, and by keeping herself up-to-date.", + "groups": ["GDE"] }, "shairez": { "name": "Shai Reznik", @@ -916,7 +914,7 @@ "bio": "Siddharth is a Full Stack JavaScript Developer and a GDE in Angular. He's passionate about sharing his knowledge on Angular, Firebase and the Web in general. He's the organizer of WebStack, a local community of developers focused on Web, Mobile, Voice and Server related technologies in general. WebStack hosts free monthly meetups every 2nd or 3rd Saturday of the month. Siddharth is also an avid photographer and loves traveling. Find him anywhere on the Web with `SiddAjmera`.", "groups": ["GDE"] }, - "simonaco": { + "simonaco": { "name": "Simona Cotin", "picture": "simonacotin.jpg", "twitter": "simona_cotin", diff --git a/aio-ja/content/marketing/presskit.html b/aio-ja/content/marketing/presskit.html index a7676c72f2..063d646e36 100644 --- a/aio-ja/content/marketing/presskit.html +++ b/aio-ja/content/marketing/presskit.html @@ -526,7 +526,7 @@

3rd Party Projects

  • angular2-
    • - OK to use + OK to use
    • ng-
    • angular-
      • diff --git a/aio-ja/content/marketing/resources.json b/aio-ja/content/marketing/resources.json index b0581be55f..c75e152441 100644 --- a/aio-ja/content/marketing/resources.json +++ b/aio-ja/content/marketing/resources.json @@ -672,9 +672,9 @@ "logo": "" }, "angular-projects": { - "title": "Angular Projects - Second Edition", - "desc": "Build modern web apps by exploring Angular with 10 different projects and cutting-edge technologies", - "url": "https://www.amazon.com/dp/1800205260" + "title": "Angular Projects - Third Edition", + "desc": "Build modern web apps in Angular 16 with 10 different projects and cutting-edge technologies", + "url": "https://amazon.com/dp/1803239115" }, "rangle-angular-training-book": { "title": "Rangle’s Angular Training Book", diff --git a/aio-ja/content/tutorial/first-app/first-app-lesson-08.md b/aio-ja/content/tutorial/first-app/first-app-lesson-08.md index 8b1fdf8b31..0c516ae360 100644 --- a/aio-ja/content/tutorial/first-app/first-app-lesson-08.md +++ b/aio-ja/content/tutorial/first-app/first-app-lesson-08.md @@ -1,53 +1,42 @@ -# Lesson 8 - Use *ngFor to list objects in component -This tutorial lesson demonstrates how to use `ngFor` directive in Angular templates in order to display dynamically repeat data data in a template. +# Lesson 8: Use *ngFor 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. -**Time required:** expect to spend about 10 minutes to complete this lesson. +**Estimated time**: ~10 minutes -## Before you start +**Starting code:** -This lesson starts with the code from the previous lesson, so you can: +**Completed code:** -* Use the code that you created in Lesson 7 in your integrated development environment (IDE). -* Start with the code example from the previous lesson. Choose the from Lesson 7 where you can: - * Use the *live example* in StackBlitz, where the StackBlitz interface is your IDE. - * Use the *download example* and open it in your IDE. - -If you haven't reviewed the introduction, visit the [Introduction to Angular tutorial](tutorial/first-app) to make sure you have everything you need to complete this lesson. - -If you have any trouble during this lesson, you can review the completed code for this lesson, in the for this lesson. - -## After you finish +## 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` ## Conceptual preview of ngFor -In Angular, `ngFor` is a specific type of [directive](guide/built-in-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. We use [Angular template syntax](guide/template-syntax) to specify the details for the directive. +In Angular, `ngFor` is a specific type of [directive](guide/built-in-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. 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. For a more in depth explanation, please refer to the [Built-in directives](guide/built-in-directives#ngFor) guide. -## Lesson steps - -Perform these steps on the app code in your IDE. - -### Step 1 - Add housing data to the `HomeComponent` +## Step 1 - Add housing data to the `HomeComponent` In the `HomeComponent` there is only a single housing location. In this step, you will add an array of `HousingLocation` entries. 1. In `src/app/home/home.component.ts`, remove the `housingLocation` property from the `HomeComponent` class. -1. update the `HomeComponent` class to have a property called `housingLocationList`. Update your code to match the following code: +1. Update the `HomeComponent` class to have a property called `housingLocationList`. Update your code to match the following code: - Note: Do not remove the `@Component` decorator, you will update that code in an upcoming step. +
      + Do not remove the `@Component` decorator, you will update that code in an upcoming step. +
      -### Step 2 - Update the `HomeComponent` template to use `ngFor` +## Step 2 - Update the `HomeComponent` template to use `ngFor` Now the app has a dataset that you can use to display the entries in the browser using the `ngFor` directive. 1. Update the `` tag in the template code to this: - Note, the code `[housingLocation] = "housingLocation"` the `housingLocation` value now refers to the variable used in the `ngFor` directive. Before this change, it refered to the property on the `HomeComponent` class. + Note, in the code `[housingLocation] = "housingLocation"` the `housingLocation` value now refers to the variable used in the `ngFor` directive. Before this change, it refered to the property on the `HomeComponent` class. 1. Save all changes. @@ -71,4 +60,6 @@ If you are having any trouble with this lesson, you can review the completed cod ## For more information about the topics covered in this lesson, visit: * [Structural Directives](/guide/structural-directives) * [ngFor guide](/guide/built-in-directives#ngFor) -* [ngFor](/api/common/NgFor) \ No newline at end of file +* [ngFor](/api/common/NgFor) + +@reviewed 2023-07-11 \ No newline at end of file diff --git a/aio-ja/content/tutorial/first-app/first-app-lesson-09.md b/aio-ja/content/tutorial/first-app/first-app-lesson-09.md index 92f9533923..ecd98e436e 100644 --- a/aio-ja/content/tutorial/first-app/first-app-lesson-09.md +++ b/aio-ja/content/tutorial/first-app/first-app-lesson-09.md @@ -1,26 +1,17 @@ -# First Angular app lesson 09 - Angular services +# Lesson 09: Angular services This tutorial lesson demonstrates how to create an Angular service and use dependency injection to include it in your app. -**Time required:** expect to spend about 15 minutes to complete this lesson. +**Estimated time**: ~15 minutes -## Before you start +**Starting code:** -This lesson starts with the code from the previous lesson, so you can: +**Completed code:** -* Use the code that you created in Lesson 8 in your integrated development environment (IDE). -* Start with the code example from the previous lesson. Choose the from Lesson 8 where you can: - * Use the *live example* in StackBlitz, where the StackBlitz interface is your IDE. - * Use the *download example* and open it in your IDE. +## What you'll learn -If you haven't reviewed the introduction, visit the [Introduction to Angular tutorial](tutorial/first-app) to make sure you have everything you need to complete this lesson. - -If you have any trouble during this lesson, you can review the completed code for this lesson, in the for this lesson. - -## After you finish - -* Your app has a service to serve the data to your app. - At the end of this lesson, the service reads data from local, static data. - In a later lesson, you update the service to get data from a web service. +Your app has a service to serve the data to your app. +At the end of this lesson, the service reads data from local, static data. +In a later lesson, you'll update the service to get data from a web service. ## Conceptual preview of services @@ -39,11 +30,7 @@ The component depends on those services and can't function without them. *Dependency injection* is the mechanism that manages the dependencies of an app's components and the services that other components can use. -## Lesson steps - -Perform these steps on the app code in your IDE. - -### Step 1 - Create a new service for your app +## Step 1 - Create a new service for your app This step creates an injectable service for your app. @@ -62,10 +49,10 @@ In the **Terminal** pane of your IDE: 1. Confirm that the app builds without error. Correct any errors before you continue to the next step. -### Step 2 - Add static data to the new service +## Step 2 - Add static data to the new service This step adds some sample data to your new service. -In a later lesson, you replace the static data with a web interface to get data as you might in a real app. +In a later lesson, you'll replace the static data with a web interface to get data as you might in a real app. For now, your app's new service uses the data that has, so far, been created locally in `HomeComponent`. In the **Edit** pane of your IDE: @@ -87,14 +74,14 @@ In the **Edit** pane of your IDE: 1. Confirm that the app builds without error. Correct any errors before you continue to the next step. -### Step 3 - Inject the new service into `HomeComponent` +## Step 3 - Inject the new service into `HomeComponent` This step injects the new service into your app's `HomeComponent` so that it can read the app's data from a service. -In a later lesson, you replace the static data with a live data source to get data as you might in a real app. +In a later lesson, you'll replace the static data with a live data source to get data as you might in a real app. In the **Edit** pane of your IDE, in `src/app/home/home.component.ts`: -1. At the top of `src/app/home/home.component.ts`, add the `inject` to the items imported from `@angular/common`. This will import the `inject` function into the `HomeComponent` class. +1. At the top of `src/app/home/home.component.ts`, add the `inject` to the items imported from `@angular/core`. This will import the `inject` function into the `HomeComponent` class. @@ -102,9 +89,9 @@ In the **Edit** pane of your IDE, in `src/app/home/home.component.ts`: -1. From `HomeComponent`, delete the `housingLocationList` delete the 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. From `HomeComponent`, 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 `HomeComponent`, add this 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. In `HomeComponent`, 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`. @@ -116,7 +103,7 @@ In the **Edit** pane of your IDE, in `src/app/home/home.component.ts`: In this lesson, you added an Angular service to your app and injected it into the `HomeComponent` class. This compartmentalizes how your app gets its data. For now, the new service gets its data from a static array of data. -In a later lesson, you refactor the service to get its data from a from an API endpoint. +In a later lesson, you'll refactor the service to get its data from an API endpoint. If you are having any trouble with this lesson, you can review the completed code for it in the . @@ -134,3 +121,5 @@ For more information about the topics covered in this lesson, visit: * [Dependency injection in Angular](guide/dependency-injection-overview) * [ng generate service](cli/generate#service) * [ng generate](cli/generate) + +@reviewed 2023-07-15 \ No newline at end of file diff --git a/aio-ja/content/tutorial/first-app/first-app-lesson-10.md b/aio-ja/content/tutorial/first-app/first-app-lesson-10.md index 0d9053c4b3..fe901ba889 100644 --- a/aio-ja/content/tutorial/first-app/first-app-lesson-10.md +++ b/aio-ja/content/tutorial/first-app/first-app-lesson-10.md @@ -1,38 +1,25 @@ -# Lesson 10 - Add routes to the application +# Lesson 10: Add routes to the application This tutorial lesson demonstrates how to add routes to your app. -**Time required:** expect to spend about 25 minutes to complete this lesson. +**Estimated time**: ~15 minutes -## Before you start +**Starting code:** -This lesson starts with the code from the previous lesson, so you can: +**Completed code:** -* Use the code that you created in Lesson 9 in your integrated development environment (IDE). -* Start with the code example from the previous lesson. Choose the from Lesson 9 where you can: - * Use the *live example* in StackBlitz, where the StackBlitz interface is your IDE. - * Use the *download example* and open it in your IDE. - -If you haven't reviewed the introduction, visit the [Introduction to Angular tutorial](tutorial/first-app) to make sure you have everything you need to complete this lesson. - -If you have any trouble during this lesson, you can review the completed code for this lesson, in the for this lesson. - -## After you finish +## What you'll learn At the end of this lesson your application will have support for routing. ## Conceptual preview of routing -This tutorial introduces routing in Angular. Routing is the ability to navigate from one component in the application to another. In [single page applications (SPA)](/guide/router-tutorial#using-angular-routes-in-a-single-page-application), only parts of the page is updated to represent the requested view for the user. +This tutorial introduces routing in Angular. Routing is the ability to navigate from one component in the application to another. In [Single Page Applications (SPA)](/guide/router-tutorial#using-angular-routes-in-a-single-page-application), only parts of the page are updated to represent the requested view for the user. The [Angular Router](/guide/router-tutorial) enables users to declare routes and specify which component should be displayed on the screen if that route is requested by the application. In this lesson, you will enable routing in your application to navigate to the details page. -## Lesson steps - -Perform these steps on the app code in your IDE. - -### Step 1 - Create a default details component +## Step 1 - Create a default details component 1. From the terminal, enter the following command to create the `DetailsComponent`: @@ -44,7 +31,7 @@ Perform these steps on the app code in your IDE. This component will represent the details page that provides more information on a given housing location. -### Step 2 - Add routing to the application +## Step 2 - Add routing to the application 1. In the `src/app` directory, create a file called `routes.ts`. This file is where we will define the routes in the application. 1. In `main.ts`, make the following updates to enable routing in the application: @@ -69,7 +56,7 @@ Perform these steps on the app code in your IDE. -### Step 3 - Add route to new component +## Step 3 - Add route to new component In the previous step you removed the reference to the `` component in the template. In this step, you will add a new route to that component. 1. In `routes.ts`, perform the following updates to create a route. @@ -105,3 +92,5 @@ For more information about the topics covered in this lesson, visit: * [Routing in Angular Overview](guide/routing-overview) * [Common Routing Tasks](guide/router) + +@reviewed 2023-07-11 \ No newline at end of file diff --git a/aio-ja/content/tutorial/first-app/first-app-lesson-11.md b/aio-ja/content/tutorial/first-app/first-app-lesson-11.md index dbaac09790..5d89cc44e6 100644 --- a/aio-ja/content/tutorial/first-app/first-app-lesson-11.md +++ b/aio-ja/content/tutorial/first-app/first-app-lesson-11.md @@ -2,35 +2,22 @@ This tutorial lesson demonstrates how to connect the details page to your app. -**Time required:** expect to spend about 20 minutes to complete this lesson. +**Estimated time**: ~15 minutes -## Before you start +**Starting code:** -This lesson starts with the code from the previous lesson, so you can: +**Completed code:** -* Use the code that you created in Lesson 10 in your integrated development environment (IDE). -* Start with the code example from the previous lesson. Choose the from Lesson 10 where you can: - * Use the *live example* in StackBlitz, where the StackBlitz interface is your IDE. - * Use the *download example* and open it in your IDE. - -If you haven't reviewed the introduction, visit the [Introduction to Angular tutorial](tutorial/first-app) to make sure you have everything you need to complete this lesson. - -If you have any trouble during this lesson, you can review the completed code for this lesson, in the for this lesson. - -## After you finish +## What you'll learn At the end of this lesson your application will have support for routing to the details page. ## Conceptual preview of routing with route parameters -In the previous lesson, you added routing to your app and in this lesson you will expand the types of routing your app supports. Each housing location has specific details that should be displayed when a user navigates to the details page for that item. To accomplish this goal, you will need to use route parameters. +Each housing location has specific details that should be displayed when a user navigates to the details page for that item. To accomplish this goal, you will need to use route parameters. Route parameters enable you to include dynamic information as a part of your route URL. To identify which housing location a user has clicked on you will use the `id` property of the `HousingLocation` type. -## Lesson steps - -Perform these steps on the app code in your IDE. - -### Step 1 - Create a new service for your app -In lesson 10, you added a second route to `src/app/routes.ts`, this route includes a special segment that identifies the route parameter, `id`: +## Step 1 - Create a new service for your app +In lesson 10, you added a second route to `src/app/routes.ts` which includes a special segment that identifies the route parameter, `id`: 'details/:id' @@ -43,17 +30,16 @@ In this case, `:id` is dynamic and will change based on how the route is request 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. - - For the routerLink to work in the template, add a file level import of RouterLink and RouterOutlet from '@angular/router', then update the component imports array to include both RouterLink and RouterOutlet -1. At this point you can confirm that the routing is working in your app. In the browser, refresh the home page and click the "learn more" button for a housing location. + For the `routerLink` to work in the template, add a file level import of `RouterLink` and `RouterOutlet` from '@angular/router', then update the component `imports` array to include both `RouterLink` and `RouterOutlet`. +1. At this point you can confirm that the routing is working in your app. In the browser, refresh the home page and click the "Learn More" button for a housing location.
      details page displaying the text 'details works!'
      -### Step 2 - Get route parameters -In this step, you will get the route parameter in the `DetailsComponent`. Currently, the app displays `details works!`, next you'll update the code to display the `id` value passed using the route parameters. +## Step 2 - Get route parameters +In this step, you will get the route parameter in the `DetailsComponent`. Currently, the app displays `details works!`. Next you'll update the code to display the `id` value passed using the route parameters. 1. In `src/app/details/details.component.ts` update the template to import the functions, classes and services that you'll need to use in the `DetailsComponent`: @@ -77,13 +63,13 @@ In this step, you will get the route parameter in the `DetailsComponent`. Curren }       - This code give the `DetailsComponent` 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 from the route to a number. + This code gives the `DetailsComponent` 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. 1. Save all changes. -1. In the browser, click on one of the housing location "learn more" links and confirm that the numeric value displayed on the page matches the `id` property for that location in the data. +1. In the browser, click on one of the housing location's "Learn More" links and confirm that the numeric value displayed on the page matches the `id` property for that location in the data. -### Step 3 - Customize the `DetailComponent` +## Step 3 - Customize the `DetailComponent` Now that routing is working properly in the application this is a great time to update the template of the `DetailsComponent` to display the specific data represented by the housing location for the route parameter. To access the data you will add a call to the `HousingService`. @@ -98,7 +84,7 @@ To access the data you will add a call to the `HousingService`. - 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. + 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. 1. Copy the following styles into the `src/app/details/details.component.css` file: @@ -106,13 +92,13 @@ To access the data you will add a call to the `HousingService`. 1. Save your changes. -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. +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.
      Details page listing home info
      -### Step 4 - Add navigation to the `HomeComponent` +## Step 4 - Add navigation to the `HomeComponent` In a previous lesson you updated the `AppComponent` template to include a `routerLink`. Adding that code updated your app to enable navigation back to the `HomeComponent` whenever the logo is clicked. 1. Confirm that your code matches the following: @@ -125,7 +111,7 @@ In a previous lesson you updated the `AppComponent` template to include a `route In this lesson you updated your app to: * use route parameters to pass data to a route * use the `routerLink` directive to use dynamic data to create a route -* use route parameter to retrieve data from the `HousingService` to display housing location specific information. +* use route parameter to retrieve data from the `HousingService` to display specific housing location information. Really great work so far. @@ -143,3 +129,5 @@ For more information about the topics covered in this lesson, visit: * [Routing in Angular Overview](guide/routing-overview) * [Common Routing Tasks](guide/router) * [Optional Chaining Operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining) + +@reviewed 2023-07-15 \ No newline at end of file diff --git a/aio-ja/content/tutorial/first-app/first-app-lesson-12.md b/aio-ja/content/tutorial/first-app/first-app-lesson-12.md index 37827550d9..f40f006161 100644 --- a/aio-ja/content/tutorial/first-app/first-app-lesson-12.md +++ b/aio-ja/content/tutorial/first-app/first-app-lesson-12.md @@ -1,36 +1,23 @@ -# First Angular app lesson 12 - Adding a form to your Angular app +# Lesson 12: Adding a form to your Angular app This tutorial lesson demonstrates how to add a form that collects user data to an Angular app. -This lesson starts with a functional Angular app and shows how to add a form it. +This lesson starts with a functional Angular app and shows how to add a form to it. The data that the form collects is sent only to the app's service, which writes it to the browser's console. Using a REST API to send and receive the form's data is not covered in this lesson. -**Time required:** expect to spend about 20 minutes to complete this lesson. +**Estimated time**: ~15 minutes -## Before you start +**Starting code:** -This lesson starts with the code from the previous lesson, so you can: +**Completed code:** -* Use the code that you created in Lesson 11 in your integrated development environment (IDE). -* Start with the code example from the previous lesson. Choose the from Lesson 11 where you can: - * Use the *live example* in StackBlitz, where the StackBlitz interface is your IDE. - * Use the *download example* and open it in your IDE. - -If you haven't reviewed the introduction, visit the [Introduction to Angular tutorial](tutorial/first-app) to make sure you have everything you need to complete this lesson. - -If you have any trouble during this lesson, you can review the completed code for this lesson, in the for this lesson. - -## After you finish +## What you'll learn * Your app has a form into which users can enter data that is sent to your app's service. -* The service writes the data from the form to the browser's console. +* The service writes the data from the form to the browser's console log. -## Lesson steps - -Perform these steps on the app code in your IDE. - -### Step 1 - Add a method to send form data +## Step 1 - Add a method to send form data This step adds a method to your app's service that receives the form data to send to the data's destination. In this example, the method writes the data from the form to the browser's console log. @@ -44,9 +31,9 @@ In the **Edit** pane of your IDE: 1. Confirm that the app builds without error. Correct any errors before you continue to the next step. -### Step 2 - Add the form functions to the details page +## Step 2 - Add the form functions to the details page -This step adds the code to the details page that handles the form interactions. +This step adds the code to the details page that handles the form's interactions. In the **Edit** pane of your IDE, in `src/app/details/details.component.ts`: @@ -73,7 +60,7 @@ In the **Edit** pane of your IDE, in `src/app/details/details.component.ts`: 1. Confirm that the app builds without error. Correct any errors before you continue to the next step. -### Step 3 - Add the form's markup to the details page +## Step 3 - Add the form's markup to the details page This step adds the markup to the details page that displays the form. @@ -83,7 +70,7 @@ In the **Edit** pane of your IDE, in `src/app/details/details.component.ts`: - The template now includes an event handler `(submit)="submitApplication()"`. Angular uses parentheses syntax around the event name to create 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. + 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. 1. Confirm that the app builds without error. Correct any errors before you continue to the next step. @@ -93,13 +80,13 @@ In the **Edit** pane of your IDE, in `src/app/details/details.component.ts`: details page with a form for applying to live at this location -### Step 4 - Test your app's new form +## Step 4 - Test your app's new form This step tests the new form to see that when the form data is submitted to the app, the form data appears in the console log. 1. In the **Terminal** pane of your IDE, run `ng serve`, if it isn't already running. 1. In your browser, open your app at `http://localhost:4200`. -1. In your app, right click in the app and from the context menu, choose **Inspect**. +1. Right click on the app in the browser and from the context menu, choose **Inspect**. 1. In the developer tools window, choose the **Console** tab. Make sure that the developer tools window is visible for the next steps 1. In your app: @@ -113,7 +100,7 @@ This step tests the new form to see that when the form data is submitted to the In this lesson, you updated your app to: * add a form using Angular's forms feature -* connect the data captured in the form to a form using an event handler +* connect the data captured in the form to a component using an event handler If you are having any trouble with this lesson, you can review the completed code for it in the . @@ -126,4 +113,6 @@ If you are having any trouble with this lesson, you can review the completed cod For more information about the topics covered in this lesson, visit: * [Angular Forms](/guide/forms) -* [Event Handling](/guide/event-binding) \ No newline at end of file +* [Event Handling](/guide/event-binding) + +@reviewed 2023-07-12 \ No newline at end of file diff --git a/aio-ja/content/tutorial/first-app/first-app-lesson-13.md b/aio-ja/content/tutorial/first-app/first-app-lesson-13.md index b0b5a9e5c7..b3f33250a5 100644 --- a/aio-ja/content/tutorial/first-app/first-app-lesson-13.md +++ b/aio-ja/content/tutorial/first-app/first-app-lesson-13.md @@ -1,34 +1,21 @@ -# Lesson 13 - Add the search feature to your app +# Lesson 13: Add the search feature to your app This tutorial lesson demonstrates how to add a search functionality to your Angular app. The app will enable users to search through the data provided by your app and display only the results that match the entered term. -**Time required:** expect to spend about 20 minutes to complete this lesson. +**Estimated time**: ~15 minutes -## Before you start +**Starting code:** -This lesson starts with the code from the previous lesson, so you can: +**Completed code:** -* Use the code that you created in Lesson 12 in your integrated development environment (IDE). -* Start with the code example from the previous lesson. Choose the from Lesson 12 where you can: - * Use the *live example* in StackBlitz, where the StackBlitz interface is your IDE. - * Use the *download example* and open it in your IDE. - -If you haven't reviewed the introduction, visit the [Introduction to Angular tutorial](tutorial/first-app) to make sure you have everything you need to complete this lesson. - -If you have any trouble during this lesson, you can review the completed code for this lesson, in the for this lesson. - -## After you finish +## What you'll learn * Your app will use data from a form to search for matching housing locations * Your app will display only the matching housing locations -## Lesson steps - -Perform these steps on the app code in your IDE. - -### Step 1 - Update the home component properties +## Step 1 - Update the home component properties In this step, you'll update the `HomeComponent` class to store data in a new array property that you will use for filtering. 1. In `src/app/home/home.component.ts`, add new property to the class called `filteredLocationList`. @@ -41,24 +28,24 @@ In this step, you'll update the `HomeComponent` class to store data in a new arr -### Step 2 - Update the home component template +## Step 2 - Update the home component template The `HomeComponent` already contains an input field that you will use to capture input from the user. That string text will be used to filter the results. -1. Update the `HomeComponent` template to include a template variable in the input called `#filter`. +1. Update the `HomeComponent` template to include a template variable in the `input` element called `#filter`. <input type="text" placeholder="Filter by city" #filter> - This example uses a [template variable](/guide/template-reference-variables) to get access to the input as its value. + This example uses a [template reference variable](/guide/template-reference-variables) 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. +1. Next, update the component template to attach an event handler to the "Search" button. <button class="primary" type="button" (click)="filterResults(filter.value)">Search</button> - By binding to the click event on the button, 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. + 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. @@ -66,7 +53,7 @@ The `HomeComponent` already contains an input field that you will use to capture <app-housing-location *ngFor="let housingLocation of filteredLocationList" [housingLocation]="housingLocation"></app-housing-location> -### Step 3 - Implement the event handler function +## Step 3 - Implement the event handler function The template has been updated to bind the `filterResults` function to the `click` event. Next, your task is to implement the `filterResults` function in the `HomeComponent` class. @@ -74,7 +61,7 @@ The template has been updated to bind the `filterResults` function to the `click - This function uses the `String` filter function to compare the value of the `text` parameter against the `housingLocation.city` property. You can update this function to match against any property or multiple properties for a fun exercise. + This function uses the `String` `filter` function to compare the value of the `text` parameter against the `housingLocation.city` property. You can update this function to match against any property or multiple properties for a fun exercise. 1. Save your code. @@ -101,4 +88,6 @@ If you are having any trouble with this lesson, you can review the completed cod For more information about the topics covered in this lesson, visit: * [Template Variables](/guide/template-reference-variables) -* [Event Handling](/guide/event-binding) \ No newline at end of file +* [Event Handling](/guide/event-binding) + +@reviewed 2023-07-11 diff --git a/aio-ja/content/tutorial/first-app/first-app-lesson-14.md b/aio-ja/content/tutorial/first-app/first-app-lesson-14.md index 45f4c91e13..053d6af633 100644 --- a/aio-ja/content/tutorial/first-app/first-app-lesson-14.md +++ b/aio-ja/content/tutorial/first-app/first-app-lesson-14.md @@ -1,31 +1,20 @@ -# Lesson 14 - Add HTTP communication to your app +# Lesson 14: Add HTTP communication to your app This tutorial demonstrates how to integrate HTTP and an API into your app. Up until this point your app has read data from a static array in an Angular service. The next step is to use a JSON server that your app will communicate with over HTTP. The HTTP request will simulate the experience of working with data from a server. -**Time required:** expect to spend about 20 minutes to complete this lesson. +**Estimated time**: ~15 minutes -## Before you start +**Starting code:** -This lesson starts with the code from the previous lesson, so you can: +**Completed code:** -* Use the code that you created in Lesson 13 in your integrated development environment (IDE). -* Start with the code example from the previous lesson. Choose the from Lesson 13 where you can: - * Use the *live example* in StackBlitz, where the StackBlitz interface is your IDE. - * Use the *download example* and open it in your IDE. +## What you'll learn -If you haven't reviewed the introduction, visit the [Introduction to Angular tutorial](tutorial/first-app) to make sure you have everything you need to complete this lesson. +Your app will use data from a JSON server -## After you finish - -* Your app will use data from a JSON server - -## Lesson steps - -Perform these steps in the terminal on your local computer. - -### Step 1 - Configure the JSON server +## Step 1 - Configure the JSON server JSON Server is an open source tool used to create mock REST APIs. You'll use it to serve the housing location data that is currently stored in the housing service. 1. Install `json-server` from npm by using the following command. @@ -155,14 +144,14 @@ JSON Server is an open source tool used to create mock REST APIs. You'll use it If you have any trouble with your configuration, you can find more details in the [official documentation](https://www.npmjs.com/package/json-server). -### Step 2 - Update service to use web server instead of local array +## Step 2 - Update service to use web server instead of local array The data source has been configured, the next step is to update your web app to connect to it use the data. 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. Add a string property called and set the 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'; @@ -174,24 +163,28 @@ The data source has been configured, the next step is to update your web app to - The code now uses asynchronous code to make a `get` request over `HTTP`. Notice, for this example, the code uses fetch. For more advanced use cases consider using `HttpClient` provided by Angular. + The code now uses asynchronous code to make a **GET** request over HTTP. + +
      + 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. - 1. Once all the updates are complete, your updated service will match the following code. + 1. Once all the updates are complete, your updated service should match the following code. -### Step 3 - Update the components to use asynchronous calls to the housing service -The server is now reading data from the `HTTP` request but the components that rely on the service now have errors because they were programmed to use the synchronous version of the service. +## Step 3 - Update the components to use asynchronous calls to the housing service +The server is now reading data from the HTTP request but the components that rely on the service now have errors because they were programmed to use the synchronous version of the service. -1. In `src/app/home/home.component.ts`, update the constructor to use the new asynchronous version of the `getAllHousingLocations` method. +1. In `src/app/home/home.component.ts`, update the `constructor` to use the new asynchronous version of the `getAllHousingLocations` method. -1. In `src/app/details/details.component.ts`, update the constructor to use the new asynchronous version of the `getHousingLocationById` method. +1. In `src/app/details/details.component.ts`, update the `constructor` to use the new asynchronous version of the `getHousingLocationById` method. @@ -204,4 +197,6 @@ In this lesson, you updated your app to: * use a local web server (`json-server`) * use asynchronous service methods to retrieve data. -Congratulations! You've successfully completed this tutorial and are ready to continue your journey with building even more complex Angular Apps. If you would like to learn more, please consider completing some of Angular's other developer [tutorials](tutorial) and [guides](/guide/developer-guide-overview). \ No newline at end of file +Congratulations! You've successfully completed this tutorial and are ready to continue your journey with building even more complex Angular Apps. If you would like to learn more, please consider completing some of Angular's other developer [tutorials](tutorial) and [guides](/guide/developer-guide-overview). + +@reviewed 2023-07-12 diff --git a/aio-ja/content/tutorial/tutorial-template.md b/aio-ja/content/tutorial/tutorial-template.md index 1b6a9c2083..c6efb60b02 100644 --- a/aio-ja/content/tutorial/tutorial-template.md +++ b/aio-ja/content/tutorial/tutorial-template.md @@ -14,7 +14,7 @@ This topic is a final draft. It is complete and ready for review. -* \[TODO: Delete after reading. This is a guide to adapt to a specific tutorial lesson. Add/Remove/Change the contents as required, but keep the general outline in tact as much as possible to provide a consistent experience across lessons. \] +* \[TODO: Delete after reading. This is a guide to adapt to a specific tutorial lesson. Add/Remove/Change the contents as required, but keep the general outline intact as much as possible to provide a consistent experience across lessons. \] This tutorial lesson demonstrates how to \[TODO: do something interesting in Angular\]. From 08d1575cd5ddc84153669949ef82af7f043c181b Mon Sep 17 00:00:00 2001 From: Suguru Inatomi Date: Wed, 16 Aug 2023 12:47:41 +0900 Subject: [PATCH 3/8] migrate small changes --- aio-ja/content/errors/NG0203.en.md | 14 +-- aio-ja/content/errors/NG0203.md | 14 +-- .../guide/angular-compiler-options.en.md | 11 +-- .../content/guide/angular-compiler-options.md | 7 -- .../content/guide/aot-metadata-errors.en.md | 2 +- .../guide/architecture-next-steps.en.md | 2 +- .../content/guide/architecture-next-steps.md | 2 +- aio-ja/content/guide/component-overview.en.md | 8 +- aio-ja/content/guide/component-overview.md | 12 ++- .../guide/dependency-injection-overview.en.md | 6 ++ .../guide/dependency-injection-overview.md | 6 ++ .../content/guide/dependency-injection.en.md | 9 ++ aio-ja/content/guide/dependency-injection.md | 9 ++ .../guide/dynamic-component-loader.en.md | 2 +- aio-ja/content/guide/file-structure.en.md | 2 +- aio-ja/content/guide/file-structure.md | 2 +- .../hierarchical-dependency-injection.en.md | 20 ++-- .../hierarchical-dependency-injection.md | 24 ++--- .../content/guide/i18n-common-prepare.en.md | 8 +- aio-ja/content/guide/i18n-common-prepare.md | 8 +- aio-ja/content/guide/image-directive.en.md | 29 +++++- aio-ja/content/guide/image-directive.md | 29 +++++- aio-ja/content/guide/inputs-outputs.en.md | 27 ++++++ aio-ja/content/guide/inputs-outputs.md | 35 ++++++- aio-ja/content/guide/lifecycle-hooks.en.md | 95 ++++++++++++++++++- aio-ja/content/guide/lifecycle-hooks.md | 95 ++++++++++++++++++- aio-ja/content/guide/npm-packages.en.md | 2 +- aio-ja/content/guide/npm-packages.md | 2 +- aio-ja/content/guide/releases.en.md | 2 +- aio-ja/content/guide/releases.md | 2 +- .../content/guide/router-tutorial-toh.en.md | 2 + aio-ja/content/guide/router-tutorial-toh.md | 2 + .../content/guide/schematics-authoring.en.md | 2 +- aio-ja/content/guide/schematics-authoring.md | 2 +- aio-ja/content/guide/security.en.md | 4 +- aio-ja/content/guide/security.md | 4 +- aio-ja/content/guide/signals.en.md | 8 +- aio-ja/content/guide/signals.md | 6 +- .../content/guide/standalone-components.en.md | 6 +- aio-ja/content/guide/standalone-components.md | 2 +- .../guide/testing-components-scenarios.en.md | 2 +- .../guide/testing-components-scenarios.md | 2 +- aio-ja/content/guide/testing-services.en.md | 4 +- aio-ja/content/guide/testing-services.md | 12 ++- aio-ja/content/guide/what-is-angular.en.md | 2 +- aio-ja/content/guide/what-is-angular.md | 2 +- 46 files changed, 433 insertions(+), 115 deletions(-) diff --git a/aio-ja/content/errors/NG0203.en.md b/aio-ja/content/errors/NG0203.en.md index 5366bbeef1..474f86d8de 100644 --- a/aio-ja/content/errors/NG0203.en.md +++ b/aio-ja/content/errors/NG0203.en.md @@ -1,10 +1,10 @@ @name `inject()` must be called from an injection context @category runtime -@shortDescription `inject()` must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with `EnvironmentInjector#runInContext`. +@shortDescription `inject()` must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with `runInInjectionContext`. @description -You see this error when you try to use the `inject()` function outside of the allowed injection context. The injection context is available during the class creation and initialization. It is also available to functions -used with `EnvironmentInjector#runInContext`. +You see this error when you try to use the [`inject`](api/core/inject) function outside of the allowed [injection context](guide/dependency-injection-context). The injection context is available during the class creation and initialization. It is also available to functions +used with `runInInjectionContext`. In practice the `inject()` calls are allowed in a constructor, a constructor parameter and a field initializer: @@ -23,7 +23,7 @@ export class Car { } ``` -It is also legal to call `inject` from a provider's factory: +It is also legal to call [`inject`](api/core/inject) from a provider's factory: ```typescript providers: [ @@ -35,7 +35,7 @@ providers: [ ] ``` -Calls to the `inject()` function outside of the class creation or `runInContext` will result in error. Most notably, calls to `inject()` are disallowed after a class instance was created, in methods (including lifecycle hooks): +Calls to the [`inject`](api/core/inject) function outside of the class creation or `runInInjectionContext` will result in error. Most notably, calls to `inject()` are disallowed after a class instance was created, in methods (including lifecycle hooks): ```typescript @Component({ ... }) @@ -52,7 +52,7 @@ export class CarComponent { Work backwards from the stack trace of the error to identify a place where the disallowed call to `inject()` is located. -To fix the error move the `inject()` call to an allowed place (usually a class constructor or a field initializer). +To fix the error move the [`inject`](api/core/inject) call to an allowed place (usually a class constructor or a field initializer). **Note:** If you are running in a test context, `TestBed.runInInjectionContext` will enable `inject()` to succeed. @@ -68,4 +68,4 @@ TestBed.runInInjectionContext(() => { -@reviewed 2022-05-27 +@reviewed 2023-04-11 diff --git a/aio-ja/content/errors/NG0203.md b/aio-ja/content/errors/NG0203.md index e9fff7be25..c39f5091b4 100644 --- a/aio-ja/content/errors/NG0203.md +++ b/aio-ja/content/errors/NG0203.md @@ -1,10 +1,10 @@ @name `inject()` must be called from an injection context @category runtime -@shortDescription `inject()`は、コンストラクターやファクトリ関数、フィールド初期化、あるいは `EnvironmentInjector#runInContext` で使用される関数といった、インジェクションコンテキストから呼び出す必要があります。 +@shortDescription `inject()`は、コンストラクターやファクトリ関数、フィールド初期化、あるいは `runInInjectionContext` で使用される関数といった、インジェクションコンテキストから呼び出す必要があります。 @description -このエラーは、許可されたインジェクションコンテキストの外で `inject()` 関数を使用しようとしたときに表示されます。インジェクションコンテキストは、クラスの作成時や初期化時に有効です。また、 -`EnvironmentInjector#runInContext` と共に使用される関数でも有効です。 +このエラーは、許可されたインジェクションコンテキストの外で [`inject`](api/core/inject) 関数を使用しようとしたときに表示されます。[インジェクションコンテキスト](guide/dependency-injection-context)は、クラスの作成時や初期化時に有効です。また、 +`runInInjectionContext` と共に使用される関数でも有効です。 具体的には、コンストラクターやコンストラクター引数、フィールドイニシャライザで `inject()` の呼び出しが可能です: @@ -23,7 +23,7 @@ export class Car { } ``` -また、プロバイダーのファクトリーから `inject` を呼び出すこともできます: +また、プロバイダーのファクトリーから [`inject`](api/core/inject) を呼び出すこともできます: ```typescript providers: [ @@ -35,7 +35,7 @@ providers: [ ] ``` -クラス作成時や `runInContext` の外で `inject()` 関数を呼び出すとエラーとなります。特に、クラスインスタンスが生成された後のメソッド（ライフサイクルフックを含む）では、`inject()`の呼び出しは禁止されています: +クラス作成時や `runInInjectionContext` の外で [`inject`](api/core/inject) 関数を呼び出すとエラーとなります。特に、クラスインスタンスが生成された後のメソッド（ライフサイクルフックを含む）では、`inject()`の呼び出しは禁止されています: ```typescript @Component({ ... }) @@ -52,7 +52,7 @@ export class CarComponent { エラーのスタックトレースから逆算して、禁止されている `inject()` の呼び出しがある場所を特定します。 -エラーを修正するには、`inject()`の呼び出しを許可された場所（通常はクラスのコンストラクターまたはフィールド初期化時）に移します。 +エラーを修正するには、[`inject`](api/core/inject)の呼び出しを許可された場所（通常はクラスのコンストラクターまたはフィールド初期化時）に移します。 **Note:** If you are running in a test context, `TestBed.runInInjectionContext` will enable `inject()` to succeed. @@ -68,4 +68,4 @@ TestBed.runInInjectionContext(() => { -@reviewed 2022-05-27 +@reviewed 2023-04-11 diff --git a/aio-ja/content/guide/angular-compiler-options.en.md b/aio-ja/content/guide/angular-compiler-options.en.md index 4ba2017661..a9d9239b0b 100644 --- a/aio-ja/content/guide/angular-compiler-options.en.md +++ b/aio-ja/content/guide/angular-compiler-options.en.md @@ -26,13 +26,6 @@ For more information, see the [TypeScript Handbook](https://www.typescriptlang.o The following options are available for configuring the AOT template compiler. -### `allowEmptyCodegenFiles` - -When `true`, create all possible files even if they are empty. -Default is `false`. -Used by the Bazel build rules to simplify how Bazel rules track file dependencies. -Do not use this option outside of the Bazel rules. - ### `annotationsAs` Modifies how Angular-specific annotations are emitted to improve tree-shaking. @@ -128,9 +121,9 @@ Use to create flat modules that are packaged similarly to `@angular/core` and `@ When this option is used, the `package.json` for the library should refer to the created flat module index instead of the library index file. Produces only one `.metadata.json` file, which contains all the metadata necessary for symbols exported from the library index. -In the created `.ngfactory.js` files, the flat module index is used to import symbols. Symbols that include both the public API from the library index as well as shrouded internal symbols. +In the created `.ngfactory.js` files, the flat module index is used to import symbols. Symbols that include both the public API from the library index and shrouded internal symbols. -By default the `.ts` file supplied in the `files` field is assumed to be the library index. +By default, the `.ts` file supplied in the `files` field is assumed to be the library index. If more than one `.ts` file is specified, `libraryIndex` is used to select the file to use. If more than one `.ts` file is supplied without a `libraryIndex`, an error is produced. diff --git a/aio-ja/content/guide/angular-compiler-options.md b/aio-ja/content/guide/angular-compiler-options.md index 6db57c6003..bcdb4e407c 100644 --- a/aio-ja/content/guide/angular-compiler-options.md +++ b/aio-ja/content/guide/angular-compiler-options.md @@ -26,13 +26,6 @@ TypeScript 設定は、`extends` プロパティを使用して別のファイ 次のオプションは、AOT テンプレートコンパイラの構成に使用できます。 -### `allowEmptyCodegenFiles` - -`true` の場合、空であってもすべての可能なファイルを生成します。 -デフォルトは `false` です。 -Bazel ルールがファイルの依存関係を追跡する方法を単純化するために、Bazel ビルドルールで使用されます。 -このオプションは、Bazel ルール以外では使用しないでください。 - ### `annotationsAs` ツリーシェーキングを改善するために、Angular 固有のアノテーションの出力方法を変更します。 diff --git a/aio-ja/content/guide/aot-metadata-errors.en.md b/aio-ja/content/guide/aot-metadata-errors.en.md index aa9e9afbee..7ba5e4710b 100644 --- a/aio-ja/content/guide/aot-metadata-errors.en.md +++ b/aio-ja/content/guide/aot-metadata-errors.en.md @@ -58,7 +58,7 @@ and be wary of new or unusual TypeScript features. -The compiler encountered a referenced to a locally defined symbol that either wasn't exported or wasn't initialized. +The compiler encountered a reference to a locally defined symbol that either wasn't exported or wasn't initialized. Here's a `provider` example of the problem. diff --git a/aio-ja/content/guide/architecture-next-steps.en.md b/aio-ja/content/guide/architecture-next-steps.en.md index c4b47136a5..2fe7495119 100644 --- a/aio-ja/content/guide/architecture-next-steps.en.md +++ b/aio-ja/content/guide/architecture-next-steps.en.md @@ -33,7 +33,7 @@ Angular provides a framework for single-page applications, where most of the log Most applications still need to access a server using the `HttpClient` to access and save data. For some platforms and applications, you might also want to use the PWA \(Progressive Web App\) model to improve the user experience. -* [HTTP](guide/http): Communicate with a server to get data, save data, and invoke server-side actions with an HTTP client. +* [HTTP](guide/understanding-communicating-with-http): Communicate with a server to get data, save data, and invoke server-side actions with an HTTP client. * [Server-side rendering](guide/universal): Angular Universal generates static application pages on the server through server-side rendering \(SSR\). This allows you to run your Angular application on the server in order to improve performance and show the first page quickly on mobile and low-powered devices, and also facilitate web crawlers. * [Service workers and PWA](guide/service-worker-intro): Use a service worker to reduce dependency on the network and significantly improve the user experience. * [Web workers](guide/web-worker): Learn how to run CPU-intensive computations in a background thread. diff --git a/aio-ja/content/guide/architecture-next-steps.md b/aio-ja/content/guide/architecture-next-steps.md index 493a560608..8e55e53af7 100644 --- a/aio-ja/content/guide/architecture-next-steps.md +++ b/aio-ja/content/guide/architecture-next-steps.md @@ -33,7 +33,7 @@ Angular は、ほとんどのロジックやデータがクライアント側に ほとんどのアプリケーションはデータを取得、保存するために `HttpClient` を使ってサーバーにアクセスする必要があります。 いくつかのプラットフォームやアプリケーションでは、PWA (Progressive Web App) モデルによってユーザー体験を改善させたいかもしれません。 -* [HTTP](guide/http): HTTP クライアントを使用してサーバーと通信してデータを取得、保存し、サーバー側のアクションを呼び出します。 +* [HTTP](guide/understanding-communicating-with-http): HTTP クライアントを使用してサーバーと通信してデータを取得、保存し、サーバー側のアクションを呼び出します。 * [サーバーサイドレンダリング](guide/universal): Angular Universal は、サーバーサイドレンダリング(SSR)によってサーバー上に静的アプリケーションページを生成します。これにより、パフォーマンスを向上させ、モバイルデバイスや低パワーのデバイスで最初のページをすばやく表示し、Webクローラを手助けするために、Angular アプリケーションをサーバー上で実行できます。 * [Service WorkersとPWA](guide/service-worker-intro): service worker を使用してネットワークへの依存を減らしユーザー体験を大幅に改善します。 * [Web workers](guide/web-worker): CPU を使う処理をバックグラウンドスレッドで走らせる方法について学びます。 diff --git a/aio-ja/content/guide/component-overview.en.md b/aio-ja/content/guide/component-overview.en.md index 11e5f65db2..1d9f7622d1 100644 --- a/aio-ja/content/guide/component-overview.en.md +++ b/aio-ja/content/guide/component-overview.en.md @@ -1,6 +1,6 @@ # Angular components overview -Components are the main building block for Angular applications. +Components are the main building blocks for Angular applications. Each component consists of: * An HTML template that declares what renders on the page @@ -98,7 +98,7 @@ Every component requires a CSS *selector*. A selector instructs Angular to insta For example, consider a component `hello-world.component.ts` that defines its selector as `app-hello-world`. This selector instructs Angular to instantiate this component any time the tag `` appears in a template. -Specify a component's selector by adding a `selector` statement to the `@Component` decorator. +Specify a component's selector by adding a `selector` property to the `@Component` decorator. @@ -123,7 +123,7 @@ For example:
      An Angular component requires a template defined using `template` or `templateUrl`. -You cannot have both statements in a component. +You cannot have both properties in a component.
      @@ -155,4 +155,4 @@ The `styles` property takes an array of strings that contain the CSS rule declar -@reviewed 2022-02-28 +@reviewed 2023-07-29 diff --git a/aio-ja/content/guide/component-overview.md b/aio-ja/content/guide/component-overview.md index af648350d1..360f05dcbc 100644 --- a/aio-ja/content/guide/component-overview.md +++ b/aio-ja/content/guide/component-overview.md @@ -1,6 +1,7 @@ # Angular コンポーネントの概要 {@a angular-components-overview} -コンポーネントは Angular アプリケーションの主な構成要素です。各コンポーネントは次のように構成されています。 +コンポーネントは Angular アプリケーションの主な構成要素です。 +各コンポーネントは次のように構成されています。 * ページに表示するものを宣言する HTML テンプレート * 振る舞いを定義する Typescript クラス @@ -25,7 +26,8 @@ ## コンポーネントの作成 {@a creating-a-component} -コンポーネントを作成するもっとも簡単な方法は Angular CLI です。手動でコンポーネントを作成することもできます。 +コンポーネントを作成するもっとも簡単な方法は Angular CLI です。 +手動でコンポーネントを作成することもできます。 ### Angular CLI を使ったコンポーネントの作成 {@a creating-a-component-using-the-angular-cli} @@ -112,7 +114,7 @@ Angular CLI は Angular コンポーネントを作成するもっとも簡単 すべてのコンポーネントには CSS _セレクタ_ が必要です。セレクターは HTML テンプレートの中で対応するタグを見つけたらどこでも、そのコンポーネントをインスタンス化するように Angular に指示します。たとえば、`hello-world.component.ts` が `app-hello-world` というセレクターを定義しているコンポーネントを考えてみましょう。このセレクターは、テンプレートに `` タグが現れるたびに、このコンポーネントのインスタンスを作成するように Angular に指示します。 -コンポーネントのセレクターを指定するには、`@Component` デコレーターに `selector` 文を追加します。 +コンポーネントのセレクターを指定するには、`@Component` デコレーターに `selector` プロパティを追加します。 -Angular コンポーネントは、`template` または `templateUrl` で定義されたテンプレートを必要とします。コンポーネントの中で両方の記述をもつことはできません。 +Angular コンポーネントは、`template` または `templateUrl` で定義されたテンプレートを必要とします。コンポーネントの中で両方のプロパティをもつことはできません。 @@ -180,4 +182,4 @@ Angular コンポーネントは、`template` または `templateUrl` で定義 * コンポーネントのスタイルについては、[コンポーネントスタイル](guide/component-styles)を参照してください * テンプレートの詳細については、[テンプレート構文](guide/template-syntax)を参照してください -@reviewed 2021-03-18 +@reviewed 2023-07-29 diff --git a/aio-ja/content/guide/dependency-injection-overview.en.md b/aio-ja/content/guide/dependency-injection-overview.en.md index cc3e09d747..bdccb526a1 100644 --- a/aio-ja/content/guide/dependency-injection-overview.en.md +++ b/aio-ja/content/guide/dependency-injection-overview.en.md @@ -33,12 +33,18 @@ You should be familiar with the Angular apps in general, and have the fundamenta
      Configuring dependency providers

      Describes how to configure dependencies using the providers field on the @Component and @NgModule decorators. Also describes how to use InjectionToken to provide and inject values in DI, which can be helpful when you want to use a value other than classes as dependencies.

      Configuring dependency providers

      + + +
      Injection context
      +

      Describes what an injection context is and how to use the DI system where you need it.

      +

      Injection context
      Hierarchical injectors

      Hierarchical DI enables you to share dependencies between different parts of the application only when and if you need to. This is an advanced topic.

      Hierarchical injectors

       + @reviewed 2022-08-02 diff --git a/aio-ja/content/guide/dependency-injection-overview.md b/aio-ja/content/guide/dependency-injection-overview.md index 9b250cfb72..04d29543be 100644 --- a/aio-ja/content/guide/dependency-injection-overview.md +++ b/aio-ja/content/guide/dependency-injection-overview.md @@ -34,11 +34,17 @@ Angularアプリケーション全般に慣れていて、コンポーネント

      @Componentデコレータと@NgModuleデコレータのprovidersフィールドを使用して依存オブジェクトを設定する方法について説明します。また、クラス以外の値を依存オブジェクトとして使用したい場合に役立つ、DIで値を提供し注入するためのInjectionTokenの使用方法について説明します。

      依存性プロバイダーの設定

      + +
      Injection context
      +

      Describes what an injection context is and how to use the DI system where you need it.

      +

      Injection context

      +
      階層化インジェクター

      階層化されたDIは、必要なときに必要なだけ、アプリケーションの異なる部分間で依存オブジェクトを共有することを可能にします。これは上級者向けのトピックです。

      階層化インジェクター

       + @reviewed 2022-08-02 diff --git a/aio-ja/content/guide/dependency-injection.en.md b/aio-ja/content/guide/dependency-injection.en.md index 89058ce169..b93c99b114 100644 --- a/aio-ja/content/guide/dependency-injection.en.md +++ b/aio-ja/content/guide/dependency-injection.en.md @@ -68,6 +68,15 @@ class HeroListComponent { }       +Another option is to use the [inject](api/core/inject) method: + + +@Component({ … }) +class HeroListComponent { + private service = inject(HeroService); +} + + When Angular discovers that a component depends on a service, it first checks if the injector has any existing instances of that service. If a requested service instance doesn't yet exist, the injector creates one using the registered provider, and adds it to the injector before returning the service to Angular. When all requested services have been resolved and returned, Angular can call the component's constructor with those services as arguments. diff --git a/aio-ja/content/guide/dependency-injection.md b/aio-ja/content/guide/dependency-injection.md index 056dc4df63..c52094776f 100644 --- a/aio-ja/content/guide/dependency-injection.md +++ b/aio-ja/content/guide/dependency-injection.md @@ -68,6 +68,15 @@ class HeroListComponent { }       +もうひとつは、[inject](api/core/inject) を使う方法です: + + +@Component({ … }) +class HeroListComponent { + private service = inject(HeroService); +} + + Angularはコンポーネントがあるサービスに依存していることを検出すると、まずインジェクターにそのサービスの既存のインスタンスがあるかどうかをチェックします。要求されたサービスのインスタンスがまだ存在しない場合、 インジェクターは登録されたプロバイダーを使ってインスタンスを作成し、 それをインジェクターに追加してから Angular にサービスを返します。 要求されたサービスがすべて解決されて返されると、Angularはそれらのサービスを引数としてコンポーネントのコンストラクターを呼び出すことができます。 diff --git a/aio-ja/content/guide/dynamic-component-loader.en.md b/aio-ja/content/guide/dynamic-component-loader.en.md index 9d555de538..8eeb51f23f 100644 --- a/aio-ja/content/guide/dynamic-component-loader.en.md +++ b/aio-ja/content/guide/dynamic-component-loader.en.md @@ -58,7 +58,7 @@ The `` element is a good choice for dynamic components because it d Take a closer look at the methods in `ad-banner.component.ts`. `AdBannerComponent` takes an array of `AdItem` objects as input, which ultimately comes from `AdService`. -`AdItem` objects specify the type of component to load and any data to bind to the component.`AdService` returns the actual ads making up the ad campaign. +`AdItem` objects specify the type of component to load and any data to bind to the component. `AdService` returns the actual ads making up the ad campaign. Passing an array of components to `AdBannerComponent` allows for a dynamic list of ads without static elements in the template. diff --git a/aio-ja/content/guide/file-structure.en.md b/aio-ja/content/guide/file-structure.en.md index b55f8cf2cc..8364804cfa 100644 --- a/aio-ja/content/guide/file-structure.en.md +++ b/aio-ja/content/guide/file-structure.en.md @@ -97,7 +97,7 @@ Angular components, templates, and styles go here. | `app/app.component.html` | Defines the HTML template associated with the root `AppComponent`. | | `app/app.component.css` | Defines the base CSS stylesheet for the root `AppComponent`. | | `app/app.component.spec.ts` | Defines a unit test for the root `AppComponent`. | -| `app/app.module.ts` | Defines the root module, named `AppModule`, that tells Angular how to assemble the application. Initially declares only the `AppComponent`. As you add more components to the app, they must be declared here.

      _Only generated when using the `--standalone` option._ | +| `app/app.module.ts` | Defines the root module, named `AppModule`, that tells Angular how to assemble the application. Initially declares only the `AppComponent`. As you add more components to the app, they must be declared here.

      _This file is not generated when using the `--standalone` option._ | ### Application configuration files diff --git a/aio-ja/content/guide/file-structure.md b/aio-ja/content/guide/file-structure.md index 0079d28392..83595eb322 100644 --- a/aio-ja/content/guide/file-structure.md +++ b/aio-ja/content/guide/file-structure.md @@ -91,7 +91,7 @@ Angularコンポーネント、テンプレート、スタイルはここにあ | `app/app.component.html` | ルート `AppComponent` に関連付けられているHTMLテンプレートを定義します。 | | `app/app.component.css` | ルート `AppComponent` の基本CSSスタイルシートを定義します。 | | `app/app.component.spec.ts` | ルート `AppComponent` のユニットテストを定義します。 | -| `app/app.module.ts` | `AppModule` という名前のルートモジュールを定義し、Angularにアプリケーションの組み立て方法を指示します。最初は `AppComponent` のみを宣言しています。 アプリケーションにコンポーネントを追加すると、それらをここで宣言する必要があります。

      _Only generated when using the `--standalone` option._ | +| `app/app.module.ts` | `AppModule` という名前のルートモジュールを定義し、Angularにアプリケーションの組み立て方法を指示します。最初は `AppComponent` のみを宣言しています。 アプリケーションにコンポーネントを追加すると、それらをここで宣言する必要があります。

      _このファイルは `--standalone` オプションを使用した場合には生成されません。_ | ### アプリケーション設定ファイル {@a application-configuration-files} diff --git a/aio-ja/content/guide/hierarchical-dependency-injection.en.md b/aio-ja/content/guide/hierarchical-dependency-injection.en.md index 842803ff26..c9efa0123b 100644 --- a/aio-ja/content/guide/hierarchical-dependency-injection.en.md +++ b/aio-ja/content/guide/hierarchical-dependency-injection.en.md @@ -47,7 +47,7 @@ Angular has two injector hierarchies: The `ModuleInjector` can be configured in one of two ways by using: -* The `@Injectable()` `providedIn` property to refer to `@NgModule()`, or `root` +* The `@Injectable()` `providedIn` property to refer to `root` or `platform` * The `@NgModule()` `providers` array
      @@ -273,7 +273,7 @@ class Person { ### `@Host()` `@Host()` lets you designate a component as the last stop in the injector tree when searching for providers. -Even if there is a service instance further up the tree, Angular won't continue looking +Even if there is a service instance further up the tree, Angular won't continue looking. Use `@Host()` as follows: @@ -476,7 +476,7 @@ In the logical tree, this is represented as follows: <app-child @Provide(FlowerService="🌻") @Inject(FlowerService)=>"🌻"> <!-- search ends here --> <#VIEW> <!-- search starts here --> - <h2>Parent Component</h2> + <h2>Child Component</h2> <p>Emoji from FlowerService: {{flower.emoji}} (🌻)</p> </#VIEW> </app-child> @@ -643,13 +643,13 @@ The `AnimalService` in the logical tree would look like this: <p>Emoji from AnimalService: {{animal.emoji}} (🐳)</p> </app-inspector> </div> - + + <app-inspector> + <#VIEW @Inject(AnimalService) animal=>"🐶"> + <p>Emoji from AnimalService: {{animal.emoji}} (🐶)</p> + </#VIEW> + </app-inspector> </#VIEW> - <app-inspector> - <#VIEW> - <p>Emoji from AnimalService: {{animal.emoji}} (🐶)</p> - </#VIEW> - </app-inspector> </app-child> </#VIEW> </app-root> @@ -852,7 +852,7 @@ export class ChildComponent { -When `@Host()` and `SkipSelf()` were applied to the `FlowerService`, which is in the `providers` array, the result was `null` because `@SkipSelf()` starts its search in the `` injector, but `@Host()` stops searching at `<#VIEW>` —where there is no `FlowerService` +When `@Host()` and `@SkipSelf()` were applied to the `FlowerService`, which is in the `providers` array, the result was `null` because `@SkipSelf()` starts its search in the `` injector, but `@Host()` stops searching at `<#VIEW>` —where there is no `FlowerService` In the logical tree, you can see that the `FlowerService` is visible in ``, not its `<#VIEW>`. However, the `AnimalService`, which is provided in the `AppComponent` `viewProviders` array, is visible. diff --git a/aio-ja/content/guide/hierarchical-dependency-injection.md b/aio-ja/content/guide/hierarchical-dependency-injection.md index 46800d2cfa..e18397eac8 100644 --- a/aio-ja/content/guide/hierarchical-dependency-injection.md +++ b/aio-ja/content/guide/hierarchical-dependency-injection.md @@ -50,7 +50,7 @@ Angularには2つのインジェクター階層があります。 `ModuleInjector`は、次の2ついずれかの方法で設定できます: * `@Injectable()`の`providedIn`プロパティを使用して、 -`@NgModule()`、または`root`を参照します。 +`root`、または`platform`を参照します。 * `@NgModule()`の`providers`配列を使用します。
      @@ -602,7 +602,7 @@ Emoji from FlowerService: 🌻 "🌻"> <#VIEW> -

      Parent Component

      +

      Child Component

      Emoji from FlowerService: {{flower.emoji}} (🌻)

       @@ -811,13 +811,13 @@ Emoji from AnimalService: 🐶 <p>Emoji from AnimalService: {{animal.emoji}} (🐳)</p> </app-inspector> </div> - + + <app-inspector> + <#VIEW @Inject(AnimalService) animal=>"🐶"> + <p>Emoji from AnimalService: {{animal.emoji}} (🐶)</p> + </#VIEW> + </app-inspector> </#VIEW> - <app-inspector> - <#VIEW> - <p>Emoji from AnimalService: {{animal.emoji}} (🐶)</p> - </#VIEW> - </app-inspector> </app-child> </#VIEW> </app-root> @@ -1029,12 +1029,8 @@ export class ChildComponent { } ``` -`@Host()`と`@SkipSelf()`が`providers` -配列にある`AnimalService`に適用された場合、 -`@SkipSelf()`は``インジェクターで検索を開始しますが、 -`@Host()`は検索を`<#VIEW>`(には`AnimalService`がありません)で停止するため、結果は`null`になります。 -論理ツリーでは、 -`AnimalService`が`<#VIEW>`ではなく``内で可視化されていることがわかります。 +`@Host()`と`@SkipSelf()`が`providers`配列にある`AnimalService`に適用された場合、`@SkipSelf()`は``インジェクターで検索を開始しますが、`@Host()`は検索を`<#VIEW>`(には`AnimalService`がありません)で停止するため、結果は`null`になります。 +論理ツリーでは、`AnimalService`が`<#VIEW>`ではなく``内で可視化されていることがわかります。 ただし、`AppComponent`の`viewProviders` 配列で提供される`AnimalService`は可視化されます。 diff --git a/aio-ja/content/guide/i18n-common-prepare.en.md b/aio-ja/content/guide/i18n-common-prepare.en.md index 7d51325a8b..352bb50269 100644 --- a/aio-ja/content/guide/i18n-common-prepare.en.md +++ b/aio-ja/content/guide/i18n-common-prepare.en.md @@ -196,8 +196,8 @@ The following code example shows the value of the [`$localize`][AioApiLocalizeIn
      -
      - How meanings control text extraction and merges +
      +How meanings control text extraction and merges
      The Angular extraction tool generates a translation unit entry for each `i18n` attribute in a template. @@ -306,9 +306,7 @@ For more information about pluralization categories, see [Choosing plural catego
      - - -
      Background: Locales may not support some pluralization categories
      +
      Background: Locales may not support some pluralization categories
      Many locales don't support some of the pluralization categories. The default locale \(`en-US`\) uses a very simple `plural()` function that doesn't support the `few` pluralization category. diff --git a/aio-ja/content/guide/i18n-common-prepare.md b/aio-ja/content/guide/i18n-common-prepare.md index 20f28b660e..28b24d47a8 100644 --- a/aio-ja/content/guide/i18n-common-prepare.md +++ b/aio-ja/content/guide/i18n-common-prepare.md @@ -196,8 +196,8 @@ i18nメタデータはコロン\(`:`\)で囲まれ、翻訳元テキストの前
      -
      - テキスト抽出と結合を制御する方法 +
      +テキスト抽出と結合を制御する方法
      Angularの抽出ツールは、テンプレート内の`i18n`属性ごとに翻訳単位エントリを生成します。 @@ -306,9 +306,7 @@ other { default_quantity }
      - - -
      背景: ロケールはいくつかの複数形カテゴリをサポートしません
      +
      背景: ロケールはいくつかの複数形カテゴリをサポートしません
      多くのロケールでは、複数形カテゴリーのいくつかをサポートしていません。 デフォルトのロケール \(`en-US`\)は非常に単純な`plural()`関数を使用しており、`few`複数形カテゴリーをサポートしていません。 diff --git a/aio-ja/content/guide/image-directive.en.md b/aio-ja/content/guide/image-directive.en.md index 60bc285db3..3a8e169922 100644 --- a/aio-ja/content/guide/image-directive.en.md +++ b/aio-ja/content/guide/image-directive.en.md @@ -17,6 +17,8 @@ In addition to optimizing the loading of the LCP image, `NgOptimizedImage` enfor * Warning if `width` or `height` have been set incorrectly * Warning if the image will be visually distorted when rendered +**Note: Although the `NgOptimizedImage` directive was made a stable feature in Angular version 15, it has been backported and is available as a stable feature in versions 13.4.0 and 14.3.0 as well. ** + ## Getting Started #### Step 1: Import NgOptimizedImage @@ -75,7 +77,7 @@ In order to prevent [image-related layout shifts](https://web.dev/css-web-vitals -For **responsive images** (images which you've styled to grow and shrink relative to the viewport), the `width` and `height` attributes should be the instrinsic size of the image file. +For **responsive images** (images which you've styled to grow and shrink relative to the viewport), the `width` and `height` attributes should be the instrinsic size of the image file. For responsive images it's also important to [set a value for `sizes`.](#responsive-images) For **fixed size images**, the `width` and `height` attributes should reflect the desired rendered size of the image. The aspect ratio of these attributes should always match the intrinsic aspect ratio of the image. @@ -312,10 +314,33 @@ Note that in the above example, we've invented the 'roundedCorners' property nam +## Frequently Asked Questions + +### Does NgOptimizedImage support the `background-image` css property? +The NgOptimizedImage does not directly support the `background-image` css property, but it is designed to easily accommodate the use case of having an image as the background of another element. + +Here's a simple step-by-step process for migrating from `background-image` to `NgOptimizedImage`. For these steps, we'll refer to the element that has an image background as the "containing element": + +1) Remove the `background-image` style from the containing element. +2) Ensure that the containing element has `position: "relative"`, `position: "fixed"`, or `position: "absolute"`. +3) Create a new image element as a child of the containing element, using `ngSrc` to enable the `NgOptimizedImage` directive. +4) Give that element the `fill` attribute. Do not include a `height` and `width`. +5) If you believe this image might be your [LCP element](https://web.dev/lcp/), add the `priority` attribute to the image element. + +You can adjust how the background image fills the container as described in the [Using fill mode](#using-fill-mode) section. + +### Why can't I use `src` with `NgOptimizedImage`? +The `ngSrc` attribute was chosen as the trigger for NgOptimizedImage due to technical considerations around how images are loaded by the browser. NgOptimizedImage makes programmatic changes to the `loading` attribute--if the browser sees the `src` attribute before those changes are made, it will begin eagerly downloading the image file, and the loading changes will be ignored. + +### Can I use two different image domains in the same page? +The [image loaders](#configuring-an-image-loader-for-ngoptimizedimage) provider pattern is designed to be as simple as possible for the common use case of having only a single image CDN used within a component. However, it's still very possible to manage multiple image CDNs using a single provider. + +To do this, we recommend writing a [custom image loader](#custom-loaders) which uses the [`loaderParams` property](#the-loaderparams-property) to pass a flag that specifies which image CDN should be used, and then invokes the appropriate loader based on that flag. + -@reviewed 2022-11-07 +@reviewed 2023-07-18 diff --git a/aio-ja/content/guide/image-directive.md b/aio-ja/content/guide/image-directive.md index 9db9d71aab..309d0b32e5 100644 --- a/aio-ja/content/guide/image-directive.md +++ b/aio-ja/content/guide/image-directive.md @@ -19,6 +19,8 @@ LCP 画像の読み込みを最適化することに加えて、`NgOptimizedImag * `width` または `height` が正しく設定されていない場合に警告する * レンダリング時に画像が視覚的に歪む場合に警告する +**Note: Although the `NgOptimizedImage` directive was made a stable feature in Angular version 15, it has been backported and is available as a stable feature in versions 13.4.0 and 14.3.0 as well. ** + ## Getting Started #### Step 1: Import NgOptimizedImage @@ -77,7 +79,7 @@ In order to prevent [image-related layout shifts](https://web.dev/css-web-vitals -For **responsive images** (images which you've styled to grow and shrink relative to the viewport), the `width` and `height` attributes should be the instrinsic size of the image file. +For **responsive images** (images which you've styled to grow and shrink relative to the viewport), the `width` and `height` attributes should be the instrinsic size of the image file. For responsive images it's also important to [set a value for `sizes`.](#responsive-images) For **fixed size images**, the `width` and `height` attributes should reflect the desired rendered size of the image. The aspect ratio of these attributes should always match the intrinsic aspect ratio of the image. @@ -313,10 +315,33 @@ Note that in the above example, we've invented the 'roundedCorners' property nam +## Frequently Asked Questions + +### Does NgOptimizedImage support the `background-image` css property? +The NgOptimizedImage does not directly support the `background-image` css property, but it is designed to easily accommodate the use case of having an image as the background of another element. + +Here's a simple step-by-step process for migrating from `background-image` to `NgOptimizedImage`. For these steps, we'll refer to the element that has an image background as the "containing element": + +1) Remove the `background-image` style from the containing element. +2) Ensure that the containing element has `position: "relative"`, `position: "fixed"`, or `position: "absolute"`. +3) Create a new image element as a child of the containing element, using `ngSrc` to enable the `NgOptimizedImage` directive. +4) Give that element the `fill` attribute. Do not include a `height` and `width`. +5) If you believe this image might be your [LCP element](https://web.dev/lcp/), add the `priority` attribute to the image element. + +You can adjust how the background image fills the container as described in the [Using fill mode](#using-fill-mode) section. + +### Why can't I use `src` with `NgOptimizedImage`? +The `ngSrc` attribute was chosen as the trigger for NgOptimizedImage due to technical considerations around how images are loaded by the browser. NgOptimizedImage makes programmatic changes to the `loading` attribute--if the browser sees the `src` attribute before those changes are made, it will begin eagerly downloading the image file, and the loading changes will be ignored. + +### Can I use two different image domains in the same page? +The [image loaders](#configuring-an-image-loader-for-ngoptimizedimage) provider pattern is designed to be as simple as possible for the common use case of having only a single image CDN used within a component. However, it's still very possible to manage multiple image CDNs using a single provider. + +To do this, we recommend writing a [custom image loader](#custom-loaders) which uses the [`loaderParams` property](#the-loaderparams-property) to pass a flag that specifies which image CDN should be used, and then invokes the appropriate loader based on that flag. + -@reviewed 2022-11-07 +@reviewed 2023-07-18 diff --git a/aio-ja/content/guide/inputs-outputs.en.md b/aio-ja/content/guide/inputs-outputs.en.md index 357322017e..6263110ba8 100644 --- a/aio-ja/content/guide/inputs-outputs.en.md +++ b/aio-ja/content/guide/inputs-outputs.en.md @@ -207,6 +207,33 @@ The property `currentItem` and the method `crossOffItem()` are both in the paren To combine property and event bindings using the banana-in-a-box syntax, `[()]`, see [Two-way Binding](guide/two-way-binding). +## Additional Configurations +### Configuring the child component input as required field + +To make `Input` property as required for a child component while passing values from parent component. first import `Input` and then decorate the property with `@Input({ required: true })`, as in the following example. + + + +Next, in the parent template add the following: + + + +If required inputs `property binding` in a child component are not specified in the parent component template will result a compile time error : + +
      +NG8008: Required input item from component ItemDetailMetadataComponent must be specified. +
      + +### Configuring the child component input with transform functions + +To transform an `Input` property from string to boolean to a child component while passing values from parent component. first import `booleanAttribute` and then decorate the property with `@Input({ transform: booleanAttribute })`, as in the following example. + + + + + +Similarly, you can use predefined functions from angular/core library to convert string to number as well, see `numberAttribute`. + diff --git a/aio-ja/content/guide/inputs-outputs.md b/aio-ja/content/guide/inputs-outputs.md index 3112371957..9eeee3067e 100644 --- a/aio-ja/content/guide/inputs-outputs.md +++ b/aio-ja/content/guide/inputs-outputs.md @@ -200,4 +200,37 @@ delete をクリックすると、子コンポーネントはイベント `delet banana-in-a-box 構文 `[()]` を使うことで、プロパティとイベントバインディングを合体させることができます。 詳しくは[双方向バインディング](guide/two-way-binding)をご覧ください。 -@reviewed 2021-09-17 +## Additional Configurations +### Configuring the child component input as required field + +To make `Input` property as required for a child component while passing values from parent component. first import `Input` and then decorate the property with `@Input({ required: true })`, as in the following example. + + + +Next, in the parent template add the following: + + + +If required inputs `property binding` in a child component are not specified in the parent component template will result a compile time error : + +
      +NG8008: Required input item from component ItemDetailMetadataComponent must be specified. +
      + +### Configuring the child component input with transform functions + +To transform an `Input` property from string to boolean to a child component while passing values from parent component. first import `booleanAttribute` and then decorate the property with `@Input({ transform: booleanAttribute })`, as in the following example. + + + + + +Similarly, you can use predefined functions from angular/core library to convert string to number as well, see `numberAttribute`. + + + + + + + +@reviewed 2022-02-28 diff --git a/aio-ja/content/guide/lifecycle-hooks.en.md b/aio-ja/content/guide/lifecycle-hooks.en.md index bd800810b2..864c150758 100644 --- a/aio-ja/content/guide/lifecycle-hooks.en.md +++ b/aio-ja/content/guide/lifecycle-hooks.en.md @@ -101,7 +101,7 @@ The `ngOnDestroy()` method is also the time to notify another part of the applic ### DestroyRef -In addition to to `ngOnDestroy()`, you can inject Angular's `DestroyRef` and register callback functions to be called when the enclosing context is destroyed. This can be useful for building reusable utilities that require cleanup. +In addition to `ngOnDestroy()`, you can inject Angular's `DestroyRef` and register callback functions to be called when the enclosing context is destroyed. This can be useful for building reusable utilities that require cleanup. Register a callback with the `DestroyRef`: @@ -136,7 +136,98 @@ When using RxJS Observables in components or directives, you may want to complet data$ = http.get('...').pipe(takeUntilDestroyed()); ``` -By default, `takeUntilDestroyed` must be called in an injection context so that it can access `DestroyRef`. If an injection context isn't available, you can explicitly provide a `DestroyRef`. +By default, `takeUntilDestroyed` must be called in an [injection context](/guide/dependency-injection-context) so that it can access `DestroyRef`. If an injection context isn't available, you can explicitly provide a `DestroyRef`. + +## Reading and writing the DOM + +Sometimes it's necessary to use browser-only APIs to manually read or write the DOM. This can be challenging to do with the [lifecycle events](#lifecycle-event-sequence) above, as they will also run during [server-side rendering and pre-rendering](guide/glossary#server-side-rendering). For this purpose, Angular provides `afterRender` and `afterNextRender`. These functions can be used unconditionally, but will only have an effect on the browser. Both functions accept a callback that will run after the next [change detection](/guide/glossary#change-detection) cycle (including any nested cycles) has completed. + +
      + +`afterRender` and `afterNextRender` are available for [developer preview](/guide/releases#developer-preview). They are ready for you to try, but they might change before they are stable. + +
      + +| Function | Purpose | Timing | +| ------ | ------- | ------ | +| `afterNextRender` | Perform one-time initialization, or observe a single, specific change to the DOM.
      As a rule of thumb, you should use `afterRender` instead if you need to manually read or write any layout data such as size or location.
      See details in [One-time initialization](#one-time-initialization) in this document. | _Once_ after the next change detection cycle. | +| `afterRender` | Synchronize state with the DOM. See details in [Handling synchronization](#handling-synchronization) in this document. | After _every_ change detection cycle that follows. | + +### One-time initialization + +Generally, you will want to use `afterNextRender` to perform any one-time initialization, such as for a third-party library, or for browser-only APIs. + +```ts +@Component({ + selector: 'my-chart-cmp', + template: `
      {{ ... }}
      `, +}) +export class MyChartCmp { + @ViewChild('chart') chartRef: ElementRef; + chart: MyChart|null; + + constructor() { + afterNextRender(() => { + this.chart = new MyChart(this.chartRef.nativeElement); + }); + } +} +``` + +Instead of attempting to recreate their behaviors with `afterRender`, you should prefer to use built-in browser APIs like `ResizeObserver` and `IntersectionObserver` wherever possible. You can use `afterNextRender` to safely initialize such APIs on the browser only. + +```ts +@Component({ + selector: 'my-cmp', + template: `{{ ... }}`, +}) +export class MyComponent { + resizeObserver: ResizeObserver|null = null; + @ViewChild('content') contentRef: ElementRef; + + constructor() { + afterNextRender(() => { + this.resizeObserver = new ResizeObserver(() => { + console.log('Content was resized'); + }); + + this.resizeObserver.observe(this.contentRef.nativeElement); + }); + } + + ngOnDestroy() { + this.resizeObserver?.disconnect(); + this.resizeObserver = null; + } +} +``` + +
      + +As a rule of thumb, `afterNextRender` should be used to observe _discrete_ changes to the DOM, such as element creation or deletion. For manually reading or writing data that tends to change frequently, such as size or location, you should generally prefer to use `afterRender` instead. + +
      + +### Handling synchronization + +As an escape hatch for when the browser does not provide a better API to do so, you can use `afterRender` to perform any additional read or writes to the DOM every time Angular finishes mutating it. + +```ts +@Component({ + selector: 'my-cmp', + template: `{{ ... }}`, +}) +export class MyComponent { + @ViewChild('content') contentRef: ElementRef; + + constructor() { + afterRender(() => { + const elem = this.contentRef.nativeElement; + console.log(`content position: (${elem.offsetLeft}, ${elem.offsetTop})`); + }); + } +} +``` ## General examples diff --git a/aio-ja/content/guide/lifecycle-hooks.md b/aio-ja/content/guide/lifecycle-hooks.md index d3a9df0e5a..ee5a8bd951 100644 --- a/aio-ja/content/guide/lifecycle-hooks.md +++ b/aio-ja/content/guide/lifecycle-hooks.md @@ -14,7 +14,7 @@ Angular は実行中にインスタンスを作成、更新、破棄するため * [TypeScript プログラミング](https://www.typescriptlang.org/) * [Angularの概念](guide/architecture "Introduction to fundamental app-design concepts") で説明されている Angular アプリケーションの設計の基礎。 -{@a hooks-overview} + ## ライフサイクルイベントへの応答 @@ -375,7 +375,98 @@ When using RxJS Observables in components or directives, you may want to complet data$ = http.get('...').pipe(takeUntilDestroyed()); ``` -By default, `takeUntilDestroyed` must be called in an injection context so that it can access `DestroyRef`. If an injection context isn't available, you can explicitly provide a `DestroyRef`. +By default, `takeUntilDestroyed` must be called in an [injection context](/guide/dependency-injection-context) so that it can access `DestroyRef`. If an injection context isn't available, you can explicitly provide a `DestroyRef`. + +## Reading and writing the DOM + +Sometimes it's necessary to use browser-only APIs to manually read or write the DOM. This can be challenging to do with the [lifecycle events](#lifecycle-event-sequence) above, as they will also run during [server-side rendering and pre-rendering](guide/glossary#server-side-rendering). For this purpose, Angular provides `afterRender` and `afterNextRender`. These functions can be used unconditionally, but will only have an effect on the browser. Both functions accept a callback that will run after the next [change detection](/guide/glossary#change-detection) cycle (including any nested cycles) has completed. + +
      + +`afterRender` and `afterNextRender` are available for [developer preview](/guide/releases#developer-preview). They are ready for you to try, but they might change before they are stable. + +
      + +| Function | Purpose | Timing | +| ------ | ------- | ------ | +| `afterNextRender` | Perform one-time initialization, or observe a single, specific change to the DOM.
      As a rule of thumb, you should use `afterRender` instead if you need to manually read or write any layout data such as size or location.
      See details in [One-time initialization](#one-time-initialization) in this document. | _Once_ after the next change detection cycle. | +| `afterRender` | Synchronize state with the DOM. See details in [Handling synchronization](#handling-synchronization) in this document. | After _every_ change detection cycle that follows. | + +### One-time initialization + +Generally, you will want to use `afterNextRender` to perform any one-time initialization, such as for a third-party library, or for browser-only APIs. + +```ts +@Component({ + selector: 'my-chart-cmp', + template: `
      {{ ... }}
      `, +}) +export class MyChartCmp { + @ViewChild('chart') chartRef: ElementRef; + chart: MyChart|null; + + constructor() { + afterNextRender(() => { + this.chart = new MyChart(this.chartRef.nativeElement); + }); + } +} +``` + +Instead of attempting to recreate their behaviors with `afterRender`, you should prefer to use built-in browser APIs like `ResizeObserver` and `IntersectionObserver` wherever possible. You can use `afterNextRender` to safely initialize such APIs on the browser only. + +```ts +@Component({ + selector: 'my-cmp', + template: `{{ ... }}`, +}) +export class MyComponent { + resizeObserver: ResizeObserver|null = null; + @ViewChild('content') contentRef: ElementRef; + + constructor() { + afterNextRender(() => { + this.resizeObserver = new ResizeObserver(() => { + console.log('Content was resized'); + }); + + this.resizeObserver.observe(this.contentRef.nativeElement); + }); + } + + ngOnDestroy() { + this.resizeObserver?.disconnect(); + this.resizeObserver = null; + } +} +``` + +
      + +As a rule of thumb, `afterNextRender` should be used to observe _discrete_ changes to the DOM, such as element creation or deletion. For manually reading or writing data that tends to change frequently, such as size or location, you should generally prefer to use `afterRender` instead. + +
      + +### Handling synchronization + +As an escape hatch for when the browser does not provide a better API to do so, you can use `afterRender` to perform any additional read or writes to the DOM every time Angular finishes mutating it. + +```ts +@Component({ + selector: 'my-cmp', + template: `{{ ... }}`, +}) +export class MyComponent { + @ViewChild('content') contentRef: ElementRef; + + constructor() { + afterRender(() => { + const elem = this.contentRef.nativeElement; + console.log(`content position: (${elem.offsetLeft}, ${elem.offsetTop})`); + }); + } +} +``` ## 一般的な例 diff --git a/aio-ja/content/guide/npm-packages.en.md b/aio-ja/content/guide/npm-packages.en.md index d1e555b96c..5cd097ee34 100644 --- a/aio-ja/content/guide/npm-packages.en.md +++ b/aio-ja/content/guide/npm-packages.en.md @@ -68,7 +68,7 @@ For a complete list of Angular packages, see the [API reference](api?type=packag | Package name | Details | |:--- |:--- | | [`@angular/animations`](api/animations) | Angular's animations library makes it easy to define and apply animation effects such as page and list transitions. For more information, see the [Animations guide](guide/animations). | -| [`@angular/common`](api/common) | The commonly-needed services, pipes, and directives provided by the Angular team. The [`HttpClientModule`](api/common/http/HttpClientModule) is also here, in the [`@angular/common/http`](api/common/http) subfolder. For more information, see the [HttpClient guide](guide/http). | +| [`@angular/common`](api/common) | The commonly-needed services, pipes, and directives provided by the Angular team. The [`HttpClientModule`](api/common/http/HttpClientModule) is also here, in the [`@angular/common/http`](api/common/http) subfolder. For more information, see the [HttpClient guide](guide/understanding-communicating-with-http). | | `@angular/compiler` | Angular's template compiler. It understands templates and can convert them to code that makes the application run and render. Typically you don't interact with the compiler directly; rather, you use it indirectly using `platform-browser-dynamic` when JIT compiling in the browser. For more information, see the [Ahead-of-time Compilation guide](guide/aot-compiler). | | [`@angular/core`](api/core) | Critical runtime parts of the framework that are needed by every application. Includes all metadata decorators, `Component`, `Directive`, dependency injection, and the component lifecycle hooks. | | [`@angular/forms`](api/forms) | Support for both [template-driven](guide/forms) and [reactive forms](guide/reactive-forms). For information about choosing the best forms approach for your app, see [Introduction to forms](guide/forms-overview). | diff --git a/aio-ja/content/guide/npm-packages.md b/aio-ja/content/guide/npm-packages.md index b700b97d97..57e16fae05 100644 --- a/aio-ja/content/guide/npm-packages.md +++ b/aio-ja/content/guide/npm-packages.md @@ -66,7 +66,7 @@ Angularのパッケージの完全な一覧は、[API reference](api?type=packag パッケージ名 | 説明 ---------------------------------------- | -------------------------------------------------- [**@angular/animations**](api/animations) | Angularのアニメーションライブラリを使用すると、ページやリストのトランジションといったアニメーション効果を簡単に定義して適用できます。詳しくは [Animations guide](guide/animations) を見てください。. -[**@angular/common**](api/common) | 一般的に必要なサービスやパイプ、ディレクティブがAngularチームによって提供されています。 [`HttpClientModule`](api/common/http/HttpClientModule) もここの [`@angular/common/http`](api/common/http) というサブフォルダにあります。詳しくは [HttpClient guide](guide/http) を見てください。 +[**@angular/common**](api/common) | 一般的に必要なサービスやパイプ、ディレクティブがAngularチームによって提供されています。 [`HttpClientModule`](api/common/http/HttpClientModule) もここの [`@angular/common/http`](api/common/http) というサブフォルダにあります。詳しくは [HttpClient guide](guide/understanding-communicating-with-http) を見てください。 **@angular/compiler** | Angularのテンプレートのコンパイラです。テンプレートを解釈し、アプリケーションが実行・表示可能なコードに変換します。 通常はコンパイラに直接触れないでください。そうではなくブラウザ上でJITコンパイルするときに `platform-browser-dynamic` を通して間接的に使用します。詳しくは [Ahead-of-time Compilation guide](guide/aot-compiler)を見てください。 [**@angular/core**](api/core) | すべてのアプリケーションに必要とされるフレームワークの重要なランタイム部分です。すべてのメタデータデコレーター、`Component` 、 `Directive `、依存性の注入、コンポーネントのライフサイクルフックを含みます。 [**@angular/forms**](api/forms) | [テンプレート駆動のフォーム](guide/forms)と[リアクティブフォーム](guide/reactive-forms)の両方をサポートします。アプリケーションに最適なフォームアプローチの選択についての情報は [Introduction to forms](guide/forms-overview) を見てください。 diff --git a/aio-ja/content/guide/releases.en.md b/aio-ja/content/guide/releases.en.md index f1c43e9ce7..10014c67b3 100644 --- a/aio-ja/content/guide/releases.en.md +++ b/aio-ja/content/guide/releases.en.md @@ -113,7 +113,7 @@ Approximate dates are offered as general guidance and are subject to change. | Version | Date | |:--------|:-------------------| | v16.1 | Week of 2023-06-12 | -| v16.2 | Week of 2023-07-24 | +| v16.2 | Week of 2023-08-07 | | v17.0 | Week of 2023-11-06 | ### Support window diff --git a/aio-ja/content/guide/releases.md b/aio-ja/content/guide/releases.md index bcda07be74..8f95271293 100644 --- a/aio-ja/content/guide/releases.md +++ b/aio-ja/content/guide/releases.md @@ -105,7 +105,7 @@ Angularプロジェクトを最新バージョンにアップデートする方 | Version | Date | |:--------|:-------------------| | v16.1 | Week of 2023-06-12 | -| v16.2 | Week of 2023-07-24 | +| v16.2 | Week of 2023-08-07 | | v17.0 | Week of 2023-11-06 | ### サポート期間 {@a support-window} diff --git a/aio-ja/content/guide/router-tutorial-toh.en.md b/aio-ja/content/guide/router-tutorial-toh.en.md index bbdfa275f9..28f3939ecb 100644 --- a/aio-ja/content/guide/router-tutorial-toh.en.md +++ b/aio-ja/content/guide/router-tutorial-toh.en.md @@ -578,6 +578,8 @@ Follow these steps: * Change the component class name to `HeroListComponent`. * Change the `selector` to `app-hero-list`. + * Change the `templateUrl` to `./hero-list.component.html`. + * Change the `styleUrls` to `./hero-list.component.css`.
      diff --git a/aio-ja/content/guide/router-tutorial-toh.md b/aio-ja/content/guide/router-tutorial-toh.md index 981fc92f5b..95dcb2fcfb 100644 --- a/aio-ja/content/guide/router-tutorial-toh.md +++ b/aio-ja/content/guide/router-tutorial-toh.md @@ -654,6 +654,8 @@ ng generate module my-module --routing * コンポーネントのクラス名を `HeroListComponent` に変更します。 * `selector` を `app-hero-list` に変更します。 + * `templateUrl`を`./hero-list.component.html`に変更します。 + * `styleUrls`を`./hero-list.component.css`に変更します。
      diff --git a/aio-ja/content/guide/schematics-authoring.en.md b/aio-ja/content/guide/schematics-authoring.en.md index 2c9ba52539..84a601e31a 100644 --- a/aio-ja/content/guide/schematics-authoring.en.md +++ b/aio-ja/content/guide/schematics-authoring.en.md @@ -214,7 +214,7 @@ By using the long form, the schematic can provide more explicit formatting of th { "value": "css", "label": "CSS" }, { "value": "scss", "label": "SCSS [ https://sass-lang.com/documentation/syntax#scss ]" }, { "value": "sass", "label": "Sass [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]" }, - { "value": "less", "label": "Less [ http://lesscss.org/ ]" } + { "value": "less", "label": "Less [ https://lesscss.org/ ]" } ] }, }, diff --git a/aio-ja/content/guide/schematics-authoring.md b/aio-ja/content/guide/schematics-authoring.md index 8716106c60..f6524831eb 100644 --- a/aio-ja/content/guide/schematics-authoring.md +++ b/aio-ja/content/guide/schematics-authoring.md @@ -206,7 +206,7 @@ Schematic *prompts* は、ユーザー操作を Schematics 実行に導入しま { "value": "css", "label": "CSS" }, { "value": "scss", "label": "SCSS [ https://sass-lang.com/documentation/syntax#scss ]" }, { "value": "sass", "label": "Sass [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]" }, - { "value": "less", "label": "Less [ http://lesscss.org/ ]" } + { "value": "less", "label": "Less [ https://lesscss.org/ ]" } ] }, }, diff --git a/aio-ja/content/guide/security.en.md b/aio-ja/content/guide/security.en.md index d150ea1e17..5241796de0 100644 --- a/aio-ja/content/guide/security.en.md +++ b/aio-ja/content/guide/security.en.md @@ -13,7 +13,7 @@ You can run the in Stackblitz and download the cod
      Reporting vulnerabilities
      -Angular is part of Google [Open Source Software Vulnerability Reward Program](https://bughunters.google.com/about/rules/6521337925468160/google-open-source-software-vulnerability-reward-program-rules), for vulnerabilities in Angular please submit your report [here](https://bughunters.google.com/report). +Angular is part of Google [Open Source Software Vulnerability Reward Program](https://bughunters.google.com/about/rules/6521337925468160/google-open-source-software-vulnerability-reward-program-rules). [For vulnerabilities in Angular, please submit your report at https://bughunters.google.com](https://bughunters.google.com/report). For more information about how Google handles security issues, see [Google's security philosophy](https://www.google.com/about/appsecurity). @@ -344,7 +344,7 @@ That means only your application can read this cookie token and set the custom h The malicious code on `evil.com` can't. Angular's `HttpClient` has built-in support for the client-side half of this technique. -Read about it more in the [HttpClient guide](guide/http#security-xsrf-protection). +Read about it more in the [HttpClient guide](guide/http-security-xsrf-protection). For information about CSRF at the Open Web Application Security Project \(OWASP\), see [Cross-Site Request Forgery (CSRF)](https://owasp.org/www-community/attacks/csrf) and [Cross-Site Request Forgery (CSRF) Prevention Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html). The Stanford University paper [Robust Defenses for Cross-Site Request Forgery](https://seclab.stanford.edu/websec/csrf/csrf.pdf) is a rich source of detail. diff --git a/aio-ja/content/guide/security.md b/aio-ja/content/guide/security.md index 6c65483fb5..b576e3ef15 100644 --- a/aio-ja/content/guide/security.md +++ b/aio-ja/content/guide/security.md @@ -13,7 +13,7 @@ Angularでの対応について説明します。認証や認可などアプリ
      脆弱性の報告
      -Angular is part of Google [Open Source Software Vulnerability Reward Program](https://bughunters.google.com/about/rules/6521337925468160/google-open-source-software-vulnerability-reward-program-rules), for vulnerabilities in Angular please submit your report [here](https://bughunters.google.com/report). +AngularはGoogleの [Open Source Software Vulnerability Reward Program](https://bughunters.google.com/about/rules/6521337925468160/google-open-source-software-vulnerability-reward-program-rules)の対象です。[Angularの脆弱性については、https://bughunters.google.com からレポートを提出してください](https://bughunters.google.com/report)。 セキュリティに関する問題を Google がどのように扱うかは[Google's security philosophy](https://www.google.com/about/appsecurity/) を参照してください。 @@ -341,7 +341,7 @@ Cookieが設定されているWebサイトのコードだけが、そのサイ つまり、アプリケーションだけがこのCookieトークンを読み取り、カスタムヘッダーを設定できます。 `evil.com`の悪意のあるコードにはできません。 -Angular の `HttpClient` モジュールはこれらのクライアント側の処理をサポートしています。詳しくは [HttpClient guide](/guide/http#security-xsrf-protection) の章を参照してください。 +Angular の `HttpClient` モジュールはこれらのクライアント側の処理をサポートしています。詳しくは [HttpClientガイド](/guide/http-security-xsrf-protection) の章を参照してください。 CSRFについてはオープンWebアプリケーションセキュリティプロジェクト（OWASP）の、 [Cross-Site Request Forgery (CSRF)](https://owasp.org/www-community/attacks/csrf) および diff --git a/aio-ja/content/guide/signals.en.md b/aio-ja/content/guide/signals.en.md index afac47ca4b..fe454794db 100644 --- a/aio-ja/content/guide/signals.en.md +++ b/aio-ja/content/guide/signals.en.md @@ -65,7 +65,7 @@ const doubleCount: Signal = computed(() => count() * 2); The `doubleCount` signal depends on `count`. Whenever `count` updates, Angular knows that anything which depends on either `count` or `doubleCount` needs to update as well. -#### Computeds are both lazily evaluated and memoized +#### Computed signals are both lazily evaluated and memoized `doubleCount`'s derivation function does not run to calculate its value until the first time `doubleCount` is read. Once calculated, this value is cached, and future reads of `doubleCount` will return the cached value without recalculating. @@ -123,7 +123,7 @@ Effects always run **at least once.** When an effect runs, it tracks any signal Effects always execute **asynchronously**, during the change detection process. -### Uses for effects +### Use cases for effects Effects are rarely needed in most application code, but may be useful in specific circumstances. Here are some examples of situations where an `effect` might be a good solution: @@ -140,7 +140,7 @@ Because of these risks, setting signals is disallowed by default in effects, but ### Injection context -By default, registering a new effect with the `effect()` function requires an "injection context" (access to the `inject` function). The easiest way to provide this is to call `effect` within a component, directive, or service `constructor`: +By default, registering a new effect with the `effect()` function requires an [injection context](/guide/dependency-injection-context) (access to the `inject` function). The easiest way to provide this is to call `effect` within a component, directive, or service `constructor`: ```ts @Component({...}) @@ -263,3 +263,5 @@ effect((onCleanup) => { }); }); ``` + +@reviewed 2023-06-21 diff --git a/aio-ja/content/guide/signals.md b/aio-ja/content/guide/signals.md index d961529ad9..e83ad19b2f 100644 --- a/aio-ja/content/guide/signals.md +++ b/aio-ja/content/guide/signals.md @@ -123,7 +123,7 @@ Effectは**少なくとも1回は**必ず実行される。Effect が実行さ Effectは常に**非同期的**に、変更検知のプロセス中に実行されます。 -### Effectの用途 +### Effectのユースケース Effect は、大部分のアプリケーションコードではほとんど必要とされませんが、特定の状況下では役に立つことがあります。以下は、`effect`がよい解決策となるような状況の例です： @@ -140,7 +140,7 @@ Effect は、大部分のアプリケーションコードではほとんど必 ### インジェクションコンテキスト -デフォルトでは、`effect()`関数で新しいエフェクトを登録するには、「インジェクションコンテキスト」（`inject`関数へのアクセス）が必要です。これを提供するもっとも簡単な方法は、コンポーネント、ディレクティブ、またはサービスの `constructor` の中で `effect` を呼び出すことです： +デフォルトでは、`effect()`関数で新しいエフェクトを登録するには、「[インジェクションコンテキスト](/guide/dependency-injection-context)」（`inject`関数へのアクセス）が必要です。これを提供するもっとも簡単な方法は、コンポーネント、ディレクティブ、またはサービスの `constructor` の中で `effect` を呼び出すことです： ```ts @Component({...}) @@ -263,3 +263,5 @@ effect((onCleanup) => { }); }); ``` + +@reviewed 2023-06-21 diff --git a/aio-ja/content/guide/standalone-components.en.md b/aio-ja/content/guide/standalone-components.en.md index 6909a380b7..7fba5c5f6f 100644 --- a/aio-ja/content/guide/standalone-components.en.md +++ b/aio-ja/content/guide/standalone-components.en.md @@ -273,7 +273,7 @@ bootstrapApplication(PhotoAppComponent, { }); ``` -The new bootstrap API gives us back the means of configuring “module injectors” without using `NgModule`s. In this sense, the “module” part of the name is no longer relevant and we’ve decided to introduce a new term: “environment injectors”. +The new bootstrap API gives us back the means of configuring “module injectors” without using `NgModule`s. In this sense, the “module” part of the name is no longer relevant, and we’ve decided to introduce a new term: “environment injectors”. Environment injectors can be configured using one of the following: @@ -320,7 +320,7 @@ class DatePickerComponent { @NgModule({         declarations: [DatePickerComponent], -        exports: [DatePickerComponent] +        exports: [DatePickerComponent],         providers: [CalendarService], }) class DatePickerModule { @@ -338,7 +338,7 @@ class DateModalComponent { In the above example, the component `DateModalComponent` is standalone - it can be consumed directly and has no NgModule which needs to be imported in order to use it. However, `DateModalComponent` has a dependency, the `DatePickerComponent,` which is imported via its NgModule (the `DatePickerModule`). This NgModule may declare providers (in this case: `CalendarService`) which are required for the `DatePickerComponent` to function correctly. -When Angular creates a standalone component, it needs to know that the current injector has all of the necessary services for the standalone component's dependencies, including those based on NgModules. To guarantee that, in some cases Angular will create a new "standalone injector" as a child of the current environment injector. Today, this happens for all bootstrapped standalone components: it will be a child of the root environment injector. The same rule applies to the dynamically created (for example, by the router or the `ViewContainerRef` API) standalone components. +When Angular creates a standalone component, it needs to know that the current injector has all the necessary services for the standalone component's dependencies, including those based on NgModules. To guarantee that, in some cases Angular will create a new "standalone injector" as a child of the current environment injector. Today, this happens for all bootstrapped standalone components: it will be a child of the root environment injector. The same rule applies to the dynamically created (for example, by the router or the `ViewContainerRef` API) standalone components. A separate standalone injector is created to ensure that providers imported by a standalone component are “isolated” from the rest of the application. This lets us think of standalone components as truly self-contained pieces that can’t “leak” their implementation details to the rest of the application. diff --git a/aio-ja/content/guide/standalone-components.md b/aio-ja/content/guide/standalone-components.md index d974823f15..10577221b0 100644 --- a/aio-ja/content/guide/standalone-components.md +++ b/aio-ja/content/guide/standalone-components.md @@ -321,7 +321,7 @@ class DatePickerComponent { @NgModule({         declarations: [DatePickerComponent], -        exports: [DatePickerComponent] +        exports: [DatePickerComponent],         providers: [CalendarService], }) class DatePickerModule { diff --git a/aio-ja/content/guide/testing-components-scenarios.en.md b/aio-ja/content/guide/testing-components-scenarios.en.md index 192398a9fe..19e30798c5 100644 --- a/aio-ja/content/guide/testing-components-scenarios.en.md +++ b/aio-ja/content/guide/testing-components-scenarios.en.md @@ -605,7 +605,7 @@ Each symbol \(`-`, `x`, `|`, `#`\) marks the passing of one frame. A *cold* observable doesn't produce values until you subscribe to it. Most of your application observables are cold. -All [*HttpClient*](guide/http) methods return cold observables. +All [*HttpClient*](guide/understanding-communicating-with-http) methods return cold observables. A *hot* observable is already producing values *before* you subscribe to it. The [`Router.events`](api/router/Router#events) observable, which reports router activity, is a *hot* observable. diff --git a/aio-ja/content/guide/testing-components-scenarios.md b/aio-ja/content/guide/testing-components-scenarios.md index 8559838b83..731bd67e1b 100644 --- a/aio-ja/content/guide/testing-components-scenarios.md +++ b/aio-ja/content/guide/testing-components-scenarios.md @@ -733,7 +733,7 @@ _マーブルフレーム_とは、テスト時間の仮想的な単位です。 {@a cold-observable} _コールド_ Observableはサブスクライブされるまで値を発行しません。 アプリケーションのObservableのほとんどはコールドです。 -すべての[_HttpClient_](guide/http)メソッドはコールドObservableを返します。 +すべての[_HttpClient_](guide/understanding-communicating-with-http)メソッドはコールドObservableを返します。 _ホット_ Observableは購読する_前_にすでに値を発行しています。 ルーターアクティビティを報告する[_Router.events_](api/router/Router#events)Observable、 diff --git a/aio-ja/content/guide/testing-services.en.md b/aio-ja/content/guide/testing-services.en.md index f5389e2a0d..852ea6f860 100644 --- a/aio-ja/content/guide/testing-services.en.md +++ b/aio-ja/content/guide/testing-services.en.md @@ -129,7 +129,7 @@ Although this testing guide follows the traditional style and the default [CLI s ## Testing HTTP services -Data services that make HTTP calls to remote servers typically inject and delegate to the Angular [`HttpClient`](guide/http) service for XHR calls. +Data services that make HTTP calls to remote servers typically inject and delegate to the Angular [`HttpClient`](guide/http-test-requests) service for XHR calls. You can test a data service with an injected `HttpClient` spy as you would test any service with a dependency. @@ -152,7 +152,7 @@ Extended interactions between a data service and the `HttpClient` can be complex The `HttpClientTestingModule` can make these testing scenarios more manageable. -While the *code sample* accompanying this guide demonstrates `HttpClientTestingModule`, this page defers to the [Http guide](guide/http#testing-http-requests), which covers testing with the `HttpClientTestingModule` in detail. +While the *code sample* accompanying this guide demonstrates `HttpClientTestingModule`, this page defers to the [Http guide](guide/http-test-requests), which covers testing with the `HttpClientTestingModule` in detail. diff --git a/aio-ja/content/guide/testing-services.md b/aio-ja/content/guide/testing-services.md index d05b8b7fc8..52c41a137d 100644 --- a/aio-ja/content/guide/testing-services.md +++ b/aio-ja/content/guide/testing-services.md @@ -170,7 +170,7 @@ _この代替アプローチ_を自身のプロジェクト内で採用するこ #### HTTPサービスをテストする リモートサーバーに対してHTTP呼び出しをするデータサービスは、通常、 -XHR呼び出しのためのAngularの[`HttpClient`](guide/http)サービスを注入して委譲します。 +XHR呼び出しのためのAngularの[`HttpClient`](guide/http-test-requests)サービスを注入して委譲します。 依存関係をもつ任意のサービスをテストするために、注入された`HttpClient`のスパイを使用して データサービスのテストができます。 @@ -201,4 +201,12 @@ Observableを_サブスクライブ_する必要があります。 このガイドに付属する_コードサンプル_では`HttpClientTestingModule`のデモをしますが、 このページでは`HttpClientTestingModule`を使用したテストの詳細をカバーをしている -[Httpガイド](guide/http#testing-http-requests)に先送りします。 +[Httpガイド](guide/http-test-requests)に先送りします。 + + + + + + + +@reviewed 2022-02-28 diff --git a/aio-ja/content/guide/what-is-angular.en.md b/aio-ja/content/guide/what-is-angular.en.md index 5a1861da40..acec418222 100644 --- a/aio-ja/content/guide/what-is-angular.en.md +++ b/aio-ja/content/guide/what-is-angular.en.md @@ -190,7 +190,7 @@ Some of the libraries available to you include: |:--- |:--- | | [Angular Router](guide/router) | Advanced client-side navigation and routing based on Angular components. Supports lazy-loading, nested routes, custom path matching, and more. | | [Angular Forms](guide/forms-overview) | Uniform system for form participation and validation. | -| [Angular HttpClient](guide/http) | Robust HTTP client that can power more advanced client-server communication. | +| [Angular HttpClient](guide/understanding-communicating-with-http) | Robust HTTP client that can power more advanced client-server communication. | | [Angular Animations](guide/animations) | Rich system for driving animations based on application state. | | [Angular PWA](guide/service-worker-intro) | Tools for building Progressive Web Applications \(PWA\) including a service worker and Web application manifest. | | [Angular Schematics](guide/schematics) | Automated scaffolding, refactoring, and update tools that simplify development at large scale. | diff --git a/aio-ja/content/guide/what-is-angular.md b/aio-ja/content/guide/what-is-angular.md index 3d4a2d4262..2aa7b46fac 100644 --- a/aio-ja/content/guide/what-is-angular.md +++ b/aio-ja/content/guide/what-is-angular.md @@ -172,7 +172,7 @@ Angular CLIの詳細については、[Angular CLIリファレンス](/cli)セ |:--- |:--- | | [Angular Router](guide/router) | Angularコンポーネントに基づく高度なクライアント側のナビゲーションとルーティング。遅延読み込み、ネストされたルート、カスタムパスマッチングなどをサポートします。 | | [Angular Forms](guide/forms-overview) | フォームへの介入と検証のための統一されたシステム。 | -| [Angular HttpClient](guide/http) | より高度なクライアント/サーバー通信を強化できる堅牢なHTTPクライアント。 | +| [Angular HttpClient](guide/understanding-communicating-with-http) | より高度なクライアント/サーバー通信を強化できる堅牢なHTTPクライアント。 | | [Angular Animations](guide/animations) | アプリケーションの状態に基づいてアニメーションを駆動するリッチなシステム。 | | [Angular PWA](guide/service-worker-intro) | Service WorkerやWebアプリケーションマニフェストを含むプログレッシブWebアプリケーション（PWA）を構築するためのツール。 | | [Angular Schematics](guide/schematics) | A大規模な開発を簡素化する自動化されたスキャフォールディング、リファクタリング、および更新ツール。 | From e489bb710b1e63d0aed67261b0aca1d8b71cf789 Mon Sep 17 00:00:00 2001 From: Suguru Inatomi Date: Wed, 16 Aug 2023 15:20:32 +0900 Subject: [PATCH 4/8] migrate medium changes --- aio-ja/content/guide/universal.en.md | 32 +++++----- aio-ja/content/guide/universal.md | 23 ++++--- aio-ja/content/guide/workspace-config.en.md | 20 +++--- aio-ja/content/guide/workspace-config.md | 6 ++ aio-ja/content/start/index.en.md | 13 +--- aio-ja/content/start/index.md | 11 +--- aio-ja/content/start/start-data.en.md | 2 +- aio-ja/content/start/start-data.md | 2 +- .../first-app/first-app-lesson-01.en.md | 43 +++++-------- .../tutorial/first-app/first-app-lesson-01.md | 34 ++++------ .../first-app/first-app-lesson-02.en.md | 54 ++++++---------- .../tutorial/first-app/first-app-lesson-02.md | 50 ++++++--------- .../first-app/first-app-lesson-03.en.md | 42 +++++-------- .../tutorial/first-app/first-app-lesson-03.md | 44 ++++++------- .../first-app/first-app-lesson-04.en.md | 29 +++------ .../tutorial/first-app/first-app-lesson-04.md | 31 +++------- .../first-app/first-app-lesson-05.en.md | 37 ++++------- .../tutorial/first-app/first-app-lesson-05.md | 35 ++++------- .../first-app/first-app-lesson-06.en.md | 29 +++------ .../tutorial/first-app/first-app-lesson-06.md | 33 ++++------ .../first-app/first-app-lesson-07.en.md | 37 ++++------- .../tutorial/first-app/first-app-lesson-07.md | 31 +++------- aio-ja/content/tutorial/first-app/index.en.md | 58 +++++------------ aio-ja/content/tutorial/first-app/index.md | 62 +++++-------------- .../tutorial/tour-of-heroes/toh-pt1.en.md | 2 +- .../tutorial/tour-of-heroes/toh-pt4.en.md | 4 +- .../tutorial/tour-of-heroes/toh-pt4.md | 2 +- .../tutorial/tour-of-heroes/toh-pt6.en.md | 2 +- 28 files changed, 275 insertions(+), 493 deletions(-) diff --git a/aio-ja/content/guide/universal.en.md b/aio-ja/content/guide/universal.en.md index 358081d19b..29cd2b943a 100644 --- a/aio-ja/content/guide/universal.en.md +++ b/aio-ja/content/guide/universal.en.md @@ -2,13 +2,13 @@ This guide describes **Angular Universal**, a technology that allows Angular to render applications on the server. -By default, Angular renders applications only in a *browser*. Angular Universal allows Angular to render an application on the *server*, generating *static* HTML contents, which represents an application state. Once the HTML contents is rendered in a browser, Angular bootstraps an application and reuses the information available in the server-generated HTML. +By default, Angular renders applications only in a *browser*. Angular Universal allows Angular to render an application on the *server*, generating *static* HTML content, which represents an application state. Once the HTML content is rendered in a browser, Angular bootstraps an application and reuses the information available in the server-generated HTML. -With server-side rendering an application generally renders in a browser faster, giving users a chance to view the application UI before it becomes fully interactive. See ([the "Why use Server-Side Rendering?" section](#why-do-it)) below for addition information. +With server-side rendering an application generally renders in a browser faster, giving users a chance to view the application UI before it becomes fully interactive. See the ["Why use Server-Side Rendering?"](#why-do-it) section below for additional information. Also for a more detailed look at different techniques and concepts surrounding SSR, check out this [article](https://developers.google.com/web/updates/2019/02/rendering-on-the-web). -You can enable server-side rendering in your Angular application using the `@nguniversal/express-engine` schematic as described below. +You can enable server-side rendering in your Angular application using the `@nguniversal/express-engine` package as described below.
      @@ -66,10 +66,10 @@ The command updates the application code to enable SSR and adds extra files to t
      - app.config.ts                   // < client-side application configuration (standalone app only) + app.config.ts                   // <-- client-side application configuration (standalone app only)
      - app.module.ts                 // < client-side application module (NgModule app only) + app.module.ts                 // <-- client-side application module (NgModule app only)
      @@ -226,9 +226,9 @@ Universal applications use the Angular `platform-server` package \(as opposed to server implementations of the DOM, `XMLHttpRequest`, and other low-level features that don't rely on a browser. The server \([Node.js Express](https://expressjs.com) in this guide's example\) passes client requests for application pages to the NgUniversal `ngExpressEngine`. -Under the hood, the render functions, while providing caching and other helpful utilities. +Under the hood, the engine renders the app, while also providing caching and other helpful utilities. -The render functions takes as inputs a *template* HTML page \(usually `index.html`\), and Angular *module* containing components or a function that when invoked returns a `Promise` that resolves to an `ApplicationRef`, and a *route* that determines which components to display. The route comes from the client's request to the server. +The render function takes as inputs a *template* HTML page \(usually `index.html`\), and an Angular *module* containing components. Alternatively, it can take a function that when invoked returns a `Promise` that resolves to an `ApplicationRef`, and a *route* that determines which components to display. The route comes from the client's request to the server. Each request results in the appropriate view for the requested route. The render function renders the view within the `` tag of the template, creating a finished HTML page for the client. @@ -279,8 +279,8 @@ This engine's `Promise` callback returns the rendered page to the web server, wh
      **NOTE**:
      -The basic behavior described below is handled automatically when using the NgUniversal Express schematic. -This is helpful when trying to understand the underlying behavior or replicate it without using the schematic. +The basic behavior described below is handled automatically when using the NgUniversal Express package. +This is helpful when trying to understand the underlying behavior or replicate it without using the package.
      @@ -298,12 +298,12 @@ Because you use routing, you can recognize the three types of requests and handl | Routing request types | Details | |:--- |:--- | -| Data request | Request URL that begins `/api`. | -| App navigation | Request URL with no file extension. | -| Static asset | All other requests. | +| Data request | Request URL that begins `/api` | +| App navigation | Request URL with no file extension | +| Static asset | All other requests | A Node.js Express server is a pipeline of middleware that filters and processes requests one after the other. -You configure the Node.js Express server pipeline with calls to `server.get()` like this one for data requests. +You configure the Node.js Express server pipeline with calls to `server.get()` like this one for data requests: @@ -317,7 +317,7 @@ In practice, you would remove that module and register your web API middleware o
      -The following code filters for request URLs with no extensions and treats them as navigation requests. +The following code filters for request URLs with no extensions and treats them as navigation requests: @@ -357,7 +357,7 @@ Now, on every HTTP request made as part of rendering the application on the serv |:--- |:--- | | npm run dev:ssr | Similar to [`ng serve`](cli/serve), which offers live reload during development, but uses server-side rendering. The application runs in watch mode and refreshes the browser after every change. This command is slower than the actual `ng serve` command. | | ng build && ng run app-name:server | Builds both the server script and the application in production mode. Use this command when you want to build the project for deployment. | -| npm run serve:ssr | Starts the server script for serving the application locally with server-side rendering. It uses the build artifacts created by `ng run build:ssr`, so make sure you have run that command as well.
      **NOTE**:
      `serve:ssr` is not intended to be used to serve your application in production, but only for testing the server-side rendered application locally.
      | +| npm run serve:ssr | Starts the server script for serving the application locally with server-side rendering. It uses the build artifacts created by `npm run build:ssr`, so make sure you have run that command as well.
      **NOTE**:
      `serve:ssr` is not intended to be used to serve your application in production, but only for testing the server-side rendered application locally.
      | | npm run prerender | Used to prerender an application's pages. Read more about prerendering [here](guide/prerendering). | @@ -366,4 +366,4 @@ Now, on every HTTP request made as part of rendering the application on the serv -@reviewed 2023-04-25 +@reviewed 2023-06-21 diff --git a/aio-ja/content/guide/universal.md b/aio-ja/content/guide/universal.md index f0e31afb82..86d6312da5 100644 --- a/aio-ja/content/guide/universal.md +++ b/aio-ja/content/guide/universal.md @@ -8,7 +8,7 @@ また、SSRをめぐるさまざまなテクニックやコンセプトについては、こちらの[記事](https://developers.google.com/web/updates/2019/02/rendering-on-the-web)をご覧ください。 -次のように、`@nguniversal/express-engine` schematicsを使用して、Angularアプリケーションでサーバーサイドレンダリングを有効にすることができます。 +次のように、`@nguniversal/express-engine` パッケージを使用して、Angularアプリケーションでサーバーサイドレンダリングを有効にすることができます。
      @@ -66,10 +66,10 @@ The command updates the application code to enable SSR and adds extra files to t
      - app.config.ts                   // < client-side application configuration (standalone app only) + app.config.ts                   // <-- client-side application configuration (standalone app only)
      - app.module.ts                 // < client-side application module (NgModule app only) + app.module.ts                 // <-- client-side application module (NgModule app only)
      @@ -226,9 +226,9 @@ Universal Web サーバーは、[Universal テンプレートエンジン](#univ これは、DOM、`XMLHttpRequest`、およびブラウザに依存しないその他の低レベル機能のサーバー実装を提供します。 サーバー (このガイドの例では [Node.js Express](https://expressjs.com/)) は、アプリケーションページのクライアントリクエストを NgUniversal の `ngExpressEngine` に渡します。 -Under the hood, the render functions, while providing caching and other helpful utilities. +裏側では、このエンジンがアプリをレンダリングし、キャッシュやその他の便利なユーティリティも提供します。 -The render functions takes as inputs a *template* HTML page \(usually `index.html`\), and Angular *module* containing components or a function that when invoked returns a `Promise` that resolves to an `ApplicationRef`, and a *route* that determines which components to display. The route comes from the client's request to the server. +render関数は、*テンプレート*となるHTMLページ(通常は`index.html`)と、コンポーネントを含むAngularの*モジュール*を入力として受け取ります。あるいは、呼び出されたときに `ApplicationRef` に解決される`Promise`を返す関数と、どのコンポーネントを表示するかを決定する*ルート*を受け取ることもできます。ルートはクライアントからサーバへのリクエストに基づきます。 各リクエストの結果、リクエストされたルートの適切なビューが表示されます。 render 関数は、テンプレートの `` タグ内でビューをレンダリングし、 @@ -278,8 +278,13 @@ The `ngExpressEngine()` function is a wrapper around the Angular `platform-serve ### リクエスト URL のフィルタリング -メモ: NgUniversal Express schematic を使用すると、次に説明する基本的な動作が自動的に処理されます。 -これは、基本的な動作を理解したり、schematic を使用せずに複製したりするときに役立ちます。 +
      + +**NOTE**:
      +メモ: NgUniversal Expressパッケージを使用すると、次に説明する基本的な動作が自動的に処理されます。 +これは、基本的な動作を理解したり、パッケージを使用せずに複製したりするときに役立ちます。 + +
      Web サーバーは、_アプリのページのリクエスト_ を他の種類のリクエストと区別する必要があります。 @@ -355,7 +360,7 @@ Now, on every HTTP request made as part of rendering the app on the server, Angu |:--- |:--- | | npm run dev:ssr | Similar to [`ng serve`](cli/serve), which offers live reload during development, but uses server-side rendering. The application runs in watch mode and refreshes the browser after every change. This command is slower than the actual `ng serve` command. | | ng build && ng run app-name:server | Builds both the server script and the application in production mode. Use this command when you want to build the project for deployment. | -| npm run serve:ssr | Starts the server script for serving the application locally with server-side rendering. It uses the build artifacts created by `ng run build:ssr`, so make sure you have run that command as well.
      **NOTE**:
      `serve:ssr` is not intended to be used to serve your application in production, but only for testing the server-side rendered application locally.
      | +| npm run serve:ssr | Starts the server script for serving the application locally with server-side rendering. It uses the build artifacts created by `npm run build:ssr`, so make sure you have run that command as well.
      **NOTE**:
      `serve:ssr` is not intended to be used to serve your application in production, but only for testing the server-side rendered application locally.
      | | npm run prerender | Used to prerender an application's pages. Read more about prerendering [here](guide/prerendering). | @@ -364,4 +369,4 @@ Now, on every HTTP request made as part of rendering the app on the server, Angu -@reviewed 2023-04-25 +@reviewed 2023-06-21 \ No newline at end of file diff --git a/aio-ja/content/guide/workspace-config.en.md b/aio-ja/content/guide/workspace-config.en.md index 673f2ae16d..80c8f67d6b 100644 --- a/aio-ja/content/guide/workspace-config.en.md +++ b/aio-ja/content/guide/workspace-config.en.md @@ -235,15 +235,15 @@ For details of those options and their possible values, see the [Angular CLI Ref Some extra options can only be set through the configuration file, either by direct editing or with the [`ng config`](cli/config) command. -| Options properties | Details | -|:--- |:--- | -| `assets` | An object containing paths to static assets to add to the global context of the project. The default paths point to the project's icon file and its `assets` directory. See more in the [Assets configuration](#asset-config) section. | -| `styles` | An array of style files to add to the global context of the project. Angular CLI supports CSS imports and all major CSS preprocessors: [sass/scss](https://sass-lang.com) and [less](http://lesscss.org). See more in the [Styles and scripts configuration](#style-script-config) section. | +| Options properties | Details | +|:--- |:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| `assets` | An object containing paths to static assets to add to the global context of the project. The default paths point to the project's icon file and its `assets` directory. See more in the [Assets configuration](#asset-config) section. | +| `styles` | An array of style files to add to the global context of the project. Angular CLI supports CSS imports and all major CSS preprocessors: [sass/scss](https://sass-lang.com) and [less](https://lesscss.org). See more in the [Styles and scripts configuration](#style-script-config) section. | | `stylePreprocessorOptions` | An object containing option-value pairs to pass to style preprocessors. See more in the [Styles and scripts configuration](#style-script-config) section. | | `scripts` | An object containing JavaScript script files to add to the global context of the project. The scripts are loaded exactly as if you had added them in a `