parent
f389c57ede
commit
c1051cc8e1
|
@ -118,7 +118,7 @@ include _util-fns
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
## Binding
|
## Binding
|
||||||
## 绑定
|
## 绑定(Binding)
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
Almost always refers to [Data Binding](#data-binding) and the act of
|
Almost always refers to [Data Binding](#data-binding) and the act of
|
||||||
|
@ -135,7 +135,7 @@ include _util-fns
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
## Bootstrap
|
## Bootstrap
|
||||||
## 启动/引导
|
## 启动/引导(Bootstrap)
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
We launch an Angular application by "bootstrapping" it with the `bootstrap` method.
|
We launch an Angular application by "bootstrapping" it with the `bootstrap` method.
|
||||||
|
@ -154,7 +154,7 @@ include _util-fns
|
||||||
.l-main-section
|
.l-main-section
|
||||||
:marked
|
:marked
|
||||||
## camelCase
|
## camelCase
|
||||||
## 驼峰式命名法
|
## 驼峰式命名法(camelCase)
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
The practice of writing compound words or phrases such that each word or abbreviation begins with a capital letter
|
The practice of writing compound words or phrases such that each word or abbreviation begins with a capital letter
|
||||||
|
@ -174,7 +174,7 @@ include _util-fns
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
## Component
|
## Component
|
||||||
## 组件
|
## 组件(Component)
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
An Angular class responsible for exposing data
|
An Angular class responsible for exposing data
|
||||||
|
@ -208,7 +208,7 @@ include _util-fns
|
||||||
.l-main-section
|
.l-main-section
|
||||||
:marked
|
:marked
|
||||||
## dash-case
|
## dash-case
|
||||||
## 中线命名法
|
## 中线命名法(dash-case)
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
The practice of writing compound words or phrases such that each word is separated by a dash or hyphen (-).
|
The practice of writing compound words or phrases such that each word is separated by a dash or hyphen (-).
|
||||||
|
@ -225,7 +225,7 @@ include _util-fns
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
## Data Binding
|
## Data Binding
|
||||||
## 数据绑定
|
## 数据绑定(Data Binding)
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
Applications display data values to a user and respond to user
|
Applications display data values to a user and respond to user
|
||||||
|
@ -277,7 +277,7 @@ include _util-fns
|
||||||
<a id="decorator"></a> <a id="decoration"></a>
|
<a id="decorator"></a> <a id="decoration"></a>
|
||||||
:marked
|
:marked
|
||||||
## Decorator | Decoration
|
## Decorator | Decoration
|
||||||
## 装饰器
|
## 装饰器(Decorator | Decoration)
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
A Decorator is a **function** that adds metadata to a class, its members (properties, methods) and function arguments.
|
A Decorator is a **function** that adds metadata to a class, its members (properties, methods) and function arguments.
|
||||||
|
@ -329,7 +329,7 @@ include _util-fns
|
||||||
// #docregion d2
|
// #docregion d2
|
||||||
:marked
|
:marked
|
||||||
## Dependency Injection
|
## Dependency Injection
|
||||||
## 依赖注入
|
## 依赖注入(Dependency Injection)
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
Dependency Injection is both a design pattern and a mechanism
|
Dependency Injection is both a design pattern and a mechanism
|
||||||
|
@ -413,7 +413,7 @@ include _util-fns
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
## Directive
|
## Directive
|
||||||
## 指令
|
## 指令(Directive)
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
An Angular class responsible for creating, re-shaping, and interacting with HTML elements
|
An Angular class responsible for creating, re-shaping, and interacting with HTML elements
|
||||||
|
@ -532,7 +532,7 @@ include _util-fns
|
||||||
.l-main-section
|
.l-main-section
|
||||||
:marked
|
:marked
|
||||||
## Injector
|
## Injector
|
||||||
## 注入器
|
## 注入器(Injector)
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
An object in the Angular [dependency injection system](#dependency-injection)
|
An object in the Angular [dependency injection system](#dependency-injection)
|
||||||
|
@ -542,6 +542,7 @@ include _util-fns
|
||||||
Angular[依赖注入系统](#dependency-injection)中的一个对象,它可以在自己的缓存中找到一个“有名字的依赖”或者利用一个已注册的[provider](#provider)创建这样的依赖。
|
Angular[依赖注入系统](#dependency-injection)中的一个对象,它可以在自己的缓存中找到一个“有名字的依赖”或者利用一个已注册的[provider](#provider)创建这样的依赖。
|
||||||
:marked
|
:marked
|
||||||
## Input
|
## Input
|
||||||
|
## 输入属性(Input)
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
A directive property that can be the ***target*** of a
|
A directive property that can be the ***target*** of a
|
||||||
|
@ -557,7 +558,7 @@ include _util-fns
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
## Interpolation
|
## Interpolation
|
||||||
## 插值表达式
|
## 插值表达式(Interpolation)
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
A form of [Property Data Binding](#data-binding) in which a
|
A form of [Property Data Binding](#data-binding) in which a
|
||||||
|
@ -583,7 +584,7 @@ include _util-fns
|
||||||
<a id="K"></a>
|
<a id="K"></a>
|
||||||
:marked
|
:marked
|
||||||
## kebab-case
|
## kebab-case
|
||||||
## 烤串命名法
|
## 烤串命名法(kebab-case)
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
The practice of writing compound words or phrases such that each word is separated by a dash or hyphen (-).
|
The practice of writing compound words or phrases such that each word is separated by a dash or hyphen (-).
|
||||||
|
@ -602,7 +603,7 @@ include _util-fns
|
||||||
.l-main-section
|
.l-main-section
|
||||||
:marked
|
:marked
|
||||||
## Lifecycle Hooks
|
## Lifecycle Hooks
|
||||||
## 生命周期钩子
|
## 生命周期钩子(Lifecycle Hooks)
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
[Directives](#directive) and [Components](#component) have a lifecycle
|
[Directives](#directive) and [Components](#component) have a lifecycle
|
||||||
|
@ -653,7 +654,7 @@ include _util-fns
|
||||||
.l-main-section
|
.l-main-section
|
||||||
:marked
|
:marked
|
||||||
## Module
|
## Module
|
||||||
## 模块
|
## 模块(Module)
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
Angular apps are modular.
|
Angular apps are modular.
|
||||||
|
@ -714,7 +715,7 @@ include _util-fns
|
||||||
.l-main-section
|
.l-main-section
|
||||||
:marked
|
:marked
|
||||||
## Output
|
## Output
|
||||||
## 输出
|
## 输出(Output)
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
A directive property that can be the ***target*** of an
|
A directive property that can be the ***target*** of an
|
||||||
|
@ -733,7 +734,7 @@ include _util-fns
|
||||||
<a id="P"></a>
|
<a id="P"></a>
|
||||||
:marked
|
:marked
|
||||||
## PascalCase
|
## PascalCase
|
||||||
## Pascal命名法
|
## Pascal命名法(PascalCase)
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
The practice of writing compound words or phrases such that each word or abbreviation begins with a capital letter.
|
The practice of writing compound words or phrases such that each word or abbreviation begins with a capital letter.
|
||||||
|
@ -749,7 +750,7 @@ include _util-fns
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
## Pipe
|
## Pipe
|
||||||
## 管道
|
## 管道(Pipe)
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
An Angular pipe is a function that transforms input values to output values for
|
An Angular pipe is a function that transforms input values to output values for
|
||||||
|
@ -774,12 +775,13 @@ include _util-fns
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
## Provider
|
## Provider
|
||||||
|
## 供应商(Provider)
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
A Provider creates a new instance of a dependency for the Dependency Injection system.
|
A Provider creates a new instance of a dependency for the Dependency Injection system.
|
||||||
It relates a lookup token to code - sometimes called a "recipe" - that can create a dependency value.
|
It relates a lookup token to code - sometimes called a "recipe" - that can create a dependency value.
|
||||||
|
|
||||||
依赖注入系统依靠Provider来创建依赖的实例。它把一个查阅用的Token关联到代码(有时也叫“配方”),可以创建依赖值。
|
依赖注入系统依靠供应商来创建依赖的实例。它把一个查阅用的Token关联到代码(有时也叫“配方”),可以创建依赖值。
|
||||||
|
|
||||||
For example, `new Provider(Foo, {useClass: Foo})` creates a `Provider`
|
For example, `new Provider(Foo, {useClass: Foo})` creates a `Provider`
|
||||||
that relates the `Foo` token to a function that creates a new instance of the `Foo` class.
|
that relates the `Foo` token to a function that creates a new instance of the `Foo` class.
|
||||||
|
@ -789,7 +791,7 @@ include _util-fns
|
||||||
There are other ways to create tokens and recipes.
|
There are other ways to create tokens and recipes.
|
||||||
See [Dependency Injection](#dependency-injection) chapter to learn more.
|
See [Dependency Injection](#dependency-injection) chapter to learn more.
|
||||||
|
|
||||||
还有其它一些方法建立Token和方剂。
|
还有其它一些方法创建令牌(Token)和配方。
|
||||||
参见[依赖注入Dependency Injection](#dependency-injection)以获取更多信息。
|
参见[依赖注入Dependency Injection](#dependency-injection)以获取更多信息。
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
|
@ -797,7 +799,7 @@ include _util-fns
|
||||||
<a id="R"></a>
|
<a id="R"></a>
|
||||||
:marked
|
:marked
|
||||||
## Router
|
## Router
|
||||||
## 路由器
|
## 路由器(Router)
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
Most applications consist of many screens or [views](#view).
|
Most applications consist of many screens or [views](#view).
|
||||||
|
@ -815,7 +817,7 @@ include _util-fns
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
## Routing Component
|
## Routing Component
|
||||||
## 路由组件
|
## 路由组件(Routing Component)
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
A [Component](#component) with an attached router.
|
A [Component](#component) with an attached router.
|
||||||
|
@ -839,23 +841,32 @@ include _util-fns
|
||||||
.l-main-section
|
.l-main-section
|
||||||
:marked
|
:marked
|
||||||
## Scoped Package
|
## Scoped Package
|
||||||
|
## 范围化包(Scoped Package)
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
Angular modules are delivered within *scoped packages* such as `@angular/core`, `@angular/common`, `@angular/platform-browser-dynamic`,
|
Angular modules are delivered within *scoped packages* such as `@angular/core`, `@angular/common`, `@angular/platform-browser-dynamic`,
|
||||||
`@angular/http`, and `@angular/router`.
|
`@angular/http`, and `@angular/router`.
|
||||||
|
|
||||||
|
Angular模块是用一系列*范围化包*的形式发布的,比如`@angular/core`, `@angular/common`, `@angular/platform-browser-dynamic`,
|
||||||
|
`@angular/http` 和 `@angular/router`
|
||||||
|
|
||||||
A [*scoped package*](https://docs.npmjs.com/misc/scope) is a way to group related *npm* packages.
|
A [*scoped package*](https://docs.npmjs.com/misc/scope) is a way to group related *npm* packages.
|
||||||
|
|
||||||
|
[*范围化包*](https://docs.npmjs.com/misc/scope)是对有关联的*npm*包进行分组的一种方式。
|
||||||
|
|
||||||
We import a scoped package the same way we'd import a *normal* package.
|
We import a scoped package the same way we'd import a *normal* package.
|
||||||
The only difference, from a consumer perspective,
|
The only difference, from a consumer perspective,
|
||||||
is that the package name begins with the Angular *scope name*, `@angular`.
|
is that the package name begins with the Angular *scope name*, `@angular`.
|
||||||
|
|
||||||
|
我们使用和导入*普通*包相同的方式导入范围化包。
|
||||||
|
从消费者的视角看,唯一的不同是那些包的名字是用Angular的*范围名*`@angular`开头儿的。
|
||||||
// #enddocregion n-s
|
// #enddocregion n-s
|
||||||
+makeExample('../docs/_fragments/architecture/ts/app/app.component.ts', 'import')(format=".")
|
+makeExample('../docs/_fragments/architecture/ts/app/app.component.ts', 'import')(format=".")
|
||||||
// #docregion n-s
|
// #docregion n-s
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
## Structural Directive
|
## Structural Directive
|
||||||
## 结构型指令
|
## 结构型指令(Structural Directive)
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
A category of [Directive](#directive) that can
|
A category of [Directive](#directive) that can
|
||||||
|
@ -876,7 +887,7 @@ include _util-fns
|
||||||
.l-main-section
|
.l-main-section
|
||||||
:marked
|
:marked
|
||||||
## Template
|
## Template
|
||||||
## 模板
|
## 模板(Template)
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
A template is a chunk of HTML that Angular uses to render a [view](#view) with
|
A template is a chunk of HTML that Angular uses to render a [view](#view) with
|
||||||
|
@ -891,7 +902,7 @@ include _util-fns
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
## Template Expression
|
## Template Expression
|
||||||
## 模板表达式
|
## 模板表达式(Template Expression)
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
An expression in a JavaScript-like syntax that Angular evaluates within
|
An expression in a JavaScript-like syntax that Angular evaluates within
|
||||||
|
@ -903,7 +914,7 @@ include _util-fns
|
||||||
// #docregion t2
|
// #docregion t2
|
||||||
:marked
|
:marked
|
||||||
## Transpile
|
## Transpile
|
||||||
## 编译
|
## 转译(Transpile)
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
The process of transforming code written in one form of JavaScript
|
The process of transforming code written in one form of JavaScript
|
||||||
|
@ -948,7 +959,7 @@ include _util-fns
|
||||||
.l-main-section
|
.l-main-section
|
||||||
:marked
|
:marked
|
||||||
## View
|
## View
|
||||||
## 视图
|
## 视图(View)
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
A view is a portion of the screen that displays information and responds
|
A view is a portion of the screen that displays information and responds
|
||||||
|
@ -977,7 +988,7 @@ include _util-fns
|
||||||
<a id="Z"></a>
|
<a id="Z"></a>
|
||||||
:marked
|
:marked
|
||||||
## Zones
|
## Zones
|
||||||
## 区域
|
## 区域(Zones)
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
Zones are a mechanism for encapsulating and intercepting
|
Zones are a mechanism for encapsulating and intercepting
|
||||||
|
|
|
@ -223,7 +223,7 @@ code-example(language="bash").
|
||||||
`AppComponent`该如何在运行中获得一个具体的`HeroService`实例呢?
|
`AppComponent`该如何在运行中获得一个具体的`HeroService`实例呢?
|
||||||
|
|
||||||
### Do we *new* the *HeroService*? No way!
|
### Do we *new* the *HeroService*? No way!
|
||||||
### 我们要自己 *new* 出这个 *HeroService* 吗?没门!
|
### 我们要自己 *new* 出这个 *HeroService* 吗?不!
|
||||||
We could create a new instance of the `HeroService` with "new" like this:
|
We could create a new instance of the `HeroService` with "new" like this:
|
||||||
|
|
||||||
固然,我们可以使用`new`关键字来创建`HeroService`的实例,就像这样:
|
固然,我们可以使用`new`关键字来创建`HeroService`的实例,就像这样:
|
||||||
|
@ -238,7 +238,7 @@ code-example(language="bash").
|
||||||
we'll have to find every place we create the service and fix it.
|
we'll have to find every place we create the service and fix it.
|
||||||
Running around patching code is error prone and adds to the test burden.
|
Running around patching code is error prone and adds to the test burden.
|
||||||
|
|
||||||
* 我们的组件将不得不懂得该如何创建`HeroService`。
|
* 我们的组件将不得不弄清楚该如何创建`HeroService`。
|
||||||
如果有一天我们修改了`HeroService`的构造函数,我们不得不找出创建过此服务的每一处代码,并修改它。
|
如果有一天我们修改了`HeroService`的构造函数,我们不得不找出创建过此服务的每一处代码,并修改它。
|
||||||
而给代码打补丁的行为容易导致错误,并增加了测试的负担。
|
而给代码打补丁的行为容易导致错误,并增加了测试的负担。
|
||||||
|
|
||||||
|
@ -266,7 +266,7 @@ code-example(language="bash").
|
||||||
We get it. Really we do.
|
We get it. Really we do.
|
||||||
But it is so ridiculously easy to avoid these problems that there is no excuse for doing it wrong.
|
But it is so ridiculously easy to avoid these problems that there is no excuse for doing it wrong.
|
||||||
|
|
||||||
有办法了,真的!这个办法真是简单得不可思议,它能解决这些问题,你就再也没有犯错误的接口了。
|
有办法了,真的!这个办法真是简单得不可思议,它能解决这些问题,你就再也没有犯错误的借口了。
|
||||||
|
|
||||||
### Inject the *HeroService*
|
### Inject the *HeroService*
|
||||||
### 注入 *HeroService*
|
### 注入 *HeroService*
|
||||||
|
@ -307,8 +307,7 @@ code-example(language="bash").
|
||||||
如果现在运行我们的代码,Angular就会失败,并报错:
|
如果现在运行我们的代码,Angular就会失败,并报错:
|
||||||
code-example(format="." language="html").
|
code-example(format="." language="html").
|
||||||
EXCEPTION: No provider for HeroService! (AppComponent -> HeroService)
|
EXCEPTION: No provider for HeroService! (AppComponent -> HeroService)
|
||||||
|
(异常:没有HeroService的供应商!(AppComponent -> HeroService))
|
||||||
EXCEPTION: No provider for HeroService! (AppComponent -> HeroService) —— 异常:没有HeroService的供应商!(AppComponent -> HeroService)
|
|
||||||
:marked
|
:marked
|
||||||
We have to teach the *injector* how to make a `HeroService` by registering a `HeroService` **provider**.
|
We have to teach the *injector* how to make a `HeroService` by registering a `HeroService` **provider**.
|
||||||
Do that by adding the following `providers` array property to the bottom of the component metadata
|
Do that by adding the following `providers` array property to the bottom of the component metadata
|
||||||
|
|
Loading…
Reference in New Issue