`标签中。
- 但是,只有当我们在`directives`数组中提及到`HeroDetailComponent`的时候,Angular才会这么做。
+ 但是,只有在`directives`数组中提及到`HeroDetailComponent`的时候,Angular才会这么做。
* `providers` - an array of **dependency injection providers** for services that the component requires.
This is one way to tell Angular that our component's constructor requires a `HeroService`
@@ -482,7 +482,7 @@ figure
The architectural take-away is that we must add metadata to our code
so that Angular knows what to do.
- 这种架构所决定的是:我们必须往代码中添加元数据,以便Angular知道该做什么。
+ 这种架构所决定的是:必须往代码中添加元数据,以便Angular知道该做什么。
.l-main-section
@@ -562,7 +562,7 @@ figure
but it's clear from these examples that data binding plays an important role in communication
between a template and its component ...
- 虽然我们还不清楚所有细节,但是我们从这些范例中至少弄明白一点:数据绑定在模板与对应组件的交互中扮演了一个很重要的角色。
+ 虽然还不清楚所有细节,但是我们从这些范例中至少弄明白一点:数据绑定在模板与对应组件的交互中扮演了一个很重要的角色。
figure
@@ -587,12 +587,12 @@ figure
Our Angular templates are *dynamic*. When Angular renders them, it transforms the DOM
according to the instructions given by a **directive**.
- 我们的Angular模板是*动态的*。当Angular渲染它们时,它会根据**指令**提供的操作指南对DOM进行修改。
+ Angular模板是*动态的*。当Angular渲染它们时,它会根据**指令**提供的操作指南对DOM进行修改。
A directive is a class with directive metadata. In TypeScript we'd apply the `@Directive` decorator
to attach metadata to the class.
- 指令是一个带有“指令元数据”的类。在TypeScript中,我们要通过`@Directive`装饰器把元数据附加到类上。
+ 指令是一个带有“指令元数据”的类。在TypeScript中,要通过`@Directive`装饰器把元数据附加到类上。
:marked
@@ -607,7 +607,7 @@ figure
it is so distinctive and central to Angular applications that we chose
to separate the component from the directive in our architectural overview.
- 虽然**组件从技术角度上就是一个指令**,但是组件非常独特,并在Angular中位于中心地位,以至于我们在架构介绍中,把组件从指令中单独开来。
+ 虽然**组件从技术角度上就是一个指令**,但是组件非常独特,并在Angular中位于中心地位,以至于在架构介绍中,我们把组件从指令中单独开来。
:marked
There are two *other* kinds of directives as well that we call "structural" and "attribute" directives.
@@ -742,7 +742,7 @@ figure
They don't fetch data from the server, they don't validate user input, they don't log directly to the console.
They delegate such tasks to services.
- 我们的组件是服务的主要消费者。它们依赖服务来处理大多数“苦差事”。
+ 组件是服务的主要消费者。它们依赖服务来处理大多数“苦差事”。
它们自己不需要从服务器获得数据,不需要验证输入,不需要直接往控制台写日志。
它们把这些任务委托给服务。
@@ -787,7 +787,7 @@ figure
For example, the constructor of our `HeroListComponent` needs the `HeroService`:
在TypeScript里,Angular能通过查看构造函数的参数类型,来得知组件需要哪些服务。
- 例如,我们`HeroListComponent`组件的构造函数需要`HeroService`:
+ 例如,`HeroListComponent`组件的构造函数需要`HeroService`:
+makeExample('architecture/ts/app/hero-list.component.ts', 'ctor', 'app/hero-list.component (构造函数)')(format=".")
:marked
When Angular creates a component, it first asks an **Injector** for
@@ -821,21 +821,21 @@ figure
In brief, we must have previously registered a **provider** of the `HeroService` with the `Injector`.
A provider is something that can create or return a service, typically the service class itself.
- 简单的说,我们必须在要求注入`HeroService`之前,注册一个`HeroService`的**供应商Provider**到注入器。
+ 简单的说,必须在要求注入`HeroService`之前,注册一个`HeroService`的**供应商Provider**到注入器。
供应商可以创建并返回服务,通常返回的就是这个“服务类”本身。
We can register providers at any level of the application component tree.
We often do so at the root when we bootstrap the application so that
the same instance of a service is available everywhere.
- 我们可以在应用程序的组件树中的任何级别上注册供应商。
- 当我们需要一个服务的同一个实例在任何地方都是可用时,我们通常在应用引导程序中注册它。
+ 可以在应用程序的组件树中的任何级别上注册供应商。
+ 当需要一个服务的同一个实例在任何地方都是可用时,我们通常在应用引导程序中注册它。
+makeExample('architecture/ts/app/main.ts', 'bootstrap','app/main.ts (节选)')(format=".")
:marked
Alternatively, we might register at a component level ...
- 或者,我们也可以把它注册在组件层……
+ 或者,也可以把它注册在组件层……
+makeExample('architecture/ts/app/hero-list.component.ts', 'providers','app/hero-list.component.ts (节选)')(format=".")
:marked
@@ -876,7 +876,7 @@ figure
* we register *providers* with injectors.
- * 我们把*供应商*注册到注入器。
+ * 把*供应商*注册到注入器。
.l-main-section
@@ -979,13 +979,13 @@ figure
>**[Lifecycle Hooks](lifecycle-hooks.html)** - We can tap into key moments in the lifetime of a component, from its creation to its destruction,
by implementing the "Lifecycle Hook" interfaces.
- >**[生命周期钩子Lifecycle Hooks](lifecycle-hooks.html)** - 通过实现“生命周期钩子”接口,我们可以切入组件生命中的几个关键点:从创建到销毁。
+ >**[生命周期钩子Lifecycle Hooks](lifecycle-hooks.html)** - 通过实现“生命周期钩子”接口,可以切入组件生命中的几个关键点:从创建到销毁。
>**[Pipes](pipes.html)** - Services that transform values for display.
We can put pipes in our templates to improve the user experience. For example,
this `currency` pipe expression,
- >**[管道Pipes](pipes.html)** - 这种服务会转换值以供显示。我们可以把管道放在模板中,以增强用户体验。比如这个`currency`管道表达式,
+ >**[管道Pipes](pipes.html)** - 这种服务会转换值以供显示。可以把管道放在模板中,以增强用户体验。比如这个`currency`管道表达式,
code-example(language="javascript" linenumbers=".").