为词汇表加上了双语备注
This commit is contained in:
Zhicheng Wang 2016-06-14 07:43:48 +08:00
parent f389c57ede
commit c1051cc8e1
2 changed files with 42 additions and 32 deletions

View File

@ -118,7 +118,7 @@ include _util-fns
:marked :marked
## Binding ## Binding
## 绑定 ## 绑定(Binding)
.l-sub-section .l-sub-section
:marked :marked
Almost always refers to [Data Binding](#data-binding) and the act of Almost always refers to [Data Binding](#data-binding) and the act of
@ -135,7 +135,7 @@ include _util-fns
:marked :marked
## Bootstrap ## Bootstrap
## 启动/引导 ## 启动/引导(Bootstrap)
.l-sub-section .l-sub-section
:marked :marked
We launch an Angular application by "bootstrapping" it with the `bootstrap` method. We launch an Angular application by "bootstrapping" it with the `bootstrap` method.
@ -154,7 +154,7 @@ include _util-fns
.l-main-section .l-main-section
:marked :marked
## camelCase ## camelCase
## 驼峰式命名法 ## 驼峰式命名法(camelCase)
.l-sub-section .l-sub-section
:marked :marked
The practice of writing compound words or phrases such that each word or abbreviation begins with a capital letter The practice of writing compound words or phrases such that each word or abbreviation begins with a capital letter
@ -174,7 +174,7 @@ include _util-fns
:marked :marked
## Component ## Component
## 组件 ## 组件(Component)
.l-sub-section .l-sub-section
:marked :marked
An Angular class responsible for exposing data An Angular class responsible for exposing data
@ -208,7 +208,7 @@ include _util-fns
.l-main-section .l-main-section
:marked :marked
## dash-case ## dash-case
## 中线命名法 ## 中线命名法(dash-case)
.l-sub-section .l-sub-section
:marked :marked
The practice of writing compound words or phrases such that each word is separated by a dash or hyphen (-). The practice of writing compound words or phrases such that each word is separated by a dash or hyphen (-).
@ -225,7 +225,7 @@ include _util-fns
:marked :marked
## Data Binding ## Data Binding
## 数据绑定 ## 数据绑定(Data Binding)
.l-sub-section .l-sub-section
:marked :marked
Applications display data values to a user and respond to user Applications display data values to a user and respond to user
@ -277,7 +277,7 @@ include _util-fns
<a id="decorator"></a> <a id="decoration"></a> <a id="decorator"></a> <a id="decoration"></a>
:marked :marked
## Decorator | Decoration ## Decorator | Decoration
## 装饰器 ## 装饰器(Decorator | Decoration)
.l-sub-section .l-sub-section
:marked :marked
A Decorator is a **function** that adds metadata to a class, its members (properties, methods) and function arguments. A Decorator is a **function** that adds metadata to a class, its members (properties, methods) and function arguments.
@ -329,7 +329,7 @@ include _util-fns
// #docregion d2 // #docregion d2
:marked :marked
## Dependency Injection ## Dependency Injection
## 依赖注入 ## 依赖注入(Dependency Injection)
.l-sub-section .l-sub-section
:marked :marked
Dependency Injection is both a design pattern and a mechanism Dependency Injection is both a design pattern and a mechanism
@ -413,7 +413,7 @@ include _util-fns
:marked :marked
## Directive ## Directive
## 指令 ## 指令(Directive)
.l-sub-section .l-sub-section
:marked :marked
An Angular class responsible for creating, re-shaping, and interacting with HTML elements An Angular class responsible for creating, re-shaping, and interacting with HTML elements
@ -532,7 +532,7 @@ include _util-fns
.l-main-section .l-main-section
:marked :marked
## Injector ## Injector
## 注入器 ## 注入器(Injector)
.l-sub-section .l-sub-section
:marked :marked
An object in the Angular [dependency injection system](#dependency-injection) An object in the Angular [dependency injection system](#dependency-injection)
@ -542,6 +542,7 @@ include _util-fns
Angular[依赖注入系统](#dependency-injection)中的一个对象,它可以在自己的缓存中找到一个“有名字的依赖”或者利用一个已注册的[provider](#provider)创建这样的依赖。 Angular[依赖注入系统](#dependency-injection)中的一个对象,它可以在自己的缓存中找到一个“有名字的依赖”或者利用一个已注册的[provider](#provider)创建这样的依赖。
:marked :marked
## Input ## Input
## 输入属性(Input)
.l-sub-section .l-sub-section
:marked :marked
A directive property that can be the ***target*** of a A directive property that can be the ***target*** of a
@ -557,7 +558,7 @@ include _util-fns
:marked :marked
## Interpolation ## Interpolation
## 插值表达式 ## 插值表达式(Interpolation)
.l-sub-section .l-sub-section
:marked :marked
A form of [Property Data Binding](#data-binding) in which a A form of [Property Data Binding](#data-binding) in which a
@ -583,7 +584,7 @@ include _util-fns
<a id="K"></a> <a id="K"></a>
:marked :marked
## kebab-case ## kebab-case
## 烤串命名法 ## 烤串命名法(kebab-case)
.l-sub-section .l-sub-section
:marked :marked
The practice of writing compound words or phrases such that each word is separated by a dash or hyphen (-). The practice of writing compound words or phrases such that each word is separated by a dash or hyphen (-).
@ -602,7 +603,7 @@ include _util-fns
.l-main-section .l-main-section
:marked :marked
## Lifecycle Hooks ## Lifecycle Hooks
## 生命周期钩子 ## 生命周期钩子(Lifecycle Hooks)
.l-sub-section .l-sub-section
:marked :marked
[Directives](#directive) and [Components](#component) have a lifecycle [Directives](#directive) and [Components](#component) have a lifecycle
@ -653,7 +654,7 @@ include _util-fns
.l-main-section .l-main-section
:marked :marked
## Module ## Module
## 模块 ## 模块(Module)
.l-sub-section .l-sub-section
:marked :marked
Angular apps are modular. Angular apps are modular.
@ -714,7 +715,7 @@ include _util-fns
.l-main-section .l-main-section
:marked :marked
## Output ## Output
## 输出 ## 输出(Output)
.l-sub-section .l-sub-section
:marked :marked
A directive property that can be the ***target*** of an A directive property that can be the ***target*** of an
@ -733,7 +734,7 @@ include _util-fns
<a id="P"></a> <a id="P"></a>
:marked :marked
## PascalCase ## PascalCase
## Pascal命名法 ## Pascal命名法(PascalCase)
.l-sub-section .l-sub-section
:marked :marked
The practice of writing compound words or phrases such that each word or abbreviation begins with a capital letter. The practice of writing compound words or phrases such that each word or abbreviation begins with a capital letter.
@ -749,7 +750,7 @@ include _util-fns
:marked :marked
## Pipe ## Pipe
## 管道 ## 管道(Pipe)
.l-sub-section .l-sub-section
:marked :marked
An Angular pipe is a function that transforms input values to output values for An Angular pipe is a function that transforms input values to output values for
@ -774,12 +775,13 @@ include _util-fns
:marked :marked
## Provider ## Provider
## 供应商(Provider)
.l-sub-section .l-sub-section
:marked :marked
A Provider creates a new instance of a dependency for the Dependency Injection system. A Provider creates a new instance of a dependency for the Dependency Injection system.
It relates a lookup token to code - sometimes called a "recipe" - that can create a dependency value. It relates a lookup token to code - sometimes called a "recipe" - that can create a dependency value.
依赖注入系统依靠Provider来创建依赖的实例。它把一个查阅用的Token关联到代码有时也叫“配方”可以创建依赖值。 依赖注入系统依靠供应商来创建依赖的实例。它把一个查阅用的Token关联到代码有时也叫“配方”可以创建依赖值。
For example, `new Provider(Foo, {useClass: Foo})` creates a `Provider` For example, `new Provider(Foo, {useClass: Foo})` creates a `Provider`
that relates the `Foo` token to a function that creates a new instance of the `Foo` class. that relates the `Foo` token to a function that creates a new instance of the `Foo` class.
@ -789,7 +791,7 @@ include _util-fns
There are other ways to create tokens and recipes. There are other ways to create tokens and recipes.
See [Dependency Injection](#dependency-injection) chapter to learn more. See [Dependency Injection](#dependency-injection) chapter to learn more.
还有其它一些方法建立Token和方剂 还有其它一些方法创建令牌(Token)和配方
参见[依赖注入Dependency Injection](#dependency-injection)以获取更多信息。 参见[依赖注入Dependency Injection](#dependency-injection)以获取更多信息。
.l-main-section .l-main-section
@ -797,7 +799,7 @@ include _util-fns
<a id="R"></a> <a id="R"></a>
:marked :marked
## Router ## Router
## 路由器 ## 路由器(Router)
.l-sub-section .l-sub-section
:marked :marked
Most applications consist of many screens or [views](#view). Most applications consist of many screens or [views](#view).
@ -815,7 +817,7 @@ include _util-fns
:marked :marked
## Routing Component ## Routing Component
## 路由组件 ## 路由组件(Routing Component)
.l-sub-section .l-sub-section
:marked :marked
A [Component](#component) with an attached router. A [Component](#component) with an attached router.
@ -839,23 +841,32 @@ include _util-fns
.l-main-section .l-main-section
:marked :marked
## Scoped Package ## Scoped Package
## 范围化包(Scoped Package)
.l-sub-section .l-sub-section
:marked :marked
Angular modules are delivered within *scoped packages* such as `@angular/core`, `@angular/common`, `@angular/platform-browser-dynamic`, Angular modules are delivered within *scoped packages* such as `@angular/core`, `@angular/common`, `@angular/platform-browser-dynamic`,
`@angular/http`, and `@angular/router`. `@angular/http`, and `@angular/router`.
Angular模块是用一系列*范围化包*的形式发布的,比如`@angular/core`, `@angular/common`, `@angular/platform-browser-dynamic`,
`@angular/http` 和 `@angular/router`
A [*scoped package*](https://docs.npmjs.com/misc/scope) is a way to group related *npm* packages. A [*scoped package*](https://docs.npmjs.com/misc/scope) is a way to group related *npm* packages.
[*范围化包*](https://docs.npmjs.com/misc/scope)是对有关联的*npm*包进行分组的一种方式。
We import a scoped package the same way we'd import a *normal* package. We import a scoped package the same way we'd import a *normal* package.
The only difference, from a consumer perspective, The only difference, from a consumer perspective,
is that the package name begins with the Angular *scope name*, `@angular`. is that the package name begins with the Angular *scope name*, `@angular`.
我们使用和导入*普通*包相同的方式导入范围化包。
从消费者的视角看唯一的不同是那些包的名字是用Angular的*范围名*`@angular`开头儿的。
// #enddocregion n-s // #enddocregion n-s
+makeExample('../docs/_fragments/architecture/ts/app/app.component.ts', 'import')(format=".") +makeExample('../docs/_fragments/architecture/ts/app/app.component.ts', 'import')(format=".")
// #docregion n-s // #docregion n-s
:marked :marked
## Structural Directive ## Structural Directive
## 结构型指令 ## 结构型指令(Structural Directive)
.l-sub-section .l-sub-section
:marked :marked
A category of [Directive](#directive) that can A category of [Directive](#directive) that can
@ -876,7 +887,7 @@ include _util-fns
.l-main-section .l-main-section
:marked :marked
## Template ## Template
## 模板 ## 模板(Template)
.l-sub-section .l-sub-section
:marked :marked
A template is a chunk of HTML that Angular uses to render a [view](#view) with A template is a chunk of HTML that Angular uses to render a [view](#view) with
@ -891,7 +902,7 @@ include _util-fns
:marked :marked
## Template Expression ## Template Expression
## 模板表达式 ## 模板表达式(Template Expression)
.l-sub-section .l-sub-section
:marked :marked
An expression in a JavaScript-like syntax that Angular evaluates within An expression in a JavaScript-like syntax that Angular evaluates within
@ -903,7 +914,7 @@ include _util-fns
// #docregion t2 // #docregion t2
:marked :marked
## Transpile ## Transpile
## 编译 ## 转译(Transpile)
.l-sub-section .l-sub-section
:marked :marked
The process of transforming code written in one form of JavaScript The process of transforming code written in one form of JavaScript
@ -948,7 +959,7 @@ include _util-fns
.l-main-section .l-main-section
:marked :marked
## View ## View
## 视图 ## 视图(View)
.l-sub-section .l-sub-section
:marked :marked
A view is a portion of the screen that displays information and responds A view is a portion of the screen that displays information and responds
@ -977,7 +988,7 @@ include _util-fns
<a id="Z"></a> <a id="Z"></a>
:marked :marked
## Zones ## Zones
## 区域 ## 区域(Zones)
.l-sub-section .l-sub-section
:marked :marked
Zones are a mechanism for encapsulating and intercepting Zones are a mechanism for encapsulating and intercepting

View File

@ -223,7 +223,7 @@ code-example(language="bash").
`AppComponent`该如何在运行中获得一个具体的`HeroService`实例呢? `AppComponent`该如何在运行中获得一个具体的`HeroService`实例呢?
### Do we *new* the *HeroService*? No way! ### Do we *new* the *HeroService*? No way!
### 我们要自己 *new* 出这个 *HeroService* 吗?没门 ### 我们要自己 *new* 出这个 *HeroService* 吗?
We could create a new instance of the `HeroService` with "new" like this: We could create a new instance of the `HeroService` with "new" like this:
固然,我们可以使用`new`关键字来创建`HeroService`的实例,就像这样: 固然,我们可以使用`new`关键字来创建`HeroService`的实例,就像这样:
@ -238,7 +238,7 @@ code-example(language="bash").
we'll have to find every place we create the service and fix it. we'll have to find every place we create the service and fix it.
Running around patching code is error prone and adds to the test burden. Running around patching code is error prone and adds to the test burden.
* 我们的组件将不得不懂得该如何创建`HeroService`。 * 我们的组件将不得不弄清楚该如何创建`HeroService`。
如果有一天我们修改了`HeroService`的构造函数,我们不得不找出创建过此服务的每一处代码,并修改它。 如果有一天我们修改了`HeroService`的构造函数,我们不得不找出创建过此服务的每一处代码,并修改它。
而给代码打补丁的行为容易导致错误,并增加了测试的负担。 而给代码打补丁的行为容易导致错误,并增加了测试的负担。
@ -266,7 +266,7 @@ code-example(language="bash").
We get it. Really we do. We get it. Really we do.
But it is so ridiculously easy to avoid these problems that there is no excuse for doing it wrong. But it is so ridiculously easy to avoid these problems that there is no excuse for doing it wrong.
有办法了,真的!这个办法真是简单得不可思议,它能解决这些问题,你就再也没有犯错误的口了。 有办法了,真的!这个办法真是简单得不可思议,它能解决这些问题,你就再也没有犯错误的口了。
### Inject the *HeroService* ### Inject the *HeroService*
### 注入 *HeroService* ### 注入 *HeroService*
@ -307,8 +307,7 @@ code-example(language="bash").
如果现在运行我们的代码Angular就会失败并报错 如果现在运行我们的代码Angular就会失败并报错
code-example(format="." language="html"). code-example(format="." language="html").
EXCEPTION: No provider for HeroService! (AppComponent -> HeroService) EXCEPTION: No provider for HeroService! (AppComponent -> HeroService)
(异常没有HeroService的供应商(AppComponent -> HeroService))
EXCEPTION: No provider for HeroService! (AppComponent -> HeroService) —— 异常没有HeroService的供应商AppComponent -> HeroService
:marked :marked
We have to teach the *injector* how to make a `HeroService` by registering a `HeroService` **provider**. We have to teach the *injector* how to make a `HeroService` by registering a `HeroService` **provider**.
Do that by adding the following `providers` array property to the bottom of the component metadata Do that by adding the following `providers` array property to the bottom of the component metadata