feat: 翻译完了 architecture-components 和 architecture-modules
This commit is contained in:
Zhicheng Wang
parent
b01ec8ad9a
commit
01ed628717
|
|
@ -1,9 +1,13 @@
|
|||
# Introduction to components
|
||||
|
||||
# 组件简介
|
||||
|
||||
<img src="generated/images/guide/architecture/hero-component.png" alt="Component" class="left">
|
||||
|
||||
A _component_ controls a patch of screen called a *view*. For example, individual components define and control each of the following views from the [Tutorial](tutorial/index):
|
||||
|
||||
*组件*控制屏幕上被称为*视图*的一小片区域。比如，[教程](tutorial/index)中的下列视图都是由一个个组件所定义和控制的：
|
||||
|
||||
* The app root with the navigation links.
|
||||
|
||||
带有导航链接的应用根组件。
|
||||
|
|
@ -23,82 +27,151 @@ You define a component's application logic—what it does to support the vie
|
|||
|
||||
For example, the `HeroListComponent` has a `heroes` property that returns an array of heroes that it acquires from a service. `HeroListComponent` also has a `selectHero()` method that sets a `selectedHero` property when the user clicks to choose a hero from that list.
|
||||
|
||||
比如，`HeroListComponent` 有一个 `heroes` 属性，它会返回一个从服务中取到的英雄数组。
|
||||
`HeroListComponent` 还有一个 `selectHero()` 方法，当用户从列表中选择一个英雄时，它会设置 `selectedHero` 属性的值。
|
||||
|
||||
<code-example path="architecture/src/app/hero-list.component.ts" linenums="false" title="src/app/hero-list.component.ts (class)" region="class"></code-example>
|
||||
|
||||
Angular creates, updates, and destroys components as the user moves through the application. Your app can take action at each moment in this lifecycle through optional [lifecycle hooks](guide/lifecycle-hooks), like `ngOnInit()`.
|
||||
|
||||
当用户在应用中穿行时，Angular 就会创建、更新、销毁一些组件。
|
||||
你的应用可以通过一些可选的[生命周期钩子](guide/lifecycle-hooks)（比如`ngOnInit()`）来在每个特定的时机采取行动。
|
||||
|
||||
<hr/>
|
||||
|
||||
## Component metadata
|
||||
|
||||
## 组件的元数据
|
||||
|
||||
<img src="generated/images/guide/architecture/metadata.png" alt="Metadata" class="left">
|
||||
|
||||
The `@Component` decorator identifies the class immediately below it as a component class, and specifies its metadata. In the example code below, you can see that `HeroListComponent` is just a class, with no special Angular notation or syntax at all. It's not a component until mark it as one with the `@Component` decorator.
|
||||
|
||||
`@Component` 装饰器会指出紧随其后的那个类是个组件类，并为其指定元数据。
|
||||
在下面的范例代码中，你可以看到 `HeroListComponent` 只是一个普通类，完全没有 Angular 特有的标记或语法。
|
||||
直到给它加上了 `@Component` 装饰器，它才变成了组件。
|
||||
|
||||
The metadata for a component tells Angular where to get the major building blocks it needs to create and present the component and its view. In particular, it associates a _template_ with the component, either directly with inline code, or by reference. Together, the component and its template describe a _view_.
|
||||
|
||||
组件的元数据告诉 Angular 到哪里获取它需要的主要构造块，以创建和展示这个组件及其视图。
|
||||
具体来说，它把一个*模板*（无论是直接内联在代码中还是引用的外部文件）和该组件关联起来。
|
||||
该组件及其模板，共同描述了一个*视图*。
|
||||
|
||||
In addition to containing or pointing to the template, the `@Component` metadata configures, for example, how the component can be referenced in HTML and what services it requires.
|
||||
|
||||
除了包含或指向模板之外，`@Component` 的元数据还会配置要如何在 HTML 中引用该组件，以及该组件需要哪些服务等等。
|
||||
|
||||
Here's an example of basic metadata for `HeroListComponent`:
|
||||
|
||||
下面的例子中就是 `HeroListComponent` 的基础元数据：
|
||||
|
||||
<code-example path="architecture/src/app/hero-list.component.ts" linenums="false" title="src/app/hero-list.component.ts (metadata)" region="metadata"></code-example>
|
||||
|
||||
This example shows some of the most useful `@Component` configuration options:
|
||||
|
||||
这个例子展示了一些最常用的 `@Component` 配置选项：
|
||||
|
||||
* `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 app's HTML contains `<app-hero-list></app-hero-list>`, then
|
||||
Angular inserts an instance of the `HeroListComponent` view between those tags.
|
||||
|
||||
`selector`：是一个 CSS 选择器，它会告诉 Angular，一旦在模板 HTML 中找到了这个选择器对应的标签，就创建并插入该组件的一个实例。
|
||||
比如，如果应用的 HTML 中包含 `<app-hero-list></app-hero-list>`，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_.
|
||||
|
||||
`templateUrl`：该组件的 HTML 模板文件相对于这个组件文件的地址。
|
||||
另外，你还可以用 `template` 属性的值来提供内联的 HTML 模板。
|
||||
这个模板定义了该组件的*宿主视图*。
|
||||
|
||||
* `providers`: An array of **dependency injection providers** for services that the component requires. In the example, this tells Angular that the component's constructor requires a `HeroService` instance
|
||||
in order to get the list of heroes to display.
|
||||
|
||||
`providers` 是当前组件所需的**依赖注入提供商**的一个数组。在这个例子中，它告诉 Angular，该组件的构造函数需要一个 `HeroService` 实例，以获取要显示的英雄列表。
|
||||
|
||||
<hr/>
|
||||
|
||||
## Templates and views
|
||||
|
||||
## 模板与视图
|
||||
|
||||
<img src="generated/images/guide/architecture/template.png" alt="Template" class="left">
|
||||
|
||||
You define a component's view with its companion template. A template is a form of HTML that tells Angular how to render the component.
|
||||
|
||||
你要通过组件的配套模板来定义其视图。模板就是一种 HTML，它会告诉 Angular 如何渲染该组件。
|
||||
|
||||
Views are typically arranged hierarchically, allowing you to modify or show and hide entire UI sections or pages as a unit. The template immediately associated with a component defines that component's _host view_. The component can also define a _view hierarchy_, which contains _embedded views_, hosted by other components.
|
||||
|
||||
视图通常会分层次进行组织，让你能以 UI 分区或页面为单位进行修改、显示或隐藏。
|
||||
与组件直接关联的模板会定义该组件的*宿主视图*。该组件还可以定义一个*带层次结构的视图*，它包含一些*内嵌的视图*作为其它组件的宿主。
|
||||
|
||||
<figure>
|
||||
<img src="generated/images/guide/architecture/component-tree.png" alt="Component tree" class="left">
|
||||
</figure>
|
||||
|
||||
A view hierarchy can include views from components in the same NgModule, but it also can (and often does) include views from components that are defined in different NgModules.
|
||||
|
||||
带层次结构的视图可以包含同一模块（NgModule）中组件的视图，也可以（而且经常会）包含其它模块中定义的组件的视图。
|
||||
|
||||
## Template syntax
|
||||
|
||||
## 模板语法
|
||||
|
||||
A template looks like regular HTML, except that it also contains Angular [template syntax](guide/template-syntax), which alters the HTML based on your app's logic and the state of app and DOM data. Your template can use _data binding_ to coordinate the app and DOM data, _pipes_ to transform data before it is displayed, and _directives_ to apply app logic to what gets displayed.
|
||||
|
||||
模板很像标准的 HTML，但是它还包含 Angular 的[模板语法](guide/template-syntax)，这些模板语法可以根据你的应用逻辑、应用状态和 DOM 数据来修改这些 HTML。
|
||||
你的模板可以使用*数据绑定*来协调应用和 DOM 中的数据，使用*管道*在显示出来之前对其进行转换，使用*指令*来把程序逻辑应用到要显示的内容上。
|
||||
|
||||
For example, here is a template for the Tutorial's `HeroListComponent`:
|
||||
|
||||
比如，下面是本教程中 `HeroListComponent` 的模板：
|
||||
|
||||
<code-example path="architecture/src/app/hero-list.component.html" title="src/app/hero-list.component.html"></code-example>
|
||||
|
||||
This template uses typical HTML elements like `<h2>` and `<p>`, and also includes Angular template-syntax elements, `*ngFor`, `{{hero.name}}`, `(click)`, `[hero]`, and `<app-hero-detail>`. The template-syntax elements tell Angular how to render the HTML to the screen, using program logic and data.
|
||||
|
||||
这个模板使用了典型的 HTML 元素，比如 `<h2>` 和 `<p>`，还包括一些 Angular 的模板语法元素，如 `*ngFor`，`{{hero.name}}`，`click`、`[hero]` 和 `<app-hero-detail>`。这些模板语法元素告诉 Angular 该如何根据程序逻辑和数据在屏幕上渲染 HTML。
|
||||
|
||||
* The `*ngFor` directive tells Angular to iterate over a list.
|
||||
|
||||
`*ngFor` 指令告诉 Angular 在一个列表上进行迭代。
|
||||
|
||||
* The `{{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 `<app-hero-detail>` tag in the example is an element that represents a new component, `HeroDetailComponent`. The `HeroDetailComponent` (code not shown) is a child component of the `HeroListComponent` that defines the Hero-detail view. Notice how custom components like this mix seamlessly with native HTML in the same layouts.
|
||||
|
||||
模板中的 `<app-hero-detail>` 标签是一个代表新组件 `HeroDetailComponent` 的元素。
|
||||
`HeroDetailComponent`（代码略）是 `HeroListComponent` 的一个子组件，它定义了英雄详情视图。
|
||||
注意观察像这样的自定义组件是如何与原生 HTML 元素无缝的混合在一起的。
|
||||
|
||||
### Data binding
|
||||
|
||||
### 数据绑定
|
||||
|
||||
Without a framework, you would be responsible for pushing data values into the HTML controls and turning user responses into actions and value updates. Writing such push/pull logic by hand is tedious, error-prone, and a nightmare to read, as any experienced jQuery programmer can attest.
|
||||
|
||||
如果没有框架，你就要自己负责把数据值推送到 HTML 控件中，并把来自用户的响应转换成动作和对值的更新。
|
||||
手动写这种数据推拉逻辑会很枯燥、容易出错，难以阅读 —— 用过 jQuery 的程序员一定深有体会。
|
||||
|
||||
Angular supports *two-way data binding*, a mechanism for coordinating parts of a template with parts of a component. Add binding markup to the template HTML to tell Angular how to connect both sides.
|
||||
|
||||
Angular 支持*双向数据绑定*，这是一种对模板中的各个部件与组件中的各个部件进行协调的机制。
|
||||
往模板 HTML 中添加绑定标记可以告诉 Angular 该如何连接它们。
|
||||
|
||||
The following diagram shows the four forms of data binding markup. Each form has a direction—to the DOM, from the DOM, or in both directions.
|
||||
|
||||
下图显示了数据绑定标记的四种形式。每种形式都有一个方向 —— 从组件到 DOM、从 DOM 到组件或双向。
|
||||
|
||||
<figure>
|
||||
<img src="generated/images/guide/architecture/databinding.png" alt="Data Binding" class="left">
|
||||
</figure>
|
||||
|
||||
This example from the `HeroListComponent` template uses three of these forms:
|
||||
|
||||
这个来自 `HeroListComponent` 模板中的例子使用了其中的三种形式：
|
||||
|
||||
<code-example path="architecture/src/app/hero-list.component.1.html" linenums="false" title="src/app/hero-list.component.html (binding)" region="binding"></code-example>
|
||||
|
||||
* The `{{hero.name}}` [*interpolation*](guide/displaying-data#interpolation)
|
||||
|
|
@ -113,8 +186,12 @@ the parent `HeroListComponent` to the `hero` property of the child `HeroDetailCo
|
|||
|
||||
* The `(click)` [*event binding*](guide/user-input#binding-to-user-input-events) calls the component's `selectHero` method when the user clicks a hero's name.
|
||||
|
||||
当用户点击某个英雄的名字时，`(click)` [*事件绑定*](guide/user-input#binding-to-user-input-events)会调用组件的 `selectHero` 方法。
|
||||
|
||||
**Two-way data binding** is an important fourth form that combines property and event binding in a single notation. Here's an example from the `HeroDetailComponent` template that uses two-way data binding with the `ngModel` directive:
|
||||
|
||||
第四种重要的绑定形式是**双向数据绑定**，它把属性绑定和事件绑定组合成一种单独的写法。下面这个来自 `HeroDetailComponent` 模板中的例子通过 `ngModel` 指令使用了双向数据绑定：
|
||||
|
||||
<code-example path="architecture/src/app/hero-detail.component.html" linenums="false" title="src/app/hero-detail.component.html (ngModel)" region="ngModel"></code-example>
|
||||
|
||||
In two-way binding, a data property value flows to the input box from the component as with property binding.
|
||||
|
|
@ -134,6 +211,8 @@ Angular 在每个 JavaScript 事件循环中处理*所有的*数据绑定，它
|
|||
|
||||
Data binding plays an important role in communication between a template and its component, and is also important for communication between parent and child components.
|
||||
|
||||
数据绑定在模板及其组件之间的通讯中扮演了非常重要的角色，它对于父组件和子组件之间的通讯也同样重要。
|
||||
|
||||
<figure>
|
||||
<img src="generated/images/guide/architecture/parent-child-binding.png" alt="Parent/Child binding" class="left">
|
||||
</figure>
|
||||
|
|
@ -144,14 +223,24 @@ Data binding plays an important role in communication between a template and its
|
|||
|
||||
Angular pipes let you declare display-value transformations in your template HTML. A class with the `@Pipe` decorator defines a function that transforms input values to output values for display in a view.
|
||||
|
||||
Angular 的管道可以让你在模板中声明显示值的转换逻辑。
|
||||
带有 `@Pipe` 装饰器的类中会定义一个转换函数，用来把输入值转换成供视图显示用的输出值。
|
||||
|
||||
Angular defines various pipes, such as the [date](https://angular.io/api/common/DatePipe) pipe and [currency](https://angular.io/api/common/CurrencyPipe) pipe; for a complete list, see the [Pipes API list](https://angular.io/api?type=pipe). You can also define new pipes.
|
||||
|
||||
Angular 自带了很多管道，比如 [date](https://angular.cn/api/common/DatePipe) 管道和 [currency](https://angular.cno/api/common/CurrencyPipe) 管道，完整的列表参见 [Pipes API 列表](https://angular.cn/api?type=pipe)。你也可以自己定义一些新管道。
|
||||
|
||||
To specify a value transformation in an HTML template, use the [pipe operator (|)](https://angular.io/guide/template-syntax#pipe):
|
||||
|
||||
要在 HTML 模板中指定值的转换方式，请使用 [管道操作符 (|)](https://angular.io/guide/template-syntax#pipe)。
|
||||
|
||||
`{{interpolated_value | pipe_name}}`
|
||||
|
||||
You can chain pipes, sending the output of one pipe function to be transformed by another pipe function. A pipe can also take arguments that control how it performs its transformation. For example, you can pass the desired format to the `date` pipe:
|
||||
|
||||
你可以把管道串联起来，把一个管道函数的输出送给另一个管道函数进行转换。
|
||||
管道还能接收一些参数，来控制它该如何进行转换。比如，你可以把要使用的日期格式传给 `date` 管道：
|
||||
|
||||
```
|
||||
|
||||
<!-- Default format: output 'Jun 15, 2015'-->
|
||||
|
|
@ -172,29 +261,53 @@ Data binding plays an important role in communication between a template and its
|
|||
|
||||
### Directives
|
||||
|
||||
### 指令
|
||||
|
||||
<img src="generated/images/guide/architecture/directive.png" alt="Directives" class="left">
|
||||
|
||||
Angular templates are *dynamic*. When Angular renders them, it transforms the DOM according to the instructions given by *directives*. A directive is a class with a `@Directive` decorator.
|
||||
|
||||
Angular 的模板是*动态的*。当 Angular 渲染它们的时候，会根据*指令*给出的指示对 DOM 进行转换。
|
||||
指令就是一个带有 `@Directive` 装饰器的类。
|
||||
|
||||
A component is technically a directive - but components are so distinctive and central to Angular applications that Angular defines the `@Component` decorator, which extends the `@Directive` decorator with template-oriented features.
|
||||
|
||||
组件从技术角度上说就是一个指令，但是由于组件对 Angular 应用来说非常独特、非常重要，因此 Angular 专门定义了 `@Component` 装饰器，它使用一些面向模板的特性扩展了 `@Directive` 装饰器。
|
||||
|
||||
There are two kinds of directives besides components: _structural_ and _attribute_ directives. Just as for components, the metadata for a directive associates the class with a `selector` that you use to insert it into HTML. In templates, directives typically appear within an element tag as attributes, either by name or as the target of an assignment or a binding.
|
||||
|
||||
除组件外，还有两种指令：*结构型指令*和*属性型指令*。和组件一样，指令的元数据把指令类和一个 `selector` 关联起来，`selector` 用来把该指令插入到 HTML 中。
|
||||
在模板中，指令通常作为属性出现在元素标签上，可能仅仅作为名字出现，也可能作为赋值目标或绑定目标出现。
|
||||
|
||||
#### Structural directives
|
||||
|
||||
#### 结构型指令
|
||||
|
||||
Structural directives alter layout by adding, removing, and replacing elements in DOM. The example template uses two built-in structural directives to add application logic to how the view is rendered:
|
||||
|
||||
结构型指令通过添加、移除或替换 DOM 元素来修改布局。
|
||||
这个范例模板使用了两个内置的结构型指令来为要渲染的视图添加程序逻辑：
|
||||
|
||||
<code-example path="architecture/src/app/hero-list.component.1.html" linenums="false" title="src/app/hero-list.component.html (structural)" region="structural"></code-example>
|
||||
|
||||
* [`*ngFor`](guide/displaying-data#ngFor) is an iterative; it tells Angular to stamp out one `<li>` per hero in the `heroes` list.
|
||||
|
||||
[`*ngFor`](guide/displaying-data#ngFor) 是一个迭代器，它要求 Angular 为 `heroes` 列表中的每个 `<li>` 渲染出一个 `<li>`。
|
||||
|
||||
* [`*ngIf`](guide/displaying-data#ngIf) is a conditional; it includes the `HeroDetail` component only if a selected hero exists.
|
||||
|
||||
[`*ngIf`](guide/displaying-data#ngIf) 是个条件语句，只有当选中的英雄存在时，它才会包含 `HeroDetail` 组件。
|
||||
|
||||
#### Attribute directives
|
||||
|
||||
#### 属性型指令
|
||||
|
||||
Attribute directives alter the appearance or behavior of an existing element.
|
||||
In templates they look like regular HTML attributes, hence the name.
|
||||
|
||||
属性型指令会修改现有元素的外观或行为。
|
||||
在模板中，它们看起来就像普通的 HTML 属性一样，因此得名“属性型指令”。
|
||||
|
||||
The `ngModel` directive, which implements two-way data binding, is an example of an attribute directive. `ngModel` modifies the behavior of an existing element (typically an `<input>`) by setting its display value property and responding to change events.
|
||||
|
||||
`ngModel` 指令就是属性型指令的一个例子，它实现了双向数据绑定。
|
||||
|
|
@ -207,6 +320,10 @@ Angular has more pre-defined directives that either alter the layout structure
|
|||
or modify aspects of DOM elements and components
|
||||
(for example, [ngStyle](guide/template-syntax#ngStyle) and [ngClass](guide/template-syntax#ngClass)).
|
||||
|
||||
Angular 还有很多预定义指令，它们或者修改布局结构（比如 [ngSwitch](guide/template-syntax#ngSwitch)），或者修改 DOM 元素和组件的某些方面（比如 [ngStyle](guide/template-syntax#ngStyle) 和 [ngClass](guide/template-syntax#ngClass)）。
|
||||
|
||||
You can also write your own directives. Components such as `HeroListComponent` are one kind of custom directive. You can also create custom structural and attribute directives.
|
||||
|
||||
你还可以写自己的指令。像 `HeroListComponent` 这样的组件就是一种自定义指令，你还可以创建自定义的结构型指令和属性型指令。
|
||||
|
||||
<!-- PENDING: link to where to learn more about other kinds! -->
|
||||
|
|
|
|||
|
|
@ -1,43 +1,77 @@
|
|||
# Introduction to modules
|
||||
|
||||
# 模块简介
|
||||
|
||||
<img src="generated/images/guide/architecture/module.png" alt="Module" class="left">
|
||||
|
||||
Angular apps are modular and Angular has its own modularity system called _NgModules_. An NgModule is a container for a cohesive block of code dedicated to an application domain, a workflow, or a closely related set of capabilities. It can contain components, service providers, and other code files whose scope is defined by the containing NgModule. It 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 app 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 app by *bootstrapping* the root NgModule.
|
||||
|
||||
每个 Angular 应用都至少有一个 NgModule 类，也就是[根模块](guide/bootstrapping)，它习惯上命名为 `AppModule`，并位于一个名叫 `app.module.ts` 的文件中。*引导*这个根模块就可以启动你的应用。
|
||||
|
||||
While a small application might have only one NgModule, most apps have many more _feature modules_. The _root_ NgModule for an app is so named because it can include child NgModules in a hierarchy of any depth.
|
||||
|
||||
虽然小型的应用可能只有一个 NgModule，不过大多数应用都会有很多*特性模块*。应用的*根模块*之所以叫根模块，是因为它可以包含任意深度的层次化子模块。
|
||||
|
||||
## NgModule metadata
|
||||
|
||||
## `@NgModule` 元数据
|
||||
|
||||
An NgModule is defined as a class decorated with `@NgModule`. The `@NgModule` decorator is a function that takes a single metadata object, whose properties describe the module. The most important properties are as follows.
|
||||
|
||||
NgModule 是一个带有 `@NgModule` 装饰器的类。`@NgModule` 装饰器是一个函数，它接受一个元数据对象，该对象的属性用来描述这个模块。其中最重要的属性如下。
|
||||
|
||||
* `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.
|
||||
|
||||
`exports`（导出表） —— 那些能在其它模块的*组件模板*中使用的可声明对象的子集。
|
||||
|
||||
* `imports`—Other modules whose exported classes are needed by component templates declared in _this_ NgModule.
|
||||
|
||||
`imports`（导入表） —— 那些导出了*本*模块中的组件模板所需的类的其它模块。
|
||||
|
||||
* `providers`—Creators of [services](guide/architecture-services) that this NgModule contributes to the global collection of services; they become accessible in all parts of the app. (You can also specify providers at the component level, which is often preferred.)
|
||||
|
||||
`providers` —— 本模块向全局服务中贡献的那些[服务](guide/architecture-services)的创建器。
|
||||
这些服务能被本应用中的任何部分使用。（你也可以在组件级别指定服务提供商，这通常是首选方式。）
|
||||
|
||||
* `bootstrap`—The main application view, called the _root component_, which hosts all other app views. Only the _root NgModule_ should set this `bootstrap` property.
|
||||
|
||||
`bootstrap` —— 应用的主视图，称为*根组件*。它是应用中所有其它视图的宿主。只有*根模块*才应该设置这个 `bootstrap` 属性。
|
||||
|
||||
Here's a simple root NgModule definition:
|
||||
|
||||
下面是一个简单的根 NgModule 定义：
|
||||
|
||||
<code-example path="architecture/src/app/mini-app.ts" region="module" title="src/app/app.module.ts" linenums="false"></code-example>
|
||||
|
||||
<div class="l-sub-section">
|
||||
|
||||
The `export` of `AppComponent` is just to show how to export; it isn't actually necessary in this example. A root NgModule has no reason to _export_ anything because other modules don't need to _import_ the root NgModule.
|
||||
|
||||
把 `AppComponent` 放到 `exports` 中只是为了演示导出的语法，这在本例子中实际上是没必要的。
|
||||
根模块没有任何理由*导出*任何东西，因为其它模块永远不需要*导入*根模块。
|
||||
|
||||
</div>
|
||||
|
||||
## NgModules and components
|
||||
|
||||
## NgModule 和组件
|
||||
|
||||
NgModules provide a _compilation context_ for their components. A root NgModule always has a root component that is created during bootstrap, but any NgModule can include any number of additional components, which can be loaded through the router or created through the template. The components that belong to an NgModule share a compilation context.
|
||||
|
||||
NgModule 为其中的组件提供了一个*编译上下文环境*。根模块总会有一个根组件，并在引导期间创建它。
|
||||
但是，任何模块都能包含任意数量的其它组件，这些组件可以通过路由器加载，也可以通过模板创建。那些属于这个 NgModule 的组件会共享同一个编译上下文环境。
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/architecture/compilation-context.png" alt="Component compilation context" class="left">
|
||||
|
|
@ -48,6 +82,10 @@ NgModules provide a _compilation context_ for their components. A root NgModule
|
|||
|
||||
A component and its template together define a _view_. A component can contain a _view hierarchy_, which allows you to define arbitrarily complex areas of the screen that can be created, modified, and destroyed as a unit. A view hierarchy can mix views defined in components that belong to different NgModules. This is often the case, especially for UI libraries.
|
||||
|
||||
组件及其模板共同定义*视图*。组件还可以包含*视图层次结构*，它能让你定义任意复杂的屏幕区域，可以将其作为一个整体进行创建、修改和销毁。
|
||||
一个视图层次结构中可以混合使用由不同 NgModule 中的组件定义的视图。
|
||||
这种情况很常见，特别是对一些 UI 库来说。
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/architecture/view-hierarchy.png" alt="View hierarchy" class="left">
|
||||
|
|
@ -58,16 +96,28 @@ A component and its template together define a _view_. A component can contain a
|
|||
|
||||
When you create a component, it is associated directly with a single view, called the _host view_. The host view can be the root of a view hierarchy, which can contain _embedded views_, which are in turn the host views of other components. Those components can be in the same NgModule, or can be imported from other NgModules. Views in the tree can be nested to any depth.
|
||||
|
||||
当你创建一个组件时，它直接与一个叫做*宿主视图*的视图关联起来。
|
||||
宿主视图可以是视图层次结构的根，该视图层次结构可以包含一些*内嵌视图*，这些内嵌视图又是其它组件的宿主视图。
|
||||
这些组件可以位于相同的 NgModule 中，也可以从其它 NgModule 中导入。
|
||||
树中的视图可以嵌套到任意深度。
|
||||
|
||||
<div class="l-sub-section">
|
||||
|
||||
The hierarchical structure of views is a key factor in the way Angular detects and responds to changes in the DOM and app data.
|
||||
|
||||
视图的这种层次结构是 Angular 在 DOM 和应用数据中检测与响应变更时的关键因素。
|
||||
|
||||
</div>
|
||||
|
||||
## NgModules and JavaScript modules
|
||||
|
||||
## NgModule 和 JavaScript 的模块
|
||||
|
||||
The NgModule system is different from and unrelated to the JavaScript (ES2015) module system for managing collections of JavaScript objects. These are two different and _complementary_ module systems. You can use them both to write your apps.
|
||||
|
||||
NgModule 系统与 JavaScript（ES2015）用来管理 JavaScript 对象的模块系统不同，而且也没有直接关联。
|
||||
这两种模块系统不同但*互补*。你可以使用它们来共同编写你的应用。
|
||||
|
||||
In JavaScript each _file_ is a module and all objects defined in the file belong to that module.
|
||||
The module declares some objects to be public by marking them with the `export` key word.
|
||||
Other JavaScript modules use *import statements* to access public objects from other modules.
|
||||
|
|
@ -90,10 +140,15 @@ JavaScript 中，每个*文件*是一个模块，文件中定义的所有对象
|
|||
|
||||
## Angular libraries
|
||||
|
||||
## Angular 自带的库
|
||||
|
||||
<img src="generated/images/guide/architecture/library-module.png" alt="Component" class="left">
|
||||
|
||||
Angular ships as a collection of JavaScript modules. You can think of them as library modules. Each Angular library name begins with the `@angular` prefix. Install them with the `npm` package manager and import parts of them with JavaScript `import` statements.
|
||||
|
||||
Angular 自带了一组 JavaScript 模块，你可以把它们看成库模块。每个 Angular 库的名称都带有 `@angular` 前缀。
|
||||
使用 `npm` 包管理器安装它们，并使用 JavaScript 的 `import` 语句导入其中的各个部分。
|
||||
|
||||
<br class="clear">
|
||||
|
||||
For example, import Angular's `Component` decorator from the `@angular/core` library like this:
|
||||
|
|
@ -110,10 +165,15 @@ You also import NgModules from Angular _libraries_ using JavaScript import state
|
|||
|
||||
In the example of the simple root module above, the application module needs material from within the `BrowserModule`. To access that material, add it to the `@NgModule` metadata `imports` like this.
|
||||
|
||||
在上面这个简单的根模块范例中，应用的根模块需要来自 `BrowserModule` 中的素材。要访问这些素材，就要把它加入 `@NgModule` 元数据的 `imports` 中，代码如下：
|
||||
|
||||
<code-example path="architecture/src/app/mini-app.ts" region="ngmodule-imports" linenums="false"></code-example>
|
||||
|
||||
In this way you're using both the Angular and JavaScript module systems _together_. Although it's easy to confuse the two systems, which share the common vocabulary of "imports" and "exports", you will become familiar with the different contexts in which they are used.
|
||||
|
||||
通过这种方式，你可以*同时*使用 Angular 和 JavaScript 的这两种模块系统。
|
||||
虽然这两种模块系统容易混淆（它们共享了同样的词汇 `import` 和`export`），不过只要多用用你就会熟悉它们各自的语境了。
|
||||
|
||||
<div class="l-sub-section">
|
||||
|
||||
Learn more from the [NgModules](guide/ngmodules) page.
|
||||
|
|
|
|||
|
|
@ -167,7 +167,7 @@ typical characteristics, in real world apps, you may see hybrids.
|
|||
|
||||
A routing module provides routing configuration for another module and separates routing concerns from its companion module.
|
||||
|
||||
路由模块为其它模块提供路由配置，并且把路由这个关注点从它的伴随模块中分离出来。
|
||||
路由模块为其它模块提供路由配置，并且把路由这个关注点从它的配套模块中分离出来。
|
||||
|
||||
A routing module typically does the following:
|
||||
|
||||
|
|
@ -203,8 +203,8 @@ typical characteristics, in real world apps, you may see hybrids.
|
|||
|
||||
The name of the routing module should parallel the name of its companion module, using the suffix "Routing". For example, <code>FooModule</code> in <code>foo.module.ts</code> has a routing module named <code>FooRoutingModule</code> in <code>foo-routing.module.ts</code>. If the companion module is the root <code>AppModule</code>, the <code>AppRoutingModule</code> adds router configuration to its imports with <code>RouterModule.forRoot(routes)</code>. All other routing modules are children that import <code>RouterModule.forChild(routes)</code>.
|
||||
|
||||
路由模块应该与其伴随模块同名，但是加上“Routing”后缀。比如，<code>foo.module.ts</code> 中的 <code>FooModule</code> 就有一个位于 <code>foo-routing.module.ts</code> 文件中的 <code>FooRoutingModule</code> 路由模块。
|
||||
如果其伴随模块是根模块 `AppModule`，`AppRoutingModule` 就要使用 `RouterModule.forRoot(routes)` 来把路由器配置添加到它的 `imports` 中。
|
||||
路由模块应该与其配套模块同名，但是加上“Routing”后缀。比如，<code>foo.module.ts</code> 中的 <code>FooModule</code> 就有一个位于 <code>foo-routing.module.ts</code> 文件中的 <code>FooRoutingModule</code> 路由模块。
|
||||
如果其配套模块是根模块 `AppModule`，`AppRoutingModule` 就要使用 `RouterModule.forRoot(routes)` 来把路由器配置添加到它的 `imports` 中。
|
||||
所有其它路由模块都是子模块，要使用 `RouterModule.forChild(routes)`。
|
||||
|
||||
</li>
|
||||
|
|
@ -213,7 +213,7 @@ typical characteristics, in real world apps, you may see hybrids.
|
|||
|
||||
A routing module re-exports the <code>RouterModule</code> as a convenience so that components of the companion module have access to router directives such as <code>RouterLink</code> and <code>RouterOutlet</code>.
|
||||
|
||||
按照惯例，路由模块会重新导出这个 <code>RouterModule</code>，以便伴随模块中的组件可以访问路由器指令，比如 `RouterLink` 和 `RouterOutlet`。
|
||||
按照惯例，路由模块会重新导出这个 <code>RouterModule</code>，以便其配套模块中的组件可以访问路由器指令，比如 `RouterLink` 和 `RouterOutlet`。
|
||||
|
||||
</li>
|
||||
|
||||
|
|
@ -229,7 +229,7 @@ typical characteristics, in real world apps, you may see hybrids.
|
|||
|
||||
A routing module should only be imported by its companion module.
|
||||
|
||||
路由模块应该只被它的伴随模块导入。
|
||||
路由模块只应该被它的配套模块导入。
|
||||
|
||||
</td>
|
||||
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@ If you fully understand the meaning behind the guideline and have a good reason
|
|||
Some code examples display a file that has one or more similarly named companion files.
|
||||
For example, `hero.component.ts` and `hero.component.html`.
|
||||
|
||||
在一些代码例子中，有的文件有一个或多个相似名字的伴随文件。（例如 hero.component.ts 和 hero.component.html）。
|
||||
在一些代码例子中，有的文件有一个或多个相似名字的配套文件。（例如 hero.component.ts 和 hero.component.html）。
|
||||
|
||||
The guideline uses the shortcut `hero.component.ts|html|css|spec` to represent those various files. Using this shortcut makes this guide's file structures easier to read and more terse.
|
||||
|
||||
|
|
|
|||
|
|
@ -1830,7 +1830,7 @@ Here's a `SizerComponent` that fits the pattern.
|
|||
It has a `size` value property and a companion `sizeChange` event:
|
||||
|
||||
当一个元素拥有可以设置的属性 `x` 和对应的事件 `xChange` 时，解释 `[(x)]` 语法就容易多了。
|
||||
下面的 `SizerComponent` 符合这个模式。它有 `size` 属性和伴随的 `sizeChange` 事件：
|
||||
下面的 `SizerComponent` 符合这个模式。它有 `size` 属性和配套的 `sizeChange` 事件：
|
||||
|
||||
<code-example path="template-syntax/src/app/sizer.component.ts" title="src/app/sizer.component.ts">
|
||||
</code-example>
|
||||
|
|
|
|||
Loading…
Reference in New Issue