把所有误用的他改成它
This commit is contained in:
Zhicheng Wang
parent
72773b1f0f
commit
99d89072d5
|
|
@ -168,7 +168,7 @@ figure.image-display
|
|||
:marked
|
||||
The `VersionParentComponent` supplies the `minor` and `major` values and binds buttons to methods that change them.
|
||||
|
||||
`VersionParentComponent`提供`minor`和`major`值，将变换他们值得类方法绑定到按钮上。
|
||||
`VersionParentComponent`提供`minor`和`major`值，将变换它们值的类方法绑定到按钮上。
|
||||
|
||||
+makeExample('cb-component-communication/ts/app/version-parent.component.ts')
|
||||
|
||||
|
|
@ -442,7 +442,7 @@ a(id="countdown-tests")
|
|||
Each `AstronautComponent` is a child of the `MissionControlComponent` and therefore receives its parent's service instance:
|
||||
|
||||
`AstronautComponent`也通过自己的构造函数注入该服务。
|
||||
每个`AstronautComponent`都是`MissionControlComponent`的子级，所以他们获取它们父级的服务的实例。
|
||||
每个`AstronautComponent`都是`MissionControlComponent`的子级，所以它们获取它们父级的服务的实例。
|
||||
|
||||
+makeExample('cb-component-communication/ts/app/astronaut.component.ts')
|
||||
|
||||
|
|
|
|||
|
|
@ -162,7 +162,7 @@ a(id="nested-dependencies")
|
|||
Resolving these nested dependencies in the correct order is also the framework's job.
|
||||
At each step, the consumer of dependencies simply declares what it requires in its constructor and the framework takes over.
|
||||
|
||||
有时候一个服务依赖其他服务...（其他服务）可能依赖另外的服务。按正确的顺序来解析这些嵌套依赖也是框架工具（Angualar 2依赖注入）的工作。
|
||||
有时候一个服务依赖其它服务...而其它服务可能依赖另外的服务。按正确的顺序来解析这些嵌套依赖也是框架工具（Angualar 2依赖注入）的工作。
|
||||
在每一步，依赖的使用者只是在它的构造函数里简单地声明它需要什么，框架工具会做剩余的事情。
|
||||
|
||||
For example, we inject both the `LoggerService` and the `UserContext` in the `AppComponent`.
|
||||
|
|
@ -185,7 +185,7 @@ a(id="nested-dependencies")
|
|||
The `UserService` has no dependencies so the dependency injection framework can just `new` one into existence.
|
||||
|
||||
当Angular新建一个`AppComponent`，依赖注入框架工具创建一个`LoggerService`的实例，和开始创建`UserContextService`。`UserContextService`需要框架工具已经有了的`LoggerService`和还没创建的`UserService`。
|
||||
`UserService`没有其他依赖，所以依赖注入框架工具可以直接`new`一个实例。
|
||||
`UserService`没有其它依赖，所以依赖注入框架工具可以直接`new`一个实例。
|
||||
|
||||
The beauty of dependency injection is that the author of `AppComponent` didn't care about any of this.
|
||||
The author simply declared what was needed in the constructor (`LoggerService` and `UserContextService`) and the framework did the rest.
|
||||
|
|
@ -315,7 +315,7 @@ figure.image-display
|
|||
We call this *sandboxing* because each service and component instance has its own sandbox to play in.
|
||||
|
||||
一个管理自己伴随组件实例状态的服务是个好例子。
|
||||
对每个组件，我们都需要该服务的单独实例。每个服务有自己的工作-状态，与其他组件的服务-和-状态隔离。我们叫这个*sandboxing*，因为每个服务和组件实例都在自己的沙盒里运行。
|
||||
对每个组件，我们都需要该服务的单独实例。每个服务有自己的工作-状态，与其它组件的服务-和-状态隔离。我们叫这个*sandboxing*，因为每个服务和组件实例都在自己的沙盒里运行。
|
||||
|
||||
<a id="hero-bios-component"></a>
|
||||
Imagine a `HeroBiosComponent` that presents three instances of the `HeroBioComponent`.
|
||||
|
|
@ -326,7 +326,7 @@ figure.image-display
|
|||
Each `HeroBioComponent` can edit a single hero's biography.
|
||||
A `HeroBioComponent` relies on a `HeroCacheService` to fetch, cache, and perform other persistence operations on that hero.
|
||||
|
||||
每个`HeroBioComponent`都能编辑一个英雄的生平。一个`HeroBioComponent`依赖一个`HeroCacheService`来对该英雄进行读取、缓存和执行其他持久性质的操作。
|
||||
每个`HeroBioComponent`都能编辑一个英雄的生平。一个`HeroBioComponent`依赖一个`HeroCacheService`来对该英雄进行读取、缓存和执行其它持久性质的操作。
|
||||
+makeExample('cb-dependency-injection/ts/app/hero-cache.service.ts','service','app/hero-cache.service.ts')
|
||||
:marked
|
||||
Clearly the three instances of the `HeroBioComponent` can't share the same `HeroCacheService`.
|
||||
|
|
@ -585,11 +585,11 @@ figure.image-display
|
|||
But not every dependency can be satisfied by creating a new instance of a class.
|
||||
We need other ways to deliver dependency values and that means we need other ways to specify a provider.
|
||||
|
||||
这就是那么简单，因为最常见的被注入的服务是一个类的实例。但是，不是所有的依赖能在能建立一个类的新实例就够了的。我们需要其他的提交依赖值得方法，也就是说我们需要其他方法来制定一个provider。
|
||||
这就是那么简单，因为最常见的被注入的服务是一个类的实例。但是，不是所有的依赖能在能建立一个类的新实例就够了的。我们需要其它的提交依赖值得方法，也就是说我们需要其它方法来指定一个provider。
|
||||
|
||||
The `HeroOfTheMonthComponent` example demonstrates many of the alternatives and why we need them.
|
||||
|
||||
`HeroOfTheMonthComponent`例子示范了一些备择方案，揭示了为什么我们需要他们。
|
||||
`HeroOfTheMonthComponent`例子示范了一些备择方案，揭示了为什么我们需要它们。
|
||||
figure.image-display
|
||||
img(src="/resources/images/cookbooks/dependency-injection/hero-of-month.png" alt="Hero of the month" width="300px")
|
||||
:marked
|
||||
|
|
@ -663,7 +663,7 @@ a(id='usevalue')
|
|||
:marked
|
||||
The other providers create their values *lazily* when they're needed for injection.
|
||||
|
||||
其他providers只在注入需要他们的时候才创建他们值 - *延迟加载*
|
||||
其它providers只在注入需要它们的时候才创建它们值 - *延迟加载*
|
||||
|
||||
.l-main-section
|
||||
a(id='useclass')
|
||||
|
|
@ -806,7 +806,7 @@ a(id='usefactory')
|
|||
Look at the [live example](/resources/live-examples/cb-dependency-injection/ts/plnkr.html)
|
||||
for the full source code.
|
||||
|
||||
该函数从`HeroService`获取英雄参赛者，从中取`2`个作为亚军，并把他们的名字合并起来。亲到[在线例子](/resources/live-examples/cb-dependency-injection/ts/plnkr.html)看全部原代码。
|
||||
该函数从`HeroService`获取英雄参赛者，从中取`2`个作为亚军，并把他们的名字合并起来。请到[在线例子](/resources/live-examples/cb-dependency-injection/ts/plnkr.html)看全部原代码。
|
||||
|
||||
|
||||
a(id="tokens")
|
||||
|
|
@ -915,7 +915,7 @@ a(id='opaque-token')
|
|||
a JavaScript object that has a friendly name but won't conflict with
|
||||
another token that happens to have the same name.
|
||||
|
||||
这样的对象没有应用程序接口，所以不能用一个类来表示。它们可被一个唯一的和标志性的令牌更好的表达，一个JavaScript对象，拥有一个友好的名字但是不会与其他名字相同的令牌有冲突。
|
||||
这样的对象没有应用程序接口，所以不能用一个类来表示。它们可被一个唯一的和标志性的令牌更好的表达，一个JavaScript对象，拥有一个友好的名字但是不会与其它名字相同的令牌有冲突。
|
||||
|
||||
The `OpaqueToken` has these characteristics.
|
||||
We encountered them twice in the *Hero of the Month* example,
|
||||
|
|
@ -941,7 +941,7 @@ a(id="di-inheritance")
|
|||
we must re-provide and re-inject them in the derived class
|
||||
and then pass them down to the base class through the constructor.
|
||||
|
||||
当编写一个从另一个组件衍生的组件的时候，我们要格外小心。如果基础组件有注入的依赖，我们必须要在衍生类中重新提供和重新注入它们，并且将他们通过构造函数传给基本类。
|
||||
当编写一个从另一个组件衍生的组件的时候，我们要格外小心。如果基础组件有注入的依赖，我们必须要在衍生类中重新提供和重新注入它们，并且将它们通过构造函数传给基本类。
|
||||
|
||||
In this contrived example, `SortedHeroesComponent` inherits from `HeroesBaseComponent`
|
||||
to display a *sorted* list of heroes.
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ include ../_util-fns
|
|||
especially if we'll need a great number of them, they're similar to each other, and they change frequently
|
||||
to meet rapidly changing business and regulatory requirements.
|
||||
|
||||
我们不可能一直觉得手动编写表单和需要的工作量和时间成正比，特别是当我们需要编写大量的表单，他们非常类似，而且他们需要随着商务和政策需求的迅速变化而变化。
|
||||
我们不可能一直觉得手动编写表单和需要的工作量和时间成正比，特别是当我们需要编写大量的表单，它们非常类似，而且它们需要随着商务和政策需求的迅速变化而变化。
|
||||
|
||||
It may be more economical to create the forms dynamically, based on metadata that describe the business object model.
|
||||
|
||||
|
|
@ -166,7 +166,7 @@ include ../_util-fns
|
|||
Although in this example we're modelling a job application for heroes, there are no references to any specific hero question
|
||||
outside the objects returned by `QuestionService`.
|
||||
|
||||
虽然在这个例子中，我们是在为英雄工作申请表建模，但是除了`QuestionService`返回的对象外，没有其他任何地方有指定英雄问卷相关的内容。
|
||||
虽然在这个例子中，我们是在为英雄工作申请表建模，但是除了`QuestionService`返回的对象外，没有其它任何地方有指定英雄问卷相关的内容。
|
||||
|
||||
This is very important since it allows us to repurpose the components for any type of survey
|
||||
as long as it's compatible with our *question* object model.
|
||||
|
|
|
|||
|
|
@ -318,7 +318,7 @@ include _util-fns
|
|||
that it decorates. None of the decorations shown here will "leak" to other
|
||||
classes appearing below it in the file.
|
||||
|
||||
一个装饰器的作用范围会被限制在它所装饰的东西上，这是一个语言级特性。在上面这个例子中，就算其他类在同一个文件中紧跟着上面的类也不会有任何装饰器“泄露”到其他类。
|
||||
一个装饰器的作用范围会被限制在它所装饰的东西上，这是一个语言级特性。在上面这个例子中，就算其它类在同一个文件中紧跟着上面的类也不会有任何装饰器“泄露”到其它类。
|
||||
|
||||
.alert.is-important
|
||||
:marked
|
||||
|
|
@ -349,7 +349,7 @@ include _util-fns
|
|||
part "A" relies on another part "B", we say that "A" depends on "B" and
|
||||
that "B" is a dependency of "A".
|
||||
|
||||
这些小部件通常会依赖其他小部件。一个Angular[组件](#component)可能依赖一个“服务”部件来获取数据或者处理运算。当部件A要靠另一个部件B才能工作，我们就说A依赖B，B是A的“依赖”。
|
||||
这些小部件通常会依赖其它小部件。一个Angular[组件](#component)可能依赖一个“服务”部件来获取数据或者处理运算。当部件A要靠另一个部件B才能工作，我们就说A依赖B，B是A的“依赖”。
|
||||
|
||||
We can ask a "Dependency Injection System" to create "A"
|
||||
for us and handle all the dependencies.
|
||||
|
|
@ -471,7 +471,7 @@ include _util-fns
|
|||
:marked
|
||||
The [official JavaScript language specification](https://en.wikipedia.org/wiki/ECMAScript).
|
||||
|
||||
[官方Javascript语言规范](https://en.wikipedia.org/wiki/ECMAScript)
|
||||
[官方JavaScript语言规范](https://en.wikipedia.org/wiki/ECMAScript)
|
||||
|
||||
The latest approved version of JavaScript is
|
||||
[ECMAScript 2015](http://www.ecma-international.org/ecma-262/6.0/)
|
||||
|
|
@ -485,7 +485,7 @@ include _util-fns
|
|||
Applications written in ES2015 or one of its dialects must be "[transpiled](#transpile)"
|
||||
to ES5 JavaScript.
|
||||
|
||||
目前，几乎所有现代游览器都只支持上一版本“ECMAScript 5” （也就是ES5）标准。使用ES2015或者其他兼容语言开发的应用程序，都必须被编译“[transpiled](#transpile)”成ES5 Javascript。
|
||||
目前，几乎所有现代游览器都只支持上一版本“ECMAScript 5” （也就是ES5）标准。使用ES2015或者其它兼容语言开发的应用程序，都必须被编译“[transpiled](#transpile)”成ES5 JavaScript。
|
||||
|
||||
Angular 2 developers may choose to write in ES5 directly.
|
||||
|
||||
|
|
@ -609,7 +609,7 @@ include _util-fns
|
|||
[Directives](#directive) and [Components](#component) have a lifecycle
|
||||
managed by Angular as it creates, updates and destroys them.
|
||||
|
||||
[指令Directives](#directive)和[组件Components](#component)有生命周期，由Angular在创建、更新和销毁他们的过程中管理。
|
||||
[指令Directives](#directive)和[组件Components](#component)有生命周期，由Angular在创建、更新和销毁它们的过程中管理。
|
||||
|
||||
Developers can tap into key moments in that lifecycle by implementing
|
||||
one or more of the "Lifecycle Hook" interfaces.
|
||||
|
|
@ -665,7 +665,7 @@ include _util-fns
|
|||
In general, we assemble our application from many modules, both the ones we write ourselves
|
||||
and the ones we acquire from others.
|
||||
|
||||
一般来说，我们用模块来组装我们的应用程序，这些模块包含我们自己编写的模块和从其他地方获取的模块。
|
||||
一般来说，我们用模块来组装我们的应用程序，这些模块包含我们自己编写的模块和从其它地方获取的模块。
|
||||
|
||||
A typical module is a cohesive block of code dedicated to a single purpose.
|
||||
|
||||
|
|
@ -792,7 +792,7 @@ include _util-fns
|
|||
There are other ways to create tokens and recipes.
|
||||
See [Dependency Injection](#dependency-injection) chapter to learn more.
|
||||
|
||||
还有其他一些方法建立Token和方剂。
|
||||
还有其它一些方法建立Token和方剂。
|
||||
请看[依赖注入Dependency Injection](#dependency-injection)以获取更多信息。
|
||||
|
||||
.l-main-section
|
||||
|
|
@ -808,7 +808,7 @@ include _util-fns
|
|||
and taking other similar actions that cause the application to
|
||||
replace one view with another.
|
||||
|
||||
大部分应用程序包含多个屏或视图[views](#view)。用户通过点击链接、按钮和其他类似动作，在他们之间穿梭，这样应用程序从一个视图变换到另一个视图。
|
||||
大部分应用程序包含多个屏或视图[views](#view)。用户通过点击链接、按钮和其它类似动作，在它们之间穿梭，这样应用程序从一个视图变换到另一个视图。
|
||||
|
||||
The Angular [Component Router](guide/router.html) is a richly featured mechanism for configuring
|
||||
and managing the entire view navigation process including the creation and destruction
|
||||
|
|
@ -933,7 +933,7 @@ include _util-fns
|
|||
TypeScript is the preferred language for Angular 2 development although
|
||||
we are welcome to write in other JavaScript dialects such as [ES5](#es5).
|
||||
|
||||
TypeScript是Angular 2推荐使用的语言，当然，我们也欢迎使用其他JavaScript语言，比如[ES5](#es5)。
|
||||
TypeScript是Angular 2推荐使用的语言，当然，我们也欢迎使用其它JavaScript语言，比如[ES5](#es5)。
|
||||
|
||||
Angular 2 itself is written in TypeScript.
|
||||
|
||||
|
|
@ -971,7 +971,7 @@ include _util-fns
|
|||
dynamically as the user navigates through the application, typically
|
||||
under the control of a [router](#router).
|
||||
|
||||
视图一般包含其他视图，任何视图在用户在应用程序中导航的时候，可能被动态加载或卸载，一般[路由器](#router)的控制下进行。
|
||||
视图一般包含其它视图，任何视图在用户在应用程序中导航的时候，可能被动态加载或卸载，一般[路由器](#router)的控制下进行。
|
||||
|
||||
.l-main-section
|
||||
<a id="W"></a>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
|
||||
"displaying-data": {
|
||||
"title": "显示数据",
|
||||
"intro": "利用插值表达式和其他形式的属性绑定机制，把数据显示到UI上。",
|
||||
"intro": "利用插值表达式和其它形式的属性绑定机制，把数据显示到UI上。",
|
||||
"nextable": true,
|
||||
"basics": true
|
||||
},
|
||||
|
|
|
|||
|
|
@ -295,7 +295,7 @@ figure
|
|||
What are `*ngFor`, `{{hero.name}}`, `(click)`, `[hero]`, and `<hero-detail>`?
|
||||
|
||||
我们认得`<h2>`和`<div>`。
|
||||
但有一些其他的标签/属性是我们在学校中从没有听说过的。
|
||||
但有一些其它的标签/属性是我们在学校中从没有听说过的。
|
||||
什么是`*ngFor`、`{{hero.name}}`、`(click)`、`[hero]`和`<hero-detail>`？
|
||||
|
||||
These are examples of Angular's [template syntax](template-syntax.html).
|
||||
|
|
@ -579,7 +579,7 @@ figure
|
|||
**Attribute** directives alter the appearance or behavior of an existing element.
|
||||
In templates they look like regular HTML attributes, hence the name.
|
||||
|
||||
**属性型指令** 修改一个现有元素的外观或行为。在模板中，他们看起来就像是标准的HTML属性，故名。
|
||||
**属性型指令** 修改一个现有元素的外观或行为。在模板中，它们看起来就像是标准的HTML属性，故名。
|
||||
|
||||
The `ngModel` directive, which implements two-way data binding, is an example of an attribute directive.
|
||||
|
||||
|
|
@ -814,13 +814,13 @@ figure
|
|||
and it's more than enough to get going.
|
||||
But it doesn't include everything we'll need or want to know.
|
||||
|
||||
这是Angular应用中所有其他东西的基础，而且它已经绰绰有余了。
|
||||
这是Angular应用中所有其它东西的基础，而且它已经绰绰有余了。
|
||||
但它还没有包括我们所要用的或想知道的一切。
|
||||
<a id="other-stuff"></a>
|
||||
.l-main-section
|
||||
:marked
|
||||
## The Other Stuff
|
||||
## 其他东西
|
||||
## 其它东西
|
||||
|
||||
Here is a brief, alphabetical list of other important Angular features and services.
|
||||
Most of them are covered in this Developers Guide (or soon will be):
|
||||
|
|
|
|||
|
|
@ -347,7 +347,7 @@
|
|||
"bold": [
|
||||
"constructor(myService: MyService, ...)"
|
||||
],
|
||||
"description": "<p>类的构造函数会在所有其他生命周期钩子之前调用。使用它来注入依赖，但是要避免用它做较重的工作。</p>\n"
|
||||
"description": "<p>类的构造函数会在所有其它生命周期钩子之前调用。使用它来注入依赖，但是要避免用它做较重的工作。</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "ngOnChanges(changeRecord) { ... }",
|
||||
|
|
|
|||
|
|
@ -367,7 +367,7 @@ figure.image-display
|
|||
we were conditionally including or excluding a big chunk of HTML with many data bindings.
|
||||
|
||||
Angular并不是在显示和隐藏这条消息，它是在从DOM中添加和移除这段元素。
|
||||
在这个范例中，他们几乎等价。但是如果我们要根据条件包含或排除一大段具有很多数据绑定的HTML，性能上的区别就会很明显。
|
||||
在这个范例中，它们几乎等价。但是如果我们要根据条件包含或排除一大段具有很多数据绑定的HTML，性能上的区别就会很明显。
|
||||
:marked
|
||||
Try it out. Because the array has four items, the message should appear.
|
||||
Go back into `app.component.ts` and delete or comment out one of the elements from the hero array.
|
||||
|
|
|
|||
|
|
@ -444,7 +444,7 @@ figure.image-display
|
|||
from the interpolated text.
|
||||
At some point it might look like this.
|
||||
|
||||
如果我们现在运行这个应用，并且开始在 *姓名* 输入框中键入、添加和删除字符，我们将看到他们从插值结果中显示和消失。
|
||||
如果我们现在运行这个应用，并且开始在 *姓名* 输入框中键入、添加和删除字符，我们将看到它们从插值结果中显示和消失。
|
||||
某一瞬间，它看起来可能是这样。
|
||||
figure.image-display
|
||||
img(src="/resources/images/devguide/forms/ng-model-in-action.png" width="400px" alt="操作中的ngModel")
|
||||
|
|
@ -948,7 +948,7 @@ figure.image-display
|
|||
control* is valid.
|
||||
|
||||
`NgForm`指令使用额外的特性扩充了`form`元素。
|
||||
它保存我们通过`ngControl`属性为各个元素创建的控件类，并且监听他们的属性变化，包括有效性。
|
||||
它保存我们通过`ngControl`属性为各个元素创建的控件类，并且监听它们的属性变化，包括有效性。
|
||||
它还有自己的`valid`属性，只有当 *每一个被包含的控件* 都有效时，它才有效。
|
||||
|
||||
:marked
|
||||
|
|
|
|||
|
|
@ -170,7 +170,7 @@ table(width="100%")
|
|||
|
||||
少量早期的章节是作为教程来写的，并且被清晰地标注出来。
|
||||
但大部分章节都不是教程。
|
||||
他们的目的是展示代码中的关键点，而不是解释构建这个范例所需的每一个步骤。
|
||||
它们的目的是展示代码中的关键点，而不是解释构建这个范例所需的每一个步骤。
|
||||
我们总能从鲜活范例的链接找到完整的源代码。
|
||||
|
||||
## References
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ include ../_util-fns
|
|||
|
||||
The purpose of this style guide is to provide guidance on building Angular applications by showing the conventions we use and, more importantly, why we choose them.
|
||||
|
||||
本风格指南的目的是，通过展示我们使用的规则，更加重要的，展示我们为什么要选择他们，来为建造Angular应用程序提供一个向导。
|
||||
本风格指南的目的是，通过展示我们使用的规则，更加重要的，展示我们为什么要选择它们，来为建造Angular应用程序提供一个向导。
|
||||
.l-main-section
|
||||
|
||||
:marked
|
||||
|
|
@ -102,7 +102,7 @@ a(id='toc')
|
|||
We apply the [Single Responsibility Principle](https:\/\/en.wikipedia.org/wiki/Single_responsibility_principle) to all Components, Services, and other symbols we create.
|
||||
This helps make our app cleaner, easier to read and maintain, and more testable.
|
||||
|
||||
我们对我们创建的所有组件、服务和其他标志等，应用[单一职责原则](https:\/\/en.wikipedia.org/wiki/Single_responsibility_principle)。这样能帮助把我们的应用程序弄的干净、易读、易于维护和易测试。
|
||||
我们对我们创建的所有组件、服务和其它标志等，应用[单一职责原则](https:\/\/en.wikipedia.org/wiki/Single_responsibility_principle)。这样能帮助把我们的应用程序弄的干净、易读、易于维护和易测试。
|
||||
|
||||
### Rule of One
|
||||
### 单一规则
|
||||
|
|
@ -198,7 +198,7 @@ a(href="#toc") 回到顶部
|
|||
:marked
|
||||
**Why?** Small functions are easier to test, especially when they do one thing and serve one purpose.
|
||||
|
||||
**为什么？** 小函数更加容易被测试，特别是当他们只做一件事，为一个目的服务的时候。
|
||||
**为什么？** 小函数更加容易被测试，特别是当它们只做一件事，为一个目的服务的时候。
|
||||
|
||||
.s-why
|
||||
:marked
|
||||
|
|
@ -308,7 +308,7 @@ a(href="#toc") 回到顶部
|
|||
:marked
|
||||
**Do** use conventional suffixes for the types including `*.service.ts`, `*.component.ts`, `*.pipe.ts`. Invent other suffixes where desired, but take care in having too many.
|
||||
|
||||
**做** 使用依照惯例的后缀来描述类型，包括`*.service.ts`、`*.component.ts`、`*.pipe.ts`。如果你想，你可以发明其他的后缀，但是请注意不要有太多。
|
||||
**做** 使用依照惯例的后缀来描述类型，包括`*.service.ts`、`*.component.ts`、`*.pipe.ts`。如果你想，你可以发明其它的后缀，但是请注意不要有太多。
|
||||
|
||||
.s-why
|
||||
:marked
|
||||
|
|
@ -344,7 +344,7 @@ a(href="#toc") 回到顶部
|
|||
.s-rule.do
|
||||
:marked
|
||||
**Do** use consistent names for all assets named after what they represent.
|
||||
**做** 为所有财产的使用统一的命名：以他们所代表的东西命名
|
||||
**做** 为所有财产的使用统一的命名：以它们所代表的东西命名
|
||||
|
||||
.s-rule.do
|
||||
:marked
|
||||
|
|
|
|||
|
|
@ -298,7 +298,7 @@ include ../_util-fns
|
|||
where it will be easier to develop and test.
|
||||
|
||||
一个属性名或方法调用属于常态。偶尔的逻辑取反(`!`)也还凑合。
|
||||
其他情况下，组件会自己界定应用逻辑和业务逻辑，它将让开发和测试变得更容易。
|
||||
其它情况下，组件会自己界定应用逻辑和业务逻辑，它将让开发和测试变得更容易。
|
||||
|
||||
#### Idempotence
|
||||
#### 幂等性
|
||||
|
|
|
|||
|
|
@ -328,7 +328,7 @@ a(id="component-import")
|
|||
|
||||
Angular apps are modular. They consist of many files each dedicated to a purpose.
|
||||
|
||||
Angular的应用都是模块化的。他们由很多职责明确的文件组成。
|
||||
Angular的应用都是模块化的。它们由很多职责明确的文件组成。
|
||||
|
||||
Angular itself is modular. It is a collection of library modules
|
||||
each made up of several, related features that we'll use to build our application.
|
||||
|
|
@ -413,7 +413,7 @@ a(id="component-import")
|
|||
We **export** `AppComponent` so that we can **import** it elsewhere in our application,
|
||||
as we'll see when we create `main.ts`.
|
||||
|
||||
我们 **导出** `AppComponent`，以便我们可以在应用的其他地方 **导入** 它 —— 比如我们创建`main.ts`时。
|
||||
我们 **导出** `AppComponent`，以便我们可以在应用的其它地方 **导入** 它 —— 比如我们创建`main.ts`时。
|
||||
a(id="main")
|
||||
.l-main-section
|
||||
:marked
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ include ../_util-fns
|
|||
the [Tour of Heroes](../tutorial/) tutorial
|
||||
such as <code>npm</code>, <code>gulp</code>, and <code>live-server</code>.
|
||||
|
||||
本单元测试章节是在其他章节的基础上编写的。我们建议你按顺序阅读他们。我们同时假设你已经对Angular 2的原理、在[快速开始](../quickstart.html)里介绍的工具、
|
||||
本单元测试章节是在其它章节的基础上编写的。我们建议你按顺序阅读它们。我们同时假设你已经对Angular 2的原理、在[快速开始](../quickstart.html)里介绍的工具、
|
||||
[英雄指南](../tutorial)和<code>npm</code>, <code>gulp</code>, and <code>live-server</code>等工具都所有了解。
|
||||
|
||||
.l-main-section
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ pre.prettyprint.lang-bash
|
|||
:marked
|
||||
In the head we have three Jasmine scripts and one Jasmine css file. That’s the foundation for running any tests.
|
||||
|
||||
在head里面，我们有三个Jasmine脚本和一个Jasmine css文件。他们是运行任何测试的奠基石。
|
||||
在head里面，我们有三个Jasmine脚本和一个Jasmine css文件。它们是运行任何测试的奠基石。
|
||||
|
||||
We’ll write our first test with inline JavaScript inside the body tag:
|
||||
|
||||
|
|
@ -163,7 +163,7 @@ pre.prettyprint.lang-bash
|
|||
what `it` and `expect` are because they lack the typing files that describe Jasmine.
|
||||
We can ignore those annoying complaints for now as they are harmless.
|
||||
|
||||
我们的编辑器和编译器可能会抱怨，说他们不知道什么是`it`和`expect`，因为他们缺少描述Jasmine的typing文件。我们暂时可以忽略这些讨厌的抱怨，他们目前并无害处。
|
||||
我们的编辑器和编译器可能会抱怨，说它们不知道什么是`it`和`expect`，因为它们缺少描述Jasmine的typing文件。我们暂时可以忽略这些讨厌的抱怨，它们目前并无害处。
|
||||
|
||||
:marked
|
||||
If we reload the browser, we should see the same Jasmine test-runner output as before.
|
||||
|
|
@ -193,7 +193,7 @@ pre.prettyprint.lang-bash
|
|||
.l-main-section
|
||||
:marked
|
||||
## Add a describe and another test
|
||||
## 添加一个describe和其他测试
|
||||
## 添加一个describe和其它测试
|
||||
|
||||
We can’t tell what file produced these test results. We only have one file at the moment but soon we’ll write more.
|
||||
|
||||
|
|
|
|||
|
|
@ -279,6 +279,6 @@ code-example(language="html").
|
|||
[next tutorial chapter](./toh-pt2.html).
|
||||
|
||||
我们的《英雄指南》只显示了一个英雄，而我们真正想显示的是一个英雄列表。
|
||||
我们还希望允许用户选择一个英雄，并且显示他们的详情。
|
||||
我们还希望允许用户选择一个英雄，并且显示他的详情。
|
||||
我们还将学习更多：接收一个列表、把它们绑定到模板，以及让用户选择它。
|
||||
这些都在[教程的下一章](./toh-pt2.html)。
|
||||
|
|
|
|||
|
|
@ -121,7 +121,7 @@ code-example(format="." language="bash").
|
|||
Then we export the class to make it available to other components.
|
||||
|
||||
我们使用`@Component`装饰器创建元数据，在元数据中，我们指定选择器的名字，用以标记此组件的元素。
|
||||
然后，我们导出这个类，以便其他组件可以使用它。
|
||||
然后，我们导出这个类，以便其它组件可以使用它。
|
||||
|
||||
When we finish here, we'll import it into `AppComponent` and create a corresponding `<my-hero-detail>` element.
|
||||
|
||||
|
|
|
|||
|
|
@ -484,7 +484,7 @@ code-example(format="." language="html").
|
|||
:marked
|
||||
We are simplifying. Learn about ES2015 Promises [here](http://exploringjs.com/es6/ch_promises.html) and elsewhere on the web.
|
||||
|
||||
这里只是粗浅的说说，要了解更多，请参见[这里](http://exploringjs.com/es6/ch_promises.html)以及在Web上搜索其他学习资源。
|
||||
这里只是粗浅的说说，要了解更多，请参见[这里](http://exploringjs.com/es6/ch_promises.html)以及在Web上搜索其它学习资源。
|
||||
:marked
|
||||
Update the `HeroService` with this promise-returning `getHeroes` method:
|
||||
|
||||
|
|
|
|||
|
|
@ -385,7 +385,7 @@ code-example(format="." language="bash").
|
|||
we call this type of component a *Router Component*.
|
||||
|
||||
*AppComponent* 现在有了一个路由器，并且能显示路由到的视图。
|
||||
因此，为了把它从其他种类的组件中区分出来，我们称这类组件为 *路由器组件*。
|
||||
因此，为了把它从其它种类的组件中区分出来，我们称这类组件为 *路由器组件*。
|
||||
|
||||
:marked
|
||||
## Add a *Dashboard*
|
||||
|
|
|
|||
Loading…
Reference in New Issue