fix： change all 他 > 它
This commit is contained in:
rexebin
parent
04ac213aa8
commit
f7c60a07df
|
|
@ -74,7 +74,7 @@ table(width="100%")
|
|||
In TypeScript code, Angular classes, functions, and other members
|
||||
are imported with TypeScript `import` statements:
|
||||
|
||||
在TypeScript代码中，Angular是利用TypeScript的`import`语句来导入类、函数和其他成员的。
|
||||
在TypeScript代码中，Angular是利用TypeScript的`import`语句来导入类、函数和其它成员的。
|
||||
|
||||
+makeExample('cb-ts-to-js/ts/app/main.ts', 'ng2import')(format="." )
|
||||
|
||||
|
|
|
|||
|
|
@ -706,7 +706,7 @@ table(width="100%")
|
|||
If that methods returns `false`, the template displays "No movie, sorry!".
|
||||
|
||||
在这个例子中，如果`favoriteHero`没有设置，则模板显示“Please enter ...”。
|
||||
如果`favoriteHero`设置过，它就会通过调用一个控制其方法来检查他是否电影里的英雄。
|
||||
如果`favoriteHero`设置过，它就会通过调用一个控制其方法来检查它是否电影里的英雄。
|
||||
如果该方法返回`true`，模板就会显示“Excellent choice!”。
|
||||
如果该方法返回`false`，该模板就会显示“No movie, sorry!”。
|
||||
|
||||
|
|
@ -1017,7 +1017,7 @@ table(width="100%")
|
|||
:marked
|
||||
In Angular 1, an Angular module keeps track of controllers, services, and other code. The second argument defines the list of other modules that this module depends upon.
|
||||
|
||||
在Angular 1中，Angular模块用来对控制器、服务和其他代码进行跟踪。第二个参数定义该模块依赖的其它模块列表。
|
||||
在Angular 1中，Angular模块用来对控制器、服务和其它代码进行跟踪。第二个参数定义该模块依赖的其它模块列表。
|
||||
|
||||
td
|
||||
:marked
|
||||
|
|
|
|||
|
|
@ -356,7 +356,7 @@ figure.image-display
|
|||
This much Dependency Injection knowledge may be all that many Angular developers
|
||||
ever need to build their applications. It doesn't always have to be more complicated.
|
||||
|
||||
对一些Angular开发者来说，这么多依赖注入知识可能已经是他们需要知道的全部了。不是每个人都需要更复杂的用法。
|
||||
对一些Angular开发者来说，这么多依赖注入知识可能已经是它们需要知道的全部了。不是每个人都需要更复杂的用法。
|
||||
|
||||
<a id="multiple-service-instances"></a>
|
||||
.l-main-section
|
||||
|
|
@ -915,7 +915,7 @@ a(id='usefactory')
|
|||
Look at the <live-example name="cb-dependency-injection"></live-example>
|
||||
for the full source code.
|
||||
|
||||
该函数从`HeroService`获取英雄参赛者，从中取`2`个作为亚军，并把他们的名字拼接起来。请到<live-example name="cb-dependency-injection"></live-example>查看全部原代码。
|
||||
该函数从`HeroService`获取英雄参赛者，从中取`2`个作为亚军，并把它们的名字拼接起来。请到<live-example name="cb-dependency-injection"></live-example>查看全部原代码。
|
||||
|
||||
a(id="tokens")
|
||||
.l-main-section
|
||||
|
|
@ -1309,7 +1309,7 @@ a(id="parent-tree")
|
|||
That means he must both *inject* the `Parent` *class-interface* to get *Alice* and
|
||||
*provide* a `Parent` to satisfy *Carol*.
|
||||
|
||||
*Barry*是个问题。他需要访问它的父组件*Alice*，但同时它也是*Carol*的父组件。这个意味着它必须同时*注入*`Parent`*类-接口*来获取*Alice*，和*提供*一个`Parent`来满足*Carol*。
|
||||
*Barry*是个问题。它需要访问它的父组件*Alice*，但同时它也是*Carol*的父组件。这个意味着它必须同时*注入*`Parent`*类-接口*来获取*Alice*，和*提供*一个`Parent`来满足*Carol*。
|
||||
|
||||
Here's *Barry*:
|
||||
|
||||
|
|
|
|||
|
|
@ -1262,7 +1262,7 @@ a#q-module-recommendations
|
|||
|
||||
真实世界中的模块通常会偏离这些指导原则，而混杂多种不同的类型。
|
||||
这些只是指导原则，不是硬性要求。
|
||||
但除非你有充分的理由不这么做，最好还是遵循他们。
|
||||
但除非你有充分的理由不这么做，最好还是遵循它们。
|
||||
|
||||
table
|
||||
tr
|
||||
|
|
@ -1386,7 +1386,7 @@ table
|
|||
Ideally they consist entirely of _providers_ and have no _declarations_.
|
||||
The `CoreModule` and Angular's `HttpModule` are good examples.
|
||||
|
||||
理想情况下，他们应该完全由`providers`组成，不应该包括`declarations`。
|
||||
理想情况下，它们应该完全由`providers`组成，不应该包括`declarations`。
|
||||
`CoreModule`和Angular的`HttpModule`就是很好的例子。
|
||||
|
||||
Service Modules should _only_ be imported by the root `AppModule`.
|
||||
|
|
@ -1618,7 +1618,7 @@ code-example(format='.').
|
|||
The provided services do not belong to the module nor are they scoped to the declared classes.
|
||||
They are available _everywhere_.
|
||||
|
||||
这些提供的服务不仅仅从属于当前模块，其作用范围也不局限于模块中声明的类。他们*在哪里*都能用。
|
||||
这些提供的服务不仅仅从属于当前模块，其作用范围也不局限于模块中声明的类。它们*在哪里*都能用。
|
||||
|
||||
:marked
|
||||
Here's an _Angular Module_ class with imports, exports, and declarations.
|
||||
|
|
@ -1922,7 +1922,7 @@ table
|
|||
Routed components are also _entry components_ because they aren't referenced in a template either.
|
||||
The router creates them and drops them into the DOM near a `<router-outlet>`.
|
||||
|
||||
路由组件同样是*入口组件*，因为他们也不会被从模板中引用。
|
||||
路由组件同样是*入口组件*，因为它们也不会被从模板中引用。
|
||||
路由器创建会它们，并把它们扔到DOM中的`<router-outlet>`。
|
||||
|
||||
While the bootstrapped and routed components are _entry components_,
|
||||
|
|
|
|||
|
|
@ -325,7 +325,7 @@ figure
|
|||
For example, this `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.
|
||||
|
||||
<a id="component-code"></a>
|
||||
例如，`HeroListComponent`有一个`heroes`属性，它返回一个“英雄”数组，这个数组是由一个服务提供的。`HeroListComponent`还有一个`selectHero()`方法，当用户从列表中点选一个英雄时，就把他/她设置到`selectedHero`属性。
|
||||
例如，`HeroListComponent`有一个`heroes`属性，它返回一个“英雄”数组，这个数组是由一个服务提供的。`HeroListComponent`还有一个`selectHero()`方法，当用户从列表中点选一个英雄时，就把它/她设置到`selectedHero`属性。
|
||||
|
||||
+makeExcerpt('app/hero-list.component.ts', 'class')
|
||||
:marked
|
||||
|
|
@ -771,7 +771,7 @@ figure
|
|||
It delegates everything nontrivial to services.
|
||||
|
||||
组件的任务就是提供用户体验，仅此而已。它介于视图(由模板渲染)和应用逻辑(通常包括_模型（model）_的观念)之间。
|
||||
设计良好的组件为数据绑定提供属性和方法，把那些其他对它们不重要的事情都委托给服务。
|
||||
设计良好的组件为数据绑定提供属性和方法，把那些其它对它们不重要的事情都委托给服务。
|
||||
|
||||
Angular doesn't *enforce* these principles.
|
||||
It won't complain if you write a "kitchen sink" component with 3000 lines.
|
||||
|
|
|
|||
|
|
@ -172,7 +172,7 @@ p
|
|||
p
|
||||
| `@Directive`元数据的后面就是指令的控制器类，它包括了指令的工作逻辑。
|
||||
+ifDocsFor('ts')
|
||||
| 我们导出`HighlightDirective`以便让它可以被其他组件访问。
|
||||
| 我们导出`HighlightDirective`以便让它可以被其它组件访问。
|
||||
:marked
|
||||
Angular creates a new instance of the directive's controller class for
|
||||
each matching element, injecting an Angular `ElementRef` and `Renderer`
|
||||
|
|
@ -631,7 +631,7 @@ a#why-input
|
|||
|
||||
出乎意料的是，有些人(可能因为太天真)开始绑定到这个指令中的*每一个*属性。
|
||||
不仅仅只是我们预期为绑定目标的那一两个属性，而是*每一个*。
|
||||
这可能会扰乱指令的工作方式 —— 我们既不想这样做也不想支持他们这样做。
|
||||
这可能会扰乱指令的工作方式 —— 我们既不想这样做也不想支持它们这样做。
|
||||
|
||||
The *input* declaration ensures that consumers of our directive can only bind to
|
||||
the properties of our public API ... nothing else.
|
||||
|
|
|
|||
|
|
@ -271,7 +271,7 @@ block module-bundlers
|
|||
Users of module bundlers like Webpack may also use the `styles` attribute
|
||||
to load styles from external files at build time. They could write:
|
||||
|
||||
像Webpack这类模块打包器的用户可能会使用`styles`属性来在构建时从外部文件中加载样式。他们可能这样写：
|
||||
像Webpack这类模块打包器的用户可能会使用`styles`属性来在构建时从外部文件中加载样式。它们可能这样写：
|
||||
|
||||
`styles: [require('my.component.css')]`
|
||||
|
||||
|
|
|
|||
|
|
@ -91,7 +91,7 @@ block includes
|
|||
|
||||
现在，每辆车都有它自己的引擎。它不能和其它车辆共享引擎。
|
||||
虽然这对于汽车来说还算可以理解，但是我们设想一下那些应该被共享的依赖，比如用来联系厂家服务中心的车载无线。
|
||||
我们的车缺乏必要的弹性，无法共享当初给其他消费者创建的车载无线。
|
||||
我们的车缺乏必要的弹性，无法共享当初给其它消费者创建的车载无线。
|
||||
|
||||
When we write tests for our `Car` we're at the mercy of its hidden dependencies.
|
||||
Is it even possible to create a new `Engine` in a test environment?
|
||||
|
|
@ -1148,7 +1148,7 @@ block dart-diff-const-metadata-ctor
|
|||
They can be object literals such as this one:
|
||||
|
||||
应用程序经常为很多很小的因素(比如应用程序的标题，或者一个网络API终点的地址)定义配置对象，但是这些配置对象不总是类的实例。
|
||||
他们可能是对象，比如下面这个：
|
||||
它们可能是对象，比如下面这个：
|
||||
|
||||
+makeExample('dependency-injection/ts/app/app.config.ts','config','app/app-config.ts (excerpt)')(format='.')
|
||||
|
||||
|
|
@ -1354,7 +1354,7 @@ block one-class-per-file-ts-tradeoffs
|
|||
Developers expect one class per file. Keep them happy.
|
||||
|
||||
在同一个文件中有多个类容易造成混淆，最好避免。
|
||||
开发人员期望每个文件只放一个类。这会让他们开心点。
|
||||
开发人员期望每个文件只放一个类。这会让它们开心点。
|
||||
|
||||
|
||||
If we scorn this advice and, say,
|
||||
|
|
|
|||
|
|
@ -99,7 +99,7 @@ figure.image-display
|
|||
Here at the *Hero Employment Agency* we use this form to maintain personal information about the
|
||||
heroes in our stable. Every hero needs a job. It's our company mission to match the right hero with the right crisis!
|
||||
|
||||
这里是*英雄管理局*，我们使用这个表单来维护候选英雄们的个人信息。每个英雄都需要一份工作。我们公司的任务就是让适当的英雄去解决他/她所擅长应对的危机！
|
||||
这里是*英雄管理局*，我们使用这个表单来维护候选英雄们的个人信息。每个英雄都需要一份工作。我们公司的任务就是让适当的英雄去解决它/她所擅长应对的危机！
|
||||
|
||||
Two of the three fields on this form are required. Required fields have a green bar on the left to make them easy to spot.
|
||||
|
||||
|
|
@ -181,7 +181,7 @@ include ../_quickstart_repo
|
|||
As users enter form data, we capture their changes and update an instance of a model.
|
||||
We can't layout the form until we know what the model looks like.
|
||||
|
||||
当用户输入表单数据时，我们要捕获他们的变化，并更新到模型的一个实例中。
|
||||
当用户输入表单数据时，我们要捕获它们的变化，并更新到模型的一个实例中。
|
||||
除非我们知道模型里有什么，否则无法设计表单。
|
||||
|
||||
A model can be as simple as a "property bag" that holds facts about a thing of application importance.
|
||||
|
|
@ -399,7 +399,7 @@ code-example(format="").
|
|||
That is plain old HTML 5. We're presenting two of the `Hero` fields, `name` and `alterEgo`, and
|
||||
opening them up for user input in input boxes.
|
||||
|
||||
这只是一段普通的旧式HTML 5代码。这里出现了两个`Hero`字段，`name`和`alterEgo`，让用户可以在输入框中输入，修改他们。
|
||||
这只是一段普通的旧式HTML 5代码。这里出现了两个`Hero`字段，`name`和`alterEgo`，让用户可以在输入框中输入，修改它们。
|
||||
|
||||
The *Name* `<input>` control has the HTML5 `required` attribute;
|
||||
the *Alter Ego* `<input>` control does not because `alterEgo` is optional.
|
||||
|
|
@ -932,7 +932,7 @@ figure.image-display
|
|||
Hiding the message while the control is "pristine" achieves that goal.
|
||||
We'll see the significance of this choice when we [add a new hero](#new-hero) to the form.
|
||||
|
||||
有些人会为这种行为感到不安。他们希望只有在用户做出一个无效的更改时才显示这个消息。如果当控件是“全新”状态时也隐藏消息，就能达到这个目的。
|
||||
有些人会为这种行为感到不安。它们希望只有在用户做出一个无效的更改时才显示这个消息。如果当控件是“全新”状态时也隐藏消息，就能达到这个目的。
|
||||
在往表单中[添加一个新英雄](#new-hero)时，我们将看到这种选择的重要性。
|
||||
|
||||
The Hero *Alter Ego* is optional so we can leave that be.
|
||||
|
|
|
|||
|
|
@ -309,7 +309,7 @@ a(id="other-lifecycles")
|
|||
:marked
|
||||
## Other lifecycle hooks
|
||||
|
||||
## 其他生命周期钩子
|
||||
## 其它生命周期钩子
|
||||
|
||||
Other Angular sub-systems may have their own lifecycle hooks apart from the component hooks we've listed.
|
||||
|
||||
|
|
@ -720,7 +720,7 @@ figure.image-display
|
|||
to the hero or the power so we can keep an eye on the method's performance characteristics.
|
||||
|
||||
我们手动检测了自己关心的一切，捕获当前值并与以前的值进行比较。
|
||||
当英雄或他的超能力发生了非实质性改变时，我们就往日志中写一条特殊的消息，以便看到该方法的工作特征。
|
||||
当英雄或它的超能力发生了非实质性改变时，我们就往日志中写一条特殊的消息，以便看到该方法的工作特征。
|
||||
|
||||
The results are illuminating:
|
||||
|
||||
|
|
|
|||
|
|
@ -148,7 +148,7 @@ a#angular-modularity
|
|||
|
||||
* import other modules with the components, directives and pipes needed by the components in _this_ module.
|
||||
|
||||
* 导入其它模块，从其他模块总获得本模块所需的组件、指令和管道。
|
||||
* 导入其它模块，从其它模块总获得本模块所需的组件、指令和管道。
|
||||
|
||||
* provide services at the application level that any application component can use.
|
||||
|
||||
|
|
@ -924,7 +924,7 @@ a#feature-modules
|
|||
|
||||
2. A feature module can expose or hide its implementation from other modules.
|
||||
|
||||
2. 特性模块可以对其他模块暴露或隐藏自己的实现。
|
||||
2. 特性模块可以对其它模块暴露或隐藏自己的实现。
|
||||
|
||||
Otherwise, a feature module is distinguished primarily by its intent.
|
||||
|
||||
|
|
|
|||
|
|
@ -150,7 +150,7 @@ a(id="dependencies")
|
|||
|
||||
***[system.js](https://github.com/systemjs/systemjs)*** - 是一个动态的模块加载器，
|
||||
与[ES2015模块](http://www.2ality.com/2014/09/es6-modules-final.html)规范兼容。
|
||||
还有很多其他选择，比如广受欢迎的[webpack](https://webpack.github.io/)。
|
||||
还有很多其它选择，比如广受欢迎的[webpack](https://webpack.github.io/)。
|
||||
SystemJS被用在了我们的文档范例中。因为它能工作。
|
||||
|
||||
Your future applications are likely to require additional packages that provide
|
||||
|
|
@ -363,7 +363,7 @@ a(id="why-peer-dependencies")
|
|||
When the application or any of its other dependencies
|
||||
installs a different version of a *peer dependency*.
|
||||
|
||||
幸运的是，*npm*会在下列情况下给我们警告：(a) 当任何*平级依赖*缺失时 或(b) 当应用程序或它的任何其他依赖安装了与*平级依赖*不同版本的包时。
|
||||
幸运的是，*npm*会在下列情况下给我们警告：(a) 当任何*平级依赖*缺失时 或(b) 当应用程序或它的任何其它依赖安装了与*平级依赖*不同版本的包时。
|
||||
|
||||
These warnings guard against accidental failures due to version mismatches.
|
||||
They leave you in control of package and version resolution.
|
||||
|
|
@ -382,7 +382,7 @@ a(id="why-peer-dependencies")
|
|||
|
||||
The Angular polyfill dependencies are hard requirements. Currently, there is no way to make them optional.
|
||||
|
||||
Angular的填充库依赖只是一个给开发人员的建议或提示，以便他们知道Angular期望用什么。
|
||||
Angular的填充库依赖只是一个给开发人员的建议或提示，以便它们知道Angular期望用什么。
|
||||
它们不应该像现在一样是硬需求，但目前我们也不知道该如何把它们设置为可选的。
|
||||
|
||||
However, there is an npm feature request for "optional peerDependencies," which would allow you to model this relationship better.
|
||||
|
|
|
|||
|
|
@ -597,7 +597,7 @@ table
|
|||
Heroes need work and The Agency finds Crises for them to solve.
|
||||
|
||||
我们的客户是“英雄管理局”。
|
||||
英雄们需要找工作，而“英雄管理局”为他们寻找待解决的危机。
|
||||
英雄们需要找工作，而“英雄管理局”为它们寻找待解决的危机。
|
||||
|
||||
The application has three main feature areas:
|
||||
|
||||
|
|
@ -866,7 +866,7 @@ a#base-href
|
|||
which returns a module containing the configured `Router` service provider ... and some other,
|
||||
unseen providers that the routing library requires. We export this as the `routing` token.
|
||||
|
||||
下面是第一种配置。将路由数组传进`RouterModule.forRoot`方法，它将返回一个路由器需要的模块，该模块包含了配置好的`Router`服务提供商和一些其他不可见的提供商。我们将它导出为`routing`常量。
|
||||
下面是第一种配置。将路由数组传进`RouterModule.forRoot`方法，它将返回一个路由器需要的模块，该模块包含了配置好的`Router`服务提供商和一些其它不可见的提供商。我们将它导出为`routing`常量。
|
||||
|
||||
+makeExcerpt('app/app.routing.2.ts')
|
||||
|
||||
|
|
@ -1109,7 +1109,7 @@ h3#router-directives <i>路由器指令集</i>
|
|||
The rest of the starter app is mundane, with little interest from a router perspective.
|
||||
Here are the details for readers inclined to build the sample through to this milestone.
|
||||
|
||||
这个初学者应用的其他部分有点平淡无奇，从路由器的角度来看也很平淡。
|
||||
这个初学者应用的其它部分有点平淡无奇，从路由器的角度来看也很平淡。
|
||||
如果你还是倾向于在这个里程碑里构建它们，参见下面的构建详情。
|
||||
|
||||
Our starter app's structure looks like this:
|
||||
|
|
@ -1284,7 +1284,7 @@ figure.image-display
|
|||
It doesn't need any outside information.
|
||||
|
||||
新的“英雄”特性有两个相互协作的组件，列表和详情。
|
||||
列表视图是自给自足的，我们导航到它，它会自行获取英雄列表并显示他们，该组件不需要任何外部信息。
|
||||
列表视图是自给自足的，我们导航到它，它会自行获取英雄列表并显示它们，该组件不需要任何外部信息。
|
||||
|
||||
The detail view is different. It displays a particular hero. It can't know which hero on its own.
|
||||
That information must come from outside.
|
||||
|
|
@ -2228,7 +2228,7 @@ h3#merge-hero-routes 把hero模块导入到AppModule中
|
|||
|
||||
* The router should block access to certain features until the user logs-in.
|
||||
|
||||
* 如果用户尚未登录，路由器就应该阻止他访问某些特性。
|
||||
* 如果用户尚未登录，路由器就应该阻止它访问某些特性。
|
||||
|
||||
* Our `CrisisService` is only needed within the *Crisis Center* module.
|
||||
We should limit access to it to that module.
|
||||
|
|
@ -2943,7 +2943,7 @@ h3#component-less-route <i>无组件路由</i>: 不借助组件对路由进行
|
|||
|
||||
Instead we'll write a `CanActivate` guard to redirect anonymous users to the login page when they try to reach the admin component.
|
||||
|
||||
我们换种方式：写一个`CanActivate`守卫，当匿名用户尝试访问管理组件时，把他/她重定向到登录页。
|
||||
我们换种方式：写一个`CanActivate`守卫，当匿名用户尝试访问管理组件时，把它/她重定向到登录页。
|
||||
|
||||
This is a general purpose guard — we can imagine other features that require authenticated users —
|
||||
so we create an `auth-guard.service.ts` in the application root folder.
|
||||
|
|
@ -3241,7 +3241,7 @@ a#CanDeactivate
|
|||
But it can also return a `Promise` or an `Observable` and the router will wait for that
|
||||
to resolve to truthy (navigate) or falsey (stay put).
|
||||
|
||||
注意，`canDeactivate`方法*可以*同步返回，如果没有危机，或者没有未定的修改，它就立即返回`true`。但是他也可以返回一个承诺（`Promise`）或可观察对象（`Observable`），路由器将等待它们被解析为真值（继续导航）或假值（留下）。
|
||||
注意，`canDeactivate`方法*可以*同步返回，如果没有危机，或者没有未定的修改，它就立即返回`true`。但是它也可以返回一个承诺（`Promise`）或可观察对象（`Observable`），路由器将等待它们被解析为真值（继续导航）或假值（留下）。
|
||||
|
||||
:marked
|
||||
We add the `Guard` to our crisis detail route in `crisis-center.routing.ts` using the `canDeactivate` array.
|
||||
|
|
@ -3285,7 +3285,7 @@ h3#resolve-guard <i>解析</i>: 提前获取组件数据
|
|||
We want to delay rendering of our route component until all necessary data has been fetched or some action
|
||||
has occurred.
|
||||
|
||||
可以预先从服务器读取数据，这样在路由器被激活时，数据已经返回。同时，我们还需要处理数据返回失败和其他出错情况。这样，在`Crisis Center`中，对处理导航到一个无返回数据的`id`有帮助。
|
||||
可以预先从服务器读取数据，这样在路由器被激活时，数据已经返回。同时，我们还需要处理数据返回失败和其它出错情况。这样，在`Crisis Center`中，对处理导航到一个无返回数据的`id`有帮助。
|
||||
我们可以将用户发回只列出有效危机的`Crisis List`。
|
||||
直到成功获取所有必须的数据或一些行为已经发生，应用需要延迟渲染路由组件。
|
||||
|
||||
|
|
@ -3300,7 +3300,7 @@ h3#resolve-guard <i>解析</i>: 提前获取组件数据
|
|||
We'll update our `Crisis Detail` route to resolve our Crisis before loading the route, or if the user happens to
|
||||
navigate to an invalid crisis center `:id`, we'll navigate back to our list of existing crises.
|
||||
|
||||
我们需要更新`Crisis Detail`路由，让它先解析必要的危机，再加载路由。或者当用户导航到一个无效的危机`:id`时，将他们导航回危机列表。
|
||||
我们需要更新`Crisis Detail`路由，让它先解析必要的危机，再加载路由。或者当用户导航到一个无效的危机`:id`时，将它们导航回危机列表。
|
||||
|
||||
Like the `CanActivate` and `CanDeactivate` guards, the **`Resolve`** guard is an interface we can implement as a service
|
||||
to resolve route data synchronously or asynchronously. In `CrisisDetailComponent`, we used the `ngOnInit` to retrieve the `Crisis`
|
||||
|
|
@ -3600,7 +3600,7 @@ a#fragment
|
|||
Angular provides a built-in module loader that supports **`SystemJS`** to load modules asynchronously. If we were
|
||||
using another bundling tool, such as **Webpack**, we would use the Webpack mechanism for asynchronously loading modules.
|
||||
|
||||
Angular提供一个内置模块加载器，支持**`SystemJS`**来异步加载模块。如果我们使用其他捆绑工具比如**Webpack**，则使用Webpack的机制来异步加载模块。
|
||||
Angular提供一个内置模块加载器，支持**`SystemJS`**来异步加载模块。如果我们使用其它捆绑工具比如**Webpack**，则使用Webpack的机制来异步加载模块。
|
||||
|
||||
:marked
|
||||
We've built our feature area, we've updated our route configuration to take advantage of lazy-loading, now we have to do the final step
|
||||
|
|
@ -3988,11 +3988,11 @@ code-example(format=".", language="bash").
|
|||
Some developers may not be able to add the `<base>` element, perhaps because they don't have
|
||||
access to `<head>` or the `index.html`.
|
||||
|
||||
有些开发人员可能无法添加`<base>`元素，这可能是因为他们没有访问`<head>`或`index.html`的权限。
|
||||
有些开发人员可能无法添加`<base>`元素，这可能是因为它们没有访问`<head>`或`index.html`的权限。
|
||||
|
||||
Those developers may still use HTML 5 URLs by taking two remedial steps:
|
||||
|
||||
他们仍然可以使用HTML 5格式的URL，但要采取两个步骤进行补救：
|
||||
它们仍然可以使用HTML 5格式的URL，但要采取两个步骤进行补救：
|
||||
|
||||
1. Provide the router with an appropriate `APP_BASE_HREF` value.
|
||||
|
||||
|
|
|
|||
|
|
@ -99,7 +99,7 @@ h2#xss 防范跨站脚本(XSS)攻击
|
|||
common attacks on the web.
|
||||
|
||||
[跨站脚本(XSS)](https://en.wikipedia.org/wiki/Cross-site_scripting)允许攻击者将恶意代码注入到页面中。这些代码可以偷取用户数据
|
||||
（特别是他们的登录数据），还可以冒充用户执行操作。它是Web上最常见的攻击方式之一。
|
||||
（特别是它们的登录数据），还可以冒充用户执行操作。它是Web上最常见的攻击方式之一。
|
||||
|
||||
To block XSS attacks, you must prevent malicious code from entering the DOM(Document Object Model). For example, if an
|
||||
attacker can trick you into inserting a `<script>` tag in the DOM, they can run arbitrary code on
|
||||
|
|
@ -350,7 +350,7 @@ h3#xsrf 跨站请求伪造（XSRF）
|
|||
cookies, and the attacker could—for example—cause a bank transfer in the user's name with
|
||||
the right request.
|
||||
|
||||
在跨站请求伪造（XSRF或CSFR）中，一个攻击者会欺骗用户，让他们访问_另一个_页面，并提交一个表单，
|
||||
在跨站请求伪造（XSRF或CSFR）中，一个攻击者会欺骗用户，让它们访问_另一个_页面，并提交一个表单，
|
||||
向你应用程序的Web服务器发送一个请求。如果用户已经登录到你的应用程序，浏览器就会发送该用户的认证Cookie，
|
||||
这样攻击者就可以发送一个正确的请求，以该用户的名义发起一次银行转账。
|
||||
|
||||
|
|
|
|||
|
|
@ -227,7 +227,7 @@ figure.image-display
|
|||
clear it to make it ready for a new hero name.
|
||||
|
||||
它使用`ngFor`来展现这个英雄列表。
|
||||
列表的下方是一个输入框和一个*Add Hero*按钮，在那里，我们可以输入新英雄的名字，并把他们加到数据库中。
|
||||
列表的下方是一个输入框和一个*Add Hero*按钮，在那里，我们可以输入新英雄的名字，并把它们加到数据库中。
|
||||
在`(click)`事件绑定中，我们使用[模板引用变量](template-syntax.html#ref-vars)`newHeroName`来访问这个输入框的值。
|
||||
当用户点击此按钮时，我们把这个值传给组件的`addHero`方法，然后清除它，以备输入新英雄的名字。
|
||||
|
||||
|
|
@ -614,7 +614,7 @@ block hlc-error-handling
|
|||
Let's add the ability to create new heroes and save them in the backend.
|
||||
|
||||
前面我们已经看到如何用一个HTTP服务从远端获取数据了。
|
||||
但我们还能再给力一点，让它可以创建新的英雄，并把他们保存到后端。
|
||||
但我们还能再给力一点，让它可以创建新的英雄，并把它们保存到后端。
|
||||
|
||||
We'll create an easy method for the `HeroListComponent` to call, an `addHero()` method that takes
|
||||
just the name of a new hero:
|
||||
|
|
|
|||
|
|
@ -788,7 +788,7 @@ a(href="#toc") 回到顶部
|
|||
:marked
|
||||
**Why?** Provides pattern matching for [karma](http://karma-runner.github.io/) or other test runners.
|
||||
|
||||
**为何？**提供一个与[karma](http://karma-runner.github.io/)或者其他测试运行器相配的命名模式。
|
||||
**为何？**提供一个与[karma](http://karma-runner.github.io/)或者其它测试运行器相配的命名模式。
|
||||
|
||||
:marked
|
||||
- var top="vertical-align:top"
|
||||
|
|
@ -1309,7 +1309,7 @@ a(href="#toc") 回到顶部
|
|||
:marked
|
||||
**Why?** Nobody wants to search seven levels of folders to find a file. In a folder structure there is no hard and fast number rule, but when a folder has seven to ten files, that may be time to create subfolders. We base it on our comfort level. Use a flatter structure until there is an obvious value (to help the rest of LIFT) in creating a new folder.
|
||||
|
||||
**为何？**没有人愿意搜索7层目录来找一个文件。在目录结构中，没有硬数字约定，但是当目录有七到十个文件时，就是需要新建子目录的时候了。这是基于舒适级别而定的。以平面化结构开始，在有很明显的需求时再新建目录(来配合其他LIFT约定)
|
||||
**为何？**没有人愿意搜索7层目录来找一个文件。在目录结构中，没有硬数字约定，但是当目录有七到十个文件时，就是需要新建子目录的时候了。这是基于舒适级别而定的。以平面化结构开始，在有很明显的需求时再新建目录(来配合其它LIFT约定)
|
||||
|
||||
a(href="#toc") Back to top
|
||||
|
||||
|
|
@ -1338,7 +1338,7 @@ a(href="#toc") 回到顶部
|
|||
:marked
|
||||
**Why?** Being DRY is important, but not crucial if it sacrifices the others in LIFT, which is why we call it T-DRY. We don’t want to type `hero-view.component.html` for a view because, well, it’s obviously a view. If it is not obvious or by convention, then we name it.
|
||||
|
||||
**为何？**虽然不重复自己约定很重要，但是如果要牺牲其他的LIFT约定，它就不是最重要的，这就是为什么我们说**尝试**不重复自己(T-DRY)。我们不愿意为了视图使用`hero-view.component.html`，因为它很明显就是一个视图。如果它不是很明显，那么我们就把视图单词加到它的名字里。
|
||||
**为何？**虽然不重复自己约定很重要，但是如果要牺牲其它的LIFT约定，它就不是最重要的，这就是为什么我们说**尝试**不重复自己(T-DRY)。我们不愿意为了视图使用`hero-view.component.html`，因为它很明显就是一个视图。如果它不是很明显，那么我们就把视图单词加到它的名字里。
|
||||
|
||||
a(href="#toc") Back to top
|
||||
|
||||
|
|
@ -1974,7 +1974,7 @@ a(href="#toc") 回到顶部
|
|||
:marked
|
||||
**Why?** Components are derived from Directives, and thus their selectors can be elements, attributes, or other selectors. Defining the selector as an element provides consistency for components that represent content with a template.
|
||||
|
||||
**为何？**组件是从指令派生出来的，所以它们的选择器可以是元素、特性或者其他选择器。把选择器作为元素来定义，统一了通过模块提供内容的组件。
|
||||
**为何？**组件是从指令派生出来的，所以它们的选择器可以是元素、特性或者其它选择器。把选择器作为元素来定义，统一了通过模块提供内容的组件。
|
||||
|
||||
.s-why.s-why-last
|
||||
:marked
|
||||
|
|
@ -2571,7 +2571,7 @@ a(href="#toc") 回到顶部
|
|||
:marked
|
||||
**Do** make data services responsible for XHR calls, local storage, stashing in memory, or any other data operations.
|
||||
|
||||
**坚持**让数据服务来负责XHR调用、本地储存、内存储存或者其他数据操作。
|
||||
**坚持**让数据服务来负责XHR调用、本地储存、内存储存或者其它数据操作。
|
||||
|
||||
.s-why
|
||||
:marked
|
||||
|
|
@ -2589,7 +2589,7 @@ a(href="#toc") 回到顶部
|
|||
:marked
|
||||
**Why?** Data service implementation may have very specific code to handle the data repository. This may include headers, how to talk to the data, or other services such as `Http`. Separating the logic into a data service encapsulates this logic in a single place hiding the implementation from the outside consumers (perhaps a component), also making it easier to change the implementation.
|
||||
|
||||
**为何？**数据服务的实现可能有非常具体的代码来处理数据仓库，包括数据头(headers)、如何与数据交谈或者其他服务(比如`Http`)。把逻辑分离到数据服务可以把该逻辑封装到一个地方，对外部使用者(比如组件)隐藏具体的实施细节。
|
||||
**为何？**数据服务的实现可能有非常具体的代码来处理数据仓库，包括数据头(headers)、如何与数据交谈或者其它服务(比如`Http`)。把逻辑分离到数据服务可以把该逻辑封装到一个地方，对外部使用者(比如组件)隐藏具体的实施细节。
|
||||
|
||||
a(href="#toc") Back to top
|
||||
|
||||
|
|
|
|||
|
|
@ -897,7 +897,7 @@ table
|
|||
|
||||
表达式中可以调用像`getFoo()`这样的方法。只有我们才知道`getFoo()`干了什么。
|
||||
如果`getFoo()`改变了什么，而我们把它绑定在什么地方，我们就可能把自己坑了。Angular可能显示也可能不显示变化后的值。Angular还可能检测到变化，并抛出一个警告型错误。
|
||||
更具普遍性的建议是：只使用数据属性和那些只返回值而不做其他事情的方法。
|
||||
更具普遍性的建议是：只使用数据属性和那些只返回值而不做其它事情的方法。
|
||||
|
||||
### Return the proper type
|
||||
### 返回恰当的类型
|
||||
|
|
@ -1216,8 +1216,8 @@ block style-property-name-dart-diff
|
|||
They click buttons. Such user actions may result in a flow of data in the opposite direction:
|
||||
**from an element to a component**.
|
||||
|
||||
用户不会只盯着屏幕看。他们会在输入框中输入文本。他们会从列表中选取条目。
|
||||
他们会点击按钮。这类用户动作可能导致反向的数据流：*从元素到组件*。
|
||||
用户不会只盯着屏幕看。它们会在输入框中输入文本。它们会从列表中选取条目。
|
||||
它们会点击按钮。这类用户动作可能导致反向的数据流：*从元素到组件*。
|
||||
|
||||
The only way to know about a user action is to listen for certain events such as
|
||||
keystrokes, mouse movements, clicks, and touches.
|
||||
|
|
|
|||
|
|
@ -520,7 +520,7 @@ table(width="100%")
|
|||
**The filename extension must be `.spec.ts`**,
|
||||
the convention adhered to by `karma.conf.js` and other tooling.
|
||||
|
||||
用Jasmine编写的测试都被叫做**specs**。**文件名后缀必须是`.spec.ts`**，这是`karma.conf.js`和其他工具所坚持和遵守的规约。
|
||||
用Jasmine编写的测试都被叫做**specs**。**文件名后缀必须是`.spec.ts`**，这是`karma.conf.js`和其它工具所坚持和遵守的规约。
|
||||
|
||||
:marked
|
||||
**Put spec files somewhere within the `app/` folder.**
|
||||
|
|
@ -697,7 +697,7 @@ a(href="#top").to-top 回到顶部
|
|||
The tester creates a test instance of the class with new, supplying test doubles for the constructor parameters as needed, and
|
||||
then probes the test instance API surface.
|
||||
|
||||
[孤立的单元测试](#isolated-unit-tests "不使用Angular测试工具进行单元测试")独立自己检测类的实例，不依靠Angular或者任何其他注入值。
|
||||
[孤立的单元测试](#isolated-unit-tests "不使用Angular测试工具进行单元测试")独立自己检测类的实例，不依靠Angular或者任何其它注入值。
|
||||
测试器使用`new`创建类的测试实例，在需要时提供用于测试的构造函数参数复制品，并测试被测试实例的API。
|
||||
|
||||
You can and should write isolated unit tests for pipes and services.
|
||||
|
|
@ -712,7 +712,7 @@ a(href="#top").to-top 回到顶部
|
|||
In particular, they can't reveal how a component class interacts with its own template or with other components.
|
||||
Such tests require the Angular testing utilities.
|
||||
|
||||
孤立的测试不会展示类是如何与Angular互动的。也就是说，它们不会展示组件的类是如何与自己的模板或者其他组件互动的。
|
||||
孤立的测试不会展示类是如何与Angular互动的。也就是说，它们不会展示组件的类是如何与自己的模板或者其它组件互动的。
|
||||
这样的测试需要Angular测试工具。
|
||||
|
||||
### Testing with the Angular Testing Utilities
|
||||
|
|
@ -806,7 +806,7 @@ a(href="#top").to-top 回到顶部
|
|||
This live example contains both application and test code.
|
||||
Give it some time to load and warm up.
|
||||
|
||||
它包含了本章讨论的测试和其他测试。本在线例子包含了整个应用和测试代码。给它一些时间来加载。
|
||||
它包含了本章讨论的测试和其它测试。本在线例子包含了整个应用和测试代码。给它一些时间来加载。
|
||||
|
||||
<live-example plnkr="app-specs" embedded img="devguide/testing/app-specs-plunker.png"></live-example>
|
||||
|
||||
|
|
@ -863,7 +863,7 @@ a(href="#top").to-top 回到顶部
|
|||
already has what `BannerComponent` needs
|
||||
and (b) `BannerComponent` doesn't interact with any other components.
|
||||
|
||||
它没有`imports`，因为(a)它拓展默认测试模块配置，已经有了所有`BannerComponent`需要的，(b)`BannerComponent`不和其他任何组件互动。
|
||||
它没有`imports`，因为(a)它拓展默认测试模块配置，已经有了所有`BannerComponent`需要的，(b)`BannerComponent`不和其它任何组件互动。
|
||||
|
||||
#create-component
|
||||
:marked
|
||||
|
|
@ -1227,7 +1227,7 @@ a(href="#top").to-top 回到顶部
|
|||
|
||||
本例的`About`视图显示马克吐温的名言。
|
||||
`TwainComponent`组件处理显示、委派`TwainService`向服务器发起请求。
|
||||
两者都在`app/shared`目录里，因为作者计划将来在其他页面也显示马克吐温的名言。
|
||||
两者都在`app/shared`目录里，因为作者计划将来在其它页面也显示马克吐温的名言。
|
||||
下面是`TwainComponent`：
|
||||
|
||||
+makeExample('testing/ts/app/shared/twain.component.ts', 'component', 'app/shared/twain.component.ts')(format='.')
|
||||
|
|
@ -1930,7 +1930,7 @@ a(href="#top").to-top 返回顶部
|
|||
The `Router` has a complicated API and is entwined with other services and application pre-conditions.
|
||||
|
||||
它同时还注入了`HeroService`，但是我们已经直到如何[伪造](#component-with-async-servic)它。
|
||||
`Router`的API非常复杂，并且它缠绕了其他服务和许多应用的先觉条件。
|
||||
`Router`的API非常复杂，并且它缠绕了其它服务和许多应用的先觉条件。
|
||||
|
||||
Fortunately, the `DashboardComponent` isn't doing much with the `Router`
|
||||
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ include ../_util-fns
|
|||
make incremental upgrading seamless.
|
||||
|
||||
成功升级的关键之一是增量式的实现它，通过在同一个应用中一起运行这两个框架，并且逐个把Angular 1的组件迁移到Angular 2中。
|
||||
这意味着可以在不必打断其他业务的前提下，升级更大、更复杂的应用程序，因为这项工作可以多人协作完成，在一段时间内逐渐铺开。
|
||||
这意味着可以在不必打断其它业务的前提下，升级更大、更复杂的应用程序，因为这项工作可以多人协作完成，在一段时间内逐渐铺开。
|
||||
Angular 2 `upgrade`模块的设计目标就是让你渐进、无缝的完成升级。
|
||||
|
||||
1. [Preparation](#preparation)
|
||||
|
|
|
|||
|
|
@ -300,7 +300,7 @@ block install-packages
|
|||
[`HttpModule`](../latest/api/http/index/HttpModule-class.html). These are introduced in the
|
||||
[Tour of Heroes Tutorial](./tutorial/).
|
||||
|
||||
QuickStart应用不做别的，也就先不需要其他模块。在真实的应用中，我们可能还得导入[`FormsModule`](../latest/api/forms/index/FormsModule-class
|
||||
QuickStart应用不做别的，也就先不需要其它模块。在真实的应用中，我们可能还得导入[`FormsModule`](../latest/api/forms/index/FormsModule-class
|
||||
.html)、[`RouterModule`](../latest/api/router/index/RouterModule-class.html)和
|
||||
[`HttpModule`](../latest/api/http/index/HttpModule-class.html)。这些会在[英雄指南教程](./tutorial/)中引入。
|
||||
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@ code-example(language="bash").
|
|||
At the moment, our hero is just a name. Our hero needs more properties.
|
||||
Let's convert the `hero` from a literal string to a class.
|
||||
|
||||
此时此刻，我们的英雄还只有一个名字。显然，他/她应该有更多属性。
|
||||
此时此刻，我们的英雄还只有一个名字。显然，它/她应该有更多属性。
|
||||
让我们把`hero`从一个字符串字面量换成一个类。
|
||||
|
||||
Create a `Hero` class with `id` and `name` properties.
|
||||
|
|
@ -319,6 +319,6 @@ code-example(language="html").
|
|||
[next tutorial chapter](./toh-pt2.html).
|
||||
|
||||
我们的《英雄指南》只显示了一个英雄，而我们真正要显示的是一个英雄列表。
|
||||
我们还希望允许用户选择一个英雄，并且显示他/她的详情。
|
||||
我们还希望允许用户选择一个英雄，并且显示它/她的详情。
|
||||
我们还将学习更多：接收一个列表、把它们绑定到模板，以及让用户选择它。
|
||||
这些都在[教程的下一章](./toh-pt2.html)。
|
||||
|
|
|
|||
|
|
@ -126,7 +126,7 @@ code-example(language="bash").
|
|||
Our component has `heroes`. Let’s create an unordered list in our template to display them.
|
||||
We’ll insert the following chunk of HTML below the title and above the hero details.
|
||||
|
||||
我们的组件有了`heroes`属性，我们再到模板中创建一个无序列表来显示他们。
|
||||
我们的组件有了`heroes`属性，我们再到模板中创建一个无序列表来显示它们。
|
||||
我们将在标题和英雄详情之间，插入下面这段HTML代码。
|
||||
|
||||
+makeExample('toh-2/ts-snippets/app.component.snippets.pt2.ts', 'heroes-template-1', 'app.component.ts (heroes template)')
|
||||
|
|
@ -144,7 +144,7 @@ code-example(language="bash").
|
|||
and display them individually.
|
||||
We’ll need some help from Angular to do this. Let’s do this step by step.
|
||||
|
||||
我们想要把组件中的`heroes`数组绑定到模板中，迭代并逐个显示他们。
|
||||
我们想要把组件中的`heroes`数组绑定到模板中，迭代并逐个显示它们。
|
||||
这下，我们就得借Angular的帮助来完成它了。我们来一步步实现它！
|
||||
|
||||
First modify the `<li>` tag by adding the built-in directive `*ngFor`.
|
||||
|
|
@ -211,7 +211,7 @@ code-example(language="bash").
|
|||
We want to make it visually obvious to a user which hero we are hovering over and which hero is selected.
|
||||
|
||||
我们的英雄列表看起来实在是稀松平常。
|
||||
但当用户的鼠标划过英雄或选中了一个英雄时，我们得让他/她看起来醒目一点。
|
||||
但当用户的鼠标划过英雄或选中了一个英雄时，我们得让它/她看起来醒目一点。
|
||||
|
||||
Let’s add some styles to our component by setting the `styles` property on the `@Component` decorator
|
||||
to the following CSS classes:
|
||||
|
|
@ -445,7 +445,7 @@ code-example(language="bash").
|
|||
|
||||
我们在下面的详情区看到了选中的英雄，但是我们还是没法在上面的列表区快速的找到这位英雄。
|
||||
通过把CSS类`selected`添加到主列表的`<li>`元素上，我们可以解决这个问题。
|
||||
比如，当我们在列表区选中了Magneta时，我们可以通过设置一个轻微的背景色来让他略显突出。
|
||||
比如，当我们在列表区选中了Magneta时，我们可以通过设置一个轻微的背景色来让它略显突出。
|
||||
|
||||
figure.image-display
|
||||
img(src='/resources/images/devguide/toh/heroes-list-selected.png' alt="选中的英雄")
|
||||
|
|
@ -486,7 +486,7 @@ code-example(language="bash").
|
|||
We select the hero Magneta and the selection is clearly identified by the background color.
|
||||
|
||||
浏览器重新加载了你的应用。
|
||||
我们选中英雄Magneta，于是他通过背景色的变化被清晰的标记了出来。
|
||||
我们选中英雄Magneta，于是它通过背景色的变化被清晰的标记了出来。
|
||||
|
||||
figure.image-display
|
||||
img(src='/resources/images/devguide/toh/heroes-list-1.png' alt="英雄列表应用的输出")
|
||||
|
|
|
|||
|
|
@ -91,7 +91,7 @@ code-example(language="bash").
|
|||
All three views need hero data.
|
||||
|
||||
客户向我们描绘了本应用更大的目标。
|
||||
他们说，想要在不同的页面中用多种方式显示英雄。
|
||||
它们说，想要在不同的页面中用多种方式显示英雄。
|
||||
现在我们已经能从列表中选择一个英雄了，但这还不够。
|
||||
很快，我们将添加一个仪表盘来表彰绩效最好的英雄，并且创建一个独立视图来编辑英雄的详情。
|
||||
所有这些视图都需要英雄的数据。
|
||||
|
|
@ -575,7 +575,7 @@ a#child-component
|
|||
Our app should still be running, still showing a list of heroes, and still
|
||||
responding to a name selection with a detail view.
|
||||
|
||||
我们的程序仍在运行，仍在显示英雄列表，在选择英雄时，仍然会把他/她显示在详情页面中。
|
||||
我们的程序仍在运行，仍在显示英雄列表，在选择英雄时，仍然会把它/她显示在详情页面中。
|
||||
|
||||
.l-sub-section
|
||||
:marked
|
||||
|
|
|
|||
|
|
@ -650,7 +650,7 @@ block redirect-vs-use-as-default
|
|||
We use `*ngFor` once again to iterate over a list of heroes and display their names.
|
||||
We added extra `<div>` elements to help with styling later in this chapter.
|
||||
|
||||
我们又一次使用`*ngFor`来在英雄列表上迭代，并显示他们的名字。
|
||||
我们又一次使用`*ngFor`来在英雄列表上迭代，并显示它们的名字。
|
||||
还添加了一个额外的`<div>`元素，来帮助稍后的美化工作。
|
||||
|
||||
There's a `(click)` binding to a `gotoDetail` method we haven't written yet and
|
||||
|
|
@ -838,7 +838,7 @@ code-example(format='').
|
|||
They click a *hero* whether that hero is displayed on the dashboard or in the heroes list.
|
||||
|
||||
我们没有往模板中添加一个`'英雄详情'`，这是因为用户不会直接点击导航栏中的链接去查看一个特定的英雄。
|
||||
他们只会通过在英雄列表或者仪表盘中点击来显示一个英雄。
|
||||
它们只会通过在英雄列表或者仪表盘中点击来显示一个英雄。
|
||||
|
||||
We'll get to those *hero* clicks later in the chapter.
|
||||
There's no point in working on them until the `HeroDetailComponent`
|
||||
|
|
@ -891,7 +891,7 @@ block route-params
|
|||
Let's have the `!{_ActivatedRoute}` service and the `HeroService` injected
|
||||
into the constructor, saving their values in private fields:
|
||||
|
||||
然后注入`!{_ActivatedRoute}`和`HeroService`服务到构造函数中，将他们的值保存到私有变量中：
|
||||
然后注入`!{_ActivatedRoute}`和`HeroService`服务到构造函数中，将它们的值保存到私有变量中：
|
||||
|
||||
+makeExcerpt('app/hero-detail.component.ts (constructor)', 'ctor')
|
||||
|
||||
|
|
@ -1178,7 +1178,7 @@ figure.image-display
|
|||
We are not done. We still have to update the component class to support navigation to the
|
||||
`HeroDetailComponent` when the user clicks the *View Details* button.
|
||||
|
||||
这还没完。当用户点击*查看详情*按钮时，要让他能导航到`HeroDetailComponent`，我们仍然不得不修改组件类。
|
||||
这还没完。当用户点击*查看详情*按钮时，要让它能导航到`HeroDetailComponent`，我们仍然不得不修改组件类。
|
||||
|
||||
This component file is really big. Most of it is either template or CSS styles.
|
||||
It's difficult to find the component logic amidst the noise of HTML and CSS.
|
||||
|
|
@ -1275,7 +1275,7 @@ block heroes-component-cleanup
|
|||
They've given us ~60 lines of CSS for this purpose including some simple media queries for responsive design.
|
||||
|
||||
设计师认为我们应该把仪表盘的英雄们显示在一排方块中。
|
||||
他们给了我们大约60行CSS来实现它，包括一些简单的媒体查询语句来实现响应式设计。
|
||||
它们给了我们大约60行CSS来实现它，包括一些简单的媒体查询语句来实现响应式设计。
|
||||
|
||||
If we paste these ~60 lines into the component `styles` metadata,
|
||||
they'll completely obscure the component logic.
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ block includes
|
|||
and save these changes back to the server.
|
||||
|
||||
客户对我们的进展很满意！
|
||||
现在，他们想要从服务器获取英雄数据，然后让用户添加、编辑和删除英雄，并且把这些修改结果保存回服务器。
|
||||
现在，它们想要从服务器获取英雄数据，然后让用户添加、编辑和删除英雄，并且把这些修改结果保存回服务器。
|
||||
|
||||
In this chapter we teach our application to make the corresponding HTTP calls to a remote server's web API.
|
||||
|
||||
|
|
@ -351,7 +351,7 @@ block get-heroes-details
|
|||
Now they want the ability to create and delete heroes.
|
||||
|
||||
我们的客户很欣赏这种富有弹性的API集成方式。
|
||||
现在他们想增加创建和删除英雄的功能。
|
||||
现在它们想增加创建和删除英雄的功能。
|
||||
|
||||
Let's see first what happens when we try to update a hero's details.
|
||||
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ div
|
|||
h3 Code splitting
|
||||
h3 代码拆分
|
||||
p(class="text-body") Angular apps load quickly with the new Component Router, which delivers automatic code-splitting so users only load code required to render the view they request.
|
||||
p(class="text-body") Angular应用通过新的组件路由（Component Router）模块实现快速加载，提供了自动拆分代码的功能，为用户单独加载他们请求的视图中需要的那部分代码。
|
||||
p(class="text-body") Angular应用通过新的组件路由（Component Router）模块实现快速加载，提供了自动拆分代码的功能，为用户单独加载它们请求的视图中需要的那部分代码。
|
||||
|
||||
h2(class="text-headline") Productivity
|
||||
h2(class="text-headline") 生产率
|
||||
|
|
@ -57,7 +57,7 @@ div
|
|||
h3 IDEs
|
||||
h3 各种IDE
|
||||
p(class="text-body") Get intelligent code completion, instant errors, and other feedback in popular editors and IDEs.
|
||||
p(class="text-body") 在常用IDE和编辑器中获得智能代码补全、实时错误反馈及其他反馈等特性。
|
||||
p(class="text-body") 在常用IDE和编辑器中获得智能代码补全、实时错误反馈及其它反馈等特性。
|
||||
|
||||
h2(class="text-headline") Full Development Story
|
||||
h2(class="text-headline") 完整开发故事
|
||||
|
|
|
|||
|
|
@ -1,23 +1,23 @@
|
|||
.about-cn-translation
|
||||
:marked
|
||||
## 关于译者
|
||||
本文档有两位译者，他们是多年的好友。这次利用业余时间联手翻译，就是因为看好 Angular 2 的前景，希望帮助大家在这项技术上能跟国外同步前进。
|
||||
本文档有两位译者，它们是多年的好友。这次利用业余时间联手翻译，就是因为看好 Angular 2 的前景，希望帮助大家在这项技术上能跟国外同步前进。
|
||||
|
||||
### 汪志成（雪狼）
|
||||
《AngularJS深度剖析与最佳实践》的作者之一，ThoughtWorks 高级咨询师，现任 GDE（ Google 开发者专家）。崇尚“简单、专业、分享”。他从1998年开始做商业软件开发，拥有超过18年的从业经验，至今仍热衷于编程。
|
||||
《AngularJS深度剖析与最佳实践》的作者之一，ThoughtWorks 高级咨询师，现任 GDE（ Google 开发者专家）。崇尚“简单、专业、分享”。它从1998年开始做商业软件开发，拥有超过18年的从业经验，至今仍热衷于编程。
|
||||
|
||||
虽然一直在做编程工作，不过他最热衷的却是国学，特别是儒学与诗词。孟子曰：“得天下英才而教育之，三乐也”，愿践行之。
|
||||
虽然一直在做编程工作，不过它最热衷的却是国学，特别是儒学与诗词。孟子曰：“得天下英才而教育之，三乐也”，愿践行之。
|
||||
|
||||
小道消息：他当年英语四级都没考过哦，现在却可以直接读各种英文资料了。所以，不要怕，英文不是老虎，我行你也行。
|
||||
小道消息：它当年英语四级都没考过哦，现在却可以直接读各种英文资料了。所以，不要怕，英文不是老虎，我行你也行。
|
||||
|
||||
### 叶志敏
|
||||
早期翻译软件《东方快车》的产品经理，至今已在英国留学和生活了十年。目前他正在用 Angular 2 与 .net core 开发一套针对英国医疗保健服务行业的 ERP 系统。
|
||||
早期翻译软件《东方快车》的产品经理，至今已在英国留学和生活了十年。目前它正在用 Angular 2 与 .net core 开发一套针对英国医疗保健服务行业的 ERP 系统。
|
||||
|
||||
## 感恩
|
||||
|
||||
本中文网站能够达到现在的质量，首先要感谢 Google 公司 Angular 产品开发部门的项目经理 Naomi Black 的鼎力支持。她不但邀请我们加入了 Angular 项目组，还让我们与各位文档作者之间建立了直接的沟通渠道。这种沟通渠道非常宝贵，让我们得以准确理解所涉及到的各个技术细节，并减轻了保持同步更新时的额外工作量。
|
||||
|
||||
本网站能够及时推出，要感谢 Google 开发技术推广部大中华区的负责人栾跃、以及负责和我们进行项目协调沟通的 Google 开发技术推广部中国团队的项目经理程路。他们的专业性和高效率让我们得以心无旁骛的完成翻译工作。也是在他们的大力帮助下，本网站才能最终作为官方中文版推出。
|
||||
本网站能够及时推出，要感谢 Google 开发技术推广部大中华区的负责人栾跃、以及负责和我们进行项目协调沟通的 Google 开发技术推广部中国团队的项目经理程路。它们的专业性和高效率让我们得以心无旁骛的完成翻译工作。也是在它们的大力帮助下，本网站才能最终作为官方中文版推出。
|
||||
|
||||
最后，要特别感谢我们各自的家人。同步、高质量的翻译是个耗时耗力的工作，如果没有她们的支持，此工作将无法完成。
|
||||
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
|
||||
## 鸣谢
|
||||
|
||||
在翻译和校对过程中，我们得到了很多人的帮助，在此一并致谢，他/她们是：
|
||||
在翻译和校对过程中，我们得到了很多人的帮助，在此一并致谢，它/她们是：
|
||||
|
||||
- Joeylin (来自 Angular 中文社区)
|
||||
- 张旋 (来自 Angular 中文社区)
|
||||
|
|
@ -73,14 +73,14 @@
|
|||
|
||||
- **严清**
|
||||
|
||||
AngularJS 中文社区的早期耕耘者，也是 AngularJS 1.x 的早期传道者之一。虽然他已经不再使用 AngularJS 技术栈，但其对社区的贡献和影响力不应忘记。
|
||||
AngularJS 中文社区的早期耕耘者，也是 AngularJS 1.x 的早期传道者之一。虽然它已经不再使用 AngularJS 技术栈，但其对社区的贡献和影响力不应忘记。
|
||||
|
||||
- **格茸扎西（破狼）**
|
||||
|
||||
AngularJS 中文社区系列 QQ 群的群主，从严清手里接下 QQ 群并长期维护。他还与译者之一的汪志成（雪狼）合著过一本书《 AngularJS 深度剖析与最佳实践》，这本书的成功让我们看到了中文社区对 Angular 的热情支持，最终激发了我们翻译 Angular 官网的行动。我们还共同开始了对国外新书 ng-book2 的翻译工作。
|
||||
AngularJS 中文社区系列 QQ 群的群主，从严清手里接下 QQ 群并长期维护。它还与译者之一的汪志成（雪狼）合著过一本书《 AngularJS 深度剖析与最佳实践》，这本书的成功让我们看到了中文社区对 Angular 的热情支持，最终激发了我们翻译 Angular 官网的行动。我们还共同开始了对国外新书 ng-book2 的翻译工作。
|
||||
|
||||
- **汤桂川**
|
||||
|
||||
广发证券的资深工程师，Angular 热情的布道者，Angular 2 的早期使用者之一，他的团队还翻译过早期版本的开发指南。虽然交流不多，不过可以感觉到他是个很 Nice 的人，也带领着一个很有活力的团队。
|
||||
广发证券的资深工程师，Angular 热情的布道者，Angular 2 的早期使用者之一，它的团队还翻译过早期版本的开发指南。虽然交流不多，不过可以感觉到它是个很 Nice 的人，也带领着一个很有活力的团队。
|
||||
|
||||
如果你有自己的社区影响力，也欢迎[与我们接洽](mailto:asnowwolf@gmail.com)，我们将给出热情的回应。
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
|
||||
From the beginning, we built Angular in collaboration with the open source development community. We are grateful to the large number of contributors who dedicated time to submitting pull requests, issues, and repro cases, who discussed and debated design decisions, and validated (and pushed back on) our RCs. We wish we could have brought every one of you in person to our meetup so you could celebrate this milestone with us tonight!
|
||||
|
||||
从一开始，我们就在与开源社区合作来构筑Angular。我们要对大量的捐献者表示由衷感谢！他们奉献了大量的Pull Request、Issues和可重现的用例，他们为各个设计决策展开探讨和辩论，他们对我们的各个RC进行了验证和反馈。我们真心希望可以把你们中的每一位都带到我们的聚会现场，与我们一起庆祝这个伟大的里程碑！
|
||||
从一开始，我们就在与开源社区合作来构筑Angular。我们要对大量的捐献者表示由衷感谢！它们奉献了大量的Pull Request、Issues和可重现的用例，它们为各个设计决策展开探讨和辩论，它们对我们的各个RC进行了验证和反馈。我们真心希望可以把你们中的每一位都带到我们的聚会现场，与我们一起庆祝这个伟大的里程碑！
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue