清理不必要的!{变量

This commit is contained in:
Zhicheng Wang 2017-04-15 16:25:31 +08:00
parent 473c688f70
commit 505d93e0ce
7 changed files with 39 additions and 37 deletions

View File

@ -420,13 +420,13 @@ figure
Here is the `@Component` decorator, which identifies the class Here is the `@Component` decorator, which identifies the class
immediately below it as a component class. immediately below it as a component class.
这里看到`@Component`!{_decoratorCn},它把紧随其后的类标记成了组件类。 这里看到`@Component`装饰器,它把紧随其后的类标记成了组件类。
:marked :marked
The `@Component` decorator takes a required configuration object with the The `@Component` decorator takes a required configuration object with the
information Angular needs to create and present the component and its view. 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: 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. Apply other metadata decorators in a similar fashion to guide Angular behavior.
`@Injectable`, `@Input`, and `@Output` are a few of the more popular decorators. `@Injectable`, `@Input`, and `@Output` are a few of the more popular decorators.
其它元数据!{_decoratorCn}用类似的方式来指导 Angular 的行为。 其它元数据装饰器用类似的方式来指导 Angular 的行为。
例如`@Injectable`、`@Input`和`@Output`等是一些最常用的!{_decoratorCn} 例如`@Injectable`、`@Input`和`@Output`等是一些最常用的装饰器
<br class="l-clear-both"> <br class="l-clear-both">
:marked :marked
The architectural takeaway is that you must add metadata to your code 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 is a *directive-with-a-template*;
a `@Component` decorator is actually a `@Directive` decorator extended with template-oriented features. a `@Component` decorator is actually a `@Directive` decorator extended with template-oriented features.
组件是一个*带模板的指令*`@Component`!{_decoratorCn}实际上就是一个`@Directive`!{_decoratorCn},只是扩展了一些面向模板的特性。 组件是一个*带模板的指令*`@Component`装饰器实际上就是一个`@Directive`装饰器,只是扩展了一些面向模板的特性。
<br class="l-clear-both"> <br class="l-clear-both">
.l-sub-section .l-sub-section

View File

@ -934,7 +934,7 @@ code-example(format="nocode").
:marked :marked
### The *Provider* class and _provide_ object literal ### The *Provider* class and _provide_ object literal
### *Provider*类!{_andProvideFnCn} ### *Provider*类和一个提供商的字面量
:marked :marked
You wrote the `providers` array like this: 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. 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. 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>. 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: 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='.') +makeExample('dependency-injection/ts/src/app/app.config.ts','token')(format='.')
:marked :marked
@ -1328,7 +1329,7 @@ a#injection-token
Although the `AppConfig` interface plays no role in dependency injection, Although the `AppConfig` interface plays no role in dependency injection,
it supports typing of the configuration object within the class. it supports typing of the configuration object within the class.
虽然`Config`!{configType}接口在依赖注入过程中没有任何作用,但它为该类中的配置对象提供了强类型信息。 虽然`AppConfig`接口在依赖注入过程中没有任何作用,但它为该类中的配置对象提供了强类型信息。
:marked :marked
Aternatively, you can provide and inject the configuration object in an ngModule like `AppModule`. Aternatively, you can provide and inject the configuration object in an ngModule like `AppModule`.

View File

@ -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. repeat items for any [iterable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols) object.
本例中,`ngFor`用于显示一个“数组”, 本例中,`ngFor`用于显示一个“数组”,
但`ngFor`可以为任何[可迭代的 (iterable) ](!{_iterableUrl})对象重复渲染条目。 但`ngFor`可以为任何[可迭代的 (iterable) ](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols)对象重复渲染条目。
:marked :marked
Now the heroes appear in an unordered list. 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: 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') +makeExcerpt('src/app/hero.ts')

View File

@ -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 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. The `Http` client is one of a family of services in the Angular HTTP library.
我们通过 !{_Angular_Http}客户端,使用熟悉的 HTTP 请求/回应协议与服务器通讯。 我们通过 <code>Http</code> 客户端,使用熟悉的 HTTP 请求/回应协议与服务器通讯。
`!{_Http}`客户端是!{_Angular_http_libraryCn}所提供的一系列服务之一。 `Http`客户端是Angular的HTTP库所提供的一系列服务之一。
.l-sub-section .l-sub-section
:marked :marked
@ -205,7 +205,7 @@ block demos-list
the Angular HTTP library the Angular HTTP library
because the `systemjs.config.js` file maps to that module name. 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`文件已经注册过这个模块名。 这是因为`systemjs.config.js`文件已经注册过这个模块名。
:marked :marked
@ -261,7 +261,7 @@ block http-providers
我们的第一个演示是《英雄指南(TOH)》[教程](../tutorial)的一个迷你版。 我们的第一个演示是《英雄指南(TOH)》[教程](../tutorial)的一个迷你版。
这个版本从服务器获取一些英雄,把它们显示在列表中,还允许我们添加新的英雄并将其保存到服务器。 这个版本从服务器获取一些英雄,把它们显示在列表中,还允许我们添加新的英雄并将其保存到服务器。
借助 !{_Angular_Http}客户端,我们通过`XMLHttpRequest (XHR)`与服务器通讯。 借助 Angular 的 `Http` 客户端,我们通过`XMLHttpRequest (XHR)`与服务器通讯。
It works like this: It works like this:
@ -317,7 +317,7 @@ a#HeroListComponent
The component doesn't know or care how it gets the data. The component doesn't know or care how it gets the data.
It delegates to the `HeroService`. It delegates to the `HeroService`.
这个组件**不会直接和 !{_Angular_Http}客户端打交道** 这个组件**不会直接和 Angular 的 `Http` 客户端打交道**
它既不知道也不关心我们如何获取数据,这些都被委托给了`HeroService`去做。 它既不知道也不关心我们如何获取数据,这些都被委托给了`HeroService`去做。
This is a golden rule: **always delegate data access to a supporting service class**. 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. 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`) 服务的`getHeroes()`和`addHero()`方法返回一个英雄数据的可观察对象 (`Observable`)
这些数据是由 !{_Angular_Http}从服务器上获取的。 这些数据是由 Angular 的 `Http` 客户端从服务器上获取的。
Think of an `Observable` as a stream of events published by some source. Think of an `Observable` as a stream of events published by some source.
To listen for events in this stream, ***subscribe*** to the `Observable`. To listen for events in this stream, ***subscribe*** to the `Observable`.
@ -381,7 +381,7 @@ a#HeroService
:marked :marked
You can revise that `HeroService` to get the heroes from the server using the Angular <code>Http</code> client service: 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)') +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 Notice that the Angular <code>Http</code> client service is
[injected](dependency-injection.html) into the `HeroService` constructor. [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') +makeExample('server-communication/ts/src/app/toh/hero.service.ts', 'ctor')
:marked :marked
Look closely at how to call `http.get`: 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=".") +makeExample('server-communication/ts/src/app/toh/hero.service.ts', 'http-get', 'src/app/toh/hero.service.ts (getHeroes)')(format=".")
:marked :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: 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=".") +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) As with `getHeroes()`, use the `extractData()` helper to [extract the data](#extract-data)
from the response. from the response.
像`getHeroes()`中一样,我们可以使用`!{_priv}extractData()`辅助函数从响应中[提取出数据](#extract-data)。 像`getHeroes()`中一样,我们可以使用`extractData()`辅助函数从响应中[提取出数据](#extract-data)。
block hero-list-comp-add-hero block hero-list-comp-add-hero
:marked :marked
@ -832,7 +832,7 @@ h2#cors 跨域请求Wikipedia 范例
You just learned how to make `XMLHttpRequests` using the Angular <code>Http</code> service. 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. This is the most common approach to server communication, but it doesn't work in all scenarios.
我们刚刚学习了用 !{_Angular_Http}服务发起`XMLHttpRequests`。 我们刚刚学习了用 Angular `Http` 服务发起`XMLHttpRequests`。
这是与服务器通讯时最常用的方法。 这是与服务器通讯时最常用的方法。
但它不适合所有场景。 但它不适合所有场景。

View File

@ -18,13 +18,13 @@ a#develop-locally
Setting up a new project on your machine is quick and easy with the **QuickStart seed**, 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"). maintained [on github](https://github.com/angular/quickstart "Install the github QuickStart repo").
利用 [github 上](!{_qsRepo} "安装 github 《快速起步》库")的**《快速起步》种子**在你的电脑上搭建一个新项目是很快很容易的。 利用 [github 上](https://github.com/angular/quickstart "安装 github 《快速起步》库")的**《快速起步》种子**在你的电脑上搭建一个新项目是很快很容易的。
:marked :marked
Make sure you have [node and npm installed](#install-prerequisites "What if you don't have node and npm?"). Make sure you have [node and npm installed](#install-prerequisites "What if you don't have node and npm?").
Then ... 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). 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. 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. 1. Run `npm start` to launch the sample application.
运行`!{_npm} !{_start}`来启动例子应用。 运行`npm start`来启动例子应用。
a#clone a#clone
:marked :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> <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. 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"). code-example(language="sh" class="code-shell").

View File

@ -635,7 +635,7 @@ a#configure-routes
* Inject the `HeroService` in the constructor and hold it in a private `heroService` field. * 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. * 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 Inject the `ActivatedRoute`, `HeroService`, and `Location` services
into the constructor, saving their values in private fields: 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)') +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. Read more on the [CanDeactivate](../api/router/index/CanDeactivate-interface.html) page.
回退太多步会跑出我们的应用。 回退太多步会跑出我们的应用。
演示程序中,这算不上问题。但在真实的应用中,我们需要对此进行防范。 在真实的应用中,我们需要使用<em>CanDeactivate</em>守卫对此进行防范。
也许你该用[!{_CanDeactivateGuard}](../api/!{_CanDeactivateGuardUri}.html). 要了解更多,参见[CanDeactivate](../api/router/index/CanDeactivate-interface.html)
:marked :marked
You'll wire this method with an event binding to a *Back* button that you'll add to the component template. 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 Also, in `hero-detail.component.ts`, remove the `hero` property `@Input` decorator
and its import. and its import.
在`!{_appDir}`目录下添加<span ngio-ex>hero-detail.component.css</span>文件, 在`app`目录下添加<span ngio-ex>hero-detail.component.css</span>文件,
并且在`styleUrls`数组中引用它 —— 就像之前在`DashboardComponent`中做过的那样。 并且在`styleUrls`数组中引用它 —— 就像之前在`DashboardComponent`中做过的那样。
同时删除`hero``@Input`装饰器属性和它的导入语句。 同时删除`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. 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)') +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. Also edit <code>index.html</code> to refer to this stylesheet.
如果在根目录下没有一个名叫`styles.css`的文件,就添加它。 如果在根目录下没有一个名叫`styles.css`的文件,就添加它。
确保它包含[这里给出的主样式](!{styles_css})。 确保它包含[这里给出的主样式](https://raw.githubusercontent.com/angular/angular.io/master/public/docs/_examples/_boilerplate/src/styles.css)。
并编辑`index.html`来引用这个样式表。 并编辑`index.html`来引用这个样式表。
+makeExample('toh-5/ts/src/index.html', 'css', 'src/index.html (link ref)') +makeExample('toh-5/ts/src/index.html', 'css', 'src/index.html (link ref)')

View File

@ -97,7 +97,7 @@ h1 提供 HTTP 服务
:marked :marked
Notice that you also supply `HttpModule` as part of the *imports* array in root NgModule `AppModule`. 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 .l-main-section
:marked :marked
@ -397,7 +397,7 @@ h1 提供 HTTP 服务
calling `JSON.stringify`. The body content type calling `JSON.stringify`. The body content type
(`application/json`) is identified in the request header. (`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`)。 并且在请求头中标记出的 body 的内容类型(`application/json`)。
Refresh the browser, change a hero name, save your change, Refresh the browser, change a hero name, save your change,