From 20a55c54ed4e6ac94cfa27182e76f41024913195 Mon Sep 17 00:00:00 2001 From: Zhicheng Wang Date: Sun, 23 Jul 2017 11:51:25 +0800 Subject: [PATCH] docs(aio): merge latest chinese translations --- aio/content/_fragments/glossary-t2.md | 54 + aio/content/guide/ajs-quick-reference.md | 475 +++- aio/content/guide/animations.md | 247 +- aio/content/guide/aot-compiler.md | 425 ++- aio/content/guide/appmodule.md | 115 +- aio/content/guide/architecture.md | 483 +++- aio/content/guide/attribute-directives.md | 300 ++- aio/content/guide/browser-support.md | 216 +- aio/content/guide/cb-dependency-injection.md | 761 +++++- aio/content/guide/cb-index.md | 36 +- aio/content/guide/change-log.md | 242 +- aio/content/guide/cheatsheet.md | 6 +- aio/content/guide/cli-quickstart.md | 266 +- aio/content/guide/component-communication.md | 244 +- aio/content/guide/component-styles.md | 213 +- aio/content/guide/dependency-injection.md | 664 ++++- aio/content/guide/deployment.md | 369 ++- aio/content/guide/displaying-data.md | 199 +- aio/content/guide/dynamic-component-loader.md | 125 +- aio/content/guide/dynamic-form.md | 136 +- aio/content/guide/form-validation.md | 404 ++- aio/content/guide/forms.md | 553 +++- aio/content/guide/glossary.md | 605 ++++- .../hierarchical-dependency-injection.md | 154 +- aio/content/guide/i18n.md | 321 ++- aio/content/guide/index.md | 136 +- aio/content/guide/learning-angular.md | 40 +- aio/content/guide/lifecycle-hooks.md | 467 +++- aio/content/guide/ngmodule-faq.md | 1330 +++++++++- aio/content/guide/ngmodule.md | 966 ++++++- aio/content/guide/npm-packages.md | 260 +- aio/content/guide/pipes.md | 337 ++- aio/content/guide/quickstart.md | 38 +- aio/content/guide/reactive-forms.md | 779 +++++- aio/content/guide/router.md | 2357 ++++++++++++++++- aio/content/guide/security.md | 268 +- aio/content/guide/server-communication.md | 666 ++++- aio/content/guide/set-document-title.md | 58 +- aio/content/guide/setup-systemjs-anatomy.md | 107 +- aio/content/guide/setup.md | 158 +- aio/content/guide/structural-directives.md | 248 +- aio/content/guide/style-guide.md | 1246 +++++++-- aio/content/guide/template-syntax.md | 1612 ++++++++++- aio/content/guide/testing.md | 2081 ++++++++++++++- aio/content/guide/ts-to-js.md | 390 ++- aio/content/guide/typescript-configuration.md | 113 +- aio/content/guide/upgrade.md | 1200 ++++++++- aio/content/guide/user-input.md | 181 +- aio/content/guide/visual-studio-2015.md | 253 +- aio/content/guide/webpack.md | 429 ++- aio/content/tutorial/index.md | 63 +- aio/content/tutorial/toh-pt1.md | 122 +- aio/content/tutorial/toh-pt2.md | 204 +- aio/content/tutorial/toh-pt3.md | 186 +- aio/content/tutorial/toh-pt4.md | 296 ++- aio/content/tutorial/toh-pt5.md | 712 ++++- aio/content/tutorial/toh-pt6.md | 405 ++- 57 files changed, 23990 insertions(+), 1331 deletions(-) create mode 100644 aio/content/_fragments/glossary-t2.md diff --git a/aio/content/_fragments/glossary-t2.md b/aio/content/_fragments/glossary-t2.md new file mode 100644 index 0000000000..e9aad3590c --- /dev/null +++ b/aio/content/_fragments/glossary-t2.md @@ -0,0 +1,54 @@ +@description + + +## Transpile + +## 转译（transpile) + + +
+ + + +The process of transforming code written in one form of JavaScript +(such as TypeScript) into another form of JavaScript (such as [ES5](_fragments/glossary-t2#es5)). + +把一种形式的 JavaScript（例如 TypeScript）转换成另一种形式的 JavaScript（例如 [ES5](_fragments/glossary-t2#es5)）的过程。 + + +
+ + + +## TypeScript + + +
+ + + +A version of JavaScript that supports most [ECMAScript 2015](_fragments/glossary-t2#es2015) +language features such as [decorators](_fragments/glossary-t2#decorator). + +JavaScript 的一个版本，支持了几乎所有 [ECMAScript 2015](_fragments/glossary-t2#ecmascript=2015) 语言特性，例如[装饰器 (decorator)](_fragments/glossary-t2#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](_fragments/glossary-t2#es5). + +TypeScript 是 Angular 的首选语言，当然，你可以使用其它 JavaScript 方言，例如[ES5](_fragments/glossary-t2#es5)。 + +Read more about TypeScript at [typescriptlang.org](http://www.typescriptlang.org/). + +更多信息，见[typescript.org](http://www.typescriptlang.org/)。 + +
+ diff --git a/aio/content/guide/ajs-quick-reference.md b/aio/content/guide/ajs-quick-reference.md index 5889effca4..919059381d 100644 --- a/aio/content/guide/ajs-quick-reference.md +++ b/aio/content/guide/ajs-quick-reference.md @@ -1,8 +1,8 @@ @title -AngularJS to Angular Quick Reference +从 AngularJS 到 Angular 快速参考 @intro -Learn how AngularJS concepts and techniques map to Angular. +学习如何把 AngularJS 中的概念和技术对应到 Angular 中 @description @@ -16,27 +16,49 @@ _AngularJS_ is the name for all v1.x versions of Angular. This guide helps you transition from AngularJS to Angular by mapping AngularJS syntax to the equivalent Angular syntax. +在AngularJS和Angular之间，有很多不同的概念和语法。 +本章提供了一个快速的参考指南，指出一些常用的AngularJS语法及其在Angular中的等价物。 + **See the Angular syntax in this **. +**可到中查看Angular语法**。 + ## Contents + 内容 + * [Template basics](guide/ajs-quick-reference#template-basics)—binding and local variables. + [模板基础](guide/ajs-quick-reference#template-basics) - 绑定变量与局部变量。 + * [Template directives](guide/ajs-quick-reference#template-directives)—built-in directives `ngIf` and `ngClass`. + [模板指令](guide/ajs-quick-reference#template-directives) - 内置指令`ngIf`和`ngClass`。 + * [Filters/pipes](guide/ajs-quick-reference#filters-pipes)—built-in *filters*, known as *pipes* in Angular. + [过滤器/管道](guide/ajs-quick-reference#filters-pipes) - 内置*过滤器(filter)*，在Angular中叫*管道(pipe)*。 + * [Modules/controllers/components](guide/ajs-quick-reference#controllers-components)—*modules* in Angular are slightly different from *modules* in AngularJS, and *controllers* are *components* in Angular. + [模块/控制器/组件](guide/ajs-quick-reference#controllers-components) - Angular 中的*模块*和AngularJS 中的略有不同；而*控制器*在Angular 中叫组件。 + * [Style sheets](guide/ajs-quick-reference#style-sheets)—more options for CSS than in AngularJS. + [样式表](guide/ajs-quick-reference#style-sheets) - Angular 相对AngularJS 在 CSS 方面有了更多选项。 + ## Template basics + +## 模板基础 + Templates are the user-facing part of an Angular application and are written in HTML. The following table lists some of the key AngularJS template features with their equivalent Angular template syntax. +模板是Angular应用中的门面部分，它是用HTML写的。下表中是一些AngularJS中的关键模板特性及其在Angular中的等价语法。 + @@ -66,6 +88,9 @@ The following table lists some of the key AngularJS template features with their ### Bindings/interpolation + + ### 绑定/插值表达式 + Your favorite hero is: {{vm.favoriteHero}} @@ -75,15 +100,24 @@ The following table lists some of the key AngularJS template features with their This binds the value of the element to a property in the controller associated with this template. + 在AngularJS中，花括号中的表达式代表单向绑定。 + 它把元素的值绑定到了与模板相关控制器的属性上。 + When using the `controller as` syntax, the binding is prefixed with the controller alias (`vm` or `$ctrl`) because you have to be specific about the source of the binding. + + 当使用`controller as`语法时，该绑定需要用控制器的别名(`vm`)为前缀，这是因为我们不得不通过它来指定绑定源。 + @@ -106,6 +148,9 @@ The following table lists some of the key AngularJS template features with their ### Filters + + ### 过滤器 + <td>{{movie.title | uppercase}}</td> @@ -113,13 +158,21 @@ The following table lists some of the key AngularJS template features with their To filter output in AngularJS templates, use the pipe character (|) and one or more filters. + 要在AngularJS中过滤输出，使用管道字符(|)以及一个或多个过滤器。 + This example filters the `title` property to uppercase. + + 在这个例子中，我们把`title`属性过滤成了大写形式。 + @@ -140,6 +198,9 @@ The following table lists some of the key AngularJS template features with their ### Local variables + + ### 局部变量 + <tr ng-repeat="movie in vm.movies"> <td>{{movie.title}}</td> @@ -148,12 +209,18 @@ The following table lists some of the key AngularJS template features with their Here, `movie` is a user-defined local variable. + + 这里的`movie`是一个用户定义的局部变量 + @@ -173,13 +244,22 @@ The following table lists some of the key AngularJS template features with their [Back to top](guide/ajs-quick-reference#top) +[返回顶部](guide/ajs-quick-reference#top) + ## Template directives + +## 模板指令 + AngularJS provides more than seventy built-in directives for templates. Many of them aren't needed in Angular because of its more capable and expressive binding system. The following are some of the key AngularJS built-in directives and their equivalents in Angular. +AngularJS 为模板提供了七十多个内置指令。 +在 Angular 中，它们很多都已经不需要了，因为 Angular 有了一个更加强大、快捷的绑定系统。 +下面是一些AngularJS 中的关键指令及其在 Angular 中的等价物。 +
### Bindings/interpolation + + ### 绑定/插值表达式 + @@ -94,8 +128,16 @@ The following table lists some of the key AngularJS template features with their The context of the binding is implied and is always the associated component, so it needs no reference variable. + 在Angular中，花括号中的模板表达式同样代表单向绑定。 + 它把元素的值绑定到了组件的属性上。 + 它绑定的上下文变量是隐式的，并且总是关联到组件。 + 所以，它不需要一个引用变量。 + For more information, see the [Interpolation](guide/template-syntax#interpolation) section of the [Template Syntax](guide/template-syntax) page. + + 要了解更多，请参见[模板语法](guide/template-syntax)中的[插值表达式](guide/template-syntax#interpolation)部分。 +
### Pipes + + ### 管道 + @@ -129,7 +182,12 @@ The following table lists some of the key AngularJS template features with their Many (but not all) of the built-in filters from AngularJS are built-in pipes in Angular. + 在Angular中，我们使用相似的语法 —— 用管道字符(|)来过滤输出，但是现在直接把它叫做**管道**了。 + 很多(但不是所有)AngularJS中的内置过滤器也成了Angular中的内置管道。 + For more information, see [Filters/pipes](guide/ajs-quick-reference#filters-pipes) below. + + 请参见下面[过滤器/管道](guide/ajs-quick-reference#filters-pipes)了解更多信息。
### Input variables + + ### 输入变量 + @@ -161,8 +228,12 @@ The following table lists some of the key AngularJS template features with their Angular has true template input variables that are explicitly defined using the `let` keyword. + 在Angular中，我们有了真正的模板输入变量，它需要使用`let`关键字进行明确定义。 + For more information, see the [ngFor micro-syntax](guide/template-syntax#microsyntax) section of the [Template Syntax](guide/template-syntax) page. + + 要了解更多信息，请参见[模板语法](guide/template-syntax)中的[ngFor微语法](guide/template-syntax#microsyntax)部分。
@@ -216,15 +296,24 @@ The following are some of the key AngularJS built-in directives and their equiva The application startup process is called **bootstrapping**. + 应用的启动过程被称为**引导**。 + Although you can bootstrap an AngularJS app in code, many applications bootstrap declaratively with the `ng-app` directive, giving it the name of the application's module (`movieHunter`). + + 虽然可以从代码中引导Angular应用， + 但很多应用都是通过`ng-app`指令进行声明式引导的，只要给它一个应用模块的名字(`movieHunter`)就可以了。 + @@ -262,9 +356,17 @@ The following are some of the key AngularJS built-in directives and their equiva key of the object defined as a CSS class name, and each value defined as a template expression that evaluates to a Boolean value. + 在AngularJS中，`ng-class`指令会基于一个表达式来包含/排除某些CSS类。该表达式通常是一个“键-值”型的控制对象， + 对象中的每一个键代表一个CSS类名，每一个值定义为一个返回布尔值的模板表达式。 + In the first example, the `active` class is applied to the element if `isActive` is true. + 在第一个例子中，当`isActive`为真时，`active`类会被应用到元素上。 + You can specify multiple classes, as shown in the second example. + + 就像第二个例子中展示的，可以指定多个CSS类。 + @@ -307,16 +420,26 @@ The following are some of the key AngularJS built-in directives and their equiva In AngularJS, the `ng-click` directive allows you to specify custom behavior when an element is clicked. + 在AngularJS中，`ng-click`指令指定当元素被点击时的自定义行为。 + In the first example, when the user clicks the button, the `toggleImage()` method in the controller referenced by the `vm` `controller as` alias is executed. + 在第一个例子中，如果用户点击了这个按钮，那么控制器的`toggleImage()`方法就会被执行，这个控制器是被`controller as`中指定的`vm`别名所引用的。 + The second example demonstrates passing in the `$event` object, which provides details about the event to the controller. + + 第二个例子演示了传入`$event`对象，它提供了事件的详情，并被传到控制器。 + @@ -358,12 +495,19 @@ The following are some of the key AngularJS built-in directives and their equiva In AngularJS, the `ng-controller` directive attaches a controller to the view. Using the `ng-controller` (or defining the controller as part of the routing) ties the view to the controller code associated with that view. + + 在AngularJS中，`ng-controller`指令把控制器附加到视图上。 + 使用`ng-controller`(或把控制器定义为路由的一部分)把视图及其控制器的代码联系在一起。 + @@ -386,14 +535,25 @@ The following are some of the key AngularJS built-in directives and their equiva ### ng-hide In AngularJS, the `ng-hide` directive shows or hides the associated HTML element based on an expression. For more information, see [ng-show](guide/ajs-quick-reference#ng-show). + + 在AngularJS中，`ng-hide`指令会基于一个表达式显示或隐藏相关的HTML元素。 + 参见[ng-show](guide/ajs-quick-reference#ng-show)了解更多。 + @@ -413,19 +573,28 @@ The following are some of the key AngularJS built-in directives and their equiva can replace the binding expression with the appropriate URL before the browser fetches from that URL. + `ng-href`指令允许AngularJS对`href`属性进行预处理，以便它能在浏览器获取那个URL之前，使用一个返回适当URL的绑定表达式替换它。 + In AngularJS, the `ng-href` is often used to activate a route as part of navigation. + + 在AngularJS 中，`ng-href`通常用来作为导航的一部分，激活一个路由。 <a ng-href="#movies">Movies</a> Routing is handled differently in Angular. + + 路由在Angular中的处理方式不同。 @@ -464,7 +643,11 @@ The following are some of the key AngularJS built-in directives and their equiva In AngularJS, the `ng-if` directive removes or recreates a portion of the DOM, based on an expression. If the expression is false, the element is removed from the DOM. + 在AngularJS中，`ng-if`指令会根据一个表达式来移除或重建DOM中的一部分。如果表达式为假，元素就会被从DOM中移除。 + In this example, the `
### Bootstrapping + + ### 引导 + @@ -239,7 +328,12 @@ The following are some of the key AngularJS built-in directives and their equiva in `main.ts` and the application's root component (`AppComponent`) in `app.module.ts`. + Angular 没有引导指令。 + 我们总是通过显式调用一个`bootstrap`函数，并传入应用模块的名字(`AppComponent`)来启动应用。 + For more information see the [Setup](guide/setup) page. + + 要了解更多，参见[搭建本地开发环境](guide/setup)。
@@ -279,16 +381,27 @@ The following are some of the key AngularJS built-in directives and their equiva In Angular, the `ngClass` directive works similarly. It includes/excludes CSS classes based on an expression. + 在Angular中，`ngClass`指令用类似的方式工作。 + 它根据一个表达式包含/排除某些CSS类。 + In the first example, the `active` class is applied to the element if `isActive` is true. + 在第一个例子中，如果`isActive`为真，则`active`类被应用到那个元素上。 + You can specify multiple classes, as shown in the second example. + 就像第二个例子中所展示的那样，可以同时指定多个类。 + Angular also has **class binding**, which is a good way to add or remove a single class, as shown in the third example. + Angular还有**类绑定**，它是单独添加或移除一个类的好办法 —— 就像第三个例子中展示的。 + For more information see the [Attribute, class, and style bindings](guide/template-syntax#other-bindings) section of the [Template Syntax](guide/template-syntax) page. + 要了解更多信息，参见[模板语法](guide/template-syntax)中的[属性、CSS类和样式绑定](guide/template-syntax#other-bindings)部分。 +
### Bind to the `click` event + + ### 绑定到`click`事件 + @@ -325,21 +448,35 @@ The following are some of the key AngularJS built-in directives and their equiva AngularJS event-based directives do not exist in Angular. Rather, define one-way binding from the template view to the component using **event binding**. + AngularJS基于事件的指令在Angular中已经不存在了。 + 不过，可以使用**事件绑定**来定义从模板视图到组件的单向数据绑定。 + For event binding, define the name of the target event within parenthesis and specify a template statement, in quotes, to the right of the equals. Angular then sets up an event handler for the target event. When the event is raised, the handler executes the template statement. + 要使用事件绑定，把目标事件的名字放在圆括号中，并且使用等号右侧引号中的模板语句对它赋值。 + 然后Angular为这个目标时间设置事件处理器。当事件被触发时，这个处理器就会执行模板语句。 + In the first example, when a user clicks the button, the `toggleImage()` method in the associated component is executed. + 在第一个例子中，当用户点击此按钮时，相关组件中的`toggleImage()`方法就被执行了。 + The second example demonstrates passing in the `$event` object, which provides details about the event to the component. + 第二个例子演示了如何传入`$event`对象，它为组件提供了此事件的详情。 + For a list of DOM events, see: https://developer.mozilla.org/en-US/docs/Web/Events. + 要查看DOM事件的列表，请参见[网络事件](https://developer.mozilla.org/en-US/docs/Web/Events)。 + For more information, see the [Event binding](guide/template-syntax#event-binding) section of the [Template Syntax](guide/template-syntax) page. + 要了解更多，请参见[模板语法](guide/template-syntax)中的[事件绑定](guide/template-syntax#event-binding)部分。 +
### Component decorator + + ### Component装饰器 + @@ -372,8 +516,13 @@ The following are some of the key AngularJS built-in directives and their equiva In Angular, the template no longer specifies its associated controller. Rather, the component specifies its associated template as part of the component class decorator. + 在Angular中，模板不用再指定它相关的控制器。 + 反过来，组件会在组件类的装饰器中指定与它相关的模板。 + For more information, see [Architecture Overview](guide/architecture#component). + 要了解更多，请参见[架构概览](guide/architecture#component)。 +
### Bind to the `hidden` property + + ### 绑定`hidden`属性 + In Angular, you use property binding; there is no built-in *hide* directive. For more information, see [ng-show](guide/ajs-quick-reference#ng-show). + + 在Angular中，并没有一个内置的*hide*指令，可以改用属性绑定。 + 参见[ng-show](guide/ajs-quick-reference#ng-show)了解更多。 +
### Bind to the `href` property + + ### 绑定到`href`属性 + @@ -434,10 +603,18 @@ The following are some of the key AngularJS built-in directives and their equiva Angular uses property binding; there is no built-in *href* directive. Place the element's `href` property in square brackets and set it to a quoted template expression. + 在Angular中，并没有内置的*href*指令，改用属性绑定。 + 我们把元素的`href`属性放在方括号中，并把它设成一个引号中的模板表达式。 + For more information see the [Property binding](guide/template-syntax#property-binding) section of the [Template Syntax](guide/template-syntax) page. + 要了解[属性绑定](guide/template-syntax#property-binding)的更多知识，参见[模板语法](guide/template-syntax)。 + In Angular, `href` is no longer used for routing. Routing uses `routerLink`, as shown in the following example. + + 在Angular中，`href`不再用作路由，而是改用第三个例子中所展示的`routerLink`指令。 + @@ -446,6 +623,8 @@ The following are some of the key AngularJS built-in directives and their equiva For more information on routing, see the [RouterLink binding](guide/router#router-link) section of the [Routing & Navigation](guide/router) page. + 要了解关于路由的更多信息，请参见[路由与导航](guide/router)的[RouterLink绑定](guide/router#router-link)部分。 +
` element is removed from the DOM unless the `movies` array has a length greater than zero. + + 在这个例子中，除非`movies`数组的长度大于0，否则`
`元素就会被从DOM中移除。
@@ -479,10 +662,19 @@ The following are some of the key AngularJS built-in directives and their equiva The `*ngIf` directive in Angular works the same as the `ng-if` directive in AngularJS. It removes or recreates a portion of the DOM based on an expression. + Angular中的`*ngIf`指令与AngularJS中的`ng-if`指令一样， + 它根据表达式的值移除或重建DOM中的一部分。 + In this example, the `` element is removed from the DOM unless the `movies` array has a length. + 在这个例子中，除非`movies`数组的长度大于0，否则`
`元素就会被从DOM中移除。 + The (*) before `ngIf` is required in this example. For more information, see [Structural Directives](guide/structural-directives). + + 在这个例子中`ngIf`前的星号(*)是必须的。 + 要了解更多信息，参见[结构型指令](guide/structural-directives)。 + @@ -500,12 +692,17 @@ The following are some of the key AngularJS built-in directives and their equiva In AngularJS, the `ng-model` directive binds a form control to a property in the controller associated with the template. This provides **two-way binding**, whereby any change made to the value in the view is synchronized with the model, and any change to the model is synchronized with the value in the view. + + 在Angular1中，`ng-model`指令把一个表单控件绑定到了模板相关控制器的一个属性上。 + 这提供了**双向绑定**功能，因此，任何对视图中值的改动，都会同步到模型中，对模型的改动，也会同步到视图中。 + @@ -535,7 +738,11 @@ The following are some of the key AngularJS built-in directives and their equiva In AngularJS, the `ng-repeat` directive repeats the associated DOM element for each item in the specified collection. + 在Angular1中，`ng-repeat`指令会为指定集合中的每一个条目重复渲染相关的DOM元素。 + In this example, the table row (``) element repeats for each movie object in the collection of movies. + + 在这个例子中，对`movies`集合中的每一个`movie`对象重复渲染了这个表格行元素(``)。 ` in this example) and its contents into a template and uses that template to instantiate a view for each item in the list. + Angular中的`*ngFor`指令类似于AngularJS中的`ng-repeat`指令。 + 它为指定集合中的每一个条目重复渲染了相关的DOM元素。 + 更准确的说，它把被界定出来的元素(这个例子中是``)及其内容转成了一个模板，并使用那个模板来为列表中的每一个条目实例化一个视图。 + Notice the other syntax differences: The (*) before `ngFor` is required; the `let` keyword identifies `movie` as an input variable; the list preposition is `of`, not `in`. + 请注意其它语法上的差异： + 在`ngFor`前面的星号(*)是必须的；`let`关键字把`movie`标记成一个输入变量；列表中使用的介词是`of`，而不再是`in`。 + For more information, see [Structural Directives](guide/structural-directives). + + 要了解更多信息，参见[结构性指令](guide/structural-directives)。 @@ -578,13 +794,20 @@ The following are some of the key AngularJS built-in directives and their equiva In AngularJS, the `ng-show` directive shows or hides the associated DOM element, based on an expression. + 在AngularJS中，`ng-show`指令根据一个表达式来显示或隐藏相关的DOM元素。 + In this example, the `
` element is shown if the `favoriteHero` variable is truthy. + + 在这个例子中，如果`favoriteHero`变量为真，`
`元素就会显示出来。
@@ -610,20 +843,28 @@ The following are some of the key AngularJS built-in directives and their equiva ### ng-src + <img ng-src="{{movie.imageurl}}"> + The `ng-src` directive allows AngularJS to preprocess the `src` property so that it can replace the binding expression with the appropriate URL before the browser fetches from that URL. + + `ng-src`指令允许AngularJS对`src`属性进行预处理，以便它能够在浏览器获取此URL之前，用一个返回适当URL的绑定表达式替换它。 + @@ -644,8 +891,10 @@ The following are some of the key AngularJS built-in directives and their equiva ### ng-style + <div ng-style="{color: colorPreference}"> + @@ -654,7 +903,13 @@ The following are some of the key AngularJS built-in directives and their equiva key of the object defined as a CSS property, and each value defined as an expression that evaluates to a value appropriate for the style. + 在AngularJS中，`ng-style`指令根据一个绑定表达式设置一个HTML元素的CSS样式。 + 该表达式通常是一个“键-值”形式的控制对象，对象的每个键都是一个CSS属性，每个值都是一个能计算为此样式的合适值的表达式。 + In the example, the `color` style is set to the current value of the `colorPreference` variable. + + 在这个例子中，`color`样式被设置为`colorPreference`变量的当前值。 + @@ -687,6 +953,7 @@ The following are some of the key AngularJS built-in directives and their equiva ### ng-switch + <div ng-switch="vm.favoriteHero && vm.checkMovieHero(vm.favoriteHero)"> @@ -700,16 +967,25 @@ The following are some of the key AngularJS built-in directives and their equiva Please enter your favorite hero. </div> </div> + In AngularJS, the `ng-switch` directive swaps the contents of an element by selecting one of the templates based on the current value of an expression. + 在Angular1中，`ng-switch`指令根据一个表达式的当前值把元素的内容替换成几个模板之一。 + In this example, if `favoriteHero` is not set, the template displays "Please enter ...". If `favoriteHero` is set, it checks the movie hero by calling a controller method. If that method returns `true`, the template displays "Excellent choice!". If that methods returns `false`, the template displays "No movie, sorry!". + + 在这个例子中，如果`favoriteHero`没有设置，则模板显示“Please enter ...”。 + 如果`favoriteHero`设置过，它就会通过调用一个控制其方法来检查它是否电影里的英雄。 + 如果该方法返回`true`，模板就会显示“Excellent choice!”。 + 如果该方法返回`false`，该模板就会显示“No movie, sorry!”。 + @@ -744,16 +1034,25 @@ The following are some of the key AngularJS built-in directives and their equiva [Back to top](guide/ajs-quick-reference#top) +[回到顶部](guide/ajs-quick-reference#top) + {@a filters-pipes} ## Filters/pipes + +## 过滤器/管道 + Angular **pipes** provide formatting and transformation for data in the template, similar to AngularJS **filters**. Many of the built-in filters in AngularJS have corresponding pipes in Angular. For more information on pipes, see [Pipes](guide/pipes). +Angular中的**管道**为模板提供了格式化和数据转换功能，类似于AngularJS中的**过滤器**。 +AngularJS中的很多内置过滤器在Angular中都有对应的管道。 +要了解管道的更多信息，参见[Pipes](guide/pipes)。 +
### ngModel + @@ -514,9 +711,15 @@ The following are some of the key AngularJS built-in directives and their equiva In Angular, **two-way binding** is denoted by `[()]`, descriptively referred to as a "banana in a box". This syntax is a shortcut for defining both property binding (from the component to the view) and event binding (from the view to the component), thereby providing two-way binding. + 在Angular中，**双向绑定**使用[()]标记出来，它被形象的比作“盒子中的香蕉”。 + 这种语法是一个简写形式，用来同时定义一个属性绑定(从组件到视图)和一个事件绑定(从视图到组件)，因此，我们得到了双向绑定。 + For more information on two-way binding with `ngModel`, see the [NgModel—Two-way binding to form elements with `[(ngModel)]`](../guide/template-syntax.html#ngModel) section of the [Template Syntax](guide/template-syntax) page. + + 要了解使用ngModel进行双向绑定的更多知识，参见[模板语法](guide/template-syntax)中的[NgModel—使用`[(ngModel)]`进行双向绑定](../guide/template-syntax.html#ngModel)部分。 +
@@ -552,12 +759,21 @@ The following are some of the key AngularJS built-in directives and their equiva More accurately, it turns the defined element (`
### Bind to the `hidden` property + + ### 绑定到`hidden`属性 + @@ -593,13 +816,23 @@ The following are some of the key AngularJS built-in directives and their equiva Angular uses property binding; there is no built-in *show* directive. For hiding and showing elements, bind to the HTML `hidden` property. + 在Angular中，并没有内置的*show*指令，可以改用属性绑定。 + 要隐藏或显示一个元素，绑定到它的`hidden`属性就可以了。 + To conditionally display an element, place the element's `hidden` property in square brackets and set it to a quoted template expression that evaluates to the *opposite* of *show*. + 要想有条件的显示一个元素，就把该元素的`hidden`属性放到一个方括号里，并且把它设置为引号中的模板表达式，它的结果应该是与*显示*时*相反*的值。 + In this example, the `
` element is hidden if the `favoriteHero` variable is not truthy. + 在这个例子中，如果`favoriteHero`变量不是真值，`
`元素就会被隐藏。 + For more information on property binding, see the [Property binding](guide/template-syntax#property-binding) section of the [Template Syntax](guide/template-syntax) page. + + 要了解关于属性绑定的更多信息，参见[模板语法](guide/template-syntax)中的[模板表达式](guide/template-syntax#property-binding)部分。 +
### Bind to the `src` property + + ### 绑定到`src`属性 + @@ -632,8 +873,14 @@ The following are some of the key AngularJS built-in directives and their equiva Angular uses property binding; there is no built-in *src* directive. Place the `src` property in square brackets and set it to a quoted template expression. + 在Angular中，并没有一个内置的*src*指令，可以使用属性绑定。 + 把`src`属性放到方括号中，并且把它设为一个引号中的绑定表达式。 + For more information on property binding, see the [Property binding](guide/template-syntax#property-binding) section of the [Template Syntax](guide/template-syntax) page. + + 要了解属性绑定的更多知识，参见[模板语法](guide/template-syntax)中的[属性绑定](guide/template-syntax#property-binding)部分。 +
@@ -668,15 +923,26 @@ The following are some of the key AngularJS built-in directives and their equiva In Angular, the `ngStyle` directive works similarly. It sets a CSS style on an HTML element based on an expression. + 在Angular中，`ngStyle`指令的工作方式与此类似。它根据一个表达式设置HTML元素上的CSS样式。 + In the first example, the `color` style is set to the current value of the `colorPreference` variable. + 在第一个例子中，`color`样式被设置成了`colorPreference`变量的当前值。 + Angular also has **style binding**, which is good way to set a single style. This is shown in the second example. + Angular还有**样式绑定**语法，它是单独设置一个样式的好方法。它展示在第二个例子中。 + For more information on style binding, see the [Style binding](guide/template-syntax#style-binding) section of the [Template Syntax](guide/template-syntax) page. + 要了解样式绑定的更多知识，参见[模板语法](guide/template-syntax)中的[样式绑定](guide/template-syntax#style-binding)部分。 + For more information on the `ngStyle` directive, see [NgStyle](guide/template-syntax#ngStyle) section of the [Template Syntax](guide/template-syntax) page. + + 要了解关于`ngStyle`指令的更多知识，参见[模板语法](guide/template-syntax)中的[NgStyle](guide/template-syntax#ngStyle)部分。 +
@@ -724,16 +1000,30 @@ The following are some of the key AngularJS built-in directives and their equiva In Angular, the `ngSwitch` directive works similarly. It displays an element whose `*ngSwitchCase` matches the current `ngSwitch` expression value. + 在Angular中，`ngSwitch`指令的工作方式与此类似。 + 它会显示那个与`ngSwitch`表达式的当前值匹配的那个`*ngSwitchCase`所在的元素。 + In this example, if `favoriteHero` is not set, the `ngSwitch` value is `null` and `*ngSwitchDefault` displays, "Please enter ...". If `favoriteHero` is set, the app checks the movie hero by calling a component method. If that method returns `true`, the app selects `*ngSwitchCase="true"` and displays: "Excellent choice!" If that methods returns `false`, the app selects `*ngSwitchCase="false"` and displays: "No movie, sorry!" + 在这个例子中，如果`favoriteHero`没有设置，则`ngSwitch`的值是`null`，我们会看到 + `*ngSwitchDefault`中的段落“Please enter ...”。 + 如果`favoriteHero`被设置了，它就会通过调用一个组件方法来检查电影英雄。 + 如果该方法返回`true`，我们就会看到“Excellent choice!”。 + 如果该方法返回`false`，我们就会看到“No movie, sorry!”。 + The (*) before `ngSwitchCase` and `ngSwitchDefault` is required in this example. + 在这个例子中，`ngSwitchCase`和`ngSwitchDefault`前面的星号(*)是必须的。 + For more information, see [The NgSwitch directives](guide/template-syntax#ngSwitch) section of the [Template Syntax](guide/template-syntax) page. + + 要了解更多信息，参见[模板语法](guide/template-syntax)中的[NgSwitch指令](guide/template-syntax#ngSwitch)部分。 +
@@ -789,6 +1088,9 @@ For more information on pipes, see [Pipes](guide/pipes). Formats a number as currency. + + 把一个数字格式化成货币。 + @@ -817,6 +1121,9 @@ For more information on pipes, see [Pipes](guide/pipes). Formats a date to a string based on the requested format. + + 基于要求的格式把日期格式化成字符串。 + @@ -846,14 +1155,22 @@ For more information on pipes, see [Pipes](guide/pipes). Selects a subset of items from the defined collection, based on the filter criteria. + + 基于过滤条件从指定的集合中选取出一个子集。 + @@ -870,6 +1187,9 @@ For more information on pipes, see [Pipes](guide/pipes). Converts a JavaScript object into a JSON string. This is useful for debugging. + + 把一个JavaScript对象转换成一个JSON字符串。这对调试很有用。 + @@ -899,6 +1221,8 @@ For more information on pipes, see [Pipes](guide/pipes). Selects up to the first parameter (2) number of items from the collection starting (optionally) at the beginning index (0). + + 从集合中选择从(第二参数指定的)起始索引号(0)开始的最多(第一参数指定的)条目数(2)个条目。 @@ -930,6 +1258,9 @@ For more information on pipes, see [Pipes](guide/pipes). Converts the string to lowercase. + + 把该字符串转成小写形式。 + @@ -958,6 +1291,9 @@ For more information on pipes, see [Pipes](guide/pipes). Formats a number as text. + + 把数字格式化为文本。 + @@ -992,15 +1333,23 @@ For more information on pipes, see [Pipes](guide/pipes). Displays the collection in the order specified by the expression. In this example, the movie title orders the `movieList`. + + 使用表达式中所指定的方式对集合进行排序。 + 在这个例子中，`movieList`被根据movie的title排序了。 @@ -1011,20 +1360,32 @@ For more information on pipes, see [Pipes](guide/pipes). [Back to top](guide/ajs-quick-reference#top) +[回到顶部](guide/ajs-quick-reference#top) + {@a controllers-components} ## Modules/controllers/components + +## 模块/控制器/组件 + In both AngularJS and Angular, Angular modules help you organize your application into cohesive blocks of functionality. +无论在AngularJS还是Angular中，我们都要借助“模块”来把应用拆分成一些紧密相关的功能块。 + In AngularJS, you write the code that provides the model and the methods for the view in a **controller**. In Angular, you build a **component**. +在AngularJS中，我们在**控制器**中写代码，来为视图提供模型和方法。 +在Angular中，我们创建**组件**。 + Because much AngularJS code is in JavaScript, JavaScript code is shown in the AngularJS column. The Angular code is shown using TypeScript. +因为很多AngularJS的代码是用JavaScript写的，所以在AngularJS列显示的是JavaScript代码，而Angular列显示的是TypeScript代码。 +
@@ -801,6 +1103,8 @@ For more information on pipes, see [Pipes](guide/pipes). The Angular `currency` pipe is similar although some of the parameters have changed. + + Angular的`currency`管道和1中很相似，只是有些参数变化了。
@@ -830,6 +1137,8 @@ For more information on pipes, see [Pipes](guide/pipes). The Angular `date` pipe is similar. + Angular的`date`管道和·中很相似。参见[备注](guide/ajs-quick-reference#string-dates)来了解字符串日期值。 +
### none + ### 没了 For performance reasons, no comparable pipe exists in Angular. Do all your filtering in the component. If you need the same filtering code in several templates, consider building a custom pipe. + 在Angular中，出于性能的考虑，并没有一个类似的管道。 + 过滤逻辑应该在组件中用代码实现。 + 如果它将被复用在几个模板中，可以考虑构建一个自定义管道。 +
@@ -882,6 +1202,8 @@ For more information on pipes, see [Pipes](guide/pipes). The Angular `json` pipe does the same thing. + + Angular的`json`管道做完全相同的事。
@@ -914,6 +1238,10 @@ For more information on pipes, see [Pipes](guide/pipes). with the JavaScript `Slice` method. The first parameter is the starting index; the second is the limit. As in AngularJS, coding this operation within the component instead could improve performance. + + `SlicePipe`做同样的事，但是*两个参数的顺序是相反的*，以便于JavaScript中的`slice`方法保持一致。 + 第一个参数是起始索引号，第二个参数是限制的数量。 + 和AngularJS中一样，如果们改用组件中的代码实现此操作，性能将会提升。
@@ -942,6 +1273,8 @@ For more information on pipes, see [Pipes](guide/pipes). The Angular `lowercase` pipe does the same thing. + + Angular的`lowercase`管道和1中的功能完全相同。
@@ -973,8 +1309,13 @@ For more information on pipes, see [Pipes](guide/pipes). It provides more functionality when defining the decimal places, as shown in the second example above. + Angular的`number`管道很相似。 + 但在指定小数点位置时，它提供了更多的功能，如第二个范例所示。 + Angular also has a `percent` pipe, which formats a number as a local percentage as shown in the third example. + + Angular还有一个`percent`管道，它把一个数组格式化为本地化的(local)百分比格式，如第三个范例所示。
### none + ### 没了 For performance reasons, no comparable pipe exists in Angular. Instead, use component code to order or sort results. If you need the same ordering or sorting code in several templates, consider building a custom pipe. + 在Angular中，出于性能的考虑，并没有一个类似的管道。 + 排序逻辑应该在组件中用代码实现。 + 如果它将被复用在几个模板中，可以考虑构建一个自定义管道。 +
@@ -1061,20 +1422,30 @@ The Angular code is shown using TypeScript. - In AngularJS, an immediately invoked function expression (or IIFE) around controller code + In AngularJS, an immediately invoked function expression (or IIFE) around controller code keeps it out of the global namespace. + 在AngularJS中，用立即调用的函数表达式(IIFE)来包裹控制器代码可以让控制器代码不会污染全局命名空间。 + @@ -1085,6 +1456,9 @@ The Angular code is shown using TypeScript. ### Angular modules + + ### Angular模块 + angular.module("movieHunter", ["ngRoute"]); @@ -1092,6 +1466,8 @@ The Angular code is shown using TypeScript. In AngularJS, an Angular module keeps track of controllers, services, and other code. The second argument defines the list of other modules that this module depends upon. + + 在AngularJS中，Angular模块用来对控制器、服务和其它代码进行跟踪。第二个参数定义该模块依赖的其它模块列表。 @@ -1119,6 +1505,9 @@ The Angular code is shown using TypeScript. ### Controller registration + + ### 控制器注册 + angular .module("movieHunter") @@ -1131,14 +1520,22 @@ The Angular code is shown using TypeScript. AngularJS has code in each controller that looks up an appropriate Angular module and registers the controller with that module. + 在AngularJS中，在每个控制器中都有一些代码，用于找到合适的Angular模块并把该控制器注册进去。 + The first argument is the controller name. The second argument defines the string names of all dependencies injected into this controller, and a reference to the controller function. + + 第一个参数是控制器的名称，第二个参数定义了所有将注入到该控制器的依赖的字符串名称，以及一个到控制器函数的引用。 + @@ -1162,6 +1567,9 @@ The Angular code is shown using TypeScript. ### Controller function + + ### 控制器函数 + function MovieListCtrl(movieService) { } @@ -1169,12 +1577,17 @@ The Angular code is shown using TypeScript. In AngularJS, you write the code for the model and methods in a controller function. + + 在Angular1中，我们在控制器函数中写模型和方法的代码。 @@ -1196,6 +1615,9 @@ The Angular code is shown using TypeScript. ### Dependency injection + + ### 依赖注入 + MovieListCtrl.$inject = ['MovieService']; function MovieListCtrl(movieService) { @@ -1206,14 +1628,23 @@ The Angular code is shown using TypeScript. In AngularJS, you pass in any dependencies as controller function arguments. This example injects a `MovieService`. + 在AngularJS中，我们把所有依赖都作为控制器函数的参数。 + 在这个例子中，我们注入了一个`MovieService`。 + To guard against minification problems, tell Angular explicitly that it should inject an instance of the `MovieService` in the first parameter. + + 我们还通过在第一个参数明确告诉Angular它应该注入一个`MovieService`的实例，以防止在最小化时出现问题。 + @@ -1235,12 +1672,17 @@ The Angular code is shown using TypeScript. [Back to top](guide/ajs-quick-reference#top) +[回到顶部](guide/ajs-quick-reference#top) + {@a style-sheets} ## Style sheets + +## 样式表 + Style sheets give your application a nice look. In AngularJS, you specify the style sheets for your entire application. As the application grows over time, the styles for the many parts of the application @@ -1248,6 +1690,12 @@ merge, which can cause unexpected results. In Angular, you can still define style sheets for your entire application. But now you can also encapsulate a style sheet within a specific component. +样式表美化我们的应用程序。 +在AngularJS中，我们为整个应用程序指定样式表。 +当应用程序成长一段时间之后，应用程序中很多部分的样式会被合并，导致无法预计的后果。 +在Angular中，我们仍然会为整个应用程序定义样式，不过现在也可以把样式表封装在特定的组件中。 + +
### none + + ### 没了 + This is a nonissue in Angular because ES 2015 modules handle the namespacing for you. + 在Angular中我们不用担心这个问题，因为使用ES 2015的模块，模块会替我们处理命名空间问题。 + For more information on modules, see the [Modules](guide/architecture#modules) section of the [Architecture Overview](guide/architecture). + + 要了解关于模块的更多信息，参见[架构概览](guide/architecture)中的[模块](guide/architecture#modules)部分。 +
@@ -1105,10 +1481,20 @@ The Angular code is shown using TypeScript. Angular modules, defined with the `NgModule` decorator, serve the same purpose: + Angular的模块用`NgModule`装饰器进行定义，有如下用途： + * `imports`: specifies the list of other modules that this module depends upon + + `imports`: 指定当前模块依赖的其它模块列表 + * `declaration`: keeps track of your components, pipes, and directives. - For more information on modules, see [Angular Modules (NgModule)](guide/ngmodule). + `declaration`: 用于记录组件、管道和指令。 + + For more information on modules, see [Angular Modules](guide/ngmodule). + + 要了解关于模块的更多知识，参见[Angular Modules](guide/ngmodule)。 +
### Component decorator + + ### 组件装饰器 + @@ -1148,10 +1545,18 @@ The Angular code is shown using TypeScript. The `@Component` decorator declares that the class is a component and provides metadata about that component such as its selector (or tag) and its template. + 在Angular中，我们往组件类上添加了一个装饰器，以提供任何需要的元数据。 + `@Component`装饰器把该类声明为组件，并提供了关于该组件的元数据，比如它的选择器(或标签)和模板。 + This is how you associate a template with logic, which is defined in the component class. + 这就是把模板关联到代码的方式，它定义在组件类中。 + For more information, see the [Components](guide/architecture#components) section of the [Architecture Overview](guide/architecture) page. + + 要了解关于模板的更多信息，参见[架构概览](guide/architecture)中的[组件](guide/architecture#components)部分。 +
### Component class + + ### 组件类 + @@ -1182,10 +1595,16 @@ The Angular code is shown using TypeScript. In Angular, you create a component class. + 在Angular中，我们写组件类。 + NOTE: If you are using TypeScript with AngularJS, you must use the `export` keyword to export the component class. + 注意：如果你正在用TypeScript写AngularJS，那么必须用`export`关键字来导出组件类。 + For more information, see the [Components](guide/architecture#components) section of the [Architecture Overview](guide/architecture) page. + + 要了解关于组件的更多信息，参见[架构概览](guide/architecture)中的[组件](guide/architecture#components)部分。
### Dependency injection + + ### 依赖注入 + @@ -1223,8 +1654,14 @@ The Angular code is shown using TypeScript. This example injects a `MovieService`. The first parameter's TypeScript type tells Angular what to inject, even after minification. + 在Angular中，我们把依赖作为组件构造函数的参数传入。 + 在这个例子中，我们注入了一个`MovieService`。 + 即使在最小化之后，第一个参数的TypeScript类型也会告诉Angular它该注入什么。 + For more information, see the [Dependency injection](guide/architecture#dependency-injection) section of the [Architecture Overview](guide/architecture). + + 要了解关于依赖注入的更多信息，参见[架构概览](guide/architecture)中的[依赖注入](guide/architecture#dependency-injection)部分。
@@ -1283,12 +1731,17 @@ also encapsulate a style sheet within a specific component. AngularJS, uses a `link` tag in the head section of the `index.html` file to define the styles for the application. + + 在AngularJS中，我们在`index.html`的`head`区使用`link`标签来为应用程序定义样式。 @@ -1315,4 +1778,6 @@ also encapsulate a style sheet within a specific component. -[Back to top](guide/ajs-quick-reference#top) \ No newline at end of file +[Back to top](guide/ajs-quick-reference#top) + +[回到顶部](guide/ajs-quick-reference#top) \ No newline at end of file diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md index 4eff1dc482..20fba2a478 100644 --- a/aio/content/guide/animations.md +++ b/aio/content/guide/animations.md @@ -1,8 +1,8 @@ @title -Animations +动画 @intro -A guide to Angular's animation system. +Angular 动画系统指南。 @description @@ -12,10 +12,16 @@ user interfaces transition smoothly between states with engaging animations that call attention where it's needed. Well-designed animations can make a UI not only more fun but also easier to use. +动画是现代Web应用设计中一个很重要的方面。我们希望用户界面能在不同的状态之间更平滑的转场。如果需要，还可以用适当的动画来吸引注意力。 +设计良好的动画不但会让UI更有趣，还会让它更容易使用。 + Angular's animation system lets you build animations that run with the same kind of native performance found in pure CSS animations. You can also tightly integrate your animation logic with the rest of your application code, for ease of control. +Angular的动画系统赋予了制作各种动画效果的能力，以构建出与原生CSS动画性能相同的动画。 +我们也获得了额外的让动画逻辑与其它应用代码紧紧集成在一起的能力，这让动画可以被更容易的触发与控制。 +
@@ -24,10 +30,13 @@ animation logic with the rest of your application code, for ease of control. Angular animations are built on top of the standard [Web Animations API](https://w3c.github.io/web-animations/) and run natively on [browsers that support it](http://caniuse.com/#feat=web-animation). +Angular动画是基于标准的[Web动画API(Web Animations API)](https://w3c.github.io/web-animations/)构建的，它们在[支持此API的浏览器中](http://caniuse.com/#feat=web-animation)会用原生方式工作。 + For other browsers, a polyfill is required. Grab [`web-animations.min.js` from GitHub](https://github.com/web-animations/web-animations-js) and add it to your page. +至于其它浏览器，就需要一个填充库(polyfill)了。你可以[从这里获取`web-animations.min.js`](https://github.com/web-animations/web-animations-js)，并把它加入你的页面中。
@@ -36,16 +45,47 @@ add it to your page. # Contents -* [Example: Transitioning between two states](guide/animations#example-transitioning-between-states). -* [States and transitions](guide/animations#states-and-transitions). +# 目录 + +* [Example: Transitioning between two states](guide/animations#example-transitioning-between-states) + + [范例：在两个状态之间进行转场(Transition)](guide/animations#example-transitioning-between-states) + +* [States and transitions](guide/animations#states-and-transitions) + + [状态与转场](guide/animations#states-and-transitions) + * [Example: Entering and leaving](guide/animations#example-entering-and-leaving). + + [范例：进场与离场](guide/animations#example-entering-and-leaving) + * [Example: Entering and leaving from different states](guide/animations#example-entering-and-leaving-from-different-states). -* [Animatable properties and units](guide/animations#animatable-properties-and-units). -* [Automatic property calculation](guide/animations#automatic-property-calculation). -* [Animation timing](guide/animations#animation-timing). -* [Multi-step animations with keyframes](guide/animations#multi-step-animations-with-keyframes). -* [Parallel animation groups](guide/animations#parallel-animation-groups). -* [Animation callbacks](guide/animations#animation-callbacks). + + [范例：从其它状态进场与离场](guide/animations#example-entering-and-leaving-from-different-states) + +* [Animatable properties and units](guide/animations#animatable-properties-and-units). + + [可动的(Animatable)属性与单位](guide/animations#animatable-properties-and-units) + +* [Automatic property calculation](guide/animations#automatic-property-calculation). + + [自动属性值计算](guide/animations#automatic-property-calculation) + +* [Animation timing](guide/animations#animation-timing). + + [动画时间线(Timing)](guide/animations#animation-timing) + +* [Multi-step animations with keyframes](guide/animations#multi-step-animations-with-keyframes). + + [基于关键帧(Keyframes)的多阶段动画](guide/animations#multi-step-animations-with-keyframes) + +* [Parallel animation groups](guide/animations#parallel-animation-groups). + + [并行动画组(Group)](guide/animations#parallel-animation-groups) + +* [Animation callbacks](guide/animations#animation-callbacks). + + [动画回调](guide/animations#animation-callbacks)
@@ -54,6 +94,8 @@ add it to your page. The examples in this page are available as a . +本章中引用的这个例子可以到去体验。 +
@@ -65,6 +107,9 @@ The examples in this page are available as a . ## Quickstart example: Transitioning between two states +## 快速起步范例：在两个状态间转场 + +
A simple transition animation
@@ -74,9 +119,13 @@ The examples in this page are available as a . You can build a simple animation that transitions an element between two states driven by a model attribute. +我们来构建一个简单的动画，它会让一个元素用模型驱动的方式在两个状态之间转场。 + Animations are defined inside `@Component` metadata. Before you can add animations, you need to import a few animation-specific imports and functions: +动画会被定义在`@Component`元数据中。在添加动画之前，先引入一些与动画有关的函数： + @@ -94,6 +143,9 @@ With these, you can define an *animation trigger* called `heroState` in the comp metadata. It uses animations to transition between two states: `active` and `inactive`. When a hero is active, the element appears in a slightly larger size and lighter color. +通过这些，可以在组件元数据中定义一个名叫`heroState`的*动画触发器*。它在两个状态`active`和`inactive`之间进行转场。 +当英雄处于激活状态时，它会把该元素显示得稍微大一点、亮一点。 + @@ -108,6 +160,8 @@ hero is active, the element appears in a slightly larger size and lighter color. In this example, you are defining animation styles (color and transform) inline in the animation metadata. +在这个例子中，我们在元数据中用内联的方式定义了动画样式(`color`和`transform`)。在即将到来的一个Angular版本中，还将支持从组件的CSS样式表中提取样式。 + @@ -116,6 +170,8 @@ animation metadata. Now, using the `[@triggerName]` syntax, attach the animation that you just defined to one or more elements in the component's template. +我们刚刚定义了一个动画，但它还没有被用到任何地方。要想使用它，可以在模板中用`[@triggerName]`语法来把它附加到一个或多个元素上。 + @@ -127,9 +183,14 @@ Here, the animation trigger applies to every element repeated by an `ngFor`. Eac the repeated elements animates independently. The value of the attribute is bound to the expression `hero.state` and is always either `active` or `inactive`. +这里，我们把该动画触发器添加到了由`ngFor`重复出来的每一个元素上。每个重复出来的元素都有独立的动画效果。 +然后把`@triggerName`属性(Attribute)的值设置成表达式`hero.state`。这个值应该或者是`inactive`或者是`active`，因为我们刚刚为它们俩定义过动画状态。 + With this setup, an animated transition appears whenever a hero object changes state. Here's the full component implementation: +通过这些设置，一旦英雄对象的状态发生了变化，就会触发一个转场动画。下面是完整的组件实现： + @@ -139,16 +200,25 @@ Here's the full component implementation: ## States and transitions +## 状态与转场 + Angular animations are defined as logical **states** and **transitions** between states. +Angular动画是由**状态**和**状态之间的转场效果**所定义的。 + An animation state is a string value that you define in your application code. In the example above, the states `'active'` and `'inactive'` are based on the logical state of hero objects. The source of the state can be a simple object attribute, as it was in this case, or it can be a value computed in a method. The important thing is that you can read it into the component's template. -You can define *styles* for each animation state: +动画状态是一个由程序代码中定义的字符串值。在上面的例子中，基于英雄对象的逻辑状态,我们使用了`'active'`和`'inactive'`这两种状态。 +状态的来源可以是像本例中这样简单的对象属性，也可以是由方法计算出来的值。重点是，我们得能从组件模板中读取它。 + +We can define *styles* for each animation state: + +我们可以为每个动画状态定义了*一组样式*： @@ -161,9 +231,14 @@ These `state` definitions specify the *end styles* of each state. They are applied to the element once it has transitioned to that state, and stay *as long as it remains in that state*. In effect, you're defining what styles the element has in different states. +这些`state`具体定义了每个状态的*最终样式*。一旦元素转场到那个状态，该样式就会被应用到此元素上，*当它留在此状态时*，这些样式也会一直保持着。 +从这个意义上讲，这里其实并不只是在定义动画，而是在定义该元素在不同状态时应该具有的样式。 + After you define states, you can define *transitions* between the states. Each transition controls the timing of switching between one set of styles and the next: +定义完状态，就能定义在状态之间的各种*转场*了。每个转场都会控制一条在一组样式和下一组样式之间切换的时间线： + @@ -180,6 +255,8 @@ controls the timing of switching between one set of styles and the next: If several transitions have the same timing configuration, you can combine them into the same `transition` definition: +如果多个转场都有同样的时间线配置，就可以把它们合并进同一个`transition`定义中： + @@ -190,6 +267,8 @@ them into the same `transition` definition: When both directions of a transition have the same timing, as in the previous example, you can use the shorthand syntax `<=>`: +如果要对同一个转场的两个方向都使用相同的时间线（就像前面的例子中那样），就可以使用`<=>`这种简写语法： + @@ -203,6 +282,9 @@ the element receives one set of styles immediately and is then animated to the n When the transition finishes, none of these styles are kept because they're not defined in a `state`. +有时希望一些样式只在动画期间生效，但在结束后并不保留它们。这时可以把这些样式内联在`transition`中进行定义。 +在这个例子中，该元素会立刻获得一组样式，然后动态转场到下一个状态。当转场结束时，这些样式并不会被保留，因为它们并没有被定义在`state`中。 + @@ -212,12 +294,21 @@ defined in a `state`. ### The wildcard state `*` +### `*`(通配符)状态 + The `*` ("wildcard") state matches *any* animation state. This is useful for defining styles and transitions that apply regardless of which state the animation is in. For example: +`*`(通配符)状态匹配*任何*动画状态。当定义那些不需要管当前处于什么状态的样式及转场时，这很有用。比如： + * The `active => *` transition applies when the element's state changes from `active` to anything else. + + 当该元素的状态从`active`变成任何其它状态时，`active => *`转场都会生效。 + * The `* => *` transition applies when *any* change between two states takes place. + 当在*任意*两个状态之间切换时，`* => *`转场都会生效。 +
The wildcard state can be used to match many different transitions at once @@ -227,14 +318,21 @@ transitions that apply regardless of which state the animation is in. For exampl ### The `void` state +### `void`状态 + The special state called `void` can apply to any animation. It applies when the element is *not* attached to a view, perhaps because it has not yet been added or because it has been removed. The `void` state is useful for defining enter and leave animations. +有一种叫做`void`的特殊状态，它可以应用在任何动画中。它表示元素*没有*被附加到视图。这种情况可能是由于它尚未被添加进来或者已经被移除了。 +`void`状态在定义“进场”和“离场”的动画时会非常有用。 + For example the `* => void` transition applies when the element leaves the view, regardless of what state it was in before it left. +比如当一个元素离开视图时，`* => void`转场就会生效，而不管它在离场以前是什么状态。 +
The void state can be used for enter and leave transitions @@ -244,8 +342,13 @@ regardless of what state it was in before it left. The wildcard state `*` also matches `void`. +`*`通配符状态也能匹配`void`。 + ## Example: Entering and leaving +## 例子：进场与离场 + +
Enter and leave animations
@@ -255,12 +358,22 @@ The wildcard state `*` also matches `void`. Using the `void` and `*` states you can define transitions that animate the entering and leaving of elements: +使用`void`和`*`状态，可以定义元素进场与离场时的转场动画： + * Enter: `void => *` + + 进场：`void => *` + * Leave: `* => void` + 离场：`* => void` + For example, in the `animations` array below there are two transitions that use the `void => *` and `* => void` syntax to animate the element in and out of the view. +例如，在下面的`animations`数组中，这两个转场语句使用`void => *`和`* => void`语法来让该元素以动画形式进入和离开当前视图。 + + @@ -272,6 +385,9 @@ transition definitions, and not in a separate `state(void)` definition. Thus, th are different on enter and leave: the element enters from the left and leaves to the right. +注意，在这个例子中，这些样式在转场定义中被直接应用到了`void`状态，但并没有一个单独的`state(void)`定义。 +这么做是因为希望在进场与离场时使用不一样的转换效果：元素从左侧进场，从右侧离开。 +
@@ -279,6 +395,8 @@ and leaves to the right. These two common animations have their own aliases: +这两个常见的动画有自己的别名： + transition(':enter', [ ... ]); // void => * transition(':leave', [ ... ]); // * => void @@ -293,6 +411,9 @@ These two common animations have their own aliases: ## Example: Entering and leaving from different states +## 范例：从不同的状态下进场和离场 + +
Enter and leave animations combined with state animations
@@ -304,13 +425,28 @@ using the hero state as the animation state. This lets you configure different transitions for entering and leaving based on what the state of the hero is: +通过把英雄的状态用作动画的状态，还能把该动画跟以前的转场动画组合成一个复合动画。这让我们能根据该英雄的当前状态为其配置不同的进场与离场动画： + * Inactive hero enter: `void => inactive` + + 非激活英雄进场：`void => inactive` + * Active hero enter: `void => active` + + 激活英雄进场：`void => active` + * Inactive hero leave: `inactive => void` + + 非激活英雄离场：`inactive => void` + * Active hero leave: `active => void` + 激活英雄离场：`active => void` + This gives you fine-grained control over each transition: +现在就对每一种转场都有了细粒度的控制： +
This example transitions between active, inactive, and void states @@ -326,25 +462,38 @@ This gives you fine-grained control over each transition: ## Animatable properties and units +## 可动的(Animatable)属性与单位 + Since Angular's animation support builds on top of Web Animations, you can animate any property that the browser considers *animatable*. This includes positions, sizes, transforms, colors, borders, and many others. The W3C maintains [a list of animatable properties](https://www.w3.org/TR/css3-transitions/#animatable-properties) on its [CSS Transitions page](https://www.w3.org/TR/css3-transitions). +由于Angular的动画支持是基于Web Animations标准的，所以也能支持浏览器认为可以*参与动画*的任何属性。这些属性包括位置(position)、大小(size)、变换(transform)、颜色(color)、边框(border)等很多属性。W3C维护着 +[一个“可动”属性列表](https://www.w3.org/TR/css3-transitions/#animatable-properties)。 + For positional properties that have a numeric value, you can define a unit by providing the value as a string with the appropriate suffix: +尺寸类属性(如位置、大小、边框等)包括一个数字值和一个用来定义长度单位的后缀： + * `'50px'` * `'3em'` * `'100%'` If you don't provide a unit when specifying dimension, Angular assumes the default of `px`: +对大多数尺寸类属性而言，还能只定义一个数字，那就表示它使用的是像素(px)数： + * `50` is the same as saying `'50px'` + `50`相当于`'50px'` + ## Automatic property calculation +## 自动属性值计算 +
Animation with automated height calculation
@@ -356,12 +505,18 @@ For example, elements often have widths and heights that depend on their content and the screen size. These properties are often tricky to animate with CSS. +有时候，我们想在动画中使用的尺寸类样式，它的值在开始运行之前都是不可知的。比如，元素的宽度和高度往往依赖于它们的内容和屏幕的尺寸。处理这些属性对CSS动画而言通常是相当棘手的。 + In these cases, you can use a special `*` property value so that the value of the property is computed at runtime and then plugged into the animation. +如果用Angular动画，就可以用一个特殊的`*`属性值来处理这种情况。该属性的值将会在运行期被计算出来，然后插入到这个动画中。 + In this example, the leave animation takes whatever height the element has before it leaves and animates from that height to zero: +这个例子中的“离场”动画会取得该元素在离场前的高度，并且把它从这个高度用动画转场到0高度： + @@ -371,38 +526,69 @@ leaves and animates from that height to zero: ## Animation timing +## 动画时间线 + There are three timing properties you can tune for every animated transition: the duration, the delay, and the easing function. They are all combined into a single transition *timing string*. +对每一个动画转场效果，有三种时间线属性可以调整：持续时间(duration)、延迟(delay)和缓动(easing)函数。它们被合并到了一个单独的*转场时间线字符串*。 + ### Duration +### 持续时间 + The duration controls how long the animation takes to run from start to finish. You can define a duration in three ways: +持续时间控制动画从开始到结束要花多长时间。可以用三种方式定义持续时间： + * As a plain number, in milliseconds: `100` + + 作为一个普通数字，以毫秒为单位，如：`100` + * In a string, as milliseconds: `'100ms'` + + 作为一个字符串，以毫秒为单位，如：`'100ms'` + * In a string, as seconds: `'0.1s'` + 作为一个字符串，以秒为单位，如：`'0.1s'` + ### Delay +### 延迟 + The delay controls the length of time between the animation trigger and the beginning of the transition. You can define one by adding it to the same string following the duration. It also has the same format options as the duration: +延迟控制的是在动画已经触发但尚未真正开始转场之前要等待多久。可以把它添加到字符串中的持续时间后面，它的选项格式也跟持续时间是一样的： + * Wait for 100ms and then run for 200ms: `'0.2s 100ms'` + 等待100毫秒，然后运行200毫秒：`'0.2s 100ms'`。 + ### Easing +### 缓动函数 + The [easing function](http://easings.net/) controls how the animation accelerates and decelerates during its runtime. For example, an `ease-in` function causes the animation to begin relatively slowly but pick up speed as it progresses. You can control the easing by adding it as a *third* value in the string after the duration and the delay (or as the *second* value when there is no delay): +[缓动函数](http://easings.net/)用于控制动画在运行期间如何加速和减速。比如：使用`ease-in`函数意味着动画开始时相对缓慢，然后在进行中逐步加速。可以通过在这个字符串中的持续时间和延迟后面添加*第三个*值来控制使用哪个缓动函数(如果没有定义延迟就作为*第二个*值)。 + * Wait for 100ms and then run for 200ms, with easing: `'0.2s 100ms ease-out'` + + 等待100毫秒，然后运行200毫秒，并且带缓动：`'0.2s 100ms ease-out'` + * Run for 200ms, with easing: `'0.2s ease-in-out'` + 运行200毫秒，并且带缓动：`'0.2s ease-in-out'` +
Animations with specific timings @@ -412,11 +598,15 @@ and the delay (or as the *second* value when there is no delay): ### Example +### 例子 + Here are a couple of custom timings in action. Both enter and leave last for 200 milliseconds, that is `0.2s`, but they have different easings. The leave begins after a slight delay of 10 milliseconds as specified in `'0.2s 10 ease-out'`: +这里是两个自定义时间线的动态演示。“进场”和“离场”都持续200毫秒，也就是`0.2s`，但它们有不同的缓动函数。“离场”动画会在100毫秒的延迟之后开始，也就是`'0.2s 10 ease-out'`： + @@ -426,6 +616,9 @@ slight delay of 10 milliseconds as specified in `'0.2s 10 ease-out'`: ## Multi-step animations with keyframes +## 基于关键帧(Keyframes)的多阶段动画 + +
Animations with some bounce implemented with keyframes
@@ -435,13 +628,19 @@ slight delay of 10 milliseconds as specified in `'0.2s 10 ease-out'`: Animation *keyframes* go beyond a simple transition to a more intricate animation that goes through one or more intermediate styles when transitioning between two sets of styles. +通过定义动画的*关键帧*，可以把两组样式之间的简单转场，升级成一种更复杂的动画，它会在转场期间经历一个或多个中间样式。 + For each keyframe, you specify an *offset* that defines at which point in the animation that keyframe applies. The offset is a number between zero, which marks the beginning of the animation, and one, which marks the end. +每个关键帧都可以被指定一个*偏移量*，用来定义该关键帧将被用在动画期间的哪个时间点。偏移量是一个介于0(表示动画起点)和1(表示动画终点)之间的数组。 + This example adds some "bounce" to the enter and leave animations with keyframes: +在这个例子中，我们使用关键帧来为进场和离场动画添加一些“反弹效果”： + @@ -453,13 +652,19 @@ Note that the offsets are *not* defined in terms of absolute time. They are rela measures from zero to one. The final timeline of the animation is based on the combination of keyframe offsets, duration, delay, and easing. +注意，这个偏移量并*不是*用绝对数字定义的时间段，而是在0到1之间的相对值（百分比）。动画的最终时间线会基于关键帧的偏移量、持续时间、延迟和缓动函数计算出来。 + Defining offsets for keyframes is optional. If you omit them, offsets with even spacing are automatically assigned. For example, three keyframes without predefined offsets receive offsets `0`, `0.5`, and `1`. +为关键帧定义偏移量是可选的。如果省略它们，偏移量会自动根据帧数平均分布出来。例如，三个未定义过偏移量的关键帧会分别获得偏移量：`0`、`0.5`和`1`。 + ## Parallel animation groups +## 并行动画组(Group) +
Parallel animations with different timings, implemented with groups
@@ -469,14 +674,21 @@ offsets receive offsets `0`, `0.5`, and `1`. You've seen how to animate multiple style properties at the same time: just put all of them into the same `style()` definition. +我们已经知道该如何在同一时间段进行多个样式的动画了：只要把它们都放进同一个`style()`定义中就行了！ + But you may also want to configure different *timings* for animations that happen in parallel. For example, you may want to animate two CSS properties but use a different easing function for each one. +但我们也可能会希望为同时发生的几个动画配置不同的*时间线*。比如，同时对两个CSS属性做动画，但又得为它们定义不同的缓动函数。 + For this you can use animation *groups*. In this example, using groups both on enter and leave allows for two different timing configurations. Both are applied to the same element in parallel, but run independently of each other: +这种情况下就可以用动画*组*来解决了。在这个例子中，我们同时在进场和离场时使用了组，以便能让它们使用两种不同的时间线配置。 +它们被同时应用到同一个元素上，但又彼此独立运行： + @@ -486,14 +698,21 @@ are applied to the same element in parallel, but run independently of each other One group animates the element transform and width; the other group animates the opacity. +其中一个动画组对元素的`transform`和`width`做动画，另一个组则对`opacity`做动画。 + ## Animation callbacks +## 动画回调 A callback is fired when an animation is started and also when it is done. +当动画开始和结束时，会触发一个回调。 + In the keyframes example, you have a `trigger` called `@flyInOut`. You can hook those callbacks like this: +对于例子中的这个关键帧，我们有一个叫做`@flyInOut`的`trigger`。在那里我们可以挂钩到那些回调，比如： + @@ -504,4 +723,8 @@ those callbacks like this: The callbacks receive an `AnimationEvent` that contains contains useful properties such as `fromState`, `toState` and `totalTime`. -Those callbacks will fire whether or not an animation is picked up. \ No newline at end of file +这些回调接收一个`AnimationTransitionEvent`参数，它包含一些有用的属性，例如`fromState`，`toState`和`totalTime`。 + +Those callbacks will fire whether or not an animation is picked up. + +无论动画是否实际执行过，那些回调都会触发。 \ No newline at end of file diff --git a/aio/content/guide/aot-compiler.md b/aio/content/guide/aot-compiler.md index a5d4b211c1..00ada2063e 100644 --- a/aio/content/guide/aot-compiler.md +++ b/aio/content/guide/aot-compiler.md @@ -1,8 +1,8 @@ @title -Ahead-of-Time Compilation +预 (AoT) 编译器 @intro -Learn how to use ahead-of-time compilation. +学习如何使用预编译器 @description @@ -10,36 +10,89 @@ Learn how to use ahead-of-time compilation. This cookbook describes how to radically improve performance by compiling _ahead-of-time_ (AOT) during a build process. +这个烹饪指南描述如何通过在构建过程中进行预编译（Ahead of Time - AOT）来从根本上提升性能。 + {@a toc} # Contents -* [Overview](guide/overview) +# 目录 + +* [Overview](guide/aot-compiler#overview) + + [概览](guide/aot-compiler#overview) + * [Ahead-of-time (AOT) vs just-in-time (JIT)](guide/aot-compiler#aot-jit) + + [预编译(AOT) vs 即时编译(JIT)](guide/aot-compiler#aot-jit) + * [Why do AOT compilation?](guide/aot-compiler#why-aot) + + [为什么需要AOT编译？](guide/aot-compiler#why-aot) + * [Compile with AOT](guide/aot-compiler#compile) + + [用AOT进行编译](guide/aot-compiler#compile) + * [Bootstrap](guide/aot-compiler#bootstrap) + + [引导](guide/aot-compiler#bootstrap) + * [Tree shaking](guide/aot-compiler#tree-shaking) - *[Rollup](guide/aot-compiler#rollup) - *[Rollup Plugins](guide/aot-compiler#rollup-plugins) - *[Run Rollup](guide/aot-compiler#run-rollup) + [摇树优化（Tree Shaking）](guide/aot-compiler#tree-shaking) + + * [Rollup](guide/aot-compiler#rollup) + + * [Rollup Plugins](guide/aot-compiler#rollup-plugins) + + [Rollup插件](guide/aot-compiler#rollup-plugins) + + * [Run Rollup](guide/aot-compiler#run-rollup) + + [运行Rollup](guide/aot-compiler#run-rollup) * [Load the bundle](guide/aot-compiler#load) + + [加载捆(bundle)文件](guide/aot-compiler#load) + * [Serve the app](guide/aot-compiler#serve) + + [启动开发服务器](guide/aot-compiler#serve) + * [AOT QuickStart source code](guide/aot-compiler#source-code) + + [AOT 快速起步源码](guide/aot-compiler#source-code) + * [Workflow and convenience script](guide/aot-compiler#workflow) - *[Develop JIT along with AOT](guide/aot-compiler#run-jit) + [工作流与辅助脚本](guide/aot-compiler#workflow) + + * [Develop JIT along with AOT](guide/aot-compiler#run-jit) + + [先用JIT开发，再用AOT发布](guide/aot-compiler#run-jit) * [Tour of Heroes](guide/aot-compiler#toh) - *[JIT in development, AOT in production](guide/aot-compiler#jit-dev-aot-prod) - *[Tree shaking](guide/aot-compiler#shaking) - *[Running the application](guide/aot-compiler#running-app) - *[Inspect the Bundle](guide/aot-compiler#inspect-bundle) + [英雄指南](guide/aot-compiler#toh) + + * [JIT in development, AOT in production](guide/aot-compiler#jit-dev-aot-prod) + + [开发环境JIT，生产环境AOT](guide/aot-compiler#jit-dev-aot-prod) + + * [Tree shaking](guide/aot-compiler#shaking) + + [摇树优化](guide/aot-compiler#shaking) + + * [Running the application](guide/aot-compiler#running-app) + + [运行本应用](guide/aot-compiler#running-app) + + * [Inspect the Bundle](guide/aot-compiler#inspect-bundle) + + [审查捆(bundle)文件](guide/aot-compiler#inspect-bundle) @@ -49,16 +102,23 @@ during a build process. ## Overview +## 概览 + An Angular application consists largely of components and their HTML templates. Before the browser can render the application, the components and templates must be converted to executable JavaScript by the _Angular compiler_. +Angular应用主要包含组件和它们的HTML模板。 +在浏览器可以渲染应用之前，组件和模板必须要被**Angular编译器**转换为可以执行的JavaScript。 +
Watch compiler author Tobias Bosch explain the Angular Compiler at AngularConnect 2016. +观看编译器作者Tobias Bosch在AngularConnect 2016大会里，对Angular编译器的演讲。 +
@@ -67,18 +127,30 @@ You can compile the app in the browser, at runtime, as the application loads, us This is the standard development approach shown throughout the documentation. It's great but it has shortcomings. +你可以在浏览器中使用*即时编译器*（Just-in-Time - JIT）在运行期间编译该应用，也就是在应用加载时。 +这是本文档中展示过的标准开发方式。 +它很不错，但是有自己的缺点。 + JIT compilation incurs a runtime performance penalty. Views take longer to render because of the in-browser compilation step. The application is bigger because it includes the Angular compiler and a lot of library code that the application won't actually need. Bigger apps take longer to transmit and are slower to load. +JIT编译导致运行期间的性能损耗。 +由于需要在浏览器中执行这个编译过程，视图需要花更长时间才能渲染出来。 +由于应用包含了Angular编译器以及大量实际上并不需要的库代码，所以文件体积也会更大。 +更大的应用需要更长的时间进行传输，加载也更慢。 + Compilation can uncover many component-template binding errors. JIT compilation discovers them at runtime, which is late in the process. +编译可以发现一些组件模板绑定错误。JIT编译在运行时才揭露它们，那样有点太晚了。 + The **_ahead-of-time_ (AOT) compiler** can catch template errors early and improve performance by compiling at build time. +而**预编译**（AOT）会在构建时编译，这样可以在早期截获模板错误，提高应用性能。 {@a aot-jit} @@ -86,44 +158,73 @@ by compiling at build time. ## _Ahead-of-time_ (AOT) vs _just-in-time_ (JIT) +## 预编译（AOT） vs 即时编译（JIT） There is actually only one Angular compiler. The difference between AOT and JIT is a matter of timing and tooling. With AOT, the compiler runs once at build time using one set of libraries; with JIT it runs every time for every user at runtime using a different set of libraries. +事实上只有一个Angular编译器，AOT和JIT之间的差别仅仅在于编译的时机和所用的工具。 +使用AOT，编译器仅仅使用一组库在构建期间运行一次；使用JIT，编译器在每个用户的每次运行期间都要用不同的库运行一次。 + + {@a why-aot} ## Why do AOT compilation? +## 为什么需要AOT编译？ + *Faster rendering* +**渲染得更快** + With AOT, the browser downloads a pre-compiled version of the application. The browser loads executable code so it can render the application immediately, without waiting to compile the app first. +使用AOT，浏览器下载预编译版本的应用程序。 +浏览器直接加载运行代码，所以它可以立即渲染该应用，而不用等应用完成首次编译。 + *Fewer asynchronous requests* +**需要的异步请求更少** + The compiler _inlines_ external HTML templates and CSS style sheets within the application JavaScript, eliminating separate ajax requests for those source files. +编译器把外部HTML模板和CSS样式表内联到了该应用的JavaScript中。 +消除了用来下载那些源文件的Ajax请求。 + *Smaller Angular framework download size* +**需要下载的Angular框架体积更小** + There's no need to download the Angular compiler if the app is already compiled. The compiler is roughly half of Angular itself, so omitting it dramatically reduces the application payload. +如果应用已经编译过了，自然不需要再下载Angular编译器了。 +该编译器差不多占了Angular自身体积的一半儿，所以，省略它可以显著减小应用的体积。 *Detect template errors earlier* +**提早检测模板错误** + The AOT compiler detects and reports template binding errors during the build step before users can see them. +AOT编译器在构建过程中检测和报告模板绑定错误，避免用户遇到这些错误。 *Better security* +**更安全** + AOT compiles HTML templates and components into JavaScript files long before they are served to the client. With no templates to read and no risky client-side HTML or JavaScript evaluation, there are fewer opportunities for injection attacks. +AOT编译远在HTML模版和组件被服务到客户端之前，将它们编译到JavaScript文件。 +没有模版可以阅读，没有高风险客户端HTML或JavaScript可利用，所以注入攻击的机会较少。 + {@a compile} @@ -131,10 +232,15 @@ there are fewer opportunities for injection attacks. ## Compile with AOT +## 用AOT进行编译 + Preparing for offline compilation takes a few simple steps. Take the Setup as a starting point. A few minor changes to the lone `app.component` lead to these two class and HTML files: +AOT编译需要一些简单的准备步骤。我们先从搭建本地开发环境开始。 +只要单独对`app.component`文件的类文件和HTML文件做少量修改就可以了。 + @@ -150,7 +256,10 @@ A few minor changes to the lone `app.component` lead to these two class and HTML -Install a few new npm dependencies with the following command: +Install a few new npm dependencies with the following command: + +用下列命令安装少量新的npm依赖： + npm install @angular/compiler-cli @angular/platform-server --save @@ -161,12 +270,19 @@ Install a few new npm dependencies with the following command: You will run the `ngc` compiler provided in the `@angular/compiler-cli` npm package instead of the TypeScript compiler (`tsc`). +你要用`@angular/compiler-cli`包中提供的`ngc`编译器来代替TypeScript编译器（`tsc`）。 + `ngc` is a drop-in replacement for `tsc` and is configured much the same way. +`ngc`是一个`tsc`的高仿替代品，它们的配置方式几乎完全一样。 + `ngc` requires its own `tsconfig.json` with AOT-oriented settings. Copy the original `src/tsconfig.json` to a file called `tsconfig-aot.json` on the project root, then modify it as follows. +`ngc`需要自己的带有AOT专用设置的`tsconfig.json`。 +把原始的`tsconfig.json`拷贝到一个名叫`tsconfig-aot.json`的文件中，然后像这样修改它： + @@ -178,27 +294,49 @@ The `compilerOptions` section is unchanged except for one property. **Set the `module` to `es2015`**. This is important as explained later in the [Tree Shaking](guide/aot-compiler#tree-shaking) section. +`compilerOptions`部分只修改了一个属性：**把`module`设置为`es2015`。 +这一点非常重要，我们会在后面的[摇树优化](guide/aot-compiler#tree-shaking)部分解释为什么。 + What's really new is the `ngc` section at the bottom called `angularCompilerOptions`. Its `genDir` property tells the compiler to store the compiled output files in a new `aot` folder. +`ngc`区真正新增的内容是底部的`angularCompilerOptions`。 +它的`genDir`属性告诉编译器把编译结果保存在新的`aot`目录下。 + The `"skipMetadataEmit" : true` property prevents the compiler from generating metadata files with the compiled application. Metadata files are not necessary when targeting TypeScript files, so there is no reason to include them. +`"skipMetadataEmit" : true`属性阻止编译器为编译后的应用生成元数据文件。 +当输出成TypeScript文件时，元数据并不是必须的，因此不需要包含它们。 + ***Component-relative template URLS*** +***相对于组件的模板URL*** + The AOT compiler requires that `@Component` URLS for external templates and CSS files be _component-relative_. That means that the value of `@Component.templateUrl` is a URL value _relative_ to the component class file. For example, an `'app.component.html'` URL means that the template file is a sibling of its companion `app.component.ts` file. +AOT编译器要求`@Component`中的外部模板和CSS文件的URL是*相对于组件的*。 +这意味着`@Component.templateUrl`的值是一个*相对于*组件类文件的URL值。 +例如，`'app.component.html'` URL表示模板文件与它相应的`app.component.ts`文件放在一起。 + While JIT app URLs are more flexible, stick with _component-relative_ URLs for compatibility with AOT compilation. +而JIT应用的URL更灵活，固定写成*相对于组件的*URL的形式对AOT编译的兼容性也更好。 + ***Compiling the application*** +*** 编译该应用 *** + Initiate AOT compilation from the command line using the previously installed `ngc` compiler by executing: +在命令行中执行下列命令，借助刚安装好的`ngc`编译器来启动AOT编译： + + node_modules/.bin/ngc -p tsconfig-aot.json @@ -211,6 +349,8 @@ Initiate AOT compilation from the command line using the previously installed `n Windows users should surround the `ngc` command in double quotes: +Windows用户应该双引号`ngc`命令： + "node_modules/.bin/ngc" -p tsconfig-aot.json @@ -223,14 +363,23 @@ Windows users should surround the `ngc` command in double quotes: `ngc` expects the `-p` switch to point to a `tsconfig.json` file or a folder containing a `tsconfig.json` file. +`ngc`希望`-p`选项指向一个`tsconfig.json`文件，或者一个包含`tsconfig.json`文件的目录。 + After `ngc` completes, look for a collection of _NgFactory_ files in the `aot` folder. The `aot` folder is the directory specified as `genDir` in `tsconfig-aot.json`. +在`ngc`完成时，会在`aot`目录下看到一组*NgFactory*文件（该目录是在`tsconfig-aot.json`的`genDir`属性中指定的）。 + These factory files are essential to the compiled application. Each component factory creates an instance of the component at runtime by combining the original class file and a JavaScript representation of the component's template. Note that the original component class is still referenced internally by the generated factory. +这些工厂文件对于编译后的应用是必要的。 +每个组件工厂都可以在运行时创建一个组件的实例，其中带有一个原始的类文件和一个用JavaScript表示的组件模板。 +注意，原始的组件类依然是由所生成的这个工厂进行内部引用的。 + +
@@ -238,9 +387,14 @@ Note that the original component class is still referenced internally by the gen The curious can open `aot/app.component.ngfactory.ts` to see the original Angular template syntax compiled to TypeScript, its intermediate form. +如果你好奇，可以打开`aot/app.component.ngfactory.ts`来看看原始Angular模板语法被编译成TypeScript时的中间结果。 + JIT compilation generates these same _NgFactories_ in memory where they are largely invisible. AOT compilation reveals them as separate, physical files. +JIT编译器在内存中同样会生成这一堆*NgFactory*，但它们大部分是不可见的。 +AOT编译器则会生成在单独的物理文件中。 +
@@ -254,6 +408,8 @@ AOT compilation reveals them as separate, physical files. Do not edit the _NgFactories_! Re-compilation replaces these files and all edits will be lost. +不要编辑这些*NgFactory*！重新编译时会替换这些文件，你做的所有修改都会丢失。 +
@@ -265,19 +421,33 @@ Do not edit the _NgFactories_! Re-compilation replaces these files and all edits ## Bootstrap +## 引导 + The AOT approach changes application bootstrapping. +AOT也改变了应用的引导方式。 + Instead of bootstrapping `AppModule`, you bootstrap the application with the generated module factory, `AppModuleNgFactory`. +引导的方式从引导`AppModule`改成了引导生成的模块工厂：`AppModuleNgFactory`。 + Make a copy of `main.ts` and name it `main-jit.ts`. This is the JIT version; set it aside as you may need it [later](guide/aot-compiler#run-jit "Running with JIT"). +复制一份`main.ts`并把它改名为`main-jit.ts`。 +这就是JIT版本，先把它放在一边，我们[稍后](guide/aot-compiler#run-jit "Running with JIT")会用到它。 + Open `main.ts` and convert it to AOT compilation. Switch from the `platformBrowserDynamic.bootstrap` used in JIT compilation to `platformBrowser().bootstrapModuleFactory` and pass in the AOT-generated `AppModuleNgFactory`. +打开`main.ts`，并把它改成AOT编译。 +从`platformBrowserDynamic.bootstrap`改成使用`platformBrowser().bootstrapModuleFactory`并把`AppModuleNgFactory`的AOT编译结果传给它。 + Here is AOT bootstrap in `main.ts` next to the original JIT version: +这里是AOT版本`main.ts`中的引导过程，下一个是你所熟悉的JIT版本。 + @@ -295,28 +465,44 @@ Here is AOT bootstrap in `main.ts` next to the original JIT version: Be sure to [recompile](guide/aot-compiler#compiling-aot) with `ngc`! +确保用`ngc`进行[重新编译](guide/aot-compiler#compiling-aot)！ + {@a tree-shaking} ## Tree shaking +## 摇树优化（Tree shaking） + AOT compilation sets the stage for further optimization through a process called _tree shaking_. A tree shaker walks the dependency graph, top to bottom, and _shakes out_ unused code like dead leaves in a tree. -Tree shaking can greatly reduce the downloaded size of the application -by removing unused portions of both source and library code. -In fact, most of the reduction in small apps comes from removing unreferenced Angular features. +AOT编译为接下来通过一个叫做*摇树优化*的过程做好了准备。 +摇树优化器从上到下遍历依赖图谱，并且*摇掉*用不到的代码，这些代码就像是圣诞树中那些死掉的松针一样。 + +Tree shaking can greatly reduce the downloaded size of the application +by removing unused portions of both source and library code. +In fact, most of the reduction in small apps comes from removing unreferenced Angular features. + +通过移除源码和库代码中用不到的部分，摇树优化可以大幅缩减应用的下载体积。 +事实上，在小型应用中大部分的缩减都是因为筛掉了那些没用到的Angular特性。 For example, this demo application doesn't use anything from the `@angular/forms` library. There is no reason to download forms-related Angular code and tree shaking ensures that you don't. +例如，这个演示程序中没有用到`@angular/forms`库中的任何东西，那么也就没有理由去下载这些与表单有关的Angular代码了。摇树优化可以帮你确保这一点。 + Tree shaking and AOT compilation are separate steps. Tree shaking can only target JavaScript code. AOT compilation converts more of the application to JavaScript, which in turn makes more of the application "tree shakable". +摇树优化和AOT编译是单独的步骤。 +摇树优化仅仅针对JavaScript代码。 +AOT编译会把应用中的大部分都转换成JavaScript，这种转换会让应用更容易被“摇树优化”。 + {@a rollup} @@ -325,11 +511,19 @@ which in turn makes more of the application "tree shakable". This cookbook illustrates a tree shaking utility called _Rollup_. +这个烹饪宝典中用来示范的摇树优化工具是*Rollup*。 + Rollup statically analyzes the application by following the trail of `import` and `export` statements. It produces a final code _bundle_ that excludes code that is exported, but never imported. +Rollup会通过跟踪`import`和`export`语句来对本应用进行静态分析。 +它所生成的最终代码*捆*中会排除那些被导出过但又从未被导入的代码。 + Rollup can only tree shake `ES2015` modules which have `import` and `export` statements. +Rollup只能对`ES2015`模块摇树，因为那里有`import`和`export`语句。 + +
@@ -338,12 +532,19 @@ Recall that `tsconfig-aot.json` is configured to produce `ES2015` modules. It's not important that the code itself be written with `ES2015` syntax such as `class` and `const`. What matters is that the code uses ES `import` and `export` statements rather than `require` statements. +回忆一下，`tsconfig-aot.json`中曾配置为生成`ES2015`的模块。 +代码本身是否用到了`ES2015`语法（例如`class`和`const`）并不重要，重要的是这些代码使用的应该是`import`和`export`语句，而不是`require`语句。 + +
In the terminal window, install the Rollup dependencies with this command: +通过下列命令安装Rollup依赖： + + npm install rollup rollup-plugin-node-resolve rollup-plugin-commonjs rollup-plugin-uglify --save-dev @@ -354,6 +555,9 @@ Next, create a configuration file (`rollup-config.js`) in the project root directory to tell Rollup how to process the application. The cookbook configuration file looks like this. +接下来，在项目根目录新建一个配置文件（`rollup-config.js`），来告诉Rollup如何处理应用。 +本烹饪书配置文件是这样的： + @@ -365,30 +569,50 @@ This config file tells Rollup that the app entry point is `src/app/main.js` . The `dest` attribute tells Rollup to create a bundle called `build.js` in the `dist` folder. It overrides the default `onwarn` method in order to skip annoying messages about the AOT compiler's use of the `this` keyword. +这个配置文件告诉Rollup，该应用的入口点是`app/main.js`。 +`dest`属性告诉Rollup要在`dist`目录下创建一个名叫`build.js`的捆文件。 +它覆盖了默认的`onwarn`方法，以便忽略由于AOT编译器使用`this`关键字导致的噪音消息。 + The next section covers the plugins in more depth. +下一节我们将深入讲解插件。 + {@a rollup-plugins} ### Rollup Plugins +### Rollup插件 + Optional plugins filter and transform the Rollup inputs and output. +这些可选插件过滤并转换Rollup的输入和输出。 + *RxJS* -Rollup expects application source code to use `ES2015` modules. +Rollup expects application source code to use `ES2015` modules. Not all external dependencies are published as `ES2015` modules. In fact, most are not. Many of them are published as _CommonJS_ modules. +Rollup期望应用的源码使用`ES2015`模块。 +但并不是所有外部依赖都发布成了`ES2015`模块。 +事实上，大多数都不是。它们大多数都发布成了*CommonJS*模块。 + The _RxJs_ Observable library is an essential Angular dependency published as an ES5 JavaScript _CommonJS_ module. +可观察对象库*RxJS*是Angular所依赖的基础之一，它就是发布成了ES5 JavaScript的*CommonJS*模块。 + Luckily, there is a Rollup plugin that modifies _RxJs_ to use the ES `import` and `export` statements that Rollup requires. Rollup then preserves the parts of `RxJS` referenced by the application in the final bundle. Using it is straigthforward. Add the following to the `plugins` array in `rollup-config.js`: +幸运的是，有一个Rollup插件，它会修改*RxJS*，以使用Rollup所需的ES`import`和`export`语句。 +然后Rollup就可以把该应用中用到的那部分`RxJS`代码留在“捆”文件中了。 +它的用法很简单。把下列代码添加到`rollup-config.js`的`plugins`数组中： + @@ -398,10 +622,16 @@ the `plugins` array in `rollup-config.js`: *Minification* +*最小化* + Rollup tree shaking reduces code size considerably. Minification makes it smaller still. This cookbook relies on the _uglify_ Rollup plugin to minify and mangle the code. Add the following to the `plugins` array: +Rollup做摇树优化时会大幅减小代码体积。最小化过程则会让它更小。 +本烹饪宝典依赖于Rollup插件*uglify*来最小化并混淆代码。 +把下列代码添加到`plugins`数组中： + @@ -416,6 +646,8 @@ Add the following to the `plugins` array: In a production setting, you would also enable gzip on the web server to compress the code into an even smaller package going over the wire. +在生产环境中，我们还应该打开Web服务器的gzip特性来把代码压缩得更小。 + @@ -425,8 +657,14 @@ the code into an even smaller package going over the wire. ### Run Rollup + +### 运行Rollup + Execute the Rollup process with this command: +通过下列命令执行Rollup过程： + + node_modules/.bin/rollup -c rollup-config.js @@ -439,6 +677,9 @@ Execute the Rollup process with this command: Windows users should surround the `rollup` command in double quotes: +Windows用户要把`rollup`命令放进双引号中： + + "node_modules/.bin/rollup" -c rollup-config.js @@ -457,10 +698,16 @@ Windows users should surround the `rollup` command in double quotes: ## Load the bundle +## 加载捆文件 + Loading the generated application bundle does not require a module loader like SystemJS. Remove the scripts that concern SystemJS. Instead, load the bundle file using a single `
### Link tag + + ### Link标签 + @@ -1297,9 +1750,16 @@ also encapsulate a style sheet within a specific component. In Angular, you can continue to use the link tag to define the styles for your application in the `index.html` file. But now you can also encapsulate styles for your components. + 在Angular2中，我们可以继续在`index.html`中使用link标签来为应用程序定义样式。 + 但是也能在组件中封装样式。 + + ### StyleUrls In Angular, you can use the `styles` or `styleUrls` property of the `@Component` metadata to define a style sheet for a particular component. + + 在Angular中，我们可以在`@Component`的元数据中使用`styles`或`styleUrls`属性来为一个特定的组件定义样式表。 + @@ -1307,6 +1767,9 @@ also encapsulate a style sheet within a specific component. This allows you to set appropriate styles for individual components that won’t leak into other parts of the application. + + 这让我们可以为各个组件设置合适的样式，而不用担心它被泄漏到程序中的其它部分。 +