878 lines
39 KiB
Plaintext
878 lines
39 KiB
Plaintext
include _util-fns
|
||
|
||
// #docregion intro
|
||
:marked
|
||
# Angular 2词汇表
|
||
|
||
Angular 2 has a vocabulary of its own.
|
||
Most Angular 2 terms are everyday English words
|
||
with a specific meaning within the Angular system.
|
||
|
||
Angular 2有自己的词汇表。
|
||
虽然大多数的Angular 2短语都是日常用语，但是在Angular体系中，它们有特别的含义。
|
||
|
||
We have gathered here the most prominent terms
|
||
and a few less familiar ones that have unusual or
|
||
unexpected definitions.
|
||
|
||
我们搜集了常用词和少量具有独特或反直觉含义的罕用词。
|
||
|
||
[A](#A) [B](#B) [C](#C) [D](#D) [E](#E) [F](#F) [G](#G) [H](#H) [I](#I)
|
||
[J](#J) [K](#K) [L](#L) [M](#M) [N](#N) [O](#O) [P](#P) [Q](#Q) [R](#R)
|
||
[S](#S) [T](#T) [U](#U) [V](#V) [W](#W) [X](#X) [Y](#Y) [Z](#Z)
|
||
// #enddocregion intro
|
||
|
||
// #docregion a1
|
||
<a id="A"></a>
|
||
// #enddocregion a1
|
||
.l-main-section
|
||
:marked
|
||
## Annotation
|
||
## 注解（Annotation）
|
||
.l-sub-section
|
||
:marked
|
||
In practice a synonym for [Decoration](#decorator).
|
||
|
||
[装饰器（Decoration）](#decorator)在实践中的同义词。
|
||
// #enddocregion a-1
|
||
// #docregion a-2
|
||
:marked
|
||
## Attribute Directive
|
||
## 属性型指令（Attribute Directive）
|
||
.l-sub-section
|
||
:marked
|
||
A category of [Directive](#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.
|
||
|
||
[指令](#directive)分类中的一种。它允许监听或修改其它HTML元素、属性、组件的行为。它们通常用作HTML属性，就像它的名字所暗示的那样。
|
||
|
||
The `ngClass` directive for adding and removing CSS class names is a good example of
|
||
an Attribute Directive.
|
||
|
||
`ngClass`指令就是典型的属性型指令。它可以添加或移除CSS类名。
|
||
// #enddocregion a-2
|
||
|
||
// #docregion b-c
|
||
- var lang = current.path[1]
|
||
- var decorator = lang === 'dart' ? 'annotation' : '<a href="#decorator">decorator</a>'
|
||
- var atSym = lang === 'js' ? '' : '@'
|
||
<a id="B"></a>
|
||
.l-main-section
|
||
:marked
|
||
## Barrel
|
||
## 封装桶（Barrel）
|
||
.l-sub-section
|
||
:marked
|
||
A **barrel** is an Angular library module consisting of a logical grouping of single-purpose modules
|
||
such as `Component` and `Directive`.
|
||
|
||
一个**封装桶**是一个模块库，由单一用途的多个模块，比如组件和指令等组成。
|
||
|
||
Familiar barrels include `angular2/core`, `angular2/common`, `angular2/platform/browser`,
|
||
`angular2/http`, and `angular2/router`.
|
||
|
||
你熟悉的封装桶包含`angular2/core`, `angular2/common`, `angular2/platform/browser`,
|
||
`angular2/http`, 和 `angular2/router`.
|
||
|
||
Barrels are packaged and shipped as [**bundles**](#bundle) that
|
||
we may load with script tags in our `index.html`.
|
||
|
||
封装桶被当做[**捆绑包bundles**](#bundle)打包和发布，以便我们通过Script标签在`index.html`页面里面装载。
|
||
|
||
The script, `angular2.dev.js`, is a bundle.
|
||
`angular2.dev.js`脚本就是一个捆绑包（bundle）
|
||
|
||
Learn more in "[Modules, barrels and bundles](https://github.com/angular/angular/blob/master/modules/angular2/docs/bundles/overview.md)".
|
||
|
||
获取更多关于模块，封装桶和捆绑包的信息："[Modules, barrels and bundles](https://github.com/angular/angular/blob/master/modules/angular2/docs/bundles/overview.md)"
|
||
|
||
:marked
|
||
## Binding
|
||
## 绑定
|
||
.l-sub-section
|
||
:marked
|
||
Almost always refers to [Data Binding](#data-binding) and the act of
|
||
binding an HTML object property to a data object property.
|
||
|
||
几乎都是指的[数据绑定](#data-binding)和将一个HTML对象属性绑定到一个数据对象属性的行为。
|
||
|
||
May refer to a [Dependency Injection](#dependency-injection) binding
|
||
between a "token" or "key" and a dependency [provider](#provider).
|
||
This more rare usage should be clear in context.
|
||
|
||
有可能指的是[依赖注入](#dependency-injection)在一个符记(Token)或钥匙(Key)和一个[依赖提供商](#provider)之间的绑定。
|
||
这个用法很少，而且一般都应该在上下文中明确标示。
|
||
|
||
:marked
|
||
## Bootstrap
|
||
## 引导程序
|
||
.l-sub-section
|
||
:marked
|
||
We launch an Angular application by "bootstrapping" it with the `bootstrap` method.
|
||
The `bootstrap` method identifies an application's top level "root" [Component](#component)
|
||
and optionally registers service [providers](#provider) with the
|
||
[dependency injection system](#dependency-injection).
|
||
|
||
我们通过一个名叫`bootstrap`的函数方法来引导装入Angular应用程序。这个`bootstrap`函数方法会识别应用程序的顶级“根”[组件](#component)，
|
||
并可能通过[依赖注入系统](#dependency-injection)注册[服务提供商](#provider)。
|
||
|
||
One can bootstrap multiple apps in the same `index.html`, each with its own top level root.
|
||
你可以在同一个`index.html`启动多个程序，每个程序都有自己的顶级根组件。
|
||
|
||
:marked
|
||
## Bundle
|
||
## 捆绑包
|
||
.l-sub-section
|
||
:marked
|
||
Angular JavaScript libraries are shipped in **bundles** within an **npm package**
|
||
such as [angular2](https://www.npmjs.com/package/angular2).
|
||
|
||
Angular Javascript库是以将多个**捆绑包**（**bundles**）捆绑到一起，以一个**NPM包**（**npm package**）的形式发布的。
|
||
比如[angular2](https://www.npmjs.com/package/angular2).
|
||
|
||
The scripts `angular2.dev.js`, `http.js`, `router.js`, and `Rx.js` are
|
||
familiar examples of bundles.
|
||
|
||
`angular2.dev.js`, `http.js`, `router.js`, 和 `Rx.js`等脚本文件是比较常见的捆绑包（bundle）例子。
|
||
|
||
|
||
A bundle contains one more more [**barrels**](#barrel)
|
||
and each barrel contains a collection of logically related [modules](#module)
|
||
|
||
一个捆绑包（bundle）包含了一个或多个[**封装桶**](#barrel)
|
||
|
||
Familiar barrels include `angular2/core`, `angular2/common`, `angular2/platform/browser`,
|
||
`angular2/http`, `angular2/router`.
|
||
|
||
常见的封装桶包括`angular2/core`, `angular2/common`, `angular2/platform/browser`,
|
||
`angular2/http`, `angular2/router`等。
|
||
|
||
Learn more in "[Modules, barrels and bundles](https://github.com/angular/angular/blob/master/modules/angular2/docs/bundles/overview.md)".
|
||
|
||
获取更多关于模块，封装桶和捆绑包的知识："[模块，封装桶和捆绑包](https://github.com/angular/angular/blob/master/modules/angular2/docs/bundles/overview.md)"。
|
||
|
||
<a id="C"></a>
|
||
.l-main-section
|
||
:marked
|
||
## camelCase
|
||
## 驼峰式命名法
|
||
.l-sub-section
|
||
:marked
|
||
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`等。
|
||
|
||
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”）的时候，所指的都是小驼峰命名法。
|
||
|
||
:marked
|
||
## Component
|
||
## 组件
|
||
.l-sub-section
|
||
:marked
|
||
An Angular class responsible for exposing data
|
||
to a [View](#view) and handling most of the view’s display
|
||
and user-interaction logic.
|
||
|
||
组件是一个用来在[视图](#view)中显示数据，并处理几乎所有视图显示以及用户交互逻辑的Angular类（Angular Class）。
|
||
|
||
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系统的最重要的基本单位之一。
|
||
它其实是一个拥有[模板](#template)的[指令](#directive)。
|
||
|
||
The developer applies the `#{atSym}Component` !{decorator} to
|
||
the component class, thereby attaching to the class the essential component metadata
|
||
that Angular needs to create a component instance and render it with its template
|
||
as a view.
|
||
|
||
开发人员在使用`#{atSym}Component`!{decorator}来装饰一个组件类，就是把这个类附加到核心组件元数据（essential component metadata）上面。
|
||
Angular利用这个核心组件的元数据信息，来建立一个组件实例，并把组件的模板作为视图渲染出来。
|
||
|
||
Those familiar with "MVC" and "MVVM" patterns will recognize
|
||
the Component in the role of "Controller" or "View Model".
|
||
|
||
那些熟悉 "MVC" 和 "MVVM" 架构模式的应该能意识到组件充当了控制和视图模型的角色。
|
||
// #enddocregion b-c
|
||
|
||
// #docregion d1
|
||
<a id="D"></a>
|
||
.l-main-section
|
||
:marked
|
||
## dash-case
|
||
## 横杠分隔命名法
|
||
.l-sub-section
|
||
:marked
|
||
The practice of writing compound words or phrases such that each word is separated by a dash or hyphen (-).
|
||
|
||
使用横杠来分隔每个单词来编写词汇或短语的方法叫做横杠分隔命名法（dash-case）。
|
||
|
||
Directive selectors and the root of filenames are often spelled in dash-case. Examples include: `my-app` and the `hero-list.component.ts`.
|
||
|
||
指令的选择器和文件名通常都是通过横杠分隔命名法来命名的。比如`my-app` 和 `hero-list.component.ts`。
|
||
|
||
This form is also known as [kebab-case](#kebab-case).
|
||
|
||
这种命名法也被叫做可芭比命名法[kebab-case](#kebab-case)。
|
||
|
||
:marked
|
||
## Data Binding
|
||
## 数据绑定
|
||
.l-sub-section
|
||
:marked
|
||
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网页，添加事件监听器，从屏幕获取数据变化，然后更新数据等等。。。
|
||
|
||
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小部件和数据源的关系...，让一个数据绑定框架工具来处理所有细节。
|
||
|
||
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有一个非常强大的数据绑定框架工具，具有多种用来数据绑定的操作，并支持声明语法规则。
|
||
|
||
The many forms of binding include:
|
||
* [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)
|
||
* [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)
|
||
|
||
Learn more about data binding in the
|
||
[Template Syntax](guide/template-syntax.html#data-binding) chapter.
|
||
|
||
到[模板语法](guide/template-syntax.html#data-binding)章节获取更多关于数据绑定的知识。
|
||
|
||
// #enddocregion d1
|
||
<a id="decorator"></a> <a id="decoration"></a>
|
||
:marked
|
||
## Decorator | Decoration
|
||
## 装饰器
|
||
.l-sub-section
|
||
: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）
|
||
|
||
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`装饰器装饰这个组件的一个属性。
|
||
|
||
The elided object argument to the `@Component` decorator would contain the pertinent component metadata.
|
||
|
||
被省略的`@Component`装饰器的参数对象可能包含了相关的组件元数据。
|
||
|
||
```
|
||
@Component({...})
|
||
export class AppComponent {
|
||
constructor(@Inject('SpecialFoo') public foo:Foo) {}
|
||
@Input()
|
||
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
|
||
## Dependency Injection
|
||
## 依赖注入
|
||
.l-sub-section
|
||
:marked
|
||
Dependency Injection is both a design pattern and a mechanism
|
||
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开发者比较倾向的开发应用程序的方法是，定义许多精简小部件，每个小部件只做一件事并做好自己那件事，然后在运行时间把这些精简小部件连在一起组成应用程序。
|
||
|
||
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的“依赖”。
|
||
|
||
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实例。
|
||
|
||
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)系统来组装和运行应用程序：按时按需的将一些部件“注入”到另一些部件里面。
|
||
|
||
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)`方法返回和提供的符记参数相关的依赖部件。
|
||
|
||
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`类实例。
|
||
|
||
Angular makes similar requests internally during many of its operations
|
||
as when it creates a [`Component`](#AppComponent) for display.
|
||
|
||
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)`新建一个依赖值。
|
||
|
||
A [Provider](#provider) is a recipe for
|
||
creating new instances of a dependency value associated with a particular token.
|
||
|
||
一个`提供者(Provider)`(#provider)是一个使用指定令牌来新建其对应的依赖实例的方法。
|
||
|
||
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.
|
||
|
||
如果在注入器的内部注册表里面，一个令牌对应的依赖值是一个`提供者`，那么注入器只能为令牌创建一个依赖值。注册提供者是一个非常关键的准备步骤。
|
||
|
||
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为每个注册器注册很多自己的提供者。我们可以注册一些自己的提供者。一般最好的注册提供者的时间是在应用程序的[引导程序Bootstrap](#bootstrap)的时候。
|
||
我们也有其他很多机会注册提供者。
|
||
|
||
Learn more in the [Dependency Injection](guide/dependency-injection.html) chapter.
|
||
|
||
到[依赖注入](guide/dependency-injection.html)章节学习更多关于依赖注入的知识
|
||
|
||
:marked
|
||
## Directive
|
||
## 指令
|
||
.l-sub-section
|
||
:marked
|
||
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的最基本的特征。
|
||
|
||
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.
|
||
When Angular finds a directive in an HTML template,
|
||
it creates the matching directive class instance
|
||
and gives that instance control over that portion of the browser DOM.
|
||
|
||
指令几乎都是对HTML元素或元素的特征关联的。我们通常把这些关联的HTML元素或者元素特征当做指令本身。
|
||
当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的拓展了。
|
||
|
||
Directives fall into one of three categories:
|
||
|
||
指令包括了一下三个类别：
|
||
|
||
1. [Components](#component) that combine application logic with an HTML template to
|
||
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.
|
||
[组件](#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.
|
||
[特征指令](#attribute-directive)：可以监控和修改HTML元素、元素特征、属性和组件等的行为。它们一般有HTML元素特征（名）来体现。
|
||
|
||
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.
|
||
[结构型指针](#structural-directive)：负责塑造或重塑HTML布局。一般都是通过添加、删除或者操作HTML元素和他的子级元素来实现的。
|
||
// #enddocregion d2
|
||
|
||
// #docregion e1
|
||
<a id="E"></a>
|
||
// #enddocregion e1
|
||
// #docregion e2
|
||
.l-main-section
|
||
:marked
|
||
## ECMAScript
|
||
.l-sub-section
|
||
:marked
|
||
The [official JavaScript language specification](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/)
|
||
(AKA "ES2015" or "ES6") and many Angular 2 developers will write their applications
|
||
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)。
|
||
|
||
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。
|
||
|
||
Angular 2 developers may choose to write in ES5 directly.
|
||
|
||
Angular 2的开发者也可以选择直接使用ES5编程。
|
||
|
||
:marked
|
||
## ECMAScript 2015
|
||
.l-sub-section
|
||
:marked
|
||
The lastest released version of JavaScript,
|
||
[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/)
|
||
(即 "ES2015" 或 "ES6")
|
||
:marked
|
||
## ES2015
|
||
.l-sub-section
|
||
:marked
|
||
Short hand for "[ECMAScript 2015](#ecmascript=2015)".
|
||
|
||
“[ECMAScript 2015](#ecmascript=2015)”的简写。
|
||
:marked
|
||
## ES6
|
||
.l-sub-section
|
||
:marked
|
||
Short hand for "[ECMAScript 2015](#ecmascript=2015)".
|
||
|
||
[ECMAScript 2015](#ecmascript=2015)的简写。
|
||
:marked
|
||
## ES5
|
||
.l-sub-section
|
||
:marked
|
||
Short hand for "ECMAScript 5", the version of JavaScript run by most modern browsers.
|
||
See [ECMAScript](#ecmascript).
|
||
|
||
“ECMAScript 5”的简写，大部分现代浏览器使用的Javascript版本。请看[ECMAScript](#ecmascript)。
|
||
// #enddocregion e2
|
||
|
||
// #docregion f-l
|
||
<a id="F"></a>
|
||
<a id="G"></a>
|
||
<a id="H"></a>
|
||
<a id="I"></a>
|
||
.l-main-section
|
||
:marked
|
||
## Injector
|
||
## 注入器
|
||
.l-sub-section
|
||
:marked
|
||
An object in the Angular [dependency injection system](#dependency-injection)
|
||
that can find a named "dependency" in its cache or create such a thing
|
||
with a registered [provider](#provider).
|
||
|
||
一个Angular[依赖注入系统](#dependency-injection)内部的对象，它可以在自己的内部缓存找到已点名的依赖或者利用一个注册过的[提供者provider](#provider)新建一个依赖。
|
||
:marked
|
||
## Input
|
||
.l-sub-section
|
||
:marked
|
||
A directive property that can be the ***target*** of a
|
||
[Property Binding](guide/template-syntax.html#property-binding).
|
||
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)的目标。数据值从处于模板表达式等号右边的数据源中，流入这个指令属性。
|
||
|
||
See the [Template Syntax](guide/template-syntax.html#inputs-outputs) chapter.
|
||
|
||
请看[模板语法Template Syntax](guide/template-syntax.html#inputs-outputs)章节。
|
||
|
||
:marked
|
||
## Interpolation
|
||
## 插值表达式
|
||
.l-sub-section
|
||
:marked
|
||
A form of [Property Data Binding](#data-binding) in which a
|
||
[template expression](#template-expression) between double-curly braces
|
||
renders as text. That text may be concatenated with neighboring text
|
||
before it is assigned to an element property
|
||
or displayed between element tags as in this example.
|
||
|
||
一种[属性数据绑定Property Data Binding](#data-binding) 的方式：在双大括号中间的[模板表达式](#template-expression)被渲染成文本。在被指派给元素属性或者在元素标记中间显示之前，这些文本可能与傍边的文本先合并，请看下面的例子。
|
||
|
||
code-example(language="html" escape="html").
|
||
<label>My current hero is {{hero.name}}</label>
|
||
|
||
:marked
|
||
Learn more about interpolation in the
|
||
[Template Syntax](guide/template-syntax.html#interpolation) chapter.
|
||
|
||
从[模板语法Template Syntax](guide/template-syntax.html#interpolation)章节学习更多关于插值表达式的知识。
|
||
|
||
<a id="J"></a>
|
||
|
||
.l-main-section
|
||
<a id="K"></a>
|
||
:marked
|
||
## kebab-case
|
||
## 可芭比命名法
|
||
.l-sub-section
|
||
: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`。
|
||
|
||
This form is also known as [dash-case](#dash-case).
|
||
|
||
这种命名法也被叫做[横杠命名法dash-case](#dash-case)
|
||
|
||
<a id="L"></a>
|
||
.l-main-section
|
||
:marked
|
||
## Lifecycle Hooks
|
||
## 生命周期钩子
|
||
.l-sub-section
|
||
:marked
|
||
[Directives](#directive) and [Components](#component) have a lifecycle
|
||
managed by Angular as it creates, updates and destroys them.
|
||
|
||
[指令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`.
|
||
|
||
Angular calls these hook methods in the following order:
|
||
* `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.
|
||
|
||
Learn more in the [Lifecycle Hooks](guide/lifecycle-hooks.html) chapter.
|
||
// #enddocregion f-l
|
||
|
||
// #docregion m1
|
||
<a id="M"></a>
|
||
// #enddocregion m1
|
||
// #docregion m2
|
||
.l-main-section
|
||
:marked
|
||
## Module
|
||
.l-sub-section
|
||
:marked
|
||
Angular apps are modular.
|
||
|
||
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).
|
||
|
||
An application that adheres to this standard requires a module loader to
|
||
load modules on request and resolve inter-module dependencies.
|
||
Angular does not ship with a module loader and does not have a preference
|
||
for any particular 3rd party library (although most samples use SystemJS).
|
||
Application developers may pick any module library that conforms to the standard
|
||
|
||
Modules are typically named after the file in which the exported thing is defined.
|
||
The Angular [DatePipe](https://github.com/angular/angular/blob/master/modules/angular2/src/common/pipes/date_pipe.ts)
|
||
class belongs to a feature module named `date_pipe` in the file `date_pipe.ts`.
|
||
|
||
Developers rarely access Angular feature modules directly.
|
||
We usually import them from public-facing **library modules**
|
||
called [**barrels**](#barrel). Barrels are groups of logically related modules.
|
||
The `angular2/core` barrel is a good example.
|
||
|
||
Learn more in "[Modules, barrels and bundles](https://github.com/angular/angular/blob/master/modules/angular2/docs/bundles/overview.md)".
|
||
// #enddocregion m2
|
||
|
||
// #docregion n-s
|
||
- var lang = current.path[1]
|
||
- var decorator = lang === 'dart' ? 'annotation' : '<a href="#decorator">decorator</a>'
|
||
- var atSym = lang === 'js' ? '' : '@'
|
||
<a id="N"></a>
|
||
<a id="O"></a>
|
||
.l-main-section
|
||
:marked
|
||
## Output
|
||
.l-sub-section
|
||
:marked
|
||
A directive property that can be the ***target*** of an
|
||
[Event Binding](guide/template-syntax.html#property-binding).
|
||
Events stream *out* of this property to the receiver identified
|
||
in the template expression to the right of the equal sign.
|
||
|
||
See the [Template Syntax](guide/template-syntax.html#inputs-outputs) chapter.
|
||
|
||
.l-main-section
|
||
<a id="P"></a>
|
||
:marked
|
||
## PascalCase
|
||
.l-sub-section
|
||
:marked
|
||
The practice of writing compound words or phrases such that each word or abbreviation begins with a capital letter.
|
||
Class names are typically spelled in PascalCase. Examples include: `Person` and `Customer`.
|
||
|
||
This form is also known as **upper camel case**, to distinguish it from **lower camel case** which we simply call [camelCase](#camelcase).
|
||
In this documentation, "PascalCase" means *upper camel case* and "camelCase" means *lower camel case*.
|
||
|
||
:marked
|
||
## Pipe
|
||
.l-sub-section
|
||
:marked
|
||
An Angular pipe is a function that transforms input values to output values for
|
||
display in a [view](#view). We use the `#{atSym}Pipe` !{decorator}
|
||
to associate the pipe function with a name. We then can use that
|
||
name in our HTML to declaratively transform values on screen.
|
||
|
||
Here's an example that uses the built-in `currency` pipe to display
|
||
a numeric value in the local currency.
|
||
|
||
code-example(language="html" escape="html").
|
||
<label>Price: </label>{{product.price | currency}}
|
||
:marked
|
||
Learn more in the chapter on [pipes](guide/pipes.html) .
|
||
|
||
:marked
|
||
## Provider
|
||
.l-sub-section
|
||
:marked
|
||
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.
|
||
|
||
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.
|
||
|
||
There are other ways to create tokens and recipes.
|
||
See [Dependency Injection](#dependency-injection) chapter to learn more.
|
||
|
||
.l-main-section
|
||
<a id="Q"></a>
|
||
<a id="R"></a>
|
||
:marked
|
||
## Router
|
||
.l-sub-section
|
||
:marked
|
||
Most applications consist of many screens or [views](#view).
|
||
The user navigates among them by clicking links and buttons
|
||
and taking other similar actions that cause the application to
|
||
replace one view with another.
|
||
|
||
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
|
||
of views.
|
||
:marked
|
||
## Routing Component
|
||
.l-sub-section
|
||
:marked
|
||
A [Component](#component) with an attached router.
|
||
|
||
In most cases, the component became attached to a [router](#router) by means
|
||
of a `#{atSym}RouterConfig` #{decorator} that defined routes to views controlled by this component.
|
||
|
||
The component's template has a `RouterOutlet` element where it can display views produced by the router.
|
||
|
||
It likely has anchor tags or buttons with `RouterLink` directives that users can click to navigate.
|
||
|
||
<a id="S"></a>
|
||
.l-main-section
|
||
:marked
|
||
## Structural Directive
|
||
.l-sub-section
|
||
:marked
|
||
A category of [Directive](#directive) that can
|
||
shape or re-shape HTML layout, typically by adding, removing, or manipulating
|
||
elements and their children.
|
||
|
||
The `ngIf` "conditional element" directive and the `ngFor` "repeater" directive are
|
||
good examples in this category.
|
||
// #enddocregion n-s
|
||
|
||
// #docregion t1
|
||
<a id="T"></a>
|
||
.l-main-section
|
||
:marked
|
||
## Template
|
||
.l-sub-section
|
||
:marked
|
||
A template is a chunk of HTML that Angular uses to render a [view](#view) with
|
||
the support and continuing guidance of an Angular [Directive](#directive),
|
||
most notably a [Component](#component).
|
||
|
||
We write templates in a special [Template Syntax](guide/template-syntax.html).
|
||
|
||
:marked
|
||
## Template Expression
|
||
.l-sub-section
|
||
:marked
|
||
An expression in a JavaScript-like syntax that Angular evaluates within
|
||
a [data binding](#data-binding). Learn how to write template expressions
|
||
in the [Template Syntax](guide/template-syntax.html#template-expressions) chapter.
|
||
|
||
// #enddocregion t1
|
||
// #docregion t2
|
||
:marked
|
||
## Transpile
|
||
.l-sub-section
|
||
:marked
|
||
The process of transforming code written in one form of JavaScript
|
||
(e.g., TypeScript) into another form of JavaScript (e.g., [ES5](#es5)).
|
||
|
||
:marked
|
||
## TypeScript
|
||
.l-sub-section
|
||
:marked
|
||
A version of JavaScript that supports most [ECMAScript 2015](#ecmascript=2015)
|
||
language features and many features that may arrive in future versions
|
||
of JavaScript such as [Decorators](#decorator).
|
||
|
||
TypeScript is also noteable for its optional typing system which gives
|
||
us compile-time type-checking and strong tooling support (e.g. "intellisense",
|
||
code completion, refactoring, and intelligent search). Many code editors
|
||
and IDEs support TypeScript either natively or with plugins.
|
||
|
||
TypeScript is the preferred language for Angular 2 development although
|
||
we are welcome to write in other JavaScript dialects such as [ES5](#es5).
|
||
|
||
Angular 2 itself is written in TypeScript.
|
||
|
||
Learn more about TypeScript on its [website](http://www.typescriptlang.org/).
|
||
// #enddocregion t2
|
||
|
||
// #docregion u-z
|
||
<a id="U"></a>
|
||
<a id="V"></a>
|
||
.l-main-section
|
||
:marked
|
||
## View
|
||
.l-sub-section
|
||
:marked
|
||
A view is a portion of the screen that displays information and responds
|
||
to user actions such as clicks, mouse moves, and keystrokes.
|
||
|
||
Angular renders a view under the control of one or more [Directives](#directive),
|
||
especially [Component](#component) directives and their companion [Templates](#template).
|
||
The Component plays such a prominent role that we often
|
||
find it convenient to refer to a component as a view.
|
||
|
||
Views often contain other views and any view might be loaded and unloaded
|
||
dynamically as the user navigates through the application, typically
|
||
under the control of a [router](#router).
|
||
|
||
.l-main-section
|
||
<a id="W"></a>
|
||
<a id="X"></a>
|
||
<a id="Y"></a>
|
||
<a id="Z"></a>
|
||
:marked
|
||
## Zone
|
||
.l-sub-section
|
||
:marked
|
||
Zones are a mechanism for encapsulating and intercepting
|
||
a JavaScript application's asynchronous activity.
|
||
|
||
The browser DOM and JavaScript have a limited number
|
||
of asynchronous activities, activities such as DOM events (e.g., clicks),
|
||
[promises](#promise), and
|
||
[XHR](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest)
|
||
calls to remote servers.
|
||
|
||
Zones intercept all of these activities and give a "zone client" the opportunity
|
||
to take action before and after the async activity completes.
|
||
|
||
Angular runs our application in a zone where it can respond to
|
||
asynchronous events by checking for data changes and updating
|
||
the information it displays via [data binding](#data-binding).
|
||
|
||
Learn more about zones in this
|
||
[Brian Ford video](https://www.youtube.com/watch?v=3IqtmUscE_U).
|
||
// #enddocregion u-z
|