清理不必要的!{变量
This commit is contained in:
Zhicheng Wang
parent
473c688f70
commit
505d93e0ce
|
|
@ -420,13 +420,13 @@ figure
|
|||
Here is the `@Component` decorator, which identifies the class
|
||||
immediately below it as a component class.
|
||||
|
||||
这里看到`@Component`!{_decoratorCn}，它把紧随其后的类标记成了组件类。
|
||||
这里看到`@Component`装饰器，它把紧随其后的类标记成了组件类。
|
||||
|
||||
:marked
|
||||
The `@Component` decorator takes a required configuration object with the
|
||||
information Angular needs to create and present the component and its view.
|
||||
|
||||
`@Component`!{_decoratorCn}能接受一个配置对象， Angular 会基于这些信息创建和展示组件及其视图。
|
||||
`@Component`装饰器能接受一个配置对象， Angular 会基于这些信息创建和展示组件及其视图。
|
||||
|
||||
Here are a few of the most useful `@Component` configuration options:
|
||||
|
||||
|
|
@ -468,8 +468,8 @@ figure
|
|||
Apply other metadata decorators in a similar fashion to guide Angular behavior.
|
||||
`@Injectable`, `@Input`, and `@Output` are a few of the more popular decorators.
|
||||
|
||||
其它元数据!{_decoratorCn}用类似的方式来指导 Angular 的行为。
|
||||
例如`@Injectable`、`@Input`和`@Output`等是一些最常用的!{_decoratorCn}。
|
||||
其它元数据装饰器用类似的方式来指导 Angular 的行为。
|
||||
例如`@Injectable`、`@Input`和`@Output`等是一些最常用的装饰器。
|
||||
<br class="l-clear-both">
|
||||
:marked
|
||||
The architectural takeaway is that you must add metadata to your code
|
||||
|
|
@ -586,7 +586,7 @@ figure
|
|||
A component is a *directive-with-a-template*;
|
||||
a `@Component` decorator is actually a `@Directive` decorator extended with template-oriented features.
|
||||
|
||||
组件是一个*带模板的指令*；`@Component`!{_decoratorCn}实际上就是一个`@Directive`!{_decoratorCn}，只是扩展了一些面向模板的特性。
|
||||
组件是一个*带模板的指令*；`@Component`装饰器实际上就是一个`@Directive`装饰器，只是扩展了一些面向模板的特性。
|
||||
<br class="l-clear-both">
|
||||
|
||||
.l-sub-section
|
||||
|
|
|
|||
|
|
@ -934,7 +934,7 @@ code-example(format="nocode").
|
|||
:marked
|
||||
### The *Provider* class and _provide_ object literal
|
||||
|
||||
### *Provider*类!{_andProvideFnCn}
|
||||
### *Provider*类和一个提供商的字面量
|
||||
|
||||
:marked
|
||||
You wrote the `providers` array like this:
|
||||
|
|
@ -962,7 +962,7 @@ code-example(format="nocode").
|
|||
which you can think of as a *recipe* for creating the dependency value.
|
||||
There are many ways to create dependency values just as there are many ways to write a recipe.
|
||||
|
||||
第二个是!{_secondParamCn}。
|
||||
第二个是一个提供商定义对象。
|
||||
可以把它看做是指导如何创建依赖值的*配方*。
|
||||
有很多方式创建依赖值…… 也有很多方式可以写配方。
|
||||
|
||||
|
|
@ -1302,7 +1302,8 @@ a#injection-token
|
|||
to define and use an <a href="../api/core/index/InjectionToken-class.html"><b>InjectionToken</b></a>.
|
||||
The definition of such a token looks like this:
|
||||
|
||||
解决方案是定义和使用 !{opaquetoken}（不透明的令牌）。定义方式类似于这样：
|
||||
解决方案是为非类依赖定义和使用<a href="../api/core/index/InjectionToken-class.html"><b>InjectionToken</b></a>作为提供商令牌。
|
||||
定义方式是这样的：
|
||||
|
||||
+makeExample('dependency-injection/ts/src/app/app.config.ts','token')(format='.')
|
||||
:marked
|
||||
|
|
@ -1328,7 +1329,7 @@ a#injection-token
|
|||
Although the `AppConfig` interface plays no role in dependency injection,
|
||||
it supports typing of the configuration object within the class.
|
||||
|
||||
虽然`Config`!{configType}接口在依赖注入过程中没有任何作用，但它为该类中的配置对象提供了强类型信息。
|
||||
虽然`AppConfig`接口在依赖注入过程中没有任何作用，但它为该类中的配置对象提供了强类型信息。
|
||||
|
||||
:marked
|
||||
Aternatively, you can provide and inject the configuration object in an ngModule like `AppModule`.
|
||||
|
|
|
|||
|
|
@ -248,7 +248,8 @@ figure.image-display
|
|||
repeat items for any [iterable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols) object.
|
||||
|
||||
本例中，`ngFor`用于显示一个“数组”，
|
||||
但`ngFor`可以为任何[可迭代的 (iterable) ](!{_iterableUrl})对象重复渲染条目。
|
||||
但`ngFor`可以为任何[可迭代的 (iterable) ](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols)对象重复渲染条目。
|
||||
|
||||
:marked
|
||||
Now the heroes appear in an unordered list.
|
||||
|
||||
|
|
@ -281,7 +282,7 @@ figure.image-display
|
|||
|
||||
Create a new file in the `app` folder called `hero.ts` with the following code:
|
||||
|
||||
在`!{_appDir}`目录下创建一个名叫<ngio-ex path="hero.ts"></ngio-ex>的新文件，内容如下：
|
||||
在`app`目录下创建一个名叫<ngio-ex path="hero.ts"></ngio-ex>的新文件，内容如下：
|
||||
|
||||
+makeExcerpt('src/app/hero.ts')
|
||||
|
||||
|
|
|
|||
|
|
@ -196,8 +196,8 @@ block demos-list
|
|||
The Angular <code>Http</code> client communicates with the server using a familiar HTTP request/response protocol.
|
||||
The `Http` client is one of a family of services in the Angular HTTP library.
|
||||
|
||||
我们通过 !{_Angular_Http}客户端，使用熟悉的 HTTP 请求/回应协议与服务器通讯。
|
||||
`!{_Http}`客户端是!{_Angular_http_libraryCn}所提供的一系列服务之一。
|
||||
我们通过 <code>Http</code> 客户端，使用熟悉的 HTTP 请求/回应协议与服务器通讯。
|
||||
`Http`客户端是Angular的HTTP库所提供的一系列服务之一。
|
||||
|
||||
.l-sub-section
|
||||
:marked
|
||||
|
|
@ -205,7 +205,7 @@ block demos-list
|
|||
the Angular HTTP library
|
||||
because the `systemjs.config.js` file maps to that module name.
|
||||
|
||||
当我们从`@angular/http`模块中导入服务时，SystemJS 知道该如何从 !{_Angular_http_libraryCn}中加载它们，
|
||||
当我们从`@angular/http`模块中导入服务时，SystemJS 知道该如何从Angular的HTTP库中加载它们，
|
||||
这是因为`systemjs.config.js`文件已经注册过这个模块名。
|
||||
|
||||
:marked
|
||||
|
|
@ -261,7 +261,7 @@ block http-providers
|
|||
|
||||
我们的第一个演示是《英雄指南(TOH)》[教程](../tutorial)的一个迷你版。
|
||||
这个版本从服务器获取一些英雄，把它们显示在列表中，还允许我们添加新的英雄并将其保存到服务器。
|
||||
借助 !{_Angular_Http}客户端，我们通过`XMLHttpRequest (XHR)`与服务器通讯。
|
||||
借助 Angular 的 `Http` 客户端，我们通过`XMLHttpRequest (XHR)`与服务器通讯。
|
||||
|
||||
It works like this:
|
||||
|
||||
|
|
@ -317,7 +317,7 @@ a#HeroListComponent
|
|||
The component doesn't know or care how it gets the data.
|
||||
It delegates to the `HeroService`.
|
||||
|
||||
这个组件**不会直接和 !{_Angular_Http}客户端打交道**！
|
||||
这个组件**不会直接和 Angular 的 `Http` 客户端打交道**！
|
||||
它既不知道也不关心我们如何获取数据，这些都被委托给了`HeroService`去做。
|
||||
|
||||
This is a golden rule: **always delegate data access to a supporting service class**.
|
||||
|
|
@ -347,7 +347,7 @@ block getheroes-and-create
|
|||
The service's `getHeroes()` and `create()` methods return an `Observable` of hero data that the Angular <code>Http</code> client fetched from the server.
|
||||
|
||||
服务的`getHeroes()`和`addHero()`方法返回一个英雄数据的可观察对象 (`Observable`)，
|
||||
这些数据是由 !{_Angular_Http}从服务器上获取的。
|
||||
这些数据是由 Angular 的 `Http` 客户端从服务器上获取的。
|
||||
|
||||
Think of an `Observable` as a stream of events published by some source.
|
||||
To listen for events in this stream, ***subscribe*** to the `Observable`.
|
||||
|
|
@ -381,7 +381,7 @@ a#HeroService
|
|||
:marked
|
||||
You can revise that `HeroService` to get the heroes from the server using the Angular <code>Http</code> client service:
|
||||
|
||||
在本章中，我们会修改`HeroService`，改用 !{_Angular_Http}客户端服务来从服务器上获取英雄列表：
|
||||
在本章中，我们会修改`HeroService`，改用 Angular 的 `Http` 客户端来从服务器上获取英雄列表：
|
||||
|
||||
+makeExample('server-communication/ts/src/app/toh/hero.service.ts', 'v1', 'src/app/toh/hero.service.ts (revised)')
|
||||
|
||||
|
|
@ -389,14 +389,14 @@ a#HeroService
|
|||
Notice that the Angular <code>Http</code> client service is
|
||||
[injected](dependency-injection.html) into the `HeroService` constructor.
|
||||
|
||||
注意，这个 !{_Angular_Http}客户端服务[被注入](dependency-injection.html)到了`HeroService`的构造函数中。
|
||||
注意，这个 Angular `Http` 客户端服务[被注入](dependency-injection.html)到了`HeroService`的构造函数中。
|
||||
|
||||
+makeExample('server-communication/ts/src/app/toh/hero.service.ts', 'ctor')
|
||||
|
||||
:marked
|
||||
Look closely at how to call `http.get`:
|
||||
|
||||
仔细看看我们是如何调用`!{_priv}http.get`的
|
||||
仔细看看我们是如何调用`http.get`的
|
||||
+makeExample('server-communication/ts/src/app/toh/hero.service.ts', 'http-get', 'src/app/toh/hero.service.ts (getHeroes)')(format=".")
|
||||
|
||||
:marked
|
||||
|
|
@ -487,7 +487,7 @@ a#extract-data
|
|||
|
||||
Remember that the `getHeroes()` method used an `extractData()` helper method to map the `http.get` response object to heroes:
|
||||
|
||||
记住，`getHeroes()`借助一个`!{_priv}extractData`辅助方法来把`!{_priv}http.get`的响应对象映射成了英雄列表：
|
||||
记住，`getHeroes()`借助一个`extractData`辅助方法来把`http.get`的响应对象映射成了英雄列表：
|
||||
|
||||
+makeExample('server-communication/ts/src/app/toh/hero.service.ts', 'extract-data', 'src/app/toh/hero.service.ts (excerpt)')(format=".")
|
||||
|
||||
|
|
@ -721,7 +721,7 @@ a#json-results
|
|||
As with `getHeroes()`, use the `extractData()` helper to [extract the data](#extract-data)
|
||||
from the response.
|
||||
|
||||
像`getHeroes()`中一样，我们可以使用`!{_priv}extractData()`辅助函数从响应中[提取出数据](#extract-data)。
|
||||
像`getHeroes()`中一样，我们可以使用`extractData()`辅助函数从响应中[提取出数据](#extract-data)。
|
||||
|
||||
block hero-list-comp-add-hero
|
||||
:marked
|
||||
|
|
@ -832,7 +832,7 @@ h2#cors 跨域请求：Wikipedia 范例
|
|||
You just learned how to make `XMLHttpRequests` using the Angular <code>Http</code> service.
|
||||
This is the most common approach to server communication, but it doesn't work in all scenarios.
|
||||
|
||||
我们刚刚学习了用 !{_Angular_Http}服务发起`XMLHttpRequests`。
|
||||
我们刚刚学习了用 Angular `Http` 服务发起`XMLHttpRequests`。
|
||||
这是与服务器通讯时最常用的方法。
|
||||
但它不适合所有场景。
|
||||
|
||||
|
|
|
|||
|
|
@ -18,13 +18,13 @@ a#develop-locally
|
|||
Setting up a new project on your machine is quick and easy with the **QuickStart seed**,
|
||||
maintained [on github](https://github.com/angular/quickstart "Install the github QuickStart repo").
|
||||
|
||||
利用 [github 上](!{_qsRepo} "安装 github 《快速起步》库")的**《快速起步》种子**在你的电脑上搭建一个新项目是很快很容易的。
|
||||
利用 [github 上](https://github.com/angular/quickstart "安装 github 《快速起步》库")的**《快速起步》种子**在你的电脑上搭建一个新项目是很快很容易的。
|
||||
|
||||
:marked
|
||||
Make sure you have [node and npm installed](#install-prerequisites "What if you don't have node and npm?").
|
||||
Then ...
|
||||
|
||||
确定你已经安装了 [!{_prereq_cn}](#install-prerequisites "如果你没有 !{_prereq_cn}？")，然后：
|
||||
确定你已经安装了 [node和npm](#install-prerequisites "如果你没有node和npm？")，然后：
|
||||
|
||||
1. Create a project folder (you can call it `quickstart` and rename it later).
|
||||
|
||||
|
|
@ -36,11 +36,11 @@ a#develop-locally
|
|||
|
||||
1. Install [npm](#install-prerequisites "What if you don't have node and npm?") packages.
|
||||
|
||||
安装 [!{_npm}](#install-prerequisites "如果你没有 !{_prereq} ？") 包。
|
||||
安装 [npm](#install-prerequisites "如果你没有 node和npm ？") 包。
|
||||
|
||||
1. Run `npm start` to launch the sample application.
|
||||
|
||||
运行`!{_npm} !{_start}`来启动例子应用。
|
||||
运行`npm start`来启动例子应用。
|
||||
|
||||
a#clone
|
||||
:marked
|
||||
|
|
@ -71,7 +71,7 @@ a#download
|
|||
<a href="https://github.com/angular/quickstart/archive/master.zip" title="Download the QuickStart seed repository">Download the QuickStart seed</a>
|
||||
and unzip it into your project folder. Then perform the remaining steps with these terminal commands.
|
||||
|
||||
<a href="!{_qsRepoZip}" title="下载《快速起步》种子库">下载《快速起步》种子</a>
|
||||
<a href="https://github.com/angular/quickstart/archive/master.zip" title="下载《快速起步》种子库">下载《快速起步》种子</a>
|
||||
并解压到你的项目目录中。然后执行下面的命令完成剩余步骤。
|
||||
|
||||
code-example(language="sh" class="code-shell").
|
||||
|
|
|
|||
|
|
@ -635,7 +635,7 @@ a#configure-routes
|
|||
|
||||
* Inject the `HeroService` in the constructor and hold it in a private `heroService` field.
|
||||
|
||||
在构造函数中注入`HeroService`，并且把它保存在一个私有的`!{_priv}heroService`字段中。
|
||||
在构造函数中注入`HeroService`，并且把它保存在一个私有的`heroService`字段中。
|
||||
|
||||
* Call the service to get heroes inside the Angular `ngOnInit()` lifecycle hook.
|
||||
|
||||
|
|
@ -797,7 +797,7 @@ code-example(format="nocode").
|
|||
Inject the `ActivatedRoute`, `HeroService`, and `Location` services
|
||||
into the constructor, saving their values in private fields:
|
||||
|
||||
然后注入`!{_ActivatedRoute}`和`HeroService`服务到构造函数中，将它们的值保存到私有变量中：
|
||||
然后注入`ActivatedRoute`和`HeroService`服务到构造函数中，将它们的值保存到私有变量中：
|
||||
|
||||
+makeExample('toh-5/ts/src/app/hero-detail.component.ts', 'ctor', 'src/app/hero-detail.component.ts (constructor)')
|
||||
|
||||
|
|
@ -899,8 +899,8 @@ code-example(format="nocode").
|
|||
Read more on the [CanDeactivate](../api/router/index/CanDeactivate-interface.html) page.
|
||||
|
||||
回退太多步会跑出我们的应用。
|
||||
在演示程序中，这算不上问题。但在真实的应用中，我们需要对此进行防范。
|
||||
也许你该用[!{_CanDeactivateGuard}](../api/!{_CanDeactivateGuardUri}.html).。
|
||||
在真实的应用中，我们需要使用<em>CanDeactivate</em>守卫对此进行防范。
|
||||
要了解更多，参见[CanDeactivate](../api/router/index/CanDeactivate-interface.html)。
|
||||
|
||||
:marked
|
||||
You'll wire this method with an event binding to a *Back* button that you'll add to the component template.
|
||||
|
|
@ -1304,7 +1304,7 @@ figure.image-display
|
|||
Also, in `hero-detail.component.ts`, remove the `hero` property `@Input` decorator
|
||||
and its import.
|
||||
|
||||
在`!{_appDir}`目录下添加<span ngio-ex>hero-detail.component.css</span>文件，
|
||||
在`app`目录下添加<span ngio-ex>hero-detail.component.css</span>文件，
|
||||
并且在`styleUrls`数组中引用它 —— 就像之前在`DashboardComponent`中做过的那样。
|
||||
同时删除`hero``@Input`装饰器属性和它的导入语句。
|
||||
|
||||
|
|
@ -1332,7 +1332,7 @@ figure.image-display
|
|||
|
||||
Add an <code>app.component.css</code> file to the `app` folder with the following content.
|
||||
|
||||
在`!{_appDir}`目录下添加一个<span ngio-ex>app.component.css</span>文件，内容如下：
|
||||
在`app`目录下添加一个<span ngio-ex>app.component.css</span>文件，内容如下：
|
||||
|
||||
+makeExample('toh-5/ts/src/app/app.component.css', '', 'src/app/app.component.css (navigation styles)')
|
||||
|
||||
|
|
@ -1389,7 +1389,7 @@ figure.image-display
|
|||
Also edit <code>index.html</code> to refer to this stylesheet.
|
||||
|
||||
如果在根目录下没有一个名叫`styles.css`的文件，就添加它。
|
||||
确保它包含[这里给出的主样式](!{styles_css})。
|
||||
确保它包含[这里给出的主样式](https://raw.githubusercontent.com/angular/angular.io/master/public/docs/_examples/_boilerplate/src/styles.css)。
|
||||
并编辑`index.html`来引用这个样式表。
|
||||
|
||||
+makeExample('toh-5/ts/src/index.html', 'css', 'src/index.html (link ref)')
|
||||
|
|
|
|||
|
|
@ -97,7 +97,7 @@ h1 提供 HTTP 服务
|
|||
:marked
|
||||
Notice that you also supply `HttpModule` as part of the *imports* array in root NgModule `AppModule`.
|
||||
|
||||
注意，现在`!{_HttpModule}`已经是根模块`AppModule`的`imports`数组的一部分了。
|
||||
注意，现在`HttpModule`已经是根模块`AppModule`的`imports`数组的一部分了。
|
||||
|
||||
.l-main-section
|
||||
:marked
|
||||
|
|
@ -397,7 +397,7 @@ h1 提供 HTTP 服务
|
|||
calling `JSON.stringify`. The body content type
|
||||
(`application/json`) is identified in the request header.
|
||||
|
||||
我们通过一个编码在 URL 中的英雄 id 来告诉服务器应该更新哪个英雄。put 的 body 是该英雄的 JSON 字符串，它是通过调用`!{_JSON_stringify}`得到的。
|
||||
我们通过一个编码在 URL 中的英雄 id 来告诉服务器应该更新哪个英雄。put 的 body 是该英雄的 JSON 字符串，它是通过调用`JSON.stringify`得到的。
|
||||
并且在请求头中标记出的 body 的内容类型（`application/json`）。
|
||||
|
||||
Refresh the browser, change a hero name, save your change,
|
||||
|
|
|
|||
Loading…
Reference in New Issue