基础知识-架构 一审完毕
This commit is contained in:
parent
3748672331
commit
257cf324f6
|
@ -151,7 +151,7 @@ figure
|
|||
|
||||
Angular本身就是通过npm包发布的一组库模块,它们都以`@angular`为前缀。
|
||||
每个Angular库中都包含一个[封装桶](../glossary.html#barrel)模块。
|
||||
它实际上是一个公开的外观层(façade),囊括了一些逻辑上相关的私有模块。
|
||||
它实际上是一个公开的外观层façade,囊括了一些逻辑上相关的私有模块。
|
||||
|
||||
The `@angular/core` library is the primary Angular library module from which we get most of what we need.
|
||||
|
||||
|
@ -561,7 +561,7 @@ figure
|
|||
They tend to appear within an element tag like attributes,
|
||||
sometimes by name but more often as the target of an assignment or a binding.
|
||||
|
||||
它们往往以Attribute的形式出现在元素标签中,偶尔以名字的形式,但多数时候还是作为赋值或绑定的目标。
|
||||
它们往往像Attribute一样出现在元素标签中,偶尔会以名字的形式出现(译注:如`<my-hero-detail name="superman"></my-hero-detail>`,表示把hero-detail组件的name属性赋值为"superman",并且永不再变 —— 也就是一次性赋值,但不绑定),但多数时候还是作为赋值目标或绑定目标。
|
||||
|
||||
**Structural** directives alter layout by adding, removing, and replacing elements in DOM.
|
||||
|
||||
|
@ -584,21 +584,21 @@ figure
|
|||
|
||||
The `ngModel` directive, which implements two-way data binding, is an example of an attribute directive.
|
||||
|
||||
`ngModel`指令是一个Attribute型指令的范例,它实现了双向数据绑定。
|
||||
`ngModel`指令就是Attribute型指令的一个例子,它实现了双向数据绑定。
|
||||
+makeExample('architecture/ts/app/hero-detail.component.html', 'ngModel')(format=".")
|
||||
:marked
|
||||
It modifies the behavior of an existing element (typically an `<input>`)
|
||||
by setting its display value property and responding to change events.
|
||||
|
||||
它修改了现有元素(`<input>`就是典型)的行为,让它显示属性值,并从修改事件中得到回应。
|
||||
它修改了现有元素(典型的是`<input>`)的行为,让它显示属性值,并从change事件中得到回应。
|
||||
|
||||
Angular ships with a few other directives that either alter the layout structure
|
||||
(e.g. [ngSwitch](template-syntax.html#ngSwitch))
|
||||
or modify aspects of DOM elements and components
|
||||
(e.g. [ngStyle](template-syntax.html#ngStyle) and [ngClass](template-syntax.html#ngClass)).
|
||||
|
||||
Angular内置了少量其它指令,或者修改结构布局(如[ngSwitch](template-syntax.html#ngSwitch))或修改DOM元素和组件的各个方面
|
||||
(比如[ngStyle](template-syntax.html#ngStyle)和[ngClass](template-syntax.html#ngClass))。
|
||||
Angular内置了少量其它指令,它们或者修改结构布局(如[ngSwitch](template-syntax.html#ngSwitch)),或者修改DOM元素和组件的各个方面
|
||||
(如[ngStyle](template-syntax.html#ngStyle)和[ngClass](template-syntax.html#ngClass))。
|
||||
|
||||
And of course we can write our own directives.
|
||||
|
||||
|
@ -619,11 +619,12 @@ figure
|
|||
Almost anything can be a service.
|
||||
A service is typically a class with a narrow, well-defined purpose. It should do something specific and do it well.
|
||||
|
||||
几乎任何东西都能是一个服务。
|
||||
服务是一个典型的类,具有专注的、定义良好的用途。它应该做一些指定的事,并且做好。
|
||||
几乎任何东西都可以是一个服务。
|
||||
典型的服务是一个类,具有专注的、经过良好定义的用途。它应该做一些具体的事情,并做好。
|
||||
<br clear="all">
|
||||
:marked
|
||||
Examples include:
|
||||
|
||||
例如:
|
||||
* logging service
|
||||
* 日志服务
|
||||
|
@ -634,14 +635,14 @@ figure
|
|||
* tax calculator
|
||||
* 税款计算器
|
||||
* application configuration
|
||||
* 应用配置
|
||||
* 应用程序配置
|
||||
|
||||
There is nothing specifically *Angular* about services. Angular itself has no definition of a *service*.
|
||||
There is no *ServiceBase* class.
|
||||
|
||||
Angular对于服务没什么特别的要求。
|
||||
Angular自己对于服务也没有什么限定。
|
||||
Angular甚至都没有一个 *ServiceBase* 类。
|
||||
Angular本身对于服务也没有什么定义。
|
||||
它甚至都没有*ServiceBase*类。
|
||||
|
||||
Yet services are fundamental to any Angular application.
|
||||
|
||||
|
@ -655,8 +656,8 @@ figure
|
|||
Here's a `HeroService` that fetches heroes and returns them in a resolved [promise](http://exploringjs.com/es6/ch_promises.html).
|
||||
The `HeroService` depends on the `LoggerService` and another `BackendService` that handles the server communication grunt work.
|
||||
|
||||
下面是一个`HeroService`,用于获取英雄数据,并且通过一个解析的[承诺Promise](http://exploringjs.com/es6/ch_promises.html)返回它们。
|
||||
`HeroService`依赖`LoggerService`和另一个`BackendService`,用于处理服务器通讯工作。
|
||||
下面是一个`HeroService`类,用于获取英雄数据,并通过一个已解决的[承诺Promise](http://exploringjs.com/es6/ch_promises.html)返回它们。
|
||||
`HeroService`还依赖于`LoggerService`和另一个用来处理服务器通讯工作的`BackendService`。
|
||||
+makeExample('architecture/ts/app/hero.service.ts', 'class', 'app/hero.service.ts (只有类)')(format=".")
|
||||
:marked
|
||||
Services are everywhere.
|
||||
|
@ -669,7 +670,7 @@ figure
|
|||
|
||||
我们的组件是服务的主要消费者。它们依赖服务来处理大多数“苦差事”。
|
||||
它们不需要从服务器获得数据,它们不需要验证输入,它们不需要直接往控制台写日志。
|
||||
它们把任务委托给这些服务。
|
||||
它们只要把任务委托给这些服务。
|
||||
|
||||
A component's job is to enable the user experience and nothing more. It mediates between the view (rendered by the template)
|
||||
and the application logic (which often includes some notion of a "model"). A good component presents
|
||||
|
@ -681,13 +682,13 @@ figure
|
|||
Angular doesn't *enforce* these principles.
|
||||
It won't complain if we write a "kitchen sink" component with 3000 lines.
|
||||
|
||||
Angular不 *强制要求* 我们遵循这些原则。
|
||||
即使我们用3000行写了一个“厨房洗碗槽”组件,它也不会抱怨什么。
|
||||
Angular不会*强制要求*我们遵循这些原则。
|
||||
即使我们花3000行代码写了一个“厨房洗碗槽”组件,它也不会抱怨什么。
|
||||
|
||||
Angular does help us *follow* these principles by making it easy to factor our
|
||||
application logic into services and make those services available to components through *dependency injection*.
|
||||
|
||||
Angular帮助我们 *追随* 这些原则 —— 通过让我们能更容易的把应用逻辑拆分成组件,并通过 *依赖注入* 来让这些服务可以在组件中使用。
|
||||
Angular帮助我们*追随*这些原则 —— 它让我们能更轻易的把应用逻辑拆分成组件,并通过*依赖注入*来让这些服务在组件中可用。
|
||||
|
||||
.l-main-section
|
||||
<a id="dependency-injection"></a>
|
||||
|
@ -701,8 +702,8 @@ figure
|
|||
with the fully-formed dependencies it requires. Most dependencies are services.
|
||||
Angular uses dependency injection to provide new components with the services they need.
|
||||
|
||||
“依赖注入”是提供类的新实例的一种方式,还包括它所需的全部依赖。大多数依赖也是服务。
|
||||
Angular也使用依赖注入提供我们需要的组件,包括组件依赖的服务。
|
||||
“依赖注入”是提供类的新实例的一种方式,还负责处理好它所需的全部依赖。大多数依赖都是服务。
|
||||
Angular也使用依赖注入提供我们需要的组件,包括组件所需的服务。
|
||||
<br clear="all">
|
||||
:marked
|
||||
In TypeScript, Angular can tell which services a component needs by looking at the types of its constructor parameters.
|
||||
|
@ -725,7 +726,7 @@ figure
|
|||
This is what we mean by *dependency injection*.
|
||||
|
||||
注入器会维护一个服务实例的容器,存放着以前创建的实例。
|
||||
如果容器中还没有所请求的服务实例,注入器就创建一个,并且添加到容器中,然后把这个服务返回给Angular。
|
||||
如果容器中还没有所请求的服务实例,注入器就会创建一个,并且添加到容器中,然后把这个服务返回给Angular。
|
||||
当所有的服务都被解析完并返回时,Angular会以这些服务为参数去调用组件的构造函数。
|
||||
这就是我们称其为 *依赖注入* 的原因。
|
||||
|
||||
|
@ -742,20 +743,20 @@ figure
|
|||
In brief, we must have previously registered a **provider** of the `HeroService` with the `Injector`.
|
||||
A provider is something that can create or return a service, typically the service class itself.
|
||||
|
||||
简单的说,我们必须有以前通过注入器注册过的`HeroService`**供应商(Provider)**。
|
||||
供应商就是某些我们用来创建并返回服务的东西,通常是这个服务类本身。
|
||||
简单的说,我们必须有以前通过注入器注册过的`HeroService`**供应商Provider**。
|
||||
供应商就是某些我们用来创建并返回服务的东西,通常就是这个“服务类”本身。
|
||||
|
||||
We can register providers at any level of the application component tree.
|
||||
We often do so at the root when we bootstrap the application so that
|
||||
the same instance of a service is available everywhere.
|
||||
|
||||
我们可以在应用的组件树中的任何级别上注册供应商。
|
||||
我们通常在应用启动时注册在根组件上,以便此服务的同一个实例在任何地方都时可用的。
|
||||
我们可以在应用程序的组件树中任何级别上注册供应商。
|
||||
我们通常在应用启动时注册在根组件上,以便此服务的同一个实例在任何地方都是可用的。
|
||||
+makeExample('architecture/ts/app/main.ts', 'bootstrap','app/main.ts (节选)')(format=".")
|
||||
:marked
|
||||
Alternatively, we might register at a component level ...
|
||||
|
||||
或者,我们也可以注册在组件层……
|
||||
或者,我们也可以把它注册在组件层……
|
||||
+makeExample('architecture/ts/app/hero-list.component.ts', 'providers','app/hero-list.component.ts (节选)')(format=".")
|
||||
:marked
|
||||
... in which case we get a new instance of the
|
||||
|
@ -770,15 +771,16 @@ figure
|
|||
在[依赖注入](dependency-injection.html)一章中,我们能学到关于它的全部知识。
|
||||
|
||||
The points to remember are:
|
||||
|
||||
需要记住的要点是:
|
||||
* dependency injection is wired into the framework and used everywhere.<br><br>
|
||||
* 依赖注入渗透到本框架中,并且随处可用。<br><br>
|
||||
* 依赖注入渗透在整个框架中,并且随处可用。<br><br>
|
||||
* the `Injector` is the main mechanism.
|
||||
* 注入器是本机制的核心。
|
||||
* 注入器`Injector`是本机制的核心。
|
||||
* an injector maintains a *container* of service instances that it created.
|
||||
* 注入器负责维护一个用于存放它创建的服务实例的 *容器* 。
|
||||
* 注入器负责维护一个*容器*,用于存放它创建过的服务实例。
|
||||
* an injector can create a new service instance using a *provider*.
|
||||
* 注入器能通过*供应商*创建一个新的服务实例。
|
||||
* 注入器能使用*供应商*创建一个新的服务实例。
|
||||
* a *provider* is a recipe for creating a service.
|
||||
* *供应商*是一个用于创建服务的“配方”。
|
||||
|
||||
|
@ -792,7 +794,7 @@ figure
|
|||
## 总结
|
||||
We've learned just a bit about the eight main building blocks of an Angular application
|
||||
|
||||
我们已经学到的这些只是关于应用的八个主要构造块儿的一点皮毛
|
||||
我们学到的这些只是关于应用的八个主要构造块儿的一点皮毛
|
||||
|
||||
1. [Module](#module)
|
||||
1. [模块Module](#module)
|
||||
|
@ -815,8 +817,8 @@ figure
|
|||
and it's more than enough to get going.
|
||||
But it doesn't include everything we'll need or want to know.
|
||||
|
||||
这是Angular应用中所有其它东西的基础,而且它已经绰绰有余了。
|
||||
但它还没有包括我们所要用的或想知道的一切。
|
||||
这是Angular应用中所有其它东西的基础。要继续向前,这已经绰绰有余了。
|
||||
但它仍然没有包含我们将要用到或想知道的全部。
|
||||
<a id="other-stuff"></a>
|
||||
.l-main-section
|
||||
:marked
|
||||
|
@ -832,11 +834,11 @@ figure
|
|||
>**Animations** - A forthcoming animation library makes it easy for developers to animate component behavior
|
||||
without deep knowledge of animation techniques or css.
|
||||
|
||||
>**动画Animations** - 即将到来的动画库让开发人员给组件添加动画行为变得更容易,而不需要对动画技术或css有深入了解。
|
||||
>**动画Animations** - 即将到来的动画库。它能让开发人员更轻易的给组件添加动画行为,而不需要对动画技术或css有深入的了解。
|
||||
|
||||
>**Bootstrap** - A method to configure and launch the root application component.
|
||||
|
||||
>**启动Bootstrap** - 配置和启动应用的根组件的一种方法。
|
||||
>**引导Bootstrap** - 配置和引导应用的根组件的方法。
|
||||
|
||||
>**Change Detection** - Learn how Angular decides that a component property value has changed and
|
||||
when to update the screen.
|
||||
|
@ -853,7 +855,7 @@ figure
|
|||
>**Events** - The DOM raises events. So can components and services. Angular offers mechanisms for
|
||||
publishing and subscribing to events including an implementation of the [RxJS Observable](https://github.com/zenparsing/es-observable) proposal.
|
||||
|
||||
>**事件Events** - DOM能触发事件。组件和服务也能。Angular提供的事件发布与订阅机制还包括[RxJS可观察Observable](https://github.com/zenparsing/es-observable)方案的一个实现。
|
||||
>**事件Events** - DOM能触发事件,组件和服务也能。Angular提供的事件发布与订阅机制还包括[RxJS可观察Observable](https://github.com/zenparsing/es-observable)方案的一个实现。
|
||||
|
||||
>**[Forms](forms.html)** - Support complex data entry scenarios with HTML-based validation and dirty checking.
|
||||
|
||||
|
@ -861,7 +863,7 @@ figure
|
|||
|
||||
>**[HTTP](server-communication.html)** - Communicate with a server to get data, save data, and invoke server-side actions with this Angular HTTP client.
|
||||
|
||||
>**[HTTP](server-communication.html)** - 通过这个Angular HTTP客户端,可以与服务器通讯来获得数据、保存数据和触发服务端动作。
|
||||
>**[HTTP](server-communication.html)** - 通过这个Angular HTTP客户端,可以与服务器通讯,以获得数据、保存数据和触发服务端动作。
|
||||
|
||||
>**[Lifecycle Hooks](lifecycle-hooks.html)** - We can tap into key moments in the lifetime of a component, from its creation to its destruction,
|
||||
by implementing the "Lifecycle Hook" interfaces.
|
||||
|
@ -872,7 +874,7 @@ figure
|
|||
We can put pipes in our templates to improve the user experience. For example,
|
||||
this `currency` pipe expression,
|
||||
|
||||
>**[管道Pipes](pipes.html)** - 服务转换值并且显示。我们可以把管道放在模板中,以增强用户体验。比如这个`currency`管道表达式,
|
||||
>**[管道Pipes](pipes.html)** - 这种服务会转换值以供显示。我们可以把管道放在模板中,以增强用户体验。比如这个`currency`管道表达式,
|
||||
<div style="margin-left:40px">
|
||||
code-example(language="javascript" linenumbers=".").
|
||||
price | currency:'USD':true
|
||||
|
|
|
@ -2,10 +2,12 @@
|
|||
## 关于中文版
|
||||
这是一份跟官方网站保持 **同步更新** 的中文版。虽然保持同步非常耗费精力,不过为了防止过时的内容误导读者,这份额外的付出还是很值得的。
|
||||
|
||||
我们全文采用意译的方式,在彻底理解作者意思的前提下用中文重新表述,力求做到“信雅达”。
|
||||
当然,即便如此,我们会错意的可能性也还是有的,所以我们的译稿都提供了中英文对照,如果你对某些语句有疑问,可以看一下对应的英文版内容。
|
||||
我们全文采用意译的方式,在确保理解作者意思的前提下用中文重新表述,力求做到“信雅达”,当原文难以直译时更是如此。在必要时,我们会加“译注”来辅助读者阅读。
|
||||
当然,即便如此,我们会错意的可能性也还是有的,所以我们的译稿都提供了中英文对照,如果你对某些语句有疑问,只要点一下,就可以显示对应的英文版内容,可自行对照理解。
|
||||
|
||||
本文档目前只完成了部分章节的初译,尚未完成审校和统稿,因此语言风格和表达等可能还有问题,欢迎到我们的[github](https://github.com/angular-live/angular.io)上提出issue。
|
||||
对少部分Angular之外比较罕见的专有名词,我们会直接在译文中写成中英双语,如:注入器Injector,而不再加额外的括号。不过这部分还没有系统的梳理,如果你发现哪里应该标注,请给我们提issue或Pull Request。
|
||||
|
||||
本文档目前只完成了部分章节的初译,尚未完成审校和统稿,因此语言风格和表达等可能还有问题,欢迎到我们的[github](https://github.com/angular-live/angular.io)上提出issue或Pull Request。
|
||||
|
||||
本文档的任何更新都会实时发布于我们的 [首发网站](http://www.angular.live) 。如果你要进行转载,请自行同步(不过小心别DDoS了我们),或者在想要同步到最新版时 [联系我们](mailto:traveller@163.com) 。
|
||||
## 授权方式
|
||||
|
|
Loading…
Reference in New Issue