diff --git a/aio/content/examples/architecture/src/app/hero-list.component.ts b/aio/content/examples/architecture/src/app/hero-list.component.ts index 6f779a483b..4a679fe7c8 100644 --- a/aio/content/examples/architecture/src/app/hero-list.component.ts +++ b/aio/content/examples/architecture/src/app/hero-list.component.ts @@ -1,12 +1,16 @@ import { Component, OnInit } from '@angular/core'; +import { NgFor, NgIf } from '@angular/common'; import { Hero } from './hero'; +import { HeroDetailComponent } from './hero-detail.component'; import { HeroService } from './hero.service'; // #docregion metadata, providers @Component({ + standalone: true, selector: 'app-hero-list', templateUrl: './hero-list.component.html', + imports: [ NgFor, NgIf, HeroDetailComponent ], providers: [ HeroService ] }) // #enddocregion providers @@ -26,4 +30,4 @@ export class HeroListComponent implements OnInit { selectHero(hero: Hero) { this.selectedHero = hero; } // #docregion metadata -} +} \ No newline at end of file diff --git a/aio/content/guide/architecture-components.md b/aio/content/guide/architecture-components.md index b73fbd1f8b..8ec88f644a 100644 --- a/aio/content/guide/architecture-components.md +++ b/aio/content/guide/architecture-components.md @@ -13,15 +13,15 @@ For example, an application could include components to describe: Angular 应用使用一些单个组件来定义并控制应用的不同方面。比如，应用可能包含一些描述下列内容的组件： -* The application root with the navigation links +* The application root with the navigation links 带有导航链接的应用根组件 -* The list of heroes +* The list of heroes 英雄列表 -* The hero editor +* The hero editor 英雄编辑器 @@ -88,15 +88,20 @@ Here's an example of basic metadata for `HeroListComponent`. This example shows some of the most useful `@Component` configuration options: + 这个例子展示了一些最常用的 `@Component` 配置选项： -| Configuration options | Details | -| :-------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| 配置选项 | 详情 | +| Configuration options | Details | +|:--- |:--- | +| 配置选项 | 详情 | +| `standalone` | `true` when this is a self-describing, ["Standalone"](guide/standalone-components) component. If `false` or unspecified, the component must be declared in an [ngModule](guide/ngmodules) which is an older style. Prefer `true` if you can. | +| `standalone` | 当这是一个自描述的、[“独立的”](guide/standalone-components "Standalone")组件时，其值为`true`。如果未指定或为`false`，则该组件必须在一个 ngModule 中声明，这是一种较旧的风格。如果可以的话，请使用 `true`。 | | `selector` | A CSS selector that tells Angular to create and insert an instance of this component wherever it finds the corresponding tag in template HTML. For example, if an application's HTML contains ``, then Angular inserts an instance of the `HeroListComponent` view between those tags. | -| `selector` | 一个 CSS 选择器，它会告诉 Angular，一旦在模板 HTML 中找到了这个选择器对应的标签，就创建并插入该组件的一个实例。比如，如果应用的 HTML 中包含 ``，Angular 就会在这些标签中插入一个 `HeroListComponent` 实例的视图。| -| `templateUrl` | The module-relative address of this component's HTML template. Alternatively, you can provide the HTML template inline, as the value of the `template` property. This template defines the component's *host view*. | +| `selector` | 一个 CSS 选择器，告诉 Angular：一旦在模板 HTML 中找到了这个选择器对应的标签，就创建并插入该组件的一个实例。比如，如果应用的 HTML 中包含 ``，Angular 就会在这些标签中插入一个 `HeroListComponent` 实例的视图。| +| `templateUrl` | The relative address of this component's HTML template. Alternatively, you can provide the HTML template inline, as the value of the `template` property. This template defines the component's *host view*. | | `templateUrl` | 该组件的 HTML 模板文件相对于这个组件文件的地址。另外，你还可以用 `template` 属性的值来提供内联的 HTML 模板。这个模板定义了该组件的*宿主视图*。| +| `imports` | An array of the components, directives, and packages that your template references. Essential for "Standalone" components. | +| `imports` | 此模板引用的组件、指令和包的列表。对于“独立的”组件至关重要。| | `providers` | An array of [providers](guide/glossary#provider) for services that the component requires. In the example, this tells Angular how to provide the `HeroService` instance that the component's constructor uses to get the list of heroes to display. | | `providers` | 当前组件所需的服务[提供者](guide/glossary#provider)的一个数组。在这个例子中，它告诉 Angular 该如何提供一个 `HeroService` 实例，以获取要显示的英雄列表。| @@ -138,7 +143,7 @@ A view hierarchy can include views from components in the same NgModule and from A template looks like regular HTML, except that it also contains Angular [template syntax](guide/template-syntax), which alters the HTML based on your application's logic and the state of application and DOM data. Your template can use *data binding* to coordinate the application and DOM data, *pipes* to transform data before it is displayed, and *directives* to apply application logic to what gets displayed. -模板很像标准的 HTML，但是它还包含 Angular 的[模板语法](guide/template-syntax)，这些模板语法可以根据你的应用逻辑、应用状态和 DOM 数据来修改这些 HTML。你的模板可以使用*数据绑定*来协调应用和 DOM 中的数据，使用*管道*在显示出来之前对其进行转换，使用*指令*来把程序逻辑应用到要显示的内容上。 +模板看起来像标准的 HTML，但是它还包含 Angular 的[模板语法](guide/template-syntax)，这些模板语法可以根据你的应用逻辑、应用状态和 DOM 数据来改变这些 HTML。你的模板可以使用*数据绑定*来协调应用和 DOM 中的数据，使用*管道*在显示出来之前对其进行转换，使用*指令*来把程序逻辑应用到要显示的内容上。 For example, here is a template for the Tutorial's `HeroListComponent`. @@ -151,23 +156,23 @@ The template-syntax elements tell Angular how to render the HTML to the screen, 这个模板使用了典型的 HTML 元素，比如 `

` 和 `

`。还包括一些 Angular 的模板语法元素，如 `*ngFor`，`{{hero.name}}`，`click`、`[hero]` 和 ``。这些模板语法元素告诉 Angular 该如何根据程序逻辑和数据在屏幕上渲染 HTML。 -* The `*ngFor` directive tells Angular to iterate over a list +* The `*ngFor` directive tells Angular to iterate over a list `*ngFor` 指令告诉 Angular 在一个列表上进行迭代 -* `{{hero.name}}`, `(click)`, and `[hero]` bind program data to and from the DOM, responding to user input. - See more about [data binding](#data-binding) below. +* `{{hero.name}}`, `(click)`, and `[hero]` bind program data to and from the DOM, responding to user input. + See more about [data binding](#data-binding) below. `{{hero.name}}`、`(click)` 和 `[hero]` 把程序数据绑定到及绑定回 DOM，以响应用户的输入。更多内容参阅稍后的[数据绑定](#data-binding)部分。 -* The `` element tag in the example represents a new component, `HeroDetailComponent`. - The `HeroDetailComponent` defines the `hero-detail` portion of the rendered DOM structure specified by the `HeroListComponent` component. +* The `` element tag in the example represents a new component, `HeroDetailComponent`. + The `HeroDetailComponent` defines the `hero-detail` portion of the rendered DOM structure specified by the `HeroListComponent` component. 此例子中的 `` 元素标签代表一个新组件 `HeroDetailComponent`。`HeroDetailComponent` 定义了由 `HeroListComponent` 所渲染的 DOM 结构中的 `hero-detail` 部分。 - Notice how these custom components mix with native HTML. + Notice how these custom components mix with native HTML. - 注意这些自定义组件是如何与原生 HTML 元素混用的。 + 注意这些自定义组件是如何与原生 HTML 元素混用的。 ### Data binding @@ -200,8 +205,8 @@ This example from the `HeroListComponent` template uses three of these forms. -| Data bindings | Details | -| :----------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------- | +| Data bindings | Details | +|:--- |:--- | | 数据绑定 | 详情 | | `[hero]` [property binding](guide/property-binding) | Passes the value of `selectedHero` from the parent `HeroListComponent` to the `hero` property of the child `HeroDetailComponent`. | | `[hero]`[属性绑定](guide/property-binding) | 把父组件 `HeroListComponent` 的 `selectedHero` 的值传到子组件 `HeroDetailComponent` 的 `hero` 属性中。| @@ -256,9 +261,9 @@ You can also define new pipes. Angular 自带了很多管道，比如 [date](api/common/DatePipe) 管道和 [currency](api/common/CurrencyPipe) 管道。完整的列表参阅 [Pipes API 列表](api?type=pipe)。你也可以自己定义一些新管道。 -To specify a value transformation in an HTML template, use the [pipe operator \(`|`\)](guide/pipes). +To specify a value transformation in an HTML template, use the [pipe operator (`|`)](guide/pipes-overview). -要在 HTML 模板中指定值的转换方式，请使用[管道操作符（`|`）](guide/pipes)。 +要在 HTML 模板中指定值的转换方式，请使用[管道操作符（`|`）](guide/pipes-overview)。 @@ -328,10 +333,10 @@ The example template uses two built-in structural directives to add application -| Directives | Details | -| :------------------------------------------ | :----------------------------------------------------------------------------------------- | -| 指令 | 详情 | -| [`*ngFor`](guide/built-in-directives#ngFor) | An *iterative*, which tells Angular to create one `

  • ` per hero in the `heroes` list. | +| Directives | Details | +|:--- |:--- | +| 指令 | 详情 | +| [`*ngFor`](guide/built-in-directives#ngFor) | An *iterative*, which tells Angular to create one `
  • ` per hero in the `heroes` list. | | [`*ngFor`](guide/built-in-directives#ngFor) | 一个迭代器，它要求 Angular 为 `heroes` 列表中的每个英雄创建出一个 `
  • `。| | [`*ngIf`](guide/built-in-directives#ngIf) | A *conditional*, which includes the `HeroDetail` component only if a selected hero exists. | | [`*ngIf`](guide/built-in-directives#ngIf) | 是个条件语句，只有当选中的英雄存在时，它才会包含 `HeroDetail` 组件。| @@ -378,4 +383,4 @@ Learn more in the [Attribute Directives](guide/attribute-directives) and [Struct -@reviewed 2022-02-28 +@reviewed 2023-09-25 diff --git a/aio/content/guide/architecture-modules.md b/aio/content/guide/architecture-modules.md index 80f001c5d5..73ae839a3d 100644 --- a/aio/content/guide/architecture-modules.md +++ b/aio/content/guide/architecture-modules.md @@ -3,16 +3,26 @@ # NgModule 简介 Angular applications are modular and Angular has its own modularity system called *NgModules*. +Angular 应用是模块化的，它拥有自己的模块化系统，称作 *NgModule*。 + +
    + +Older Angular applications are built with `NgModules`. +While this is no longer the preferred approach, many existing applications are still built with `NgModules`. + +旧版的Angular应用程序是用 NgModules 构建的。 +尽管这不再是首选方法，但仍有许多现有应用程序是使用 NgModules 构建的。 + +This page offers an overview of that concept; [learn more here](guide/ngmodules). +本页面提供了该概念的概述；[在此处了解更多信息](guide/ngmodules)。 + +
    + NgModules are containers for a cohesive block of code dedicated to an application domain, a workflow, or a closely related set of capabilities. They can contain components, service providers, and other code files whose scope is defined by the containing NgModule. They can import functionality that is exported from other NgModules, and export selected functionality for use by other NgModules. -Angular 应用是模块化的，它拥有自己的模块化系统，称作 *NgModule*。一个 NgModule 就是一个容器，用于存放一些内聚的代码块，这些代码块专注于某个应用领域、某个工作流或一组紧密相关的功能。它可以包含一些组件、服务提供者或其它代码文件，其作用域由包含它们的 NgModule 定义。它还可以导入一些由其它模块中导出的功能，并导出一些指定的功能供其它 NgModule 使用。 - -Every Angular application has at least one NgModule class, [the *root module*](guide/bootstrapping), which is conventionally named `AppModule` and resides in a file named `app.module.ts`. -You launch your application by *bootstrapping* the root NgModule. - -每个 Angular 应用都至少有一个 NgModule 类，也就是[根模块](guide/bootstrapping)，它习惯上命名为 `AppModule`，并位于一个名叫 `app.module.ts` 的文件中。*引导*这个根模块就可以启动你的应用。 +一个 NgModule 就是一个容器，用于存放一些内聚的代码块，这些代码块专注于某个应用领域、某个工作流或一组紧密相关的功能。它可以包含一些组件、服务提供者或其它代码文件，其作用域由包含它们的 NgModule 定义。它还可以导入一些由其它模块中导出的功能，并导出一些指定的功能供其它 NgModule 使用。 While a small application might have only one NgModule, most applications have many more *feature modules*. The *root* NgModule for an application is so named because it can include child NgModules in a hierarchy of any depth. @@ -29,9 +39,8 @@ The most important properties are as follows. NgModule 是一个带有 `@NgModule()` 装饰器的类。`@NgModule()` 装饰器是一个函数，它接受一个元数据对象，该对象的属性用来描述这个模块。其中最重要的属性如下。 -| Properties | Details | -| :------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| 属性 | 详情 | +| Properties | Details | +|:--- |:--- | | `declarations` | The [components](guide/architecture-components), *directives*, and *pipes* that belong to this NgModule. | | `declarations` | 那些属于本 NgModule 的[组件](guide/architecture-components)、*指令*、*管道*。| | `exports` | The subset of declarations that should be visible and usable in the *component templates* of other NgModules. | @@ -123,9 +132,9 @@ Other JavaScript modules use *import statements* to access public objects from o JavaScript 中，每个*文件*是一个模块，文件中定义的所有对象都从属于那个模块。通过 `export` 关键字，模块可以把它的某些对象声明为公共的。其它 JavaScript 模块可以使用*import 语句*来访问这些公共对象。 - + - +
    @@ -194,4 +203,4 @@ Learn more from the [NgModules](guide/ngmodules) guide. -@reviewed 2022-02-28 +@reviewed 2022-02-28 \ No newline at end of file diff --git a/aio/content/guide/architecture-next-steps.md b/aio/content/guide/architecture-next-steps.md index 09cff38174..367cd3680b 100644 --- a/aio/content/guide/architecture-next-steps.md +++ b/aio/content/guide/architecture-next-steps.md @@ -9,7 +9,7 @@ about the features and tools that can help you develop and deliver Angular appli * Work through the [Tour of Heroes](tutorial) tutorial to get a feel for how to fit the basic building blocks together to create a well-designed application. - 参考“[英雄之旅”](tutorial)教程，了解如何将这些基本构建块放在一起，来创建设计精良的应用。 + 参考[英雄之旅](tutorial)教程，了解如何将这些基本构建块放在一起，来创建设计精良的应用。 * Check out the [Glossary](guide/glossary) to understand Angular-specific terms and usage. @@ -82,19 +82,19 @@ For some platforms and applications, you might also want to use the PWA \(Progre Angular 为单页面应用提供了一个框架，其中的大多数逻辑和数据都留在客户端。大多数应用仍然需要使用 `HttpClient` 来访问服务器，以访问和保存数据。对于某些平台和应用，你可能还希望使用 PWA（渐进式 Web 应用）模型来改善用户体验。 -* [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. - [HTTP](guide/http)：与服务器通信，通过 HTTP 客户端来获取数据、保存数据，并调用服务端的动作。 + [HTTP](guide/understanding-communicating-with-http)：与服务器通信，通过 HTTP 客户端来获取数据、保存数据，并调用服务端的动作。 -* [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. +* [Server-side rendering](guide/ssr): 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. - [服务端渲染](guide/universal)：Angular Universal 通过服务端渲染（SSR）在服务器上生成静态应用页面。这允许你在服务器上运行 Angular 应用，以提高性能，并在移动设备和低功耗设备上快速显示首屏，同时也方便了网页抓取工具。 + [服务端渲染](guide/ssr)：Angular Universal 通过服务端渲染（SSR）在服务器上生成静态应用页面。这允许你在服务器上运行 Angular 应用，以提高性能，并在移动设备和低功耗设备上快速显示首屏，同时也方便了网页抓取工具。 * [Service workers and PWA](guide/service-worker-intro): Use a service worker to reduce dependency on the network and significantly improve the user experience. [Service Worker 和 PWA](guide/service-worker-intro)：使用 Service Worker 来减少对网络的依赖，并显著改善用户体验。 -* [Web workers](guide/web-worker): Learn how to run CPU-intensive computations in a background thread. +* [Web workers](guide/web-worker): Learn how to run CPU-intensive computations in a background thread. [Web worker](guide/web-worker)：学习如何在后台线程中运行 CPU 密集型的计算。 @@ -178,4 +178,4 @@ Angular 为单页面应用提供了一个框架，其中的大多数逻辑和数 -@reviewed 2022-02-28 +@reviewed 2023-09-25 \ No newline at end of file diff --git a/aio/content/guide/architecture-services.md b/aio/content/guide/architecture-services.md index f93de8fd2b..2b2fc197f3 100644 --- a/aio/content/guide/architecture-services.md +++ b/aio/content/guide/architecture-services.md @@ -45,7 +45,7 @@ That service in turn might depend on the `HttpClient` service to fetch heroes as -## Dependency injection \(DI\) +## Dependency injection (DI) ## 依赖注入（dependency injection） @@ -55,41 +55,35 @@ That service in turn might depend on the `HttpClient` service to fetch heroes as
    -Dependency injection \(DI\) is the part of the Angular framework that provides components with access to services and other resources. +Dependency injection (DI) is the part of the Angular framework that provides components with access to services and other resources. Angular provides the ability for you to *inject* a service into a component to give that component access to the service. -DI 是 Angular 框架的一部分，用于在任何地方给新建的组件提供服务和其它资源。Angular 提供了把某个服务*注入*到组件中的能力，以便那个组件得以访问该服务类。 +DI 是 Angular 框架的一部分，用于在任何地方给新建的组件提供服务和其它资源。Angular 提供了把某个服务*注入*到组件中的能力，以便那个组件可以访问该服务。 -The `@Injectable()` decorator defines a class as a service in Angular and allows Angular to inject it into a component as a *dependency*. -Likewise, the `@Injectable()` decorator indicates that a component, class, pipe, or NgModule *has* a dependency on a service. +Add the `@Injectable()` decorator to a service class so that Angular can inject it into a component as a *dependency*; the optional argument tells Angular where to register this class by default. -`@Injectable()` 装饰器把一个类定义为 Angular 中的服务，并且允许 Angular 把它作为*依赖*注入到组件中。 -类似的，`@Injectable()` 装饰器会标记出某个组件、类、管道或 NgModule 具有对某个服务的依赖。 +向服务类添加 `@Injectable()` 装饰器，以便 Angular 可以将其作为*依赖*注入到组件中；可选参数告诉Angular在哪里默认注册这个类。 -* The *injector* is the main mechanism. - Angular creates an application-wide injector for you during the bootstrap process, and additional injectors as needed. - You don't have to create injectors. + + - *注入器*是主要的机制。Angular 会在启动过程中为你创建全应用级注入器以及所需的其它注入器。你不用自己创建注入器。 +* Something *injectable* must be registered with an *injector* before it can be created and used. -* An injector creates dependencies and maintains a *container* of dependency instances that it reuses, if possible. +* 可*注入*的内容必须在*注入器*中注册后才能被创建和使用。 - 该注入器会创建依赖、维护一个*容器*来管理这些依赖，并尽可能复用它们。 +* Register an injectable with a *provider*, an object that tells an injector how to obtain or create a dependency. For a service class, the provider is typically the class itself. -* A *provider* is an object that tells an injector how to obtain or create a dependency +* 使用*提供者*注册一个可注入的内容，提供者是一个对象，告诉注入器如何获取或创建一个依赖项。对于服务类，提供者通常是类本身。 - *提供者*是一个对象，用来告诉注入器应该如何获取或创建依赖 +* You don't have to create injectors. Under the hood Angular creates an application-wide *root injector* for you during the bootstrap process. It creates additional child injectors as needed. -For any dependency that you need in your app, you must register a provider with the application's injector, so that the injector can use the provider to create new instances. -For a service, the provider is typically the service class itself. - -你的应用中所需的任何依赖，都必须使用该应用的注入器来注册一个提供者，以便注入器可以使用这个提供者来创建新实例。对于服务，该提供者通常就是服务类本身。 +* 你不必创建注入器。在幕后，Angular在引导过程中为您创建一个应用程序范围的*根注入器*。根据需要创建额外的子注入器。
    -A dependency doesn't have to be a service —it could be a function, for example, or a value. +An injectable dependency doesn't have to be a class — it could be a function, for example, or a value. -依赖不一定是服务 —— 它还可能是函数或值。 +可注入的依赖项不一定是一个类 —— 例如，它可以是一个函数或一个值。
    @@ -107,7 +101,7 @@ If a requested service instance doesn't yet exist, the injector makes one using When all requested services have been resolved and returned, Angular can call the component's constructor with those services as arguments. -当所有请求的服务已解析并返回时，Angular 可以用这些服务实例为参数，调用该组件的构造函数。 +当所有请求的服务已解析并返回时，Angular 就可以使用这些服务实例作为参数，调用组件的构造函数。 The process of `HeroService` injection looks something like this. @@ -124,54 +118,34 @@ The process of `HeroService` injection looks something like this. ### 提供服务 You must register at least one *provider* of any service you are going to use. -The provider can be part of the service's own metadata, making that service available everywhere, or you can register providers with specific modules or components. -You register providers in the metadata of the service \(in the `@Injectable()` decorator\), or in the `@NgModule()` or `@Component()` metadata - -对于要用到的任何服务，你必须至少注册一个*提供者*。服务可以在自己的元数据中把自己注册为提供者，这样可以让自己随处可用。或者，你也可以为特定的模块或组件注册提供者。要注册提供者，就要在服务的 `@Injectable()` 装饰器中提供它的元数据，或者在 `@NgModule()` 或 `@Component()` 的元数据中。 - -* By default, the Angular CLI command [`ng generate service`](cli/generate) registers a provider with the root injector for your service by including provider metadata in the `@Injectable()` decorator. - The tutorial uses this method to register the provider of HeroService class definition. - - 默认情况下，Angular CLI 的 [`ng generate service`](cli/generate) 命令会在 `@Injectable()` 装饰器中提供元数据来把它注册到根注入器中。本教程就用这种方法注册了 HeroService 的提供者： - - - - @Injectable({ - providedIn: 'root', - }) +The provider can be part of the service's own metadata, making that service available everywhere, or you can register providers with specific components. +You register providers in the metadata of the service \(in the `@Injectable()` decorator\) or `@Component()` metadata - +你必须为 要用到的任何服务 注册至少一个*提供者*。服务可以在自己的元数据中把自己注册为提供者，这样可以让自己随处可用。或者，你也可以为特定组件注册提供者。你可以在服务的元数据（在 `@Injectable()` 装饰器中） 或者在 `@Component()` 的元数据中注册提供者。 - When you provide the service at the root level, Angular creates a single, shared instance of `HeroService` - and injects it into any class that asks for it. - Registering the provider in the `@Injectable()` metadata also allows Angular to optimize an app - by removing the service from the compiled application if it isn't used, a process known as *tree-shaking*. +* By default, the Angular CLI command [`ng generate service`](cli/generate) registers a provider with the root injector for your service by including provider metadata in the `@Injectable()` decorator. + The tutorial uses this method to register the provider of `HeroService` class definition. - 当你在根一级提供服务时，Angular 会为 HeroService 创建一个单一的共享实例，并且把它注入到任何想要它的类中。这种在 `@Injectable` 元数据中注册提供者的方式还让 Angular 能够通过移除那些从未被用过的服务来优化大小。 + 默认情况下，Angular CLI 的 [`ng generate service`](cli/generate) 命令会在 `@Injectable()` 装饰器中提供元数据来把它注册到根注入器中。本教程就用这种方法注册了 `HeroService` 的提供者： -* When you register a provider with a [specific NgModule](guide/architecture-modules), the same instance of a service is available to all components in that NgModule. - To register at this level, use the `providers` property of the `@NgModule()` decorator. + + - 当你使用[特定的 NgModule](guide/architecture-modules) 注册提供者时，该服务的同一个实例将会对该 NgModule 中的所有组件可用。要想在这一层注册，请用 `@NgModule()` 装饰器中的 `providers` 属性： + When you provide the service at the root level, Angular creates a single, shared instance of `HeroService` + and injects it into any class that asks for it. + Registering the provider in the `@Injectable()` metadata also allows Angular to optimize an app + by removing the service from the compiled application if it isn't used, a process known as *tree-shaking*. - + 当你在根级别提供服务时，Angular 会为 HeroService 创建一个单一的共享实例，并且把它注入到任何想要它的类中。这种在 `@Injectable` 元数据中注册提供者的方式还能够让 Angular 在编译 应用程序 时移除那些从未被用过的服务来优化 编译出来的应用程序的大小，这个过程被称为 *tree-shaking*。 - @NgModule({ - providers: [ - BackendService, - Logger - ], - … - }) - -* When you register a provider at the component level, you get a new instance of the service with each new instance of that component. - At the component level, register a service provider in the `providers` property of the `@Component()` metadata. +* When you register a provider at the component level, you get a new instance of the service with each new instance of that component. + At the component level, register a service provider in the `providers` property of the `@Component()` metadata. - 当你在组件级注册提供者时，你会为该组件的每一个新实例提供该服务的一个新实例。要在组件级注册，就要在 `@Component()` 元数据的 `providers` 属性中注册服务提供者。 + 当你在组件级注册提供者时，你会为该组件的每一个新实例提供该服务的一个新实例。要在组件级注册，就要在 `@Component()` 元数据的 `providers` 属性中注册服务提供者。 - + For more detailed information, see the [Dependency Injection](guide/dependency-injection) section. @@ -183,4 +157,4 @@ For more detailed information, see the [Dependency Injection](guide/dependency-i -@reviewed 2022-02-28 +@reviewed 2023-09-25 \ No newline at end of file diff --git a/aio/content/guide/architecture.md b/aio/content/guide/architecture.md index 1b25b40173..75d6f885d4 100644 --- a/aio/content/guide/architecture.md +++ b/aio/content/guide/architecture.md @@ -1,48 +1,53 @@ # Introduction to Angular concepts - # Angular 概念简介 Angular is a platform and framework for building single-page client applications using HTML and TypeScript. Angular is written in TypeScript. It implements core and optional functionality as a set of TypeScript libraries that you import into your applications. -Angular 是一个用 HTML 和 TypeScript 构建客户端应用的平台与框架。Angular 本身就是用 TypeScript 写成的。它将核心功能和可选功能作为一组 TypeScript 库进行实现，你可以把它们导入你的应用中。 +Angular 是一个用 HTML 和 TypeScript 构建客户端应用的平台与框架。 +Angular 本身就是用 TypeScript 写成的。 +它将核心功能和可选功能作为一组 TypeScript 库进行实现，你可以把它们导入你的应用中。 The architecture of an Angular application relies on certain fundamental concepts. -The basic building blocks of the Angular framework are Angular components that are organized into *NgModules*. -NgModules collect related code into functional sets; an Angular application is defined by a set of NgModules. -An application always has at least a *root module* that enables bootstrapping, and typically has many more *feature modules*. +The basic building blocks of the Angular framework are Angular components. -Angular 的基本构造块是 *NgModule*，它为*组件*提供了编译的上下文环境。NgModule 会把相关的代码收集到一些功能集中。Angular 应用就是由一组 NgModule 定义出的。应用至少会有一个用于引导应用的*根模块*，通常还会有很多*特性模块*。 +Angular应用程序的架构依赖于某些基本概念。 +Angular框架的基本构造块是Angular*组件*。 -* Components define *views*, which are sets of screen elements that Angular can choose among and modify according to your program logic and data +Components define *views*, which are sets of screen elements that Angular can choose among and modify according to your program logic and data - 组件定义*视图*。视图是一组可见的屏幕元素，Angular 可以根据你的程序逻辑和数据来选择和修改它们。每个应用都至少有一个根组件。 +组件定义*视图*。视图是一组可见的屏幕元素，Angular 可以根据你的程序逻辑和数据来选择和修改它们。 -* Components use *services*, which provide specific functionality not directly related to views. - Service providers can be *injected* into components as *dependencies*, making your code modular, reusable, and efficient. +Components use *services*, which provide background functionality not directly related to views such as fetching data. +Such services can be *injected* into components as *dependencies*, making your code modular, reusable, and efficient. - 组件使用*服务*。服务会提供那些与视图不直接相关的功能。服务提供者可以作为*依赖*被*注入*到组件中，这能让你的代码更加模块化、更加可复用、更加高效。 +组件使用*服务*，它提供与视图无直接关系的后台功能，例如从后端获取数据。 +这些服务可以作为*依赖*被*注入*到组件中，使你的代码更加模块化、更加可复用、更加高效。 -Modules, components and services are classes that use *decorators*. -These decorators mark their type and provide metadata that tells Angular how to use them. +Components and services are classes marked with *decorators*. +These decorators provide metadata that tells Angular how to use them. -模块、组件和服务都是使用*装饰器*的类，这些*装饰器*会标出它们的类型并提供元数据，以告知 Angular 该如何使用它们。 +组件和服务是带有*装饰器*的类。 +这些装饰器会提供元数据，以告知 Angular 该如何使用它们。 -* The metadata for a component class associates it with a *template* that defines a view. - A template combines ordinary HTML with Angular *directives* and *binding markup* that allow Angular to modify the HTML before rendering it for display. +* The metadata for a component class associates it with a *template* that defines a view. + A template combines ordinary HTML with Angular *directives* and *binding markup* that allow Angular to modify the HTML before rendering it for display. - 组件类的元数据将组件类和一个用来定义视图的*模板*关联起来。模板把普通的 HTML 和 Angular *指令*与*绑定标记（markup）*组合起来，这样 Angular 就可以在渲染 HTML 之前先修改这些 HTML。 + 组件类的元数据将组件类和一个用来定义视图的*模板*关联起来。 + 模板将普通的 HTML 与 Angular *指令*与*绑定标记（markup）* 结合在一起，这样 Angular 就可以在渲染 HTML 之前先修改这些 HTML。 -* The metadata for a service class provides the information Angular needs to make it available to components through *dependency injection \(DI\)* +* The metadata for a service class provides the information Angular needs to make it available to components through *dependency injection \(DI\)* - 服务类的元数据提供了一些信息，Angular 要用这些信息来让组件可以通过*依赖注入（DI）*使用该服务。 + 服务类的元数据提供了一些信息，Angular 要用这些信息来让组件可以通过*依赖注入（DI）*使用该服务。 An application's components typically define many views, arranged hierarchically. Angular provides the `Router` service to help you define navigation paths among views. The router provides sophisticated in-browser navigational capabilities. -应用的组件通常会定义很多视图，并进行分级组织。Angular 提供了 `Router` 服务来帮助你定义视图之间的导航路径。路由器提供了先进的浏览器内导航功能。 +应用的组件通常会定义很多视图，并进行分级组织。 +Angular 提供了 `Router` 服务来帮助你定义视图之间的导航路径。 +路由器提供了先进的浏览器内导航功能。
    @@ -60,47 +65,13 @@ For the sample application that this page describes, see the -## Modules - -## 模块 - -Angular *NgModules* differ from and complement JavaScript \(ES2015\) modules. -An NgModule declares a compilation context for a set of components that is dedicated to an application domain, a workflow, or a closely related set of capabilities. -An NgModule can associate its components with related code, such as services, to form functional units. - -Angular 定义了 `NgModule`，它和 JavaScript（ES2015）的模块不同而且有一定的互补性。NgModule 为一个组件集声明了编译的上下文环境，它专注于某个应用领域、某个工作流或一组紧密相关的能力。NgModule 可以将其组件和一组相关代码（如服务）关联起来，形成功能单元。 - -Every Angular application has a *root module*, conventionally named `AppModule`, which provides the bootstrap mechanism that launches the application. -An application typically contains many functional modules. - -每个 Angular 应用都有一个*根模块*，通常命名为 `AppModule`。根模块提供了用来启动应用的引导机制。一个应用通常会包含很多特性模块。 - -Like JavaScript modules, NgModules can import functionality from other NgModules, and allow their own functionality to be exported and used by other NgModules. -For example, to use the router service in your app, you import the `Router` NgModule. - -像 JavaScript 模块一样，NgModule 也可以从其它 NgModule 中导入功能，并允许导出它们自己的功能供其它 NgModule 使用。比如，要在你的应用中使用路由器（Router）服务，就要导入 `Router` 这个 NgModule。 - -Organizing your code into distinct functional modules helps in managing development of complex applications, and in designing for reusability. -In addition, this technique lets you take advantage of *lazy-loading* —that is, loading modules on demand— to minimize the amount of code that needs to be loaded at startup. - -把你的代码组织成一些清晰的特性模块，可以帮助管理复杂应用的开发工作并实现可复用性设计。另外，这项技术还能让你获得*惰性加载*（也就是按需加载模块）的优点，以尽可能减小启动时需要加载的代码体积。 - -
    - -For a more detailed discussion, see [Introduction to modules](guide/architecture-modules). - -更深入的讨论，参阅[模块简介](guide/architecture-modules)。 - -
    - ## Components -## 组件 - Every Angular application has at least one component, the *root component* that connects a component hierarchy with the page document object model \(DOM\). Each component defines a class that contains application data and logic, and is associated with an HTML *template* that defines a view to be displayed in a target environment. -每个 Angular 应用都至少有一个组件，也就是*根组件*，它会把组件树和页面中的 DOM 连接起来。每个组件都会定义一个类，其中包含应用的数据和逻辑，并与一个 HTML *模板*相关联，该模板定义了一个供目标环境下显示的视图。 +每个 Angular 应用程序至少有一个组件，即*根组件*，它会把组件树和页面中的 DOM 连接起来。 +每个组件都会定义一个包含应用程序数据和逻辑的类，并与一个 HTML *模板*相关联，该模板定义了一个供目标环境下显示的视图。 The `@Component()` decorator identifies the class immediately below it as a component, and provides the template and related component-specific metadata. @@ -127,7 +98,9 @@ A template combines HTML with Angular markup that can modify HTML elements befor Template *directives* provide program logic, and *binding markup* connects your application data and the DOM. There are two types of data binding: -模板会把 HTML 和 Angular 的标记（markup）组合起来，这些标记可以在 HTML 元素显示出来之前修改它们。模板中的*指令*会提供程序逻辑，而*绑定标记*会把你应用中的数据和 DOM 连接在一起。有两种类型的数据绑定： +模板会把 HTML 和 Angular 的标记（markup）组合起来，这些标记可以在 HTML 元素显示出来之前修改它们。 +模板中的*指令*会提供程序逻辑，而*绑定标记*会把你应用中的数据和 DOM 连接在一起。 +有两种类型的数据绑定： | Data bindings | Details | | :--------------- | :------------------------------------------------------------------------------------------------------- | @@ -137,16 +110,20 @@ There are two types of data binding: | Property binding | Lets you interpolate values that are computed from your application data into the HTML. | | 属性绑定 | 让你将从应用数据中计算出来的值插入到 HTML 中。| + Before a view is displayed, Angular evaluates the directives and resolves the binding syntax in the template to modify the HTML elements and the DOM, according to your program data and logic. Angular supports *two-way data binding*, meaning that changes in the DOM, such as user choices, are also reflected in your program data. -在视图显示出来之前，Angular 会先根据你的应用数据和逻辑来运行模板中的指令并解析绑定表达式，以修改 HTML 元素和 DOM。Angular 支持*双向数据绑定*，这意味着 DOM 中发生的变化（比如用户的选择）同样可以反映回你的程序数据中。 +在视图显示出来之前，Angular 会先根据你的应用数据和逻辑来运行模板中的指令并解析绑定表达式，以修改 HTML 元素和 DOM。 +Angular 支持*双向数据绑定*，这意味着 DOM 中发生的变化（比如用户的选择）同样可以反映回你的程序数据中。 Your templates can use *pipes* to improve the user experience by transforming values for display. For example, use pipes to display dates and currency values that are appropriate for a user's locale. Angular provides predefined pipes for common transformations, and you can also define your own pipes. -你的模板也可以用*管道*转换要显示的值以增强用户体验。比如，可以使用管道来显示适合用户所在本地环境的日期和货币格式。Angular 为一些通用的转换提供了预定义管道，你还可以定义自己的管道。 +你的模板也可以用*管道*转换要显示的值以增强用户体验。 +比如，可以使用管道来显示适合用户所在本地环境的日期和货币格式。 +Angular 为一些常见的转换提供了预定义管道，你也可以定义自己的管道。
    @@ -166,12 +143,15 @@ For data or logic that isn't associated with a specific view, and that you want A service class definition is immediately preceded by the `@Injectable()` decorator. The decorator provides the metadata that allows other providers to be **injected** as dependencies into your class. -对于与特定视图无关并希望跨组件共享的数据或逻辑，可以创建*服务*类。服务类的定义通常紧跟在 “@Injectable\(\)” 装饰器之后。该装饰器提供的元数据可以让你的服务作为依赖*被注入到*客户组件中。 +对于与特定视图无关、希望跨组件共享的的数据或逻辑，你可以创建*服务*类。 +服务类的定义通常紧跟在 `@Injectable()` 装饰器之后。 +装饰器提供元数据，可以让你的服务作为依赖被*注入*到你写的类（class）中。 *Dependency injection* \(DI\) lets you keep your component classes lean and efficient. They don't fetch data from the server, validate user input, or log directly to the console; they delegate such tasks to services. -*依赖注入*（或 DI）让你可以保持组件类的精简和高效。有了 DI，组件就不用从服务器获取数据、验证用户输入或直接把日志写到控制台，而是会把这些任务委托给服务。 +*依赖注入*（或 DI）使你的组件类保持精简和高效。 +有了 DI，组件就不用从服务器获取数据、验证用户输入或直接把日志写到控制台，而是会把这些任务委托给服务。
    @@ -185,43 +165,49 @@ For a more detailed discussion, see [Introduction to services and DI](guide/arch ### 路由 -The Angular `Router` NgModule provides a service that lets you define a navigation path among the different application states and view hierarchies in your application. +The Angular `Router` package provides a service that lets you define a navigation path among the different application states and view hierarchies in your application. It is modeled on the familiar browser navigation conventions: -Angular 的 `Router` 模块提供了一个服务，它可以让你定义在应用的各个不同状态和视图层次结构之间导航时要使用的路径。它的工作模型基于人们熟知的浏览器导航约定： +Angular 的 `Router` 包提供了一个服务，让您可以在应用程序中定义不同应用状态和视图层次之间导航时要使用的路径。它的工作模型基于人们熟知的浏览器导航约定： + -* Enter a URL in the address bar and the browser navigates to a corresponding page +* Enter a URL in the address bar and the browser navigates to a corresponding page - 在地址栏输入 URL，浏览器就会导航到相应的页面。 + 在地址栏输入 URL，浏览器就会导航到相应的页面。 -* Click links on the page and the browser navigates to a new page +* Click links on the page and the browser navigates to a new page - 在页面中点击链接，浏览器就会导航到一个新页面。 + 在页面中点击链接，浏览器就会导航到一个新页面。 -* Click the browser's back and forward buttons and the browser navigates backward and forward through the history of pages you've seen +* Click the browser's back and forward buttons and the browser navigates backward and forward through the history of pages you've seen - 点击浏览器的前进和后退按钮，浏览器就会在你的浏览历史中向前或向后导航。 + 点击浏览器的前进和后退按钮，浏览器就会在你的浏览历史中向前或向后导航。 -The router maps URL-like paths to views instead of pages. -When a user performs an action, such as clicking a link, that would load a new page in the browser, the router intercepts the browser's behavior, and shows or hides view hierarchies. +The router maps URL-like paths to components instead of pages. +When a user performs an action, such as clicking a link, that would load a new component in the browser, the router intercepts the browser's behavior, and shows or hides that component (and its child components). -不过路由器会把类似 URL 的路径映射到视图而不是页面。当用户执行一个动作时（比如点击链接），本应该在浏览器中加载一个新页面，但是路由器拦截了浏览器的这个行为，并显示或隐藏一个视图层次结构。 +路由器将类似URL的路径映射到组件而不是页面。当用户执行一个动作时（比如点击链接），本应该在浏览器中加载一个新页面，但是路由器拦截了浏览器的这个行为，并显示或隐藏该组件（及其子组件）。 -If the router determines that the current application state requires particular functionality, and the module that defines it hasn't been loaded, the router can *lazy-load* the module on demand. +If the router determines that the current application state requires a component that hasn't been loaded, the router can *lazy-load* that component and its related dependencies. -如果路由器认为当前的应用状态需要某些特定的功能，而定义此功能的模块尚未加载，路由器就会按需*惰性加载*此模块。 +如果路由器确定当前的应用程序状态需要加载尚未加载的组件，路由器就会按需*惰性加载*这些要加载的组件。 The router interprets a link URL according to your application's view navigation rules and data state. You can navigate to new views when the user clicks a button or selects from a drop box, or in response to some other stimulus from any source. The router logs activity in the browser's history, so the back and forward buttons work as well. -路由器会根据你应用中的导航规则和数据状态来拦截 URL。当用户点击按钮、选择下拉框或收到其它任何来源的输入时，你可以导航到一个新视图。路由器会在浏览器的历史日志中记录这个动作，所以前进和后退按钮也能正常工作。 +路由器会根据你应用中的导航规则和数据状态来拦截 URL。 +当用户点击按钮、选择下拉框或收到其它任何来源的刺激时，你可以导航到一个新视图。 +路由器会在浏览器的历史日志中记录这个动作，所以前进和后退按钮也能正常工作。 To define navigation rules, you associate *navigation paths* with your components. A path uses a URL-like syntax that integrates your program data, in much the same way that template syntax integrates your views with your program data. You can then apply program logic to choose which views to show or to hide, in response to user input and your own access rules. -要定义导航规则，你就要把*导航路径*和你的组件关联起来。路径（path）使用类似 URL 的语法来和程序数据整合在一起，就像模板语法会把你的视图和程序数据整合起来一样。然后你就可以用程序逻辑来决定要显示或隐藏哪些视图，以根据你制定的访问规则对用户的输入做出响应。 +要定义导航规则，你就要把*导航路径*和你的组件关联起来。 +路径（path）使用类似 URL 的语法来和程序数据整合在一起，就像模板语法会把你的视图和程序数据整合起来一样。 +然后你就可以用程序逻辑来决定要显示或隐藏的视图，以响应用户输入和您自己的访问规则。 +
    @@ -233,42 +219,11 @@ For a more detailed discussion, see [Routing and navigation](guide/router). ## What's next -## 接下来呢？ - -You've learned the basics about the main building blocks of an Angular application. -The following diagram shows how these basic pieces are related. +You've discovered the main building blocks of an Angular application. +Learn a bit more about them in the following architecture pages. -你已经学完了 Angular 应用的主要构造块的基础知识。下面这张图展示了这些基础部分之间是如何关联起来的。 - -
    - -overview - -
    - -* Together, a component and template define an Angular view - - 组件和模板共同定义了 Angular 的视图。 - - * A decorator on a component class adds the metadata, including a pointer to the associated template - - 组件类上的装饰器为其添加了元数据，其中包括指向相关模板的指针。 - - * Directives and binding markup in a component's template modify views based on program data and logic - - 组件模板中的指令和绑定标记会根据程序数据和程序逻辑修改这些视图。 - -* The dependency injector provides services to a component, such as the router service that lets you define navigation among views - - 依赖注入器会为组件提供一些服务，比如路由器服务就能让你定义如何在视图之间导航。 - -Each of these subjects is introduced in more detail in the following pages. - -这些主题的详情在下列页面中有介绍： - -* [Introduction to Modules](guide/architecture-modules) - - [模块简介](guide/architecture-modules) +你已经了解了 Angular 应用程序的主要构造块的基础知识。 +在以下页面中了解更多相关信息。 * [Introduction to Components](guide/architecture-components) @@ -298,10 +253,16 @@ Each of these subjects is introduced in more detail in the following pages. [服务与依赖注入简介](guide/architecture-services) -When you're familiar with these fundamental building blocks, you can explore them in more detail in the documentation. -To learn about more tools and techniques that are available to help you build and deploy Angular applications, see [Next steps: tools and techniques](guide/architecture-next-steps). -当你熟悉了这些基础构造块之后，就可以在本文档中进一步查看它们的详情了。要学习能帮你构建和发布 Angular 应用的更多工具和技巧，参阅[后续步骤：工具与技巧](guide/architecture-next-steps)。 +When you're familiar with these fundamental building blocks, you can explore them in greater detail in the documentation. + +当你熟悉了这些基础构造块之后，就可以在本文档中进一步查看它们的详情了。 + +You may also be interested in [tools and techniques](guide/architecture-next-steps) to help you build and deploy Angular applications. + +你可能还对帮助您构建和部署Angular应用的[工具和技巧](guide/architecture-next-steps)感兴趣。 + +
    @@ -309,4 +270,4 @@ To learn about more tools and techniques that are available to help you build an -@reviewed 2022-02-28 +@reviewed 2023-09-25