Merge branch 'master' of https://github.com/angular-live/angular.io
# Conflicts: # public/docs/ts/latest/guide/style-guide.jade
This commit is contained in:
Zhimin(Rex) YE
commit
d5b69cab28
|
|
@ -12,4 +12,5 @@ md-toolbar(class="main-nav background-regal l-pinned-top l-layer-5",scroll-y-off
|
|||
li.l-left <a class="main-nav-button" href="/docs/#{language}/latest/" md-button>文档</a>
|
||||
li.l-left <a class="main-nav-button" href="/events.html" md-button>事件</a>
|
||||
li.l-left <a class="main-nav-button" href="/news.html" md-button>新闻</a>
|
||||
li.l-left <a class="main-nav-button" href="/translate/cn/about.html" md-button>关于中文版</a>
|
||||
li.l-right <a class="main-nav-button" href="/docs/ts/latest/quickstart.html" md-button>立即开始！</a>
|
||||
|
|
|
|||
|
|
@ -104,7 +104,6 @@ nav.side-nav.l-pinned-left.l-layer-4.l-offset-nav
|
|||
li(class="nav-list-item #{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{item.navTitle}
|
||||
|
||||
.nav-blocks
|
||||
a(class="nav-title #{isApiReferenceSelected()}" href="#{reference[0].href}" title="#{reference[0].tooltip}") API Reference
|
||||
a(class="nav-title #{isApiReferenceSelected()}" href="#{reference[0].href}" title="#{reference[0].tooltip}") API参考
|
||||
|
||||
script.
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
- var base = current.path[4] ? '.' : './guide';
|
||||
.banner
|
||||
p.text-body This cheat sheet is provisional and may change. Angular 2 is currently in Beta.
|
||||
p.text-body 本小抄是临时的，将来可能改变。Angular 2目前还是Beta状态。
|
||||
|
||||
article(class="l-content-small grid-fluid docs-content")
|
||||
.cheatsheet
|
||||
ngio-cheatsheet(src= base + '/cheatsheet.json')
|
||||
ngio-cheatsheet(src= base + '/cheatsheet-cn.json')
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ include ../_util-fns
|
|||
:marked
|
||||
**See the [live example](/resources/live-examples/cb-component-communication/ts/plnkr.html)**.
|
||||
|
||||
**请看[在线例子](/resources/live-examples/cb-component-communication/ts/plnkr.html)**
|
||||
**参见[在线例子](/resources/live-examples/cb-component-communication/ts/plnkr.html)**
|
||||
|
||||
.l-main-section
|
||||
<a id="parent-to-child"></a>
|
||||
|
|
@ -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')
|
||||
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@ include ../_util-fns
|
|||
:marked
|
||||
**See the [live example](/resources/live-examples/cb-dependency-injection/ts/plnkr.html)**
|
||||
of the code supporting this cookbook.
|
||||
获取本“食谱”的代码支持，**请看[在线例子](/resources/live-examples/cb-dependency-injection/ts/plnkr.html)**。
|
||||
获取本“食谱”的代码支持，**参见[在线例子](/resources/live-examples/cb-dependency-injection/ts/plnkr.html)**。
|
||||
.l-main-section
|
||||
|
||||
<a id="app-wide-dependencies"></a>
|
||||
|
|
@ -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.
|
||||
|
||||
|
|
@ -40,7 +40,7 @@ include ../_util-fns
|
|||
:marked
|
||||
**See the [live example](/resources/live-examples/cb-dynamic-form/ts/plnkr.html)**.
|
||||
|
||||
**请看[在线例子](/resources/live-examples/cb-dynamic-form/ts/plnkr.html)**.
|
||||
**参见[在线例子](/resources/live-examples/cb-dynamic-form/ts/plnkr.html)**.
|
||||
|
||||
.l-main-section
|
||||
<a id="object-model"></a>
|
||||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ a(id='top')
|
|||
:marked
|
||||
**See the [live example](/resources/live-examples/cb-set-document-title/ts/plnkr.html)**.
|
||||
|
||||
**请看[在线例子](/resources/live-examples/cb-set-document-title/ts/plnkr.html)**.
|
||||
**参见[在线例子](/resources/live-examples/cb-set-document-title/ts/plnkr.html)**.
|
||||
.l-sub-section
|
||||
img(src='/resources/images/devguide/plunker-separate-window-button.png' alt="pop out the window" align="right" style="margin-right:-20px")
|
||||
:marked
|
||||
|
|
|
|||
|
|
@ -100,6 +100,8 @@ include _util-fns
|
|||
export { HeroComponent } from './hero.component.ts'; // re-export the named thing
|
||||
:marked
|
||||
Now a consumer can import what it needs from the barrel.
|
||||
|
||||
现在，消费者就可以从这个封装桶中导入它需要的东西了。
|
||||
code-example(format='').
|
||||
import { Hero, HeroService } from '../heroes'; // index is implied
|
||||
:marked
|
||||
|
|
@ -128,12 +130,12 @@ include _util-fns
|
|||
between a "token" or "key" and a dependency [provider](#provider).
|
||||
This more rare usage should be clear in context.
|
||||
|
||||
有可能指的是[依赖注入](#dependency-injection)在一个记号(Token)或键值(Key)和一个依赖[Provider](#provider)之间的绑定。
|
||||
这个用法很少，而且一般都应该在上下文中明确标示。
|
||||
有可能指的是[依赖注入](#dependency-injection)在一个Token或Key和一个依赖的[Provider](#provider)之间的绑定。
|
||||
这种用法很少，而且一般都会在上下文中写清楚。
|
||||
|
||||
:marked
|
||||
## Bootstrap
|
||||
## 引导程序
|
||||
## 启动/引导
|
||||
.l-sub-section
|
||||
:marked
|
||||
We launch an Angular application by "bootstrapping" it with the `bootstrap` method.
|
||||
|
|
@ -141,11 +143,12 @@ include _util-fns
|
|||
and optionally registers service [providers](#provider) with the
|
||||
[dependency injection system](#dependency-injection).
|
||||
|
||||
我们通过一个名叫`bootstrap`的类方法来引导装入Angular应用程序。这个`bootstrap`类方法会识别应用程序的顶级“根”[组件](#component)，
|
||||
并可能通过[依赖注入系统](#dependency-injection)注册服务[Provider](#provider)。
|
||||
我们通过一个名叫`bootstrap`的类方法来引导Angular应用程序。这个`bootstrap`类方法会识别应用程序的顶级“根”[组件](#component)，
|
||||
并可能通过[依赖注入体系](#dependency-injection)注册服务的[Provider](#provider)。
|
||||
|
||||
One can bootstrap multiple apps in the same `index.html`, each with its own top level root.
|
||||
你可以在同一个`index.html`启动多个程序，每个程序都有自己的顶级根组件。
|
||||
|
||||
你可以在同一个`index.html`中引导多个应用，每个应用都有自己的顶级根组件。
|
||||
|
||||
<a id="C"></a>
|
||||
.l-main-section
|
||||
|
|
@ -157,17 +160,17 @@ include _util-fns
|
|||
The practice of writing compound words or phrases such that each word or abbreviation begins with a capital letter
|
||||
_except the first letter which is a lowercase letter_.
|
||||
|
||||
驼峰式命名法是除了首字母小写外，每一个单词或简写以大写字母开始编写词汇或短语的实践方法。
|
||||
驼峰式命名法是指除了首字母要小写外，每个单词或缩写都以大写字母开头儿的形式来拼写复合词或短语的一种实践。
|
||||
|
||||
Function, property, and method names are typically spelled in camelCase. Examples include: `square`, `firstName` and `getHeroes`.
|
||||
|
||||
函数、属性和方法命名一般都使用驼峰式大小写命名法。比如`square`, `firstName` 和 `getHeroes`等。
|
||||
函数、属性和方法命名一般都使用驼峰式拼写法。比如`square`, `firstName` 和 `getHeroes`等。
|
||||
|
||||
This form is also known as **lower camel case**, to distinguish it from **upper camel case** which we call [PascalCase](#pascalcase).
|
||||
When we write "camelCase" in this documentation we always mean *lower camel case*.
|
||||
|
||||
这种形式也被叫做**小驼峰式命名法**（**lower camel case**），以便区分**大驼峰式命名法**（我们也叫帕斯卡命名法）。
|
||||
当我们文档中提到“驼峰式命名法” （“camelCase”）的时候，所指的都是小驼峰命名法。
|
||||
这种形式也被叫做**小驼峰式命名法（lower camel case）**，以区分于**大驼峰式命名法**（我们也叫Pascal命名法）。
|
||||
当我们在文档中提到“驼峰式命名法（camelCase）”的时候，所指的都是小驼峰命名法。
|
||||
|
||||
:marked
|
||||
## Component
|
||||
|
|
@ -178,12 +181,12 @@ include _util-fns
|
|||
to a [View](#view) and handling most of the view’s display
|
||||
and user-interaction logic.
|
||||
|
||||
组件是一个用来展示数据到[视图](#view)，并处理几乎所有视图显示以及用户交互逻辑的Angular类（Angular Class）。
|
||||
组件是一个用来把数据展示到[视图](#view)，并处理几乎所有视图显示以及用户交互逻辑的Angular类。
|
||||
|
||||
The Component is one of the most important building blocks in the Angular system.
|
||||
It is, in fact, an Angular [Directive](#directive) with a companion [Template](#template).
|
||||
|
||||
组件是Angular系统的最重要的基本单位之一。
|
||||
组件是Angular系统的最重要的基本构造块儿之一。
|
||||
它其实是一个拥有[模板](#template)的[指令](#directive)。
|
||||
|
||||
The developer applies the `#{atSym}Component` !{decorator} to
|
||||
|
|
@ -191,13 +194,13 @@ include _util-fns
|
|||
that Angular needs to create a component instance and render it with its template
|
||||
as a view.
|
||||
|
||||
开发人员在使用`#{atSym}Component`!{decorator}来装饰一个组件类，就是把这个类附加到核心组件元数据（essential component metadata）上面。
|
||||
Angular利用这个核心组件的元数据信息，来建立一个组件实例，并把组件的模板作为视图渲染出来。
|
||||
开发人员使用`#{atSym}Component`!{decoratorCn}来装饰一个组件类，也就是把这个核心组件的元数据附加到类上。
|
||||
Angular利用这个元数据信息，来创建一个组件实例，并把组件的模板作为视图渲染出来。
|
||||
|
||||
Those familiar with "MVC" and "MVVM" patterns will recognize
|
||||
the Component in the role of "Controller" or "View Model".
|
||||
|
||||
那些熟悉 "MVC" 和 "MVVM" 架构模式的应该能意识到组件充当了控制和视图模型的角色。
|
||||
如果你熟悉 "MVC" 和 "MVVM" 架构模式，就会意识到“组件”充当了“控制器”和“视图模型”的角色。
|
||||
// #enddocregion b-c
|
||||
|
||||
// #docregion d1
|
||||
|
|
@ -228,48 +231,47 @@ include _util-fns
|
|||
Applications display data values to a user and respond to user
|
||||
actions (clicks, touches, keystrokes).
|
||||
|
||||
应用程序一般将数据展示给用户，并对用户的操作（点击、触屏、按键）做出回应。
|
||||
应用程序会将数据展示给用户，并对用户的操作（点击、触屏、按键）做出回应。
|
||||
|
||||
We could push application data values into HTML, attach
|
||||
event listeners, pull changed values from the screen, and
|
||||
update application data values ... all by hand.
|
||||
|
||||
我们可以自己处理这些操作：将数据显示到HTML网页，添加事件监听器，从屏幕获取数据变化，然后更新数据等等。。。
|
||||
我们当然可以自己处理这些操作：将数据显示到HTML网页，添加事件监听器，从屏幕获取数据变化，然后更新数据等等……
|
||||
|
||||
Or we could declare the relationship between an HTML widget
|
||||
and an application data source ... and let a data binding
|
||||
framework handle the details.
|
||||
|
||||
或者，我们可以声明HTML小部件和数据源的关系...，让一个数据绑定框架工具来处理所有细节。
|
||||
或者，我们也可以声明HTML小部件和数据源的关系……，让一个数据绑定框架来处理所有细节。
|
||||
|
||||
Data Binding is that second approach. Angular has a rich
|
||||
data binding framework with a variety of data binding
|
||||
operations and supporting declaration syntax.
|
||||
|
||||
数据绑定是第二种方法。Angular有一个非常强大的数据绑定框架工具，具有多种用来数据绑定的操作，并支持声明语法规则。
|
||||
这第二种方法就是数据绑定。Angular有一个非常强大的数据绑定框架，具有多种用来数据绑定的操作，并支持声明语法规则。
|
||||
|
||||
The many forms of binding include:
|
||||
绑定形式包括：
|
||||
* [Interpolation](guide/template-syntax.html#interpolation)
|
||||
* [插值表达式（Interpolation）](guide/template-syntax.html#interpolation)
|
||||
* [Property Binding](guide/template-syntax.html#property-binding)
|
||||
* [属性绑定（Property Binding）](guide/template-syntax.html#property-binding)
|
||||
* [Event Binding](guide/template-syntax.html#event-binding)
|
||||
* [事件绑定（Event Binding）](guide/template-syntax.html#event-binding)
|
||||
* [Attribute Binding](guide/template-syntax.html#attribute-binding)
|
||||
* [Attribute绑定（Attribute Binding）](guide/template-syntax.html#attribute-binding)
|
||||
* [Class Binding](guide/template-syntax.html#class-binding)
|
||||
* [类绑定（Class Binding）](guide/template-syntax.html#class-binding)
|
||||
* [Style Binding](guide/template-syntax.html#style-binding)
|
||||
* [样式绑定（Style Binding）](guide/template-syntax.html#style-binding)
|
||||
* [Two-way data binding with ngModel](guide/template-syntax.html#ng-model)
|
||||
|
||||
绑定模式包括：
|
||||
* [插值Interpolation](guide/template-syntax.html#interpolation)
|
||||
* [属性绑定Property Binding](guide/template-syntax.html#property-binding)
|
||||
* [事件绑定Event Binding](guide/template-syntax.html#event-binding)
|
||||
* [特征绑定Attribute Binding](guide/template-syntax.html#attribute-binding)
|
||||
* [类绑定Class Binding](guide/template-syntax.html#class-binding)
|
||||
* [样式绑定Style Binding](guide/template-syntax.html#style-binding)
|
||||
* [使用ngModel进行双向数据绑定Two-way data binding with ngModel](guide/template-syntax.html#ng-model)
|
||||
* [基于ngModel的双向数据绑定（Two-way data binding with ngModel）](guide/template-syntax.html#ng-model)
|
||||
|
||||
Learn more about data binding in the
|
||||
[Template Syntax](guide/template-syntax.html#data-binding) chapter.
|
||||
|
||||
到[模板语法](guide/template-syntax.html#data-binding)章节获取更多关于数据绑定的知识。
|
||||
要了解关于数据绑定的更多知识，请参见[模板语法](guide/template-syntax.html#data-binding)一章。
|
||||
|
||||
// #enddocregion d1
|
||||
<a id="decorator"></a> <a id="decoration"></a>
|
||||
|
|
@ -280,28 +282,28 @@ include _util-fns
|
|||
:marked
|
||||
A Decorator is a **function** that adds metadata to a class, its members (properties, methods) and function arguments.
|
||||
|
||||
一个装饰器是一个**函数**，这个函数将元数据添加到一个类、类成员（属性、方法）和函数上。
|
||||
装饰器是一个**函数**，这个函数将元数据添加到类、类成员（属性、方法）和函数上。
|
||||
|
||||
Decorators are a JavaScript language [feature](https://github.com/wycats/javascript-decorators), implemented in TypeScript and proposed for ES2016 (AKA ES7).
|
||||
|
||||
装饰器是一个Javascript的语言[特征](https://github.com/wycats/javascript-decorators)，装饰器在TypeScript里面已经采用并实施了，它也被推荐到ES2016（也就是ES7）
|
||||
装饰器是一个JavaScript的语言[特征](https://github.com/wycats/javascript-decorators)，装饰器在TypeScript里面已经采纳并实现了，并被推荐到了ES2016（也就是ES7）。
|
||||
|
||||
We apply a decorator by positioning it
|
||||
immediately above or to the left of the thing it decorates.
|
||||
|
||||
我们应用装饰器的方法是把装饰器放到被装饰的对象的上面或者左边。
|
||||
我们应用装饰器的方法是把装饰器放到被装饰对象的上面或左边。
|
||||
|
||||
Angular has its own set of decorators to help it interoperate with our application parts.
|
||||
Here is an example of a `@Component` decorator that identifies a
|
||||
class as an Angular [Component](#component) and an `@Input` decorator applied to a property
|
||||
of that component.
|
||||
|
||||
Angular使用一套自己的装饰器来实现应用程序的各部分的相互操作。
|
||||
下面的例子是一个使用`@Component`装饰器来将一个类标示为一个Angular[组件](#component)，并使用`@Input`装饰器装饰这个组件的一个属性。
|
||||
Angular使用自己的一套装饰器来实现应用程序各部分之间的相互操作。
|
||||
下面的例子中使用了`@Component`装饰器来将一个类标记为一个Angular[组件](#component)，并用`@Input`装饰器来装饰该组件的一个属性。
|
||||
|
||||
The elided object argument to the `@Component` decorator would contain the pertinent component metadata.
|
||||
|
||||
被省略的`@Component`装饰器的参数对象可能包含了相关的组件元数据。
|
||||
`@Component`装饰器中被省略的参数对象还可以包含和组件有关的元数据。
|
||||
|
||||
```
|
||||
@Component({...})
|
||||
|
|
@ -311,19 +313,19 @@ include _util-fns
|
|||
name:string;
|
||||
}
|
||||
```
|
||||
|
||||
The scope of a decorator is limited to the language feature
|
||||
that it decorates. None of the decorations shown here will "leak" to other
|
||||
classes appearing below it in the file.
|
||||
|
||||
一个装饰器的作用范围会被限制在被装饰的作用范围之内。在以上的例子中，没有一个装饰器会“泄露”到其他类，就算这些其他类在同一个文件紧跟着上面的类。
|
||||
|
||||
一个装饰器的作用范围会被限制在它所装饰的东西上，这是一个语言级特性。在上面这个例子中，就算其它类在同一个文件中紧跟着上面的类也不会有任何装饰器“泄露”到其它类。
|
||||
|
||||
.alert.is-important
|
||||
:marked
|
||||
Always include the parentheses `()` when applying a decorator.
|
||||
A decorator is a **function** that must be called when applied.
|
||||
|
||||
总是在装饰器后面加包括`()`。因为装饰器是**函数**，在装饰的时候一定会被运行。
|
||||
永远别忘了在装饰器后面加括号`()`。因为装饰器是 **函数** ，在应用它的时候一定要被调用。
|
||||
|
||||
// #docregion d2
|
||||
:marked
|
||||
|
|
@ -335,80 +337,80 @@ include _util-fns
|
|||
for creating and delivering parts of an application to other
|
||||
parts of an application that request them.
|
||||
|
||||
依赖注入既是设计模式，同时也是一种机制：当应用程序的一些部件需要另一些部件的时候，使用依赖注入机制来新建被请求的部件并将其注入到发出请求的部件。
|
||||
依赖注入既是设计模式，同时也是一种机制：当应用程序的一些部件需要另一些部件的时候，使用依赖注入机制来创建被请求的部件并将其注入到发出请求的部件。
|
||||
|
||||
Angular developers prefer to build applications by defining many simple parts
|
||||
that each do one thing well and then wire them together at runtime.
|
||||
|
||||
Angular开发者比较倾向的开发应用程序的方法是，定义许多精简小部件，每个小部件只做一件事并做好自己那件事，然后在运行时间把这些精简小部件连在一起组成应用程序。
|
||||
Angular开发者喜欢的构建应用程序的方法是：定义许多精简小部件，每个小部件只做一件事并做好它，然后在运行期把这些精简小部件装配在一起组成应用程序。
|
||||
|
||||
These parts often rely on other parts. An Angular [Component](#component)
|
||||
part might rely on a service part to get data or perform a calculation. When a
|
||||
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.
|
||||
If "A" needs "B" and "B" needs "C", the system resolves that chain of dependencies
|
||||
and returns a fully prepared instance of "A".
|
||||
|
||||
我们可以让“依赖注入系统”为我们新建一个部件A并处理所有A的“依赖”。如果A需要B，B需要C，这个系统便解析这个依赖链，返回给我们一个完整准备妥当的A实例。
|
||||
我们可以让“依赖注入系统”为我们创建一个部件A并处理所有A的“依赖”。如果A需要B，B需要C，这个系统便解析这个依赖链，给我们返回一个完全准备好的A实例。
|
||||
|
||||
Angular provides and relies upon its own sophisticated
|
||||
[Dependency Injection](dependency-injection.html) system
|
||||
to assemble and run applications by "injecting" application parts
|
||||
into other application parts where and when needed.
|
||||
|
||||
Angular提供并使用自己设计精密的[依赖注入](dependency-injection.html)系统来组装和运行应用程序：按时按需的将一些部件“注入”到另一些部件里面。
|
||||
Angular提供并使用自己设计精密的[依赖注入](dependency-injection.html)系统来组装和运行应用程序：在要用时，将一些部件“注入”到另一些部件里面。
|
||||
|
||||
At the core is an [`Injector`](#injector) that returns dependency values on request.
|
||||
The expression `injector.get(token)` returns the value associated with the given token.
|
||||
|
||||
依赖注入的核心是一个[`注入器`](#injector)，这个注入器按需返回依赖部件。`injector.get(token)`方法返回和提供的符记参数相关的依赖部件。
|
||||
依赖注入的核心是一个[`Injector`](#injector)，这个注入器按需返回依赖部件。`injector.get(token)`方法返回和提供的Token参数相关的依赖部件。
|
||||
|
||||
A token is an Angular type (`OpaqueToken`). We rarely deal with tokens directly; most
|
||||
methods accept a class name (`Foo`) or a string ("foo") and Angular converts it
|
||||
to a token. When we write `injector.get(Foo)`, the injector returns
|
||||
the value associated with the token for the `Foo` class, typically an instance of `Foo` itself.
|
||||
|
||||
令牌是一个Angular的类型(`OpaqueToken`)。我们很少需要直接接触令牌。绝大多数类方法都接受类名称 (`Foo`)或者字符串("foo")，Angular把这些类名称和字符串转换为令牌。
|
||||
当我们使用`injector.get(Foo)`，注入器返回用 `Foo`类生成的的令牌对应的依赖值，这个依赖值一般是`Foo`类实例。
|
||||
Token是一个Angular中的类型(`OpaqueToken`)。我们很少需要直接接触Token。绝大多数类方法都接受类名称 (`Foo`)或者字符串("foo")，Angular把这些类名称和字符串转换为Token。
|
||||
当我们调用`injector.get(Foo)`时，注入器返回用`Foo`类生成的的Token对应的依赖值，这个依赖值通常是`Foo`类的实例。
|
||||
|
||||
Angular makes similar requests internally during many of its operations
|
||||
as when it creates a [`Component`](#AppComponent) for display.
|
||||
|
||||
Angular新建一个[组件](#AppComponent)的过程中，会在内部有很多类似的（依赖注入）请求。
|
||||
Angular在创建[组件](#AppComponent)以供显示的过程中，会在内部执行很多类似的依赖注入请求。
|
||||
|
||||
The `Injector` maintains an internal map of tokens to dependency values.
|
||||
If the `Injector` can't find a value for a given token, it creates
|
||||
a new value using a `Provider` for that token.
|
||||
|
||||
`注入器`维护一个令牌与其对应的依赖值对照图。如果`注入器`不能找到一个令牌对应的依赖值，它就会使用`Provider`新建一个依赖值。
|
||||
`注入器`维护一个Token与其对应的依赖值对照图。如果`Injector`不能找到一个Token对应的依赖值，它就会使用`Provider`来创建一个依赖值。
|
||||
|
||||
A [Provider](#provider) is a recipe for
|
||||
creating new instances of a dependency value associated with a particular token.
|
||||
|
||||
一个`Provider`(#provider)是一个使用指定令牌来新建其对应的依赖实例的方法。
|
||||
`Provider`(#provider)是使用指定Token来创建相应依赖实例的“菜谱”之一。
|
||||
|
||||
An injector can only create a value for a given token if it has
|
||||
a `Provider` for that token in its internal provider registry.
|
||||
Registering providers is a critical preparatory step.
|
||||
|
||||
如果在注入器的内部注册表里面，一个令牌对应的依赖值是一个`Provider`，那么注入器只能为令牌创建一个依赖值。注册Provider是一个非常关键的准备步骤。
|
||||
如果在注入器的内部注册表中，一个Token对应的依赖值是一个`Provider`，那么注入器就得为这个Token创建一个依赖值。所以注册Provider是一个非常关键的准备步骤。
|
||||
|
||||
Angular registers some of its own providers with every injector.
|
||||
We can register our own providers. Quite often the best time to register a `Provider`
|
||||
is when we [bootstrap](#bootstrap) the application.
|
||||
There are other opportunities to register as well.
|
||||
|
||||
Angular为每个注册器注册很多自己的Provider。我们可以注册一些自己的Provider。一般最好的注册Provider的时间是在应用程序的[引导程序Bootstrap](#bootstrap)的时候。
|
||||
我们也有其他很多机会注册Provider。
|
||||
Angular会为每个注册器注册很多自己的内置Provider。我们也可以注册自己的Provider。通常注册Provider的最佳时间是在应用程序开始[引导](#bootstrap)的时候。
|
||||
当然，我们也有其它很多机会注册Provider。
|
||||
|
||||
Learn more in the [Dependency Injection](guide/dependency-injection.html) chapter.
|
||||
|
||||
到[依赖注入](guide/dependency-injection.html)章节学习更多关于依赖注入的知识
|
||||
要了解关于依赖注入的更多知识，请参见[依赖注入](guide/dependency-injection.html)一章。
|
||||
|
||||
:marked
|
||||
## Directive
|
||||
|
|
@ -418,7 +420,7 @@ include _util-fns
|
|||
An Angular class responsible for creating, re-shaping, and interacting with HTML elements
|
||||
in the browser DOM. Directives are Angular's most fundamental feature.
|
||||
|
||||
指令是一个Angular类，这个类负责新建和重塑浏览器DOM里面HTML元素，同时负责与HTML元素的互动。指令是Angular的最基本的特征。
|
||||
指令是一个Angular类，这个类负责创建和重塑浏览器DOM中的HTML元素，同时负责与HTML元素的互动。指令是Angular中最基本的特性。
|
||||
|
||||
A Directive is almost always associated with an HTML element or attribute.
|
||||
We often refer to such an element or attribute as the directive itself.
|
||||
|
|
@ -426,16 +428,16 @@ include _util-fns
|
|||
it creates the matching directive class instance
|
||||
and gives that instance control over that portion of the browser DOM.
|
||||
|
||||
指令几乎都是对HTML元素或元素的特征关联的。我们通常把这些关联的HTML元素或者元素特征当做指令本身。
|
||||
当Angular在一个HTML模板里面遇到一个指令的时候，它新建一个与该指令配套类的实例，然后把浏览器这个部分的DOM的控制交给这个类。
|
||||
指令几乎都是关联到HTML元素或Attribute的。我们通常把这些关联的HTML元素或者Attribute当做指令本身。
|
||||
当Angular在HTML模板中遇到一个指令的时候，它就找出一个与该指令匹配的类，创建此类的实例，然后把浏览器中这部分DOM的控制权交给该实例。
|
||||
|
||||
Developers can invent custom HTML markup (e.g., `<my-directive>`) to
|
||||
associate with their custom directives. They add this custom markup to HTML templates
|
||||
as if they were writing native HTML. In this way, directives become extensions of
|
||||
HTML itself.
|
||||
|
||||
开发人员可以为自制指令指定自定义的HTML标记（比如`<my-directive>`），然后，他们便可以像使用HTML自带标记一样把这些自定义的标记放到HTML模板里。
|
||||
这样，指令就变成了HTML的拓展了。
|
||||
开发人员可以为自定义指令指定自定义的HTML标签（比如`<my-directive>`），然后，他们就可以像写原生HTML一样把这些自定义标签放到HTML模板里了。
|
||||
这样，指令就变成了HTML本身的拓展。
|
||||
|
||||
Directives fall into one of three categories:
|
||||
|
||||
|
|
@ -445,17 +447,17 @@ include _util-fns
|
|||
render application [views]. Components are usually represented as HTML elements.
|
||||
They are the building blocks of an Angular application and the
|
||||
developer can expect to write a lot of them.
|
||||
1. [组件](#component): 结合了程序逻辑和一个用来渲染试图的HTML模板[views]。组件一般由HTML元素代表。它们是用来组建Angular应用程序的基本单元，所以可以预料到开发人员会写很多很多组件。
|
||||
1. [组件](#component): 用来程序逻辑和一个用来渲染视图的HTML模板[views]。组件一般表示成HTML元素的形式。它们是用来构建Angular应用程序的基本单元。可以预料，开发人员将会写很多很多组件。
|
||||
|
||||
1. [Attribute Directives](#attribute-directive) that can listen to and modify the behavior of
|
||||
other HTML elements, attributes, properties, and components. They are usually represented
|
||||
as HTML attributes, hence the name.
|
||||
1. [特征指令](#attribute-directive)：可以监控和修改HTML元素、元素特征、属性和组件等的行为。它们一般有HTML元素特征（名）来体现。
|
||||
1. [Attribute指令](#attribute-directive)：可以监控和修改其它HTML元素、Attribute、属性和组件之类的行为。它们一般表示为HTML元素Attibute，故名。
|
||||
|
||||
1. [Structural Directives](#structural-directive), a directive responsible for
|
||||
shaping or re-shaping HTML layout, typically by adding, removing, or manipulating
|
||||
elements and their children.
|
||||
1. [结构型指令](#structural-directive)：负责塑造或重塑HTML布局。一般都是通过添加、删除或者操作HTML元素和他的子级元素来实现的。
|
||||
1. [结构型指令](#structural-directive)：负责塑造或重塑HTML布局。这一般是通过添加、删除或者操作HTML元素及其子元素来实现的。
|
||||
// #enddocregion d2
|
||||
|
||||
// #docregion e1
|
||||
|
|
@ -469,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/)
|
||||
|
|
@ -477,13 +479,13 @@ include _util-fns
|
|||
either in this version of the language or a dialect that strives to be
|
||||
compatible with it such as [TypeScript](#typesScript).
|
||||
|
||||
最新的被认可的Javascript版本是[ECMAScript 2015](http://www.ecma-international.org/ecma-262/6.0/)，（也交“ES2015”或“ES6”）。Angular 2的开发者要么这个版本的Javascript，要么使用与这个版本兼容的语言，比如[TypeScript](#typesScript)。
|
||||
最新的被认可的JavaScript版本是[ECMAScript 2015](http://www.ecma-international.org/ecma-262/6.0/)，（也叫“ES2015”或“ES6”）。Angular 2的开发者要么使用这个版本的JavaScript，要么使用与这个版本兼容的语言，比如[TypeScript](#typesScript)。
|
||||
|
||||
Most modern browsers today only support the prior "ECMAScript 5" (AKA ES5) standard.
|
||||
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或者其它兼容语言开发的应用程序，都必须被“[转译](#transpile)”成ES5 JavaScript。
|
||||
|
||||
Angular 2 developers may choose to write in ES5 directly.
|
||||
|
||||
|
|
@ -497,7 +499,7 @@ include _util-fns
|
|||
[ECMAScript 2015](http://www.ecma-international.org/ecma-262/6.0/)
|
||||
(AKA "ES2015" or "ES6")
|
||||
|
||||
最新发布的Javascript版本，[ECMAScript 2015](http://www.ecma-international.org/ecma-262/6.0/)
|
||||
最新发布的JavaScript版本，[ECMAScript 2015](http://www.ecma-international.org/ecma-262/6.0/)
|
||||
(即 "ES2015" 或 "ES6")
|
||||
:marked
|
||||
## ES2015
|
||||
|
|
@ -520,7 +522,7 @@ include _util-fns
|
|||
Short hand for "ECMAScript 5", the version of JavaScript run by most modern browsers.
|
||||
See [ECMAScript](#ecmascript).
|
||||
|
||||
“ECMAScript 5”的简写，大部分现代浏览器使用的Javascript版本。请看[ECMAScript](#ecmascript)。
|
||||
“ECMAScript 5”的简写，大部分现代浏览器使用的JavaScript版本。参见[ECMAScript](#ecmascript)。
|
||||
// #enddocregion e2
|
||||
|
||||
// #docregion f-l
|
||||
|
|
@ -538,7 +540,7 @@ include _util-fns
|
|||
that can find a named "dependency" in its cache or create such a thing
|
||||
with a registered [provider](#provider).
|
||||
|
||||
一个Angular[依赖注入系统](#dependency-injection)内部的对象，它可以在自己的内部缓存找到已点名的依赖或者利用一个注册过的[provider](#provider)新建一个依赖。
|
||||
Angular[依赖注入系统](#dependency-injection)中的一个对象，它可以在自己的缓存中找到一个“有名字的依赖”或者利用一个已注册的[provider](#provider)创建这样的依赖。
|
||||
:marked
|
||||
## Input
|
||||
.l-sub-section
|
||||
|
|
@ -548,11 +550,11 @@ include _util-fns
|
|||
Data values flow *into* this property from the data source identified
|
||||
in the template expression to the right of the equal sign.
|
||||
|
||||
一个指令属性：是[属性绑定Property Binding](guide/template-syntax.html#property-binding)的目标。数据值从处于模板表达式等号右边的数据源中，流入这个指令属性。
|
||||
指令属性可以作为[属性绑定](guide/template-syntax.html#property-binding)的目标。数据值会从模板表达式等号右侧的数据源中，流入这个属性。
|
||||
|
||||
See the [Template Syntax](guide/template-syntax.html#inputs-outputs) chapter.
|
||||
|
||||
请看[模板语法Template Syntax](guide/template-syntax.html#inputs-outputs)章节。
|
||||
参见[模板语法Template Syntax](guide/template-syntax.html#inputs-outputs)一章。
|
||||
|
||||
:marked
|
||||
## Interpolation
|
||||
|
|
@ -565,7 +567,7 @@ include _util-fns
|
|||
before it is assigned to an element property
|
||||
or displayed between element tags as in this example.
|
||||
|
||||
一种[属性数据绑定Property Data Binding](#data-binding) 的方式：在双大括号中间的[模板表达式](#template-expression)被渲染成文本。在被指派给元素属性或者在元素标记中间显示之前，这些文本可能与傍边的文本先合并，请看下面的例子。
|
||||
[属性数据绑定](#data-binding) 的格式之一：位于双大括号中的[模板表达式](#template-expression)会被渲染成文本。在被赋值给元素属性或者显示在元素标记中之前，这些文本可能先与周边的文本合并，参见下面的例子。
|
||||
|
||||
code-example(language="html" escape="html").
|
||||
<label>My current hero is {{hero.name}}</label>
|
||||
|
|
@ -574,7 +576,7 @@ include _util-fns
|
|||
Learn more about interpolation in the
|
||||
[Template Syntax](guide/template-syntax.html#interpolation) chapter.
|
||||
|
||||
从[模板语法Template Syntax](guide/template-syntax.html#interpolation)章节学习更多关于插值表达式的知识。
|
||||
要学习关于插值表达式的更多知识，参见[模板语法](guide/template-syntax.html#interpolation)一章。
|
||||
|
||||
<a id="J"></a>
|
||||
|
||||
|
|
@ -587,15 +589,15 @@ include _util-fns
|
|||
:marked
|
||||
The practice of writing compound words or phrases such that each word is separated by a dash or hyphen (-).
|
||||
|
||||
使用中线来分割每个单词的编写复合词或短语的命名方法。
|
||||
使用中线（-）分隔每个单词来书写复合词或短语的命名方法。
|
||||
|
||||
Directive selectors and the root of filenames are often spelled in kebab-case. Examples include: `my-app` and the `hero-list.component.ts`.
|
||||
|
||||
指令选择器和文件名字等一般都用烤串命名法Kebab-case。比如`my-app`和`hero-list.component.ts`。
|
||||
指令选择器和文件名等一般都用烤串命名法。比如`my-app`和`hero-list.component.ts`。
|
||||
|
||||
This form is also known as [dash-case](#dash-case).
|
||||
|
||||
这种命名法也被叫做[中线命名法dash-case](#dash-case)
|
||||
这种格式也叫[中线命名法](#dash-case)。
|
||||
|
||||
<a id="L"></a>
|
||||
.l-main-section
|
||||
|
|
@ -607,43 +609,42 @@ 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.
|
||||
|
||||
开发者可以通过实现一个或多个“生命周期钩子”接口，切入到这个生命周期的关键时间点中。
|
||||
开发者可以通过实现一个或多个“生命周期钩子”接口，切入到生命周期中的关键时间点。
|
||||
|
||||
Each interface has a single hook method whose name is the interface name prefixed with `ng`.
|
||||
For example, the `OnInit` interface has a hook method names `ngOnInit`.
|
||||
|
||||
每个接口有一个唯一的钩子类方法方法，它的名字一般是接口的名字加前缀 `ng`。比如，`OnInit`接口的钩子类方法方法名字为 `ngOnInit`。
|
||||
每个接口只有一个钩子方法，方法名一般是接口的名字加前缀 `ng`。比如，`OnInit`接口的钩子类的方法名为 `ngOnInit`。
|
||||
|
||||
Angular calls these hook methods in the following order:
|
||||
|
||||
Angular会按照下面的顺序调用钩子类方法：
|
||||
|
||||
* `ngOnChanges` - called when an [input](#input)/[output](#output) binding values change
|
||||
* `ngOnInit` - after the first `ngOnChanges`
|
||||
* `ngDoCheck` - developer's custom change detection
|
||||
* `ngAfterContentInit` - after component content initialized
|
||||
* `ngAfterContentChecked` - after every check of component content
|
||||
* `ngAfterViewInit` - after component's view(s) are initialized
|
||||
* `ngAfterViewChecked` - after every check of a component's view(s)
|
||||
* `ngOnDestroy` - just before the directive is destroyed.
|
||||
|
||||
* `ngOnChanges` - 在[输入input](#input)/[输出output](#output)绑定的值变化的时候调用。
|
||||
* `ngOnInit` - after the first `ngOnChanges`
|
||||
* `ngOnInit` - 在第一个`ngOnChanges`后调用。
|
||||
* `ngDoCheck` - developer's custom change detection
|
||||
* `ngDoCheck` - 开发者自定义变化监测器。
|
||||
* `ngAfterContentInit` - after component content initialized
|
||||
* `ngAfterContentInit` - 在组件初始化以后调用。
|
||||
* `ngAfterContentChecked` - after every check of component content
|
||||
* `ngAfterContentChecked` - 在检查每个组件内容后调用。
|
||||
* `ngAfterViewInit` - after component's view(s) are initialized
|
||||
* `ngAfterViewInit` - 在组件试图初始化后调用。
|
||||
* `ngAfterViewChecked` - after every check of a component's view(s)
|
||||
* `ngAfterViewChecked` - 在检查每个组件试图后调用
|
||||
* `ngOnDestroy` - just before the directive is destroyed.
|
||||
* `ngOnDestroy` - 在指令销毁前调用。
|
||||
|
||||
Learn more in the [Lifecycle Hooks](guide/lifecycle-hooks.html) chapter.
|
||||
|
||||
请看[生命周期钩子Lifecycle Hooks](guide/lifecycle-hooks.html)章节。
|
||||
要了解更多，参见[生命周期钩子Lifecycle Hooks](guide/lifecycle-hooks.html)一章。
|
||||
// #enddocregion f-l
|
||||
|
||||
// #docregion m1
|
||||
|
|
@ -663,23 +664,23 @@ 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.
|
||||
|
||||
一个典型的模块，是单一用途的代码块的凝聚。
|
||||
典型的模块，是具有单一用途的内聚代码块。
|
||||
|
||||
A module **exports** something of value in that code, typically one thing such as a class.
|
||||
A module that needs that thing, **imports** it.
|
||||
|
||||
模块一般**输出**一个东西：类。
|
||||
模块如果需要什么东西，那就**导入**它。
|
||||
模块一般 **输出** 一个东西：类。
|
||||
模块如果需要什么东西，那就 **导入** 它。
|
||||
|
||||
The structure of Angular modules and the import/export syntax
|
||||
is based on the [ES2015](#es2015) module standard
|
||||
described [here](http://www.2ality.com/2014/09/es6-modules-final.html).
|
||||
|
||||
Angular的模块结构和输出/导入语法是基于[ES2015](#es2015)模块标准上的，请看[这里](http://www.2ality.com/2014/09/es6-modules-final.html).
|
||||
Angular的模块结构和输出/导入语法是基于[ES2015](#es2015)模块标准的，参见[这里](http://www.2ality.com/2014/09/es6-modules-final.html).
|
||||
|
||||
An application that adheres to this standard requires a module loader to
|
||||
load modules on request and resolve inter-module dependencies.
|
||||
|
|
@ -707,6 +708,7 @@ include _util-fns
|
|||
// #docregion n-s
|
||||
- var lang = current.path[1]
|
||||
- var decorator = lang === 'dart' ? 'annotation' : '<a href="#decorator">decorator</a>'
|
||||
- var decoratorCn = lang === 'dart' ? '注解' : '<a href="#decorator">装饰器</a>'
|
||||
- var atSym = lang === 'js' ? '' : '@'
|
||||
<a id="N"></a>
|
||||
<a id="O"></a>
|
||||
|
|
@ -726,7 +728,7 @@ include _util-fns
|
|||
|
||||
See the [Template Syntax](guide/template-syntax.html#inputs-outputs) chapter.
|
||||
|
||||
请看[模板语法Template Syntax](guide/template-syntax.html#inputs-outputs)章节。
|
||||
参见[模板语法Template Syntax](guide/template-syntax.html#inputs-outputs)章节。
|
||||
|
||||
.l-main-section
|
||||
<a id="P"></a>
|
||||
|
|
@ -756,7 +758,7 @@ include _util-fns
|
|||
to associate the pipe function with a name. We then can use that
|
||||
name in our HTML to declaratively transform values on screen.
|
||||
|
||||
Angular的管道是一个函数，用来把输入值转变为输出值给视图 [view](#view)。我们使用 `#{atSym}Pipe` !{decorator}来把管道函数链接到它的名字上。
|
||||
Angular的管道是一个函数，用来把输入值转变为输出值给视图 [view](#view)。我们使用 `#{atSym}Pipe` !{decoratorCn}来把管道函数链接到它的名字上。
|
||||
然后，我们可以在HTML中使用它的名字来，用声明的形式，在显示时把输入值转变输出值。
|
||||
|
||||
Here's an example that uses the built-in `currency` pipe to display
|
||||
|
|
@ -779,18 +781,18 @@ include _util-fns
|
|||
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.
|
||||
|
||||
Provider为依赖注入系统新建一个依赖的实例。它是关于通过令牌查询代码，有时被叫做“方剂”，可以创建依赖值。
|
||||
Provider为依赖注入系统创建一个依赖的实例。它是关于通过Token查询代码，有时被叫做“方剂”，可以创建依赖值。
|
||||
|
||||
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.
|
||||
|
||||
比如，`new Provider(Foo, {useClass: Foo})`新建一个`Provider`，把`Foo`令牌联系到一个函数，这个函数新建一个`Foo`类的实例。
|
||||
比如，`new Provider(Foo, {useClass: Foo})`创建一个`Provider`，把`Foo`Token联系到一个函数，这个函数创建一个`Foo`类的实例。
|
||||
|
||||
There are other ways to create tokens and recipes.
|
||||
See [Dependency Injection](#dependency-injection) chapter to learn more.
|
||||
|
||||
还有其他一些方法建立令牌和方剂。
|
||||
请看[依赖注入Dependency Injection](#dependency-injection)以获取更多信息。
|
||||
还有其它一些方法建立Token和方剂。
|
||||
参见[依赖注入Dependency Injection](#dependency-injection)以获取更多信息。
|
||||
|
||||
.l-main-section
|
||||
<a id="Q"></a>
|
||||
|
|
@ -805,7 +807,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
|
||||
|
|
@ -898,7 +900,7 @@ include _util-fns
|
|||
a [data binding](#data-binding). Learn how to write template expressions
|
||||
in the [Template Syntax](guide/template-syntax.html#template-expressions) chapter.
|
||||
|
||||
Angular在[数据绑定data binding](#data-binding)内评估的类似Javascript语法的表达式。在[模板语法Template Syntax](guide/template-syntax.html#template-expressions)章节了解更多模板表达式的知识。
|
||||
Angular在[数据绑定data binding](#data-binding)内求值的类似JavaScript语法的表达式。在[模板语法Template Syntax](guide/template-syntax.html#template-expressions)章节了解更多模板表达式的知识。
|
||||
// #enddocregion t1
|
||||
// #docregion t2
|
||||
:marked
|
||||
|
|
@ -909,7 +911,7 @@ include _util-fns
|
|||
The process of transforming code written in one form of JavaScript
|
||||
(e.g., TypeScript) into another form of JavaScript (e.g., [ES5](#es5)).
|
||||
|
||||
把用Javascript形式语言（比如TypeScript）编写的程序转换到另一个形式的JavaScript（例如[ES5](#es5))。
|
||||
把用JavaScript形式语言（比如TypeScript）编写的程序转换到另一个形式的JavaScript（例如[ES5](#es5))。
|
||||
:marked
|
||||
## TypeScript
|
||||
.l-sub-section
|
||||
|
|
@ -930,7 +932,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.
|
||||
|
||||
|
|
@ -968,7 +970,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):
|
||||
|
|
|
|||
|
|
@ -0,0 +1,513 @@
|
|||
{
|
||||
"currentEnvironment": "TypeScript",
|
||||
"version": {
|
||||
"raw": "2.0.0-rc.1",
|
||||
"major": 2,
|
||||
"minor": 0,
|
||||
"patch": 0,
|
||||
"prerelease": [
|
||||
"local"
|
||||
],
|
||||
"build": "sha.48e03ae",
|
||||
"version": "2.0.0-local",
|
||||
"codeName": "snapshot",
|
||||
"isSnapshot": true,
|
||||
"full": "2.0.0-local+sha.48e03ae",
|
||||
"branch": "master",
|
||||
"commitSHA": "48e03ae748c0d68292380c4af2361faab5f6b497"
|
||||
},
|
||||
"sections": [
|
||||
{
|
||||
"name": "引导",
|
||||
"description": "<p><code>import {bootstrap} from 'angular2/platform/browser';</code>\n\n</p>\n",
|
||||
"items": [
|
||||
{
|
||||
"syntax": "bootstrap(MyAppComponent, [MyService, provide(...)]);",
|
||||
"bold": [
|
||||
"provide"
|
||||
],
|
||||
"description": "<p>以MyAppComponent作为根组件引导应用，并且配置DI的各种provider。</p>\n"
|
||||
}
|
||||
],
|
||||
"index": 0
|
||||
},
|
||||
{
|
||||
"name": "模板语法",
|
||||
"description": "",
|
||||
"items": [
|
||||
{
|
||||
"syntax": "<input [value]=\"firstName\">",
|
||||
"bold": [
|
||||
"[value]"
|
||||
],
|
||||
"description": "<p>把属性<code>value</code>绑定到表达式<code>firstName</code>的结果。</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "<div [attr.role]=\"myAriaRole\">",
|
||||
"bold": [
|
||||
"[attr.role]"
|
||||
],
|
||||
"description": "<p>把Attribute <code>role</code> 绑定到表达式 <code>myAriaRole</code>的结果。</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "<div [class.extra-sparkle]=\"isDelightful\">",
|
||||
"bold": [
|
||||
"[class.extra-sparkle]"
|
||||
],
|
||||
"description": "<p>把元素是否出现CSS类<code>extra-sparkle</code>，绑定到一个表达式<code>isDelightful</code>的结果是否为真。</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "<div [style.width.px]=\"mySize\">",
|
||||
"bold": [
|
||||
"[style.width.px]"
|
||||
],
|
||||
"description": "<p>把样式的<code>width</code>属性绑定到表达式<code>mySize</code>的结果，以px为单位。这个单位是可选的。</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "<button (click)=\"readRainbow($event)\">",
|
||||
"bold": [
|
||||
"(click)"
|
||||
],
|
||||
"description": "<p>当按钮（及其子元素）上的click事件被触发时，调用<code>readRainbow</code>方法，并把事件对象作为参数传入。</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "<div title=\"Hello {{ponyName}}\">",
|
||||
"bold": [
|
||||
"{{ponyName}}"
|
||||
],
|
||||
"description": "<p>把属性绑定到一个插值表达式字符串，比如 "Hello Seabiscuit". 等价于：\n<code><div [title]="'Hello' + ponyName"></code></p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "<p>Hello {{ponyName}}</p>",
|
||||
"bold": [
|
||||
"{{ponyName}}"
|
||||
],
|
||||
"description": "<p>把文本内容绑定到一个插值表达式，比如 "Hello Seabiscuit".</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "<my-cmp [(title)]=\"name\">",
|
||||
"bold": [
|
||||
"[(title)]"
|
||||
],
|
||||
"description": "<p>设置双向数据绑定。等价于：<code><my-cmp [title]="name" (titleChange)="name=$event"></code></p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "<video #movieplayer ...>\n <button (click)=\"movieplayer.play()\">\n</video>",
|
||||
"bold": [
|
||||
"#movieplayer",
|
||||
"(click)"
|
||||
],
|
||||
"description": "<p>创建一个局部变量 <code>movieplayer</code> ，它提供到<code>video</code>元素实例的访问，可用于当前模板中的数据绑定和事件绑定表达式中。</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "<p *myUnless=\"myExpression\">...</p>",
|
||||
"bold": [
|
||||
"*myUnless"
|
||||
],
|
||||
"description": "<p><code>*</code>符号表示当前元素将被转变成一个内嵌模板。等价于：\n<code><template [myUnless]="myExpression"><p>...</p></template></code></p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "<p>Card No.: {{cardNumber | myCreditCardNumberFormatter}}</p>",
|
||||
"bold": [
|
||||
"{{cardNumber | myCreditCardNumberFormatter}}"
|
||||
],
|
||||
"description": "<p>通过名叫<code>myCreditCardNumberFormatter</code>的管道，转换表达式的当前值<code>cardNumber</code>。</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "<p>Employer: {{employer?.companyName}}</p>",
|
||||
"bold": [
|
||||
"{{employer?.companyName}}"
|
||||
],
|
||||
"description": "<p>安全导航运算符(<code>?</code>)表示<code>employer</code>字段是可选的，如果它是<code>undefined</code>表达式剩下的部分将被忽略</p>\n"
|
||||
}
|
||||
],
|
||||
"index": 1
|
||||
},
|
||||
{
|
||||
"name": "内建指令",
|
||||
"description": "<p><code>import {NgIf, ...} from 'angular2/common';</code>\n\n</p>\n",
|
||||
"items": [
|
||||
{
|
||||
"syntax": "<section *ngIf=\"showSection\">",
|
||||
"bold": [
|
||||
"*ngIf"
|
||||
],
|
||||
"description": "<p>基于showSection表达式的值移除或重新创建部分DOM树。</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "<li *ngFor=\"let item of list\">",
|
||||
"bold": [
|
||||
"*ngFor"
|
||||
],
|
||||
"description": "<p>把li元素及其内容转化成一个模板，并用它来为列表中的每个条目初始化视图。</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "<div [ngSwitch]=\"conditionExpression\">\n <template [ngSwitchWhen]=\"case1Exp\">...</template>\n <template ngSwitchWhen=\"case2LiteralString\">...</template>\n <template ngSwitchDefault>...</template>\n</div>",
|
||||
"bold": [
|
||||
"[ngSwitch]",
|
||||
"[ngSwitchWhen]",
|
||||
"ngSwitchWhen",
|
||||
"ngSwitchDefault"
|
||||
],
|
||||
"description": "<p>基于conditionExpression的当前值，从内嵌模板中选取一个，有条件的切换div的内容。</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "<div [ngClass]=\"{active: isActive, disabled: isDisabled}\">",
|
||||
"bold": [
|
||||
"[ngClass]"
|
||||
],
|
||||
"description": "<p>把一个元素上CSS类的出现与否，绑定到一个真值映射表上。右侧的表达式应该返回类似{class-name: true/false}的映射表。</p>\n"
|
||||
}
|
||||
],
|
||||
"index": 2
|
||||
},
|
||||
{
|
||||
"name": "表单",
|
||||
"description": "<p><code>import {FORM_DIRECTIVES} from 'angular2/common';</code>\n\n</p>\n",
|
||||
"items": [
|
||||
{
|
||||
"syntax": "<input [(ngModel)]=\"userName\">",
|
||||
"bold": [
|
||||
"[(ngModel)]"
|
||||
],
|
||||
"description": "<p>提供双向绑定，为表单控件提供解析和验证。</p>\n"
|
||||
}
|
||||
],
|
||||
"index": 3
|
||||
},
|
||||
{
|
||||
"name": "类装饰器",
|
||||
"description": "<p><code>import {Directive, ...} from 'angular2/core';</code>\n\n</p>\n",
|
||||
"items": [
|
||||
{
|
||||
"syntax": "@Component({...})\nclass MyComponent() {}",
|
||||
"bold": [
|
||||
"@Component({...})"
|
||||
],
|
||||
"description": "<p>声明当前类是一个组件，并提供关于该组件的元数据。</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "@Directive({...})\nclass MyDirective() {}",
|
||||
"bold": [
|
||||
"@Directive({...})"
|
||||
],
|
||||
"description": "<p>声明当前类是一个指令，并提供关于该指令的元数据。</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "@Pipe({...})\nclass MyPipe() {}",
|
||||
"bold": [
|
||||
"@Pipe({...})"
|
||||
],
|
||||
"description": "<p>声明当前类是一个管道，并且提供该管道的元数据。</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "@Injectable()\nclass MyService() {}",
|
||||
"bold": [
|
||||
"@Injectable()"
|
||||
],
|
||||
"description": "<p>声明当前类有一些依赖，当依赖注入器创建该类的实例时，这些依赖应该被注入到构造函数中。\n\n</p>\n"
|
||||
}
|
||||
],
|
||||
"index": 4
|
||||
},
|
||||
{
|
||||
"name": "指令配置",
|
||||
"description": "<p><code>@Directive({ property1: value1, ... })</code>\n\n</p>\n",
|
||||
"items": [
|
||||
{
|
||||
"syntax": "selector: '.cool-button:not(a)'",
|
||||
"bold": [
|
||||
"selector:"
|
||||
],
|
||||
"description": "<p>指定一个CSS选择器，以便在模板中找出该指令。支持的选择器包括<code>element</code>,\n<code>[attribute]</code>, <code>.class</code>, 和 <code>:not()</code>。</p>\n<p>不支持父子关系选择器。</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "providers: [MyService, provide(...)]",
|
||||
"bold": [
|
||||
"providers:"
|
||||
],
|
||||
"description": "<p>为当前指令及其子指令提供依赖注入的providers数组。</p>\n"
|
||||
}
|
||||
],
|
||||
"index": 5
|
||||
},
|
||||
{
|
||||
"name": "组件配置",
|
||||
"description": "<p>\n<code>@Component</code> extends <code>@Directive</code>,\nso the <code>@Directive</code> configuration applies to components as well</p>\n",
|
||||
"items": [
|
||||
{
|
||||
"syntax": "viewProviders: [MyService, provide(...)]",
|
||||
"bold": [
|
||||
"viewProviders:"
|
||||
],
|
||||
"description": "<p>依赖注入provider的数组，局限于当前组件的视图中。</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "template: 'Hello {{name}}'\ntemplateUrl: 'my-component.html'",
|
||||
"bold": [
|
||||
"template:",
|
||||
"templateUrl:"
|
||||
],
|
||||
"description": "<p>当前组件视图的内联模板或外部模板地址</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "styles: ['.primary {color: red}']\nstyleUrls: ['my-component.css']",
|
||||
"bold": [
|
||||
"styles:",
|
||||
"styleUrls:"
|
||||
],
|
||||
"description": "<p>内联CSS样式或外部样式表URL的列表，用于给组件的视图添加样式。</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "directives: [MyDirective, MyComponent]",
|
||||
"bold": [
|
||||
"directives:"
|
||||
],
|
||||
"description": "<p>组件模板中用到的指令列表。</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "pipes: [MyPipe, OtherPipe]",
|
||||
"bold": [
|
||||
"pipes:"
|
||||
],
|
||||
"description": "<p>组件模板中用到的管道列表。</p>\n"
|
||||
}
|
||||
],
|
||||
"index": 6
|
||||
},
|
||||
{
|
||||
"name": "供指令类或组件类用的字段装饰器。",
|
||||
"description": "<p><code>import {Input, ...} from 'angular2/core';</code>\n\n</p>\n",
|
||||
"items": [
|
||||
{
|
||||
"syntax": "@Input() myProperty;",
|
||||
"bold": [
|
||||
"@Input()"
|
||||
],
|
||||
"description": "<p>声明一个输入属性，以便我们可以通过属性绑定更新它。(比如：\n<code><my-cmp [my-property]="someExpression"></code>).</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "@Output() myEvent = new EventEmitter();",
|
||||
"bold": [
|
||||
"@Output()"
|
||||
],
|
||||
"description": "<p>声明一个输出属性，以便我们可以通过事件绑定进行订阅。(比如：<code><my-cmp (my-event)="doSomething()"></code>)</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "@HostBinding('[class.valid]') isValid;",
|
||||
"bold": [
|
||||
"@HostBinding('[class.valid]')"
|
||||
],
|
||||
"description": "<p>把宿主元素的属性（比如CSS类：valid）绑定到指令/组件的属性（比如：isValid）。</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "@HostListener('click', ['$event']) onClick(e) {...}",
|
||||
"bold": [
|
||||
"@HostListener('click', ['$event'])"
|
||||
],
|
||||
"description": "<p>通过指令/组件的方法（例如onClick）订阅宿主元素的事件（例如click），可选传入一个参数（$event）。</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "@ContentChild(myPredicate) myChildComponent;",
|
||||
"bold": [
|
||||
"@ContentChild(myPredicate)"
|
||||
],
|
||||
"description": "<p>把组件内容查询(myPredicate)的第一个结果绑定到类的myChildComponent属性。</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "@ContentChildren(myPredicate) myChildComponents;",
|
||||
"bold": [
|
||||
"@ContentChildren(myPredicate)"
|
||||
],
|
||||
"description": "<p>把组件内容查询(MyPredicate)的全部结果，绑定到类的myChildComponents属性。</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "@ViewChild(myPredicate) myChildComponent;",
|
||||
"bold": [
|
||||
"@ViewChild(myPredicate)"
|
||||
],
|
||||
"description": "<p>把组件视图查询(myPredicate)的第一个结果绑定到类的myChildComponent属性。对指令无效。</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "@ViewChildren(myPredicate) myChildComponents;",
|
||||
"bold": [
|
||||
"@ViewChildren(myPredicate)"
|
||||
],
|
||||
"description": "<p>把组件视图查询(myPredicate)的所有结果绑定到类的myChildComponents属性。对指令无效。</p>\n"
|
||||
}
|
||||
],
|
||||
"index": 7
|
||||
},
|
||||
{
|
||||
"name": "指令和组件的变更检测与生命周期钩子",
|
||||
"description": "<p>(作为类方法实现)\n</p>\n",
|
||||
"items": [
|
||||
{
|
||||
"syntax": "constructor(myService: MyService, ...) { ... }",
|
||||
"bold": [
|
||||
"constructor(myService: MyService, ...)"
|
||||
],
|
||||
"description": "<p>类的构造函数会在所有其它生命周期钩子之前调用。使用它来注入依赖，但是要避免用它做较重的工作。</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "ngOnChanges(changeRecord) { ... }",
|
||||
"bold": [
|
||||
"ngOnChanges(changeRecord)"
|
||||
],
|
||||
"description": "<p>在输入属性每次变化了之后、开始处理内容或子视图之前被调用。</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "ngOnInit() { ... }",
|
||||
"bold": [
|
||||
"ngOnInit()"
|
||||
],
|
||||
"description": "<p>在构造函数、初始化输入属性、第一次调用完ngOnChanges之后调用。</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "ngDoCheck() { ... }",
|
||||
"bold": [
|
||||
"ngDoCheck()"
|
||||
],
|
||||
"description": "<p>每当检查组件或指令的输入属性是否变化时调用。通过它，可以用自定义的检查方式来扩展变更检测逻辑。</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "ngAfterContentInit() { ... }",
|
||||
"bold": [
|
||||
"ngAfterContentInit()"
|
||||
],
|
||||
"description": "<p>当组件或指令的内容已经初始化、ngOnInit完成之后调用。</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "ngAfterContentChecked() { ... }",
|
||||
"bold": [
|
||||
"ngAfterContentChecked()"
|
||||
],
|
||||
"description": "<p>在每次检查完组件或指令的内容之后调用。</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "ngAfterViewInit() { ... }",
|
||||
"bold": [
|
||||
"ngAfterViewInit()"
|
||||
],
|
||||
"description": "<p>当组件的视图已经初始化完毕，每次ngAfterContentInit之后被调用。只适用于组件。</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "ngAfterViewChecked() { ... }",
|
||||
"bold": [
|
||||
"ngAfterViewChecked()"
|
||||
],
|
||||
"description": "<p>每次检查完组件的视图之后调用。只适用于组件。</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "ngOnDestroy() { ... }",
|
||||
"bold": [
|
||||
"ngOnDestroy()"
|
||||
],
|
||||
"description": "<p>在所属实例被销毁前，只调用一次。</p>\n"
|
||||
}
|
||||
],
|
||||
"index": 8
|
||||
},
|
||||
{
|
||||
"name": "依赖注入配置",
|
||||
"description": "<p><code>import {provide} from 'angular2/core';</code>\n\n</p>\n",
|
||||
"items": [
|
||||
{
|
||||
"syntax": "provide(MyService, {useClass: MyMockService})",
|
||||
"bold": [
|
||||
"provide",
|
||||
"useClass"
|
||||
],
|
||||
"description": "<p>把MyService类的Provider设置或改写为MyMockService。</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "provide(MyService, {useFactory: myFactory})",
|
||||
"bold": [
|
||||
"provide",
|
||||
"useFactory"
|
||||
],
|
||||
"description": "<p>把MyService的Provider设置或改写为myFactory工厂函数。</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "provide(MyValue, {useValue: 41})",
|
||||
"bold": [
|
||||
"provide",
|
||||
"useValue"
|
||||
],
|
||||
"description": "<p>把MyValue的Provider设置或改写为值41。</p>\n"
|
||||
}
|
||||
],
|
||||
"index": 9
|
||||
},
|
||||
{
|
||||
"name": "路由与导航",
|
||||
"description": "<p><code>import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, ...} from 'angular2/router';</code>\n\n</p>\n",
|
||||
"items": [
|
||||
{
|
||||
"syntax": "@RouteConfig([\n { path: '/:myParam', component: MyComponent, name: 'MyCmp' },\n { path: '/staticPath', component: ..., name: ...},\n { path: '/*wildCardParam', component: ..., name: ...}\n])\nclass MyComponent() {}",
|
||||
"bold": [
|
||||
"@RouteConfig"
|
||||
],
|
||||
"description": "<p>为所装饰的组件配置路由。支持静态、参数化、带通配符的路由。</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "<router-outlet></router-outlet>",
|
||||
"bold": [
|
||||
"router-outlet"
|
||||
],
|
||||
"description": "<p>标记一个位置，用于加载当前激活路由的组件。</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "<a [routerLink]=\"[ '/MyCmp', {myParam: 'value' } ]\">",
|
||||
"bold": [
|
||||
"[routerLink]"
|
||||
],
|
||||
"description": "<p>基于路由指令创建指向不同视图的链接，由路由名和可选参数组成。路由名匹配一个已配置路由的name属性。添加“/”前缀可以导航到根路由。添加“./”前缀可以导航到子路由。</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "@CanActivate(() => { ... })class MyComponent() {}",
|
||||
"bold": [
|
||||
"@CanActivate"
|
||||
],
|
||||
"description": "<p>用函数定义的一个组件装饰器，路由器会先调用它来检测是否应该激活该组件。应该返回布尔值或承诺（Promise）。</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "routerOnActivate(nextInstruction, prevInstruction) { ... }",
|
||||
"bold": [
|
||||
"routerOnActivate"
|
||||
],
|
||||
"description": "<p>导航到一个组件之后，路由器调用该组件的routerOnActivate方法（如已定义）。</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "routerCanReuse(nextInstruction, prevInstruction) { ... }",
|
||||
"bold": [
|
||||
"routerCanReuse"
|
||||
],
|
||||
"description": "<p>路由器调用组件的routerCanReuse方法（如已定义）来检测是复用本实例还是销毁它并创建一个新的。应该返回布尔值或承诺（Promise）。</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "routerOnReuse(nextInstruction, prevInstruction) { ... }",
|
||||
"bold": [
|
||||
"routerOnReuse"
|
||||
],
|
||||
"description": "<p>当路由器可以复用一个组件实例时，它调用组件的routerOnReuse方法（如已定义）。</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "routerCanDeactivate(nextInstruction, prevInstruction) { ... }",
|
||||
"bold": [
|
||||
"routerCanDeactivate"
|
||||
],
|
||||
"description": "<p>路由器会调用要完成导航所需移除的每个组件的routerCanDeactivate方法（如已定义）。当且仅当所有的该方法都返回true或者承诺（Promise）被解析（Resolve）时，导航才会继续。</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "routerOnDeactivate(nextInstruction, prevInstruction) { ... }",
|
||||
"bold": [
|
||||
"routerOnDeactivate"
|
||||
],
|
||||
"description": "<p>在每个指令因为路由变更而被移除之前调用。可以返回一个承诺，来阻止移除本指令 —— 直到承诺（Promise）被解析（Resolve）。</p>\n"
|
||||
}
|
||||
],
|
||||
"index": 10
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -9,7 +9,7 @@ include ../_util-fns
|
|||
|
||||
**依赖注入** 是一个很重要的程序设计模式。
|
||||
Angular有自己的依赖注入框架，离开了它，我们几乎没法构建Angular应用。
|
||||
它使用的是如此广泛，以至于几乎每个人都会把它简称为 _DI_ 。
|
||||
它使用得非常广泛，以至于几乎每个人都会把它简称为 _DI_ 。
|
||||
|
||||
In this chapter we'll learn what DI is and why we want it.
|
||||
Then we'll learn [how to use it](#angular-di) in an Angular app.
|
||||
|
|
@ -1401,5 +1401,4 @@ p.
|
|||
在`forwardRef()`方法的帮助下，我们实际上也可以先定义组件。
|
||||
它的原理解释在[这个博客中](http://blog.thoughtram.io/angular/2015/09/03/forward-references-in-angular-2.html)。
|
||||
但是为什么要先给自己找麻烦呢？
|
||||
还是通过在独立的文件中定义组件和服务，完全消除此问题吧。
|
||||
|
||||
还是通过在独立的文件中定义组件和服务，完全避免此问题吧。
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -311,7 +311,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
|
||||
|
|
@ -347,7 +347,11 @@ a(href="#toc") 回到顶部
|
|||
.s-rule.do
|
||||
:marked
|
||||
**Do** use consistent names for all assets named after what they represent.
|
||||
<<<<<<< HEAD
|
||||
**做** 为所有东西使用统一的命名：以它们所代表的东西命名
|
||||
=======
|
||||
**做** 为所有财产的使用统一的命名：以它们所代表的东西命名
|
||||
>>>>>>> f0e75413c854b8966c506c7c351339c9f5e98512
|
||||
|
||||
.s-rule.do
|
||||
:marked
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -5,14 +5,14 @@
|
|||
|
||||
1. They **guard** against breaking existing code (“regressions”) when we make changes.
|
||||
|
||||
1. 当我们改变代码是，他们**守护**已有代码，以防被破坏。
|
||||
1. 当我们改变代码时，它们**守护**已有代码，以防被破坏。
|
||||
1. They **clarify** what the code does both when used as intended and when faced with deviant conditions.
|
||||
|
||||
1. 在我们正确使用代码和面对异常情况时，他们**澄清**代码做什么。
|
||||
1. 在我们正确使用代码和面对异常情况时，它们**澄清**代码做什么。
|
||||
1. They **reveal** mistakes in design and implementation. Tests force us to look at our code from many angles. When a part of our application seems hard to test,
|
||||
we may have discovered a design flaw, something we can cure now rather than later when it becomes expensive to fix.
|
||||
|
||||
1.他们**揭露**我们设计的执行的错误。测试强迫我们从多个角度看代码。当应用程序的一个部分看起来很难测试，我们可能会发现设计缺陷，这是我们可以立刻修复的，而不是等到它变的很难修复的时候。
|
||||
1.它们**揭露**我们设计的执行的错误。测试强迫我们从多个角度看代码。当应用程序的一个部分看起来很难测试，我们可能会发现设计缺陷，这是我们可以立刻修复的，而不是等到它变的很难修复的时候。
|
||||
|
||||
.alert.is-important
|
||||
:marked
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
|
||||
|
|
@ -123,7 +123,7 @@ figure.image-display
|
|||
:marked
|
||||
Hold on! We wrote a TypeScript file but we’re loading a JavaScript file?
|
||||
|
||||
等等！我们编写了TypeScript文件，但是我们却加载了一个Javascript文件？
|
||||
等等！我们编写了TypeScript文件，但是我们却加载了一个JavaScript文件？
|
||||
|
||||
That’s a reminder that we need to compile our TypeScript test files as we do our TypeScript application files. Do that next.
|
||||
|
||||
|
|
@ -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*
|
||||
|
|
|
|||
|
|
@ -0,0 +1,33 @@
|
|||
:marked
|
||||
## 关于中文版
|
||||
这是一份跟官方网站保持 **同步更新** 的中文版。虽然保持同步非常耗费精力，不过为了防止过时的内容误导读者，这份额外的付出还是很值得的。
|
||||
我们全文采用意译的方式，在彻底理解作者意思的前提下用中文重新表述，力求做到“信雅达”。
|
||||
|
||||
当然，即便如此，我们会错意的可能性也还是有的，所以我们的译稿都提供了中英文对照，如果你对某些语句有疑问，可以看一下对应的英文版内容。
|
||||
|
||||
本文档目前只完成了部分章节的初译，尚未完成审校和统稿，因此语言风格和表达等可能还有问题，欢迎到我们的[github](https://github.com/angular-live/angular.io)上提出issue。
|
||||
|
||||
本文档的任何更新都会实时发布于我们的 [首发网站](http://www.angular.live) 。如果你要进行转载，请自行同步（不过小心别DDoS了我们），或者在想要同步到最新版时 [联系我们](mailto:traveller@163.com) 。
|
||||
## 授权方式
|
||||
本文档遵循[“保持署名—非商用”创意共享4.0许可证（CC BY-NC 4.0）](http://creativecommons.org/licenses/by-nc/4.0/deed.zh)授权方式，你不用知会我们就可以任意转载，但必须保持署名（特别是：不得去掉本页入口链接，也不得修改本页内容），并且不得用于商业目的。
|
||||
## 关于译者
|
||||
本文档有两位译者，他们是多年的好友。这次利用业余时间联手翻译，就是因为看好Angular 2的前景，希望帮助大家在这项技术上能跟国外同步前进。
|
||||
### 汪志成（雪狼）
|
||||
《AngularJS深度剖析与最佳实践》的作者之一，ThoughtWorks高级咨询师。他从1998年开始做商业软件开发，拥有超过18年的从业经验，至今仍热衷于编程。
|
||||
|
||||
虽然一直在做编程工作，不过他最热衷的却是国学，特别是儒学与诗词。孟子曰：“得天下英才而教育之，三乐也”，愿践行之。
|
||||
|
||||
小道消息：他当年英语四级都没考过哦，现在却可以直接读各种英文资料了。所以，不要怕，英文不是老虎，我行你也行。
|
||||
### 叶志敏
|
||||
早期翻译软件《东方快车》的产品经理，至今已在英国留学和生活了十年。有多年在英国养老院工作的经历，他正在用Angular 2与.net Framework开发一套养老院管理系统。
|
||||
|
||||
## 支持我们
|
||||
由于我们对翻译质量的极端要求，所以很抱歉，我们暂时无法接受新人加入翻译，否则我们需要花费大量精力进行review。
|
||||
|
||||
但你可以在精神上支持我们：在Github上给我们Star、提供反馈、纠错、帮我们宣传等等。
|
||||
|
||||
当然如果实在觉得翻译质量高到狠狠点赞都不够，也可以在物质上支持我们，比如：通过微信支付资助我们 ^_^ ：
|
||||
|
||||
|
||||
|
||||
金额上请随意，比如你的一顿早餐钱 —— 什么？你不吃早餐？那就从现在开始吃吧，不然怎么资助我们？严肃脸：作为程序员，最重要的是身体、身体、身体，重要的事情说三遍，这是一个18年老程序员的忠告。
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
Loading…
Reference in New Issue