1322 lines
52 KiB
Markdown
1322 lines
52 KiB
Markdown
# Angular Glossary
|
||
|
||
# Angular 词汇表
|
||
|
||
Angular has its own vocabulary.
|
||
Most Angular terms are common English words
|
||
with a specific meaning within the Angular system.
|
||
|
||
Angular 有自己的词汇表。
|
||
虽然大多数 Angular 短语都是日常用语，但是在 Angular 体系中，它们有特别的含义。
|
||
|
||
This glossary lists the most prominent terms
|
||
and a few less familiar ones that have unusual or
|
||
unexpected definitions.
|
||
|
||
本词汇表列出了常用术语和少量具有独特或反直觉含义的罕用术语。
|
||
|
||
[A](guide/glossary#A) [B](guide/glossary#B) [C](guide/glossary#C) [D](guide/glossary#D) [E](guide/glossary#E) [F](guide/glossary#F) [G](guide/glossary#G) [H](guide/glossary#H) [I](guide/glossary#I)
|
||
[J](guide/glossary#J) [K](guide/glossary#K) [L](guide/glossary#L) [M](guide/glossary#M) [N](guide/glossary#N) [O](guide/glossary#O) [P](guide/glossary#P) [Q](guide/glossary#Q) [R](guide/glossary#R)
|
||
[S](guide/glossary#S) [T](guide/glossary#T) [U](guide/glossary#U) [V](guide/glossary#V) [W](guide/glossary#W) [X](guide/glossary#X) [Y](guide/glossary#Y) [Z](guide/glossary#Z)
|
||
|
||
|
||
{@a A}
|
||
{@a aot}
|
||
|
||
|
||
## Ahead-of-time (AOT) compilation
|
||
|
||
## 预 (ahead-of-time, AoT) 编译
|
||
|
||
You can compile Angular applications at build time.
|
||
By compiling your application using the compiler-cli, `ngc`, you can bootstrap directly
|
||
to a module factory, meaning you don't need to include the Angular compiler in your JavaScript bundle.
|
||
Ahead-of-time compiled applications also benefit from decreased load time and increased performance.
|
||
|
||
开发者可以在构造时 (build-time) 编译 Angular 应用程序。
|
||
通过`compiler-cli` - `ngc`编译应用程序，应用可以从一个模块工厂直接启动，
|
||
意味着不再需要把 Angular 编译器添加到 JavaScript 包中。
|
||
预编译的应用程序加载迅速，具有更高的性能。
|
||
|
||
|
||
|
||
</div>
|
||
|
||
|
||
## Annotation
|
||
|
||
## 注解
|
||
|
||
In practice, a synonym for [Decoration](guide/glossary#decorator).
|
||
|
||
实际上，是[装饰 (decoration)](guide/glossary#decorator) 的同义词。
|
||
|
||
|
||
{@a attribute-directive}
|
||
|
||
|
||
{@a attribute-directives}
|
||
|
||
|
||
## Attribute directives
|
||
|
||
## 属性型指令
|
||
|
||
A category of [directive](guide/glossary#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)](guide/glossary#directive)的一种。可以监听或修改其它 HTML 元素、特性 (attribute)、属性 (property)、组件的行为。通常用作 HTML 属性，就像它的名字所暗示的那样。
|
||
|
||
For example, you can use the `ngClass` directive to add and remove CSS class names.
|
||
|
||
例如，`ngClass`指令就是典型的属性型指令。它可以添加或移除 CSS 类名。
|
||
|
||
Learn about them in the [_Attribute Directives_](guide/attribute-directives) guide.
|
||
|
||
要了解更多信息，请参见[_属性型指令_](guide/attribute-directives)页。
|
||
|
||
|
||
{@a B}
|
||
|
||
## Barrel
|
||
|
||
## 封装桶
|
||
|
||
A way to *roll up exports* from several ES2015 modules into a single convenient ES2015 module.
|
||
The barrel itself is an ES2015 module file that re-exports *selected* exports of other ES2015 modules.
|
||
|
||
封装桶是把多个模块的*导出结果*汇总到单一的 ES2015 模块的一种方式。
|
||
封装桶本身是一个 ES2015 模块文件，它重新导出*选中的*导出，这些导入来自其它 ES2015 模块。
|
||
|
||
For example, imagine three ES2015 modules in a `heroes` folder:
|
||
|
||
例如，设想在`heroes`目录下有三个 ES2015 模块：
|
||
|
||
|
||
<code-example>
|
||
// heroes/hero.component.ts
|
||
export class HeroComponent {}
|
||
|
||
// heroes/hero.model.ts
|
||
export class Hero {}
|
||
|
||
// heroes/hero.service.ts
|
||
export class HeroService {}
|
||
</code-example>
|
||
|
||
|
||
|
||
Without a barrel, a consumer needs three import statements:
|
||
|
||
如果没有封装桶，消费者需要三条导入语句：
|
||
|
||
|
||
<code-example>
|
||
import { HeroComponent } from '../heroes/hero.component.ts';
|
||
import { Hero } from '../heroes/hero.model.ts';
|
||
import { HeroService } from '../heroes/hero.service.ts';
|
||
</code-example>
|
||
|
||
|
||
|
||
You can add a barrel to the `heroes` folder (called `index`, by convention) that exports all of these items:
|
||
|
||
在`heroes`目录下添加一个封装桶（按约定叫做`index`），它导出所有这三项：
|
||
|
||
|
||
<code-example>
|
||
export * from './hero.model.ts'; // re-export all of its exports
|
||
export * from './hero.service.ts'; // re-export all of its exports
|
||
export { HeroComponent } from './hero.component.ts'; // re-export the named thing
|
||
|
||
</code-example>
|
||
|
||
|
||
|
||
Now a consumer can import what it needs from the barrel.
|
||
|
||
现在，消费者就就可以从这个封装桶中导入它需要的东西了。
|
||
|
||
|
||
<code-example>
|
||
import { Hero, HeroService } from '../heroes'; // index is implied
|
||
</code-example>
|
||
|
||
|
||
|
||
The Angular [scoped packages](guide/glossary#scoped-package) each have a barrel named `index`.
|
||
|
||
Angular 的每个[范围化包 (scoped package)](guide/glossary#scoped-package) 都有一个名为`index`的封装桶。
|
||
|
||
|
||
<div class="alert is-important">
|
||
|
||
|
||
|
||
You can often achieve the same result using [NgModules](guide/glossary#ngmodule) instead.
|
||
|
||
注意，你可以利用 [Angular 模块](guide/glossary#ngmodule)达到同样的目的。
|
||
|
||
|
||
</div>
|
||
|
||
|
||
## Binding
|
||
|
||
## 绑定 (binding)
|
||
|
||
Usually refers to [data binding](guide/glossary#data-binding) and the act of
|
||
binding an HTML object property to a data object property.
|
||
|
||
几乎都是指的[数据绑定 (data binding)](guide/glossary#data-binding) 和将 HTML 对象属性绑定到数据对象属性的行为。
|
||
|
||
Sometimes refers to a [dependency-injection](guide/glossary#dependency-injection) binding
|
||
between a "token"—also referred to as a "key"—and a dependency [provider](guide/glossary#provider).
|
||
|
||
有时也会指在“令牌”（也称为键）和依赖[提供商 (provider)](guide/glossary#provider)
|
||
之间的[依赖注入 (dependency injection)](guide/glossary#dependency-injection) 绑定。
|
||
这种用法很少，而且一般都会在上下文中写清楚。
|
||
|
||
|
||
## Bootstrap
|
||
|
||
## 启动/引导 (bootstrap)
|
||
|
||
|
||
You launch an Angular application by "bootstrapping" it using the application root NgModule (`AppModule`).
|
||
|
||
Bootstrapping identifies an application's top level "root" [component](guide/glossary#component),
|
||
which is the first component that is loaded for the application.
|
||
For more information, see the [Setup](guide/setup) page.
|
||
|
||
通过应用程序根 Angular 模块来启动 Angular 应用程序。
|
||
启动过程标识应用的顶级“根”[组件 (component)](guide/glossary#component)，也就是应用加载的第一个组件。
|
||
更多信息，见[设置](guide/setup)。
|
||
|
||
You can bootstrap multiple apps in the same `index.html`, each app with its own top-level root.
|
||
|
||
你可以在同一个`index.html`中引导多个应用，每个应用都有它自己的顶级根组件。
|
||
|
||
|
||
{@a C}
|
||
|
||
## camelCase
|
||
|
||
## 驼峰式命名法 (camelCase)
|
||
|
||
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 lowercase_.
|
||
|
||
驼峰式命名法是书写复合词或短语的一种形式，除首字母要小写外，每个单词或缩写都以大写字母开头。
|
||
|
||
Function, property, and method names are typically spelled in camelCase. For example, `square`, `firstName`, and `getHeroes`. Notice that `square` is an example of how you write a single word in camelCase.
|
||
|
||
通常，函数、属性和方法命名使用驼峰式拼写法。例如，`square`, `firstName` 和 `getHeroes`。注意这里的`square`是如何用驼峰式命名法表示单一词的例子。
|
||
|
||
camelCase is also known as *lower camel case* to distinguish it from *upper camel case*, or [PascalCase](guide/glossary#pascalcase).
|
||
In Angular documentation, "camelCase" always means *lower camel case*.
|
||
|
||
这种形式也叫做**小写驼峰式命名法 (lower camel case)**，以区分于**大写驼峰式命名法**，也称 [Pascal 命名法 (PascalCase)](guide/glossary#pascalcase)。
|
||
在文档中提到“驼峰式命名法 (camelCase) ”的时候，我们所指的都是小驼峰命名法。
|
||
|
||
|
||
{@a component}
|
||
|
||
|
||
## Component
|
||
|
||
## 组件 (component)
|
||
|
||
An Angular class responsible for exposing data to a [view](guide/glossary#view) and handling most of the view’s display and user-interaction logic.
|
||
|
||
组件是一个 Angular 类，用于把数据展示到[视图 (view)](guide/glossary#view)，并处理几乎所有的视图显示和交互逻辑。
|
||
|
||
The *component* is one of the most important building blocks in the Angular system.
|
||
It is, in fact, an Angular [directive](guide/glossary#directive) with a companion [template](guide/glossary#template).
|
||
|
||
*组件*是 Angular 系统中最重要的基本构造块之一。
|
||
它其实是一个拥有[模板 (template)](guide/glossary#template)的[指令 (directive)](guide/glossary#directive)。
|
||
|
||
Apply the `@Component` [decorator](guide/glossary#decorator) to
|
||
the component class, thereby attaching to the class the essential component metadata
|
||
that Angular needs to create a component instance and render the component with its template
|
||
as a view.
|
||
|
||
需要将`#@Component`[装饰器](guide/glossary#decorator)应用到一个组件类，从而把必要的组件元数据附加到类上。
|
||
Angular 会需要元数据来创建一个组件实例，并把组件的模板作为视图渲染出来。
|
||
|
||
Those familiar with "MVC" and "MVVM" patterns will recognize
|
||
the component in the role of "controller" or "view model".
|
||
|
||
如果你熟悉 "MVC" 和 "MVVM" 模式，就会意识到组件充当了“控制器 (controller) ”和“视图模型 (view model) ”的角色。
|
||
|
||
{@a D}
|
||
|
||
## dash-case
|
||
|
||
## 中线命名法 (dash-case)
|
||
|
||
The practice of writing compound words or phrases such that each word is separated by a dash or hyphen (`-`).
|
||
This form is also known as kebab-case.
|
||
|
||
中线命名法是书写复合词或短语的一种形式，使用中线 (`-`) 分隔每个单词。
|
||
这种形式也称为烤串命名法 kebab-case。
|
||
|
||
[Directive](guide/glossary#directive) selectors (like `my-app`) and
|
||
the root of filenames (such as `hero-list.component.ts`) are often
|
||
spelled in dash-case.
|
||
|
||
[指令](guide/glossary#directive)的选择器（例如`my-app`）和文件名（例如`hero-list.component.ts`）通常是用中线命名法来命名。
|
||
|
||
|
||
## Data binding
|
||
|
||
## 数据绑定 (data binding)
|
||
|
||
Applications display data values to a user and respond to user
|
||
actions (such as clicks, touches, and keystrokes).
|
||
|
||
应用程序会将数据展示给用户，并对用户的操作（点击、触屏、按键）做出回应。
|
||
|
||
In data binding, you declare the relationship between an HTML widget and data source
|
||
and let the framework handle the details.
|
||
Data binding is an alternative to manually pushing application data values into HTML, attaching
|
||
event listeners, pulling changed values from the screen, and
|
||
updating application data values.
|
||
|
||
在数据绑定机制下，我们只要声明一下HTML部件和数据源之间的关系，把细节交给框架去处理。
|
||
而以前的手动操作过程是：将数据推送到 HTML 页面中、添加事件监听器、从屏幕获取变化后的数据，并更新应用中的值。
|
||
|
||
Angular has a rich data-binding framework with a variety of data-binding
|
||
operations and supporting declaration syntax.
|
||
|
||
Angular 有一个非常强大的数据绑定框架，具有各种数据绑定操作，并支持声明式语法。
|
||
|
||
Read about the following forms of binding in the [Template Syntax](guide/template-syntax) page:
|
||
|
||
更多的绑定形式，见[模板语法](guide/template-syntax)：
|
||
|
||
* [Interpolation](guide/template-syntax#interpolation)
|
||
|
||
[插值表达式 (interpolation)](guide/template-syntax#interpolation)
|
||
|
||
* [Property binding](guide/template-syntax#property-binding)
|
||
|
||
[property 绑定 (property binding)](guide/template-syntax#property-binding)
|
||
|
||
* [Event binding](guide/template-syntax#event-binding)
|
||
|
||
[事件绑定 (event binding)](guide/template-syntax#event-binding)
|
||
|
||
* [Attribute binding](guide/template-syntax#attribute-binding)
|
||
|
||
[attribute 绑定 (attribute binding)](guide/template-syntax#attribute-binding)
|
||
|
||
* [Class binding](guide/template-syntax#class-binding)
|
||
|
||
[CSS 类绑定 (class binding)](guide/template-syntax#class-binding)
|
||
|
||
* [Style binding](guide/template-syntax#style-binding)
|
||
|
||
[样式绑定 (style binding)](guide/template-syntax#style-binding)
|
||
|
||
* [Two-way data binding with ngModel](guide/template-syntax#ngModel)
|
||
|
||
[基于 ngModel 的双向数据绑定 (Two-way data binding with ngModel)](guide/template-syntax#ngModel)
|
||
|
||
{@a decorator}
|
||
|
||
|
||
{@a decoration}
|
||
|
||
|
||
## Decorator | decoration
|
||
|
||
## 装饰器（decorator | decoration）
|
||
|
||
A *function* that adds metadata to a class, its members (properties, methods) and function arguments.
|
||
|
||
装饰器是一个**函数**，它将元数据添加到类、类成员（属性、方法）和函数参数。
|
||
|
||
Decorators are an experimental (stage 2), JavaScript language [feature](https://github.com/wycats/javascript-decorators). TypeScript adds support for decorators.
|
||
|
||
装饰器是一个 JavaScript 的语言[特性](https://github.com/wycats/javascript-decorators)，装饰器在 TypeScript 里已经实现，并被推荐到了ES2016（也就是ES7）。
|
||
|
||
To apply a decorator, position it immediately above or to the left of the item it decorates.
|
||
|
||
要想应用装饰器，把它放到被装饰对象的上面或左边。
|
||
|
||
Angular has its own set of decorators to help it interoperate with your application parts.
|
||
The following example is a `@Component` decorator that identifies a
|
||
class as an Angular [component](guide/glossary#component) and an `@Input` decorator applied to the `name` property
|
||
of that component. The elided object argument to the `@Component` decorator would contain the pertinent component metadata.
|
||
|
||
Angular 使用自己的一套装饰器来实现应用程序各部件之间的相互操作。
|
||
下面的例子中使用了`@Component`装饰器来将一个类标记为 Angular [组件 (component)](guide/glossary#component)，
|
||
并将`@Input`装饰器来应用到组件的`name`属性。
|
||
`@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 that follow it in the file.
|
||
|
||
装饰器的作用域会被限制在它所装饰的语言特性。
|
||
在同一文件中，装饰器不会“泄露”到它后面的其它类。
|
||
|
||
|
||
<div class="alert is-important">
|
||
|
||
|
||
|
||
Always include parentheses `()` when applying a decorator.
|
||
|
||
永远别忘了在装饰器后面加括号`()`。
|
||
|
||
|
||
</div>
|
||
|
||
|
||
## Dependency injection
|
||
|
||
## 依赖注入（dependency injection）
|
||
|
||
A design pattern and 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 wiring them together at runtime.
|
||
|
||
Angular 开发者构建应用程序时的首选方法是：定义许多简单部件，
|
||
每个部件只做一件事并做好它，然后在运行时把它们装配在一起组成应用程序。
|
||
|
||
These parts often rely on other parts. An Angular [component](guide/glossary#component)
|
||
part might rely on a service part to get data or perform a calculation. When
|
||
part "A" relies on another part "B," you say that "A" depends on "B" and
|
||
that "B" is a dependency of "A."
|
||
|
||
这些部件通常会依赖其它部件。一个 Angular [组件 (component)](guide/glossary#component)
|
||
可能依赖一个服务部件来获取数据或执行运算。
|
||
如果部件 “A” 要靠另一个部件 “B” 才能工作，我们称 “A” 依赖 “B” ，“B” 是 “A” 的依赖。
|
||
|
||
You 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” 需要 “B” ，“B” 需要 “C ”，
|
||
系统将解析这个依赖链，返回一个完全准备好的 “A” 实例。
|
||
|
||
Angular provides and relies upon its own sophisticated
|
||
dependency-injection system
|
||
to assemble and run applications by "injecting" application parts
|
||
into other application parts where and when needed.
|
||
|
||
Angular 提供并使用自己精心设计的[依赖注入 (dependency injection)](guide/dependency-injection)系统来组装和运行应用程序，在需要的地方和时刻，将一些部件“注入”到另一些部件里面。
|
||
|
||
At the core, an [`injector`](guide/glossary#injector) returns dependency values on request.
|
||
The expression `injector.get(token)` returns the value associated with the given token.
|
||
|
||
在 Angular 内核中有一个[注入器 (injector)](guide/glossary#injector)，当请求时返回依赖值。
|
||
表达式`injector.get(token)`返回与该token（令牌）参数相关的值。
|
||
|
||
A token is an Angular type (`InjectionToken`). You rarely need to work with tokens directly; most
|
||
methods accept a class name (`Foo`) or a string ("foo") and Angular converts it
|
||
to a token. When you write `injector.get(Foo)`, the injector returns
|
||
the value associated with the token for the `Foo` class, typically an instance of `Foo` itself.
|
||
|
||
令牌是一个 Angular 中的类型 (`InjectionToken`)。我们很少直接处理令牌。
|
||
绝大多数方法都接受类名 (`Foo`) 或字符串 ("foo")， Angular 会把这些类名称和字符串转换成令牌。
|
||
当调用`injector.get(Foo)`时，注入器返回用`Foo`类生成的令牌所对应的依赖值，该依赖值通常是`Foo`类的实例。
|
||
|
||
During many of its operations, Angular makes similar requests internally, such as when it creates a [`component`](guide/glossary#component) for display.
|
||
|
||
Angular 在内部执行很多类似的依赖注入请求，例如，在创建用于显示的[组件 (component)](guide/glossary#component)。
|
||
|
||
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.
|
||
|
||
注入器 (`Injector`) 维护一个令牌到依赖值的映射表。
|
||
如果注入器找不到给定令牌对应的依赖值，它会使用提供商 (`Provider`) 创建一个依赖值。
|
||
|
||
A [provider](guide/glossary#provider) is a recipe for
|
||
creating new instances of a dependency value associated with a particular token.
|
||
|
||
[提供商 (provider)](guide/glossary#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.
|
||
You can register your own providers.
|
||
|
||
Angular 会为每个注册器注册很多内置提供商。
|
||
我们也可以注册自己的提供商。
|
||
|
||
Read more in the [Dependency Injection](guide/dependency-injection) page.
|
||
|
||
更多信息，参见[依赖注入 (dependency injection)](guide/dependency-injection)。
|
||
|
||
|
||
{@a directive}
|
||
|
||
|
||
{@a directives}
|
||
|
||
|
||
## Directive
|
||
|
||
## 指令 (directive)
|
||
|
||
An Angular class responsible for creating, reshaping, and interacting with HTML elements
|
||
in the browser DOM. The directive is Angular's most fundamental feature.
|
||
|
||
指令是一个 Angular 类，负责创建和重塑浏览器 DOM 中的 HTML 元素，并与之互动。
|
||
指令是 Angular 中最基本的特性之一。
|
||
|
||
A directive is usually associated with an HTML element or attribute.
|
||
This element or attribute is often referred to as the directive itself.
|
||
When Angular finds a directive in an HTML template,
|
||
it creates the matching directive class instance
|
||
and gives the instance control over that portion of the browser DOM.
|
||
|
||
指令几乎总与 HTML 元素或属性 (attribute) 相关。
|
||
我们通常把这些关联到的 HTML 元素或者属性 (attribute) 当做指令本身。
|
||
当 Angular 在 HTML 模板中遇到一个指令的时候，
|
||
它会创建匹配的指令类的实例，并把浏览器中这部分 DOM 的控制权交给它。
|
||
|
||
You can invent custom HTML markup (for example, `<my-directive>`) to
|
||
associate with your custom directives. You add this custom markup to HTML templates
|
||
as if you were writing native HTML. In this way, directives become extensions of
|
||
HTML itself.
|
||
|
||
你可以自定义 HTML 标签（例如`<my-directive>`）来关联自定义指令。
|
||
然后，可以像写原生 HTML 一样把这些自定义标签放到 HTML 模板里。
|
||
这样，指令就变成了 HTML 本身的拓展。
|
||
|
||
Directives fall into one of the following categories:
|
||
|
||
指令分为三类：
|
||
|
||
* [Components](guide/glossary#component) combine application logic with an HTML template to
|
||
render application [views](guide/glossary#view). Components are usually represented as HTML elements.
|
||
They are the building blocks of an Angular application.
|
||
|
||
[组件 (component)](guide/glossary#component): 用于组合程序逻辑和 HTML 模板，渲染出应用程序的[视图](guide/glossary#view)。
|
||
组件一般表示成 HTML 元素的形式，它们是构建 Angular 应用程序的基本单元。
|
||
|
||
* [Attribute directives](guide/glossary#attribute-directive) 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)](guide/glossary#attribute-directive)：可以监控和修改其它 HTML 元素、
|
||
HTML 属性 (attribute)、 DOM 属性 (property)、组件等行为等等。它们通常表示为 HTML 属性 (attibute)，故名。
|
||
|
||
* [Structural directives](guide/glossary#structural-directive) are responsible for
|
||
shaping or reshaping HTML layout, typically by adding, removing, or manipulating
|
||
elements and their children.
|
||
|
||
[结构型指令 (structural directive)](guide/glossary#structural-directive)：负责塑造或重塑 HTML
|
||
布局。这一般是通过添加、删除或者操作 HTML 元素及其子元素来实现的。
|
||
|
||
{@a E}
|
||
|
||
## ECMAScript
|
||
|
||
## ECMAScript 语言
|
||
|
||
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 2017](http://www.ecma-international.org/ecma-262/8.0/)
|
||
(also known as "ES2017" or "ES8"). Many Angular developers write their applications
|
||
in ES8 or a dialect that strives to be
|
||
compatible with it, such as [TypeScript](guide/glossary#typescript).
|
||
|
||
最新批准的 JavaScript 版本是[ECMAScript 2016](http://www.ecma-international.org/ecma-262/7.0/)（也称“ES2016”或“ES7”）。
|
||
Angular 的开发人员要么使用这个版本的语言，要么使用与之兼容的方言，例如 [TypeScript](guide/glossary#typescript)。
|
||
|
||
Most modern browsers only support the much older "ECMAScript 5" (also known as "ES5") standard.
|
||
Applications written in ES2017, ES2016, ES2015, or one of their dialects must be [transpiled](guide/glossary#transpile)
|
||
to ES5 JavaScript.
|
||
|
||
目前，几乎所有现代游览器只支持很老的“ECMAScript 5” （也称ES5）标准。
|
||
使用ES2016、ES2015或者其它方言开发的应用程序，必须“[转译 (transpile)](guide/glossary#transpile)”成 ES5 JavaScript。
|
||
|
||
Angular developers can write in ES5 directly.
|
||
|
||
Angular 的开发人员也可以选择直接使用 ES5 编程。
|
||
|
||
|
||
## ES2015
|
||
|
||
## ES2015 语言
|
||
|
||
Short hand for [ECMAScript](guide/glossary#ecmascript) 2015.
|
||
|
||
[ECMAScript](guide/glossary#ecmascript) 2015 的缩写。
|
||
|
||
## ES5
|
||
|
||
## ES5 语言
|
||
|
||
Short hand for [ECMAScript](guide/glossary#ecmascript) 5, the version of JavaScript run by most modern browsers.
|
||
|
||
“[ECMAScript](guide/glossary#ecmascript) 5”的简写，大部分现代浏览器使用的 JavaScript 版本。
|
||
|
||
## ES6
|
||
|
||
## ES6 语言
|
||
|
||
Short hand for [ECMAScript](guide/glossary#ecmascript) 2015.
|
||
|
||
[ECMAScript](guide/glossary#ecmascript) 2015 的简写。
|
||
|
||
{@a F}
|
||
|
||
|
||
{@a G}
|
||
|
||
|
||
{@a H}
|
||
|
||
{@a I}
|
||
|
||
## Injector
|
||
|
||
## 注入器 (injector)
|
||
|
||
An object in the Angular [dependency-injection system](guide/glossary#dependency-injection)
|
||
that can find a named dependency in its cache or create a dependency
|
||
with a registered [provider](guide/glossary#provider).
|
||
|
||
Angular [依赖注入系统 (Dependency Injection System)](guide/glossary#dependency-injection)中的一个对象，
|
||
它可以在自己的缓存中找到一个命名的“依赖”或者利用已注册的[提供商 (provider)](guide/glossary#provider) 创建这样一个依赖。
|
||
|
||
## Input
|
||
|
||
## 输入属性 (input)
|
||
|
||
A directive property that can be the *target* of a
|
||
[property binding](guide/template-syntax#property-binding) (explained in detail in the [Template Syntax](guide/template-syntax) page).
|
||
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#property-binding)（详情参见[模板语法](guide/template-syntax)页）的目标。
|
||
数据值会从模板表达式等号右侧的数据源流入这个属性。
|
||
|
||
See the [Input and output properties](guide/template-syntax#inputs-outputs) section of the [Template Syntax](guide/template-syntax) page.
|
||
|
||
见[模板语法](guide/template-syntax)中的[输入与输出属性](guide/template-syntax#inputs-outputs)。
|
||
|
||
|
||
## Interpolation
|
||
|
||
## 插值表达式 (interpolation)
|
||
|
||
A form of [property data binding](guide/glossary#data-binding) in which a
|
||
[template expression](guide/glossary#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)](guide/glossary#data-binding) 的一种形式，位于双大括号中的[模板表达式 (template expression)](guide/glossary#template-expression)会被渲染成文本。
|
||
在被赋值给元素属性或者显示在元素标签中之前，这些文本可能会先与周边的文本合并，参见下面的例子。
|
||
|
||
|
||
<code-example language="html" escape="html">
|
||
<label>My current hero is {{hero.name}}</label>
|
||
|
||
</code-example>
|
||
|
||
|
||
|
||
Read more about [interpolation](guide/template-syntax#interpolation) in the
|
||
[Template Syntax](guide/template-syntax) page.
|
||
|
||
更多信息，见[模板语法](guide/template-syntax)中的[插值表达式](guide/template-syntax#interpolation)。
|
||
|
||
|
||
{@a J}
|
||
|
||
{@a jit}
|
||
|
||
|
||
## Just-in-time (JIT) compilation
|
||
|
||
## 即时 (just-in-time, JiT) 编译
|
||
|
||
A bootstrapping method of compiling components and modules in the browser
|
||
and launching the application dynamically. Just-in-time mode is a good choice during development.
|
||
Consider using the [ahead-of-time](guide/glossary#aot) mode for production apps.
|
||
|
||
Angular 的即时编译在浏览器中启动并编译所有的组件和模块，动态运行应用程序。
|
||
它很适合在开发过程中使用。但是在产品发布时，推荐采用[预编译 (ahead-of-time)](guide/glossary#aot) 模式。
|
||
|
||
|
||
{@a K}
|
||
|
||
## kebab-case
|
||
|
||
## 烤串命名法 (kebab-case)
|
||
|
||
See [dash-case](guide/glossary#dash-case).
|
||
|
||
见[中线命名法 (dash-case)](guide/glossary#dash-case)。
|
||
|
||
|
||
{@a L}
|
||
|
||
## Lifecycle hooks
|
||
|
||
## 生命周期钩子 (lifecycle hook)
|
||
|
||
[Directives](guide/glossary#directive) and [components](guide/glossary#component) have a lifecycle
|
||
managed by Angular as it creates, updates, and destroys them.
|
||
|
||
[指令 (directive)](guide/glossary#directive) 和[组件 (component)](guide/glossary#component) 具有生命周期，由 Angular 在创建、更新和销毁它们的过程中进行管理。
|
||
|
||
You 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 named `ngOnInit`.
|
||
|
||
每个接口只有一个钩子方法，方法名是接口名加前缀 `ng`。例如，`OnInit`接口的钩子方法名为 `ngOnInit`。
|
||
|
||
Angular calls these hook methods in the following order:
|
||
|
||
Angular 会按以下顺序调用钩子方法：
|
||
|
||
* `ngOnChanges`: when an [input](guide/glossary#input)/[output](guide/glossary#output) binding value changes.
|
||
|
||
`ngOnChanges` - 在[输入属性 (input)](guide/glossary#input)/[输出属性 (output)](guide/glossary#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 a component's views are initialized.
|
||
|
||
`ngAfterViewInit` - 在组件视图初始化后调用。
|
||
|
||
* `ngAfterViewChecked`: after every check of a component's views.
|
||
|
||
`ngAfterViewChecked` - 在组件视图每次检查后调用。
|
||
|
||
* `ngOnDestroy`: just before the directive is destroyed.
|
||
|
||
`ngOnDestroy` - 在指令销毁前调用。
|
||
|
||
Read more in the [Lifecycle Hooks](guide/lifecycle-hooks) page.
|
||
|
||
更多信息，见[生命周期钩子 (lifecycle hook)](guide/lifecycle-hooks)。
|
||
|
||
{@a M}
|
||
|
||
## Module
|
||
|
||
## 模块 (module)
|
||
|
||
<div class="alert is-important">
|
||
|
||
|
||
Angular has the following types of modules:
|
||
|
||
Angular有下列模块类型：
|
||
|
||
* [NgModules](guide/glossary#ngmodule).
|
||
For details and examples, see the [NgModules](guide/ngmodule) page.
|
||
|
||
[Angular 模块](guide/glossary#ngmodule)，见[Angular 模块](guide/ngmodule)。
|
||
* ES2015 modules, as described in this section.
|
||
|
||
本节描述的 ES2015 模块。
|
||
|
||
|
||
</div>
|
||
|
||
|
||
|
||
A cohesive block of code dedicated to a single purpose.
|
||
|
||
模块是一个内聚的代码块，具有单一用途。
|
||
|
||
Angular apps are modular.
|
||
|
||
Angular 应用程序是模块化的。
|
||
|
||
In general, you assemble an application from many modules, both the ones you write and the ones you acquire from others.
|
||
|
||
一般来说，我们用模块来组装应用程序，这些模块包含自己编写的模块和从其它地方获取的模块。
|
||
|
||
A module *exports* something of value in that code, typically one thing such as a class;
|
||
a module that needs that class *imports* it.
|
||
|
||
模块会**导出 (export) **代码中的某些值，最典型的就是类。
|
||
模块如果需要什么东西，那就**导入 (import) **它。
|
||
|
||
The structure of NgModules and the import/export syntax
|
||
is based on the [ES2015 module standard](http://www.2ality.com/2014/09/es6-modules-final.html).
|
||
|
||
Angular 的模块结构和导入/导出语法是基于 [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.
|
||
Angular doesn't include a module loader and doesn't have a preference
|
||
for any particular third- party library (although most examples use SystemJS).
|
||
You can use any module library that conforms to the standard.
|
||
|
||
采用这个标准的应用程序需要一个模块加载器来按需加载模块，并解析模块间的依赖关系。
|
||
Angular 不附带模块加载器，也不偏爱任何第三方库（虽然大多数例子使用SystemJS）。
|
||
你可以选择任何与这个标准兼容的模块化库。
|
||
|
||
Modules are typically named after the file in which the exported thing is defined.
|
||
The Angular [DatePipe](https://github.com/angular/angular/blob/master/packages/common/src/pipes/date_pipe.ts)
|
||
class belongs to a feature module named `date_pipe` in the file `date_pipe.ts`.
|
||
|
||
模块一般与它定义导出物的文件同名。例如，Angular 的 [DatePipe](https://github.com/angular/angular/blob/master/modules/angular2/src/common/pipes/date_pipe.ts) 类属于名叫`date_pipe`的特性模块，位于`date_pipe.ts`文件中。
|
||
|
||
You rarely access Angular feature modules directly. You usually import them from an Angular [scoped package](guide/glossary#scoped-package) such as `@angular/core`.
|
||
|
||
你很少需要直接访问 Angular 的特性模块。
|
||
而通常会从一个 Angular [范围化包 (scoped package)](guide/glossary#scoped-package)中导入它们，例如`@angular/core`。
|
||
|
||
|
||
{@a N}
|
||
|
||
|
||
## NgModule
|
||
|
||
## 可观察对象 (observable)
|
||
|
||
|
||
<div class="l-sub-section">
|
||
|
||
|
||
|
||
Helps you organize an application into cohesive blocks of functionality.
|
||
An NgModule identifies the components, directives, and pipes that the application uses along with the list of external NgModules that the application needs, such as `FormsModule`.
|
||
|
||
Every Angular application has an application root-module class. By convention, the class is
|
||
called `AppModule` and resides in a file named `app.module.ts`.
|
||
|
||
For details and examples, see [NgModules](guide/ngmodule).
|
||
|
||
|
||
</div>
|
||
|
||
{@a O}
|
||
|
||
## Observable
|
||
|
||
## Observable 对象
|
||
|
||
An array whose items arrive asynchronously over time.
|
||
Observables help you manage asynchronous data, such as data coming from a backend service.
|
||
Observables are used within Angular itself, including Angular's event system and its HTTP client service.
|
||
|
||
一个`Observable`是一个数组，其中的元素随着时间的流逝异步地到达。
|
||
`Observable`帮助我们管理异步数据，例如来自后台服务的数据。
|
||
Angular 自身使用了`Observable`，包括 Angular 的事件系统和它的 http 客户端服务。
|
||
|
||
To use observables, Angular uses a third-party library called Reactive Extensions (RxJS).
|
||
Observables are a proposed feature for ES 2016, the next version of JavaScript.
|
||
|
||
为了使用`Observable`， Angular 采用了名为 Reactive Extensions (RxJS) 的第三方包。
|
||
在下个版本的 JavaScript - ES 2016 中，`Observable`是建议的特性之一。
|
||
|
||
|
||
## Output
|
||
|
||
## 输出属性 (output)
|
||
|
||
A directive property that can be the *target* of event binding
|
||
(read more in the [event binding](guide/template-syntax#event-binding)
|
||
section of the [Template Syntax](guide/template-syntax) page).
|
||
Events stream *out* of this property to the receiver identified
|
||
in the template expression to the right of the equal sign.
|
||
|
||
输出属性是一个指令属性，可作为[事件绑定](guide/template-syntax.html#event-binding)的 **目标** 。
|
||
事件流从这个属性流*出*到模板表达式等号的右边的接收者。
|
||
|
||
See the [Input and output properties](guide/template-syntax#inputs-outputs) section of the [Template Syntax](guide/template-syntax) page.
|
||
|
||
参见[模板语法](guide/template-syntax)中的[输入与输出属性](guide/template-syntax#inputs-outputs)部分。
|
||
|
||
|
||
{@a P}
|
||
|
||
## PascalCase
|
||
|
||
## Pascal 命名法 (PascalCase)
|
||
|
||
The practice of writing individual words, compound words, or phrases such that each word or abbreviation begins with a capital letter.
|
||
Class names are typically spelled in PascalCase. For example, `Person` and `HeroDetailComponent`.
|
||
|
||
Pascal 命名法是书写单词、复合词或短语的一种形式，每个单词或缩写都以大写开头。
|
||
类名一般都采用 Pascal 命名法。例如`Person`和`HeroDetailComponent`。
|
||
|
||
This form is also known as *upper camel case* to distinguish it from *lower camel case* or simply [camelCase](guide/glossary#camelcase).
|
||
In this documentation, "PascalCase" means *upper camel case* and "camelCase" means *lower camel case*.
|
||
|
||
这种形式也称**大写驼峰式命名法**，以区别于**小写驼峰式命名法”或[驼峰式命名法 (camelCase)](guide/glossary#camelcase)** 。
|
||
在本文档中，“Pascal 命名法”都是指的*大写驼峰式命名法*，“驼峰式命名法”指的都是*小写驼峰式命名法*。
|
||
|
||
|
||
## Pipe
|
||
|
||
## 管道 (pipe)
|
||
|
||
An Angular pipe is a function that transforms input values to output values for
|
||
display in a [view](guide/glossary#view).
|
||
Here's an example that uses the built-in `currency` pipe to display
|
||
a numeric value in the local currency.
|
||
|
||
Angular 管道是一个函数，用于把输入值转换成输出值以供[视图 (view)](guide/glossary#view)显示。
|
||
下面这个例子中，用内置的`currency`管道把数字值显示为本地货币格式。
|
||
|
||
|
||
<code-example language="html" escape="html">
|
||
<label>Price: </label>{{product.price | currency}}
|
||
|
||
</code-example>
|
||
|
||
|
||
|
||
You can also write your own custom pipes.
|
||
Read more in the page on [pipes](guide/pipes).
|
||
|
||
我们还可以写自己的自定义管道。
|
||
更多信息，见[管道](guide/pipes)。
|
||
|
||
|
||
## Provider
|
||
|
||
## 提供商 (provider)
|
||
|
||
A _provider_ creates a new instance of a dependency for the
|
||
[dependency injection](guide/glossary#dependency-injection) system.
|
||
It relates a lookup token to code—sometimes called a "recipe"—that can create a dependency value.
|
||
|
||
依赖注入系统依靠提供商来创建依赖的实例。
|
||
它把一个查找令牌和代码（有时也叫“配方”）关联到一起，以便创建依赖值。
|
||
|
||
|
||
{@a Q}
|
||
|
||
{@a R}
|
||
|
||
## Reactive forms
|
||
|
||
## 响应式表单 (reactive forms)
|
||
|
||
A technique for building Angular forms through code in a component.
|
||
The alternative technique is [template-driven forms](guide/glossary#template-driven-forms).
|
||
|
||
通过组件中代码构建 Angular 表单的一种技术。
|
||
另一种技术是[模板驱动表单](guide/glossary#template-driven-forms)
|
||
|
||
When building reactive forms:
|
||
|
||
构建响应式表单时：
|
||
|
||
* The "source of truth" is the component. The validation is defined using code in the component.
|
||
|
||
组件是“真理之源”。表单验证在组件代码中定义。
|
||
|
||
* Each control is explicitly created in the component class with `new FormControl()` or with `FormBuilder`.
|
||
|
||
在组件类中，使用`new FormControl()`或者`FormBuilder`显性地创建每个控件。
|
||
|
||
* The template input elements do *not* use `ngModel`.
|
||
|
||
模板中的`input`元素**不**使用`ngModel`。
|
||
|
||
* The associated Angular directives are all prefixed with `Form`, such as `FormGroup`, `FormControl`, and `FormControlName`.
|
||
|
||
相关联的 Angular 指令全部以`Form`开头，例如`FormGroup`、`FormControl`和`FormControlName`。
|
||
|
||
Reactive forms are powerful, flexible, and a good choice for more complex data-entry form scenarios, such as dynamic generation of form controls.
|
||
|
||
动态表单非常强大、灵活，它在复杂数据输入的场景下尤其好用，例如动态的生成表单控制器。
|
||
|
||
|
||
## Router
|
||
|
||
## 路由器 (router)
|
||
|
||
Most applications consist of many screens or [views](guide/glossary#view).
|
||
The user navigates among them by clicking links and buttons,
|
||
and performing other similar actions that cause the application to
|
||
replace one view with another.
|
||
|
||
大多数应用程序包含多个屏幕或[视图 (view)](guide/glossary#view)。
|
||
用户通过点击链接、按钮和其它类似动作，在它们之间导航，使应用程序从一个视图切换到另一个视图。
|
||
|
||
The Angular component router is a richly featured mechanism for configuring and managing the entire view navigation process, including the creation and destruction
|
||
of views.
|
||
|
||
Angular 的组件路由器是一个特性丰富的机制，可以配置和管理整个导航过程，包括建立和销毁视图。
|
||
|
||
In most cases, components become attached to a router by means
|
||
of a `RouterConfig` that defines routes to views.
|
||
|
||
多数情况下，组件会通过`RouterConfig`中定义的路由到视图的对照表来附加到[路由器](guide/glossary#router)上。
|
||
|
||
A [routing component's](guide/glossary#routing-component) template has a `RouterOutlet` element
|
||
where it can display views produced by the router.
|
||
|
||
[路由组件](guide/glossary#routing-component)的模板中带有一个`RouterOutlet`元素，那是显示路由器生成的视图的地方。
|
||
|
||
Other views in the application likely have anchor tags or buttons with `RouterLink`
|
||
directives that users can click to navigate.
|
||
|
||
应用中的其它视图中某些锚标签或按钮上带有`RouterLink`指令，用户可以点击它们进行导航。
|
||
|
||
For more information, see the [Routing & Navigation](guide/router) page.
|
||
|
||
更多信息，见[路由与导航](guide/router)。
|
||
|
||
|
||
## Router module
|
||
|
||
## 路由器模块 (router module)
|
||
|
||
|
||
<div class="l-sub-section">
|
||
|
||
A separate [NgModule](guide/glossary#ngmodule) that provides the necessary service providers and directives for navigating through application views.
|
||
|
||
一个独立的 [Angular 模块](guide/glossary#ngmodule)，用来提供导航所需的服务提供商和指令。
|
||
|
||
For more information, see the [Routing & Navigation](guide/router) page.
|
||
|
||
更多信息，见[路由与导航](guide/router)。
|
||
|
||
|
||
## Routing component
|
||
|
||
## 路由组件 (routing component)
|
||
|
||
An Angular [component](guide/glossary#component) with a `RouterOutlet` that displays views based on router navigations.
|
||
|
||
一个带有 RouterOutlet 的 Angular [组件](guide/glossary#component)，根据路由器导航来显示视图。
|
||
|
||
For more information, see the [Routing & Navigation](guide/router) page.
|
||
|
||
更多信息，见[路由与导航](guide/router)。
|
||
|
||
|
||
{@a S}
|
||
|
||
## Scoped package
|
||
|
||
## 范围化包 (scoped package)
|
||
|
||
A way to group related *npm* packages.
|
||
Read more at the [npm-scope](https://docs.npmjs.com/misc/scope) page.
|
||
|
||
对相关的*npm*包进行分组的一种方式，参阅[npm-scope](https://docs.npmjs.com/misc/scope)。
|
||
|
||
NgModules are delivered within *scoped packages* such as `@angular/core`,
|
||
`@angular/common`, `@angular/platform-browser-dynamic`, `@angular/http`, and `@angular/router`.
|
||
|
||
Angular 模块是用一系列*范围化包*的形式发布的，例如`@angular/core`、`@angular/common`、`@angular/platform-browser-dynamic`、`@angular/http`和`@angular/router`。
|
||
|
||
Import a scoped package the same way that you import a normal package.
|
||
The only difference, from a consumer perspective,
|
||
is that the scoped package name begins with the Angular *scope name*, `@angular`.
|
||
|
||
导入范围化包与导入*普通*包方式相同。
|
||
从消费者的视角看，唯一的不同是那些包的名字是用 Angular 的*范围化包名*`@angular`开头的。
|
||
|
||
|
||
<code-example path="architecture/src/app/app.component.ts" linenums="false" title="architecture/src/app/app.component.ts (import)" region="import">
|
||
|
||
</code-example>
|
||
|
||
|
||
## Service
|
||
|
||
## 服务 (service)
|
||
|
||
For data or logic that is not associated
|
||
with a specific view or that you want to share across components, build services.
|
||
|
||
服务用于封装不与任何特定视图相关的数据和逻辑，或者用于在组件之间共享数据和逻辑。
|
||
|
||
Applications often require services such as a hero data service or a logging service.
|
||
|
||
应用程序经常需要服务，例如英雄数据服务或者日志服务。
|
||
|
||
A service is a class with a focused purpose.
|
||
You often create a service to implement features that are
|
||
independent from any specific view,
|
||
provide shared data or logic across components, or encapsulate external interactions.
|
||
|
||
服务是一个具有特定功能的类。
|
||
我们经常创建服务来实现不依赖任何特定视图的特征，
|
||
在组件之间提供共享数据或逻辑，或者封装外部的交互。
|
||
|
||
Applications often require services such as a data service or a logging service.
|
||
|
||
应用通常都需要服务，比如数据服务或者日志服务。
|
||
|
||
For more information, see the [Services](tutorial/toh-pt4) page of the [Tour of Heroes](tutorial) tutorial.
|
||
|
||
更多信息，见[英雄指南](tutorial)中的[服务](tutorial/toh-pt4)。
|
||
|
||
{@a snake-case}
|
||
|
||
|
||
## snake_case
|
||
|
||
## 蛇形命名法
|
||
|
||
The practice of writing compound words or phrases such that an
|
||
underscore (`_`) separates one word from the next. This form is also known as *underscore case*.
|
||
|
||
写复合词或短语的一种方式，在多个词之间用下划线(`_`)分隔。也叫*下划线命名法*
|
||
|
||
|
||
{@a structural-directive}
|
||
|
||
|
||
{@a structural-directives}
|
||
|
||
|
||
## Structural directives
|
||
|
||
## 结构型指令
|
||
|
||
A category of [directive](guide/glossary#directive) that can
|
||
shape or reshape HTML layout, typically by adding and removing elements in the DOM.
|
||
The `ngIf` "conditional element" directive and the `ngFor` "repeater" directive are well-known examples.
|
||
|
||
结构型指令是[指令 (directive)](guide/glossary#directive)一种，
|
||
可以通过在DOM中添加、删除或操作元素和其各级子元素来塑造或重塑 HTML 布局。
|
||
例如，`ngIf`这个“条件化元素”指令，`ngFor`这个“重复器”指令都是众所周知的例子。
|
||
|
||
Read more in the [Structural Directives](guide/structural-directives) page.
|
||
|
||
更多信息，见[结构型指令](guide/structural-directives)。
|
||
|
||
|
||
{@a T}
|
||
|
||
## Template
|
||
|
||
## 模板 (template)
|
||
|
||
A chunk of HTML that Angular uses to render a [view](guide/glossary#view) with
|
||
the support and guidance of an Angular [directive](guide/glossary#directive),
|
||
most notably a [component](guide/glossary#component).
|
||
|
||
模板是一大块 HTML。Angular 会在[指令 (directive)](guide/glossary#directive) 特别是[组件 (component)](guide/glossary#component)
|
||
的支持和持续指导下，用它来渲染[视图 (view)](guide/glossary#view)。
|
||
|
||
|
||
## Template-driven forms
|
||
|
||
## 模板驱动表单 (template-driven forms)
|
||
|
||
A technique for building Angular forms using HTML forms and input elements in the view.
|
||
The alternate technique is [Reactive Forms](guide/glossary#reactive-forms).
|
||
|
||
一项在视图中使用 HTML 表单和输入类元素构建 Angular 表单的技术。
|
||
它的替代方案是[响应式表单](guide/glossary#reactive-forms)。
|
||
|
||
When building template-driven forms:
|
||
|
||
当构建模板驱动表单时：
|
||
|
||
* The "source of truth" is the template. The validation is defined using attributes on the individual input elements.
|
||
|
||
模板是“真理之源”。使用属性 (attribute) 在单个输入元素上定义验证规则。
|
||
|
||
* [Two-way binding](guide/glossary#data-binding) with `ngModel` keeps the component model synchronized with the user's entry into the input elements.
|
||
|
||
使用`ngModel`进行[双向绑定](guide/glossary#data-binding)，保持组件模型和用户输入之间的同步。
|
||
|
||
* Behind the scenes, Angular creates a new control for each input element, provided you have set up a `name` attribute and two-way binding for each input.
|
||
|
||
在幕后，Angular 为每个带有`name`属性和双向绑定的输入元素创建了一个新的控件。
|
||
|
||
* The associated Angular directives are all prefixed with `ng` such as `ngForm`, `ngModel`, and `ngModelGroup`.
|
||
|
||
相关的 Angular 指令都带有`ng`前缀，例如`ngForm`、`ngModel`和`ngModelGroup`。
|
||
|
||
Template-driven forms are convenient, quick, and simple. They are a good choice for many basic data-entry form scenarios.
|
||
|
||
模板驱动表单便捷、快速、简单，是很多基础型数据输入表单的最佳选择。
|
||
|
||
Read about how to build template-driven forms
|
||
in the [Forms](guide/forms) page.
|
||
|
||
要了解如何构建模板驱动表单的更多信息，参见[表单](guide/forms)页。
|
||
|
||
|
||
## Template expression
|
||
|
||
## 模板表达式 (template expression)
|
||
|
||
A TypeScript-like syntax that Angular evaluates within
|
||
a [data binding](guide/glossary#data-binding).
|
||
|
||
Angular 用来在[数据绑定 (data binding)](guide/glossary#data-binding)内求值的、**类似**JavaScript语法的表达式。
|
||
|
||
Read about how to write template expressions
|
||
in the [Template expressions](guide/template-syntax#template-expressions) section
|
||
of the [Template Syntax](guide/template-syntax) page.
|
||
|
||
到[模板语法](guide/template-syntax)一章的[模板表达式](guide/template-syntax#template-expressions)部分了解更多模板表达式的知识。
|
||
|
||
|
||
## Transpile
|
||
|
||
## 转译（transpile)
|
||
|
||
The process of transforming code written in one form of JavaScript
|
||
(such as TypeScript) into another form of JavaScript (such as [ES5](guide/glossary#es5)).
|
||
|
||
把一种形式的 JavaScript（例如 TypeScript）转换成另一种形式的 JavaScript（例如 [ES5](guide/glossary#es5)）的过程。
|
||
|
||
|
||
## TypeScript
|
||
|
||
## TypeScript 语言
|
||
|
||
A version of JavaScript that supports most [ECMAScript 2015](guide/glossary#es2015)
|
||
language features such as [decorators](guide/glossary#decorator).
|
||
|
||
JavaScript 的一个版本，支持了几乎所有 [ECMAScript 2015](guide/glossary#es2015) 语言特性，例如[装饰器 (decorator)](guide/glossary#decorator))。
|
||
|
||
TypeScript is also notable for its optional typing system, which provides
|
||
compile-time type checking and strong tooling support (such as "intellisense,"
|
||
code completion, refactoring, and intelligent search). Many code editors
|
||
and IDEs support TypeScript either natively or with plugins.
|
||
|
||
TypeScript 还以它的可选类型系统而著称。
|
||
该类型系统提供了编译时类型检查和强大的工具支持（例如 “Intellisense”，代码补齐，重构和智能搜索等）。
|
||
许多代码编辑器和 IDE 都原生支持 TypeScript 或通过插件提供支持。
|
||
|
||
TypeScript is the preferred language for Angular development, although
|
||
you can use other JavaScript dialects such as [ES5](guide/glossary#es5).
|
||
|
||
TypeScript 是 Angular 的首选语言，当然，你可以使用其它 JavaScript 方言，例如[ES5](guide/glossary#es5)。
|
||
|
||
Read more about TypeScript at [typescriptlang.org](http://www.typescriptlang.org/).
|
||
|
||
更多信息，见[typescript.org](http://www.typescriptlang.org/)。
|
||
|
||
|
||
{@a U}
|
||
|
||
{@a V}
|
||
|
||
## View
|
||
|
||
## 视图 (view)
|
||
|
||
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](guide/glossary#directive),
|
||
especially [component](guide/glossary#component) directives and their companion [templates](guide/glossary#template).
|
||
The component plays such a prominent role that it's often
|
||
convenient to refer to a component as a view.
|
||
|
||
Angular 在一个或多个[指令 (directive)](guide/glossary#directive) 的控制下渲染视图，
|
||
尤其是[组件 (component)](guide/glossary#component) 指令及其[模板 (template)](guide/glossary#template)。
|
||
组件扮演着非常重要的角色，我们甚至经常会为了方便, 直接用视图作为组件的代名词。
|
||
|
||
Views often contain other views. Any view might be loaded and unloaded
|
||
dynamically as the user navigates through the application, typically
|
||
under the control of a [router](guide/glossary#router).
|
||
|
||
视图一般包含其它视图，在用户在应用程序中导航时，
|
||
任何视图都可能被动态加载或卸载，这一般会在[路由器 (router)](guide/glossary#router) 的控制下进行。
|
||
|
||
|
||
{@a W}
|
||
|
||
|
||
{@a X}
|
||
|
||
|
||
{@a Y}
|
||
|
||
|
||
{@a Z}
|
||
|
||
## Zone
|
||
|
||
## 区域 (zone)
|
||
|
||
A mechanism for encapsulating and intercepting
|
||
a JavaScript application's asynchronous activity.
|
||
|
||
区域是一种用来封装和截听 JavaScript 应用程序异步活动的机制。
|
||
|
||
The browser DOM and JavaScript have a limited number
|
||
of asynchronous activities, such as DOM events (for example, clicks),
|
||
[promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise), and
|
||
[XHR](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest)
|
||
calls to remote servers.
|
||
|
||
浏览器中的 DOM 和 JavaScript 之间常会有一些数量有限的异步活动，
|
||
例如 DOM 事件（例如点击）、[承诺 (promise)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
|
||
和通过 [XHR](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) 调用远程服务。
|
||
|
||
Zones intercept all of these activities and give a "zone client" the opportunity
|
||
to take action before and after the async activity finishes.
|
||
|
||
区域能截听所有这些活动，并让“区域的客户”有机会在异步活动完成之前和之后采取行动。
|
||
|
||
Angular runs your application in a zone where it can respond to
|
||
asynchronous events by checking for data changes and updating
|
||
the information it displays via [data bindings](guide/glossary#data-binding).
|
||
|
||
Angular 会在一个 Zone 区域中运行应用程序，在这个区域中，它可以对异步事件做出反应，可以通过检查数据变更、利用[数据绑定 (data bindings)](guide/glossary#data-binding) 来更新信息显示。
|
||
|
||
Learn more about zones in this
|
||
[Brian Ford video](https://www.youtube.com/watch?v=3IqtmUscE_U).
|
||
|
||
更多信息，见 [Brian Ford 的视频](https://www.youtube.com/watch?v=3IqtmUscE_U)。
|