From 5a477b796b2b04844250668977120aa777c12079 Mon Sep 17 00:00:00 2001 From: Zhicheng Wang Date: Wed, 1 Jun 2016 21:32:28 +0800 Subject: [PATCH] =?UTF-8?q?cookbook=20-=201=20to=202=20=E5=88=9D=E8=AF=91?= =?UTF-8?q?=E5=AE=8C=E6=AF=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../cookbook/a1-a2-quick-reference.jade | 482 ++++++++++++++++++ 1 file changed, 482 insertions(+) diff --git a/public/docs/ts/latest/cookbook/a1-a2-quick-reference.jade b/public/docs/ts/latest/cookbook/a1-a2-quick-reference.jade index 134474ec80..b05977b2fc 100644 --- a/public/docs/ts/latest/cookbook/a1-a2-quick-reference.jade +++ b/public/docs/ts/latest/cookbook/a1-a2-quick-reference.jade @@ -14,27 +14,50 @@ a(id="top") **可到[在线范例](/resources/live-examples/cb-a1-a2-quick-reference/ts/plnkr.html)中查看Angular 2语法**。 ## Contents + + ## 内容 + This chapter covers + + 本章内容覆盖了： + * [Template Basics](#template-basics) - binding and local variables + * [模板基础](#template-basics) - 绑定变量与局部变量 + * [Template Directives](#template-directives) - built-in directives `ngIf` and `ngClass` + * [模板指令](#template-directives) - 内建指令`ngIf`和`ngClass` + * [Filters/Pipes](#filters-pipes) - built-in *filters*, known as *pipes* in Angular 2 + * [过滤器/管道](#filters-pipes) - 内建*过滤器(filter)*，在Angular 2中叫*管道(pipe)* + * [Controllers/Components](#controllers-components) - *controllers* are *components* in Angular 2. Also covers modules. + * [控制器/组件](#controllers-components) - *控制器*在Angular 2中叫组件。本节还包括模块。 + * [Style Sheets](#style-sheets) - more options for CSS in Angular 2. + * [样式表](#style-sheets) - 在Angular 2中关于CSS的更多选项。 + * [String date pipe](#string-dates) - a tip for displaying string date values. + * [日期转字符串管道](#string-dates) - 关于日期转字符串的小提示。 + .l-main-section :marked ## Template Basics + + ## 模板基础 + Templates are the user-facing part of an Angular application and are written in HTML. The following are some of the key Angular 1 template features with the equivalent template syntax in Angular 2. + 模板是Angular应用中的门面部分，它是用HTML写的。下表中是一些Angular 1中的关键模板特性及其在Angular 2中的等价语法。 + - var top="vertical-align:top" table(width="100%") col(width="50%") @@ -46,6 +69,9 @@ table(width="100%") td :marked ### Bindings/Interpolation + + ### 绑定/插值表达式 + code-example. Your favorite hero is: {{vm.favoriteHero}} :marked @@ -53,12 +79,21 @@ table(width="100%") This binds the value of the element to a property in the controller associated with this template. + 在Angular 1中，花括号中的表达式代表单向绑定。 + 它把元素的值绑定到了与模板相关控制器的属性上。 + When using the `controller as` syntax, the binding is prefixed with the controller alias (`vm`) because we have to be specific about the source of the binding. + + 当使用`controller as`语法时，该绑定需要用控制器的别名(`vm`)为前缀，这是因为我们不得不通过它来指定绑定源。 + td :marked ### Bindings/Interpolation + + ### 绑定/插值表达式 + +makeExample('cb-a1-a2-quick-reference/ts/app/movie-list.component.html', 'interpolation')(format="." ) :marked In Angular 2, a template expression in curly braces still denotes one-way binding. @@ -66,55 +101,102 @@ table(width="100%") The context of the binding is implied and is always the associated component, so it needs no reference variable. + 在angular 2中，花括号中的模板表达式同样代表单向绑定。 + 它把元素的值绑定到了组件的属性上。 + 它绑定的上下文变量是隐式的，并且总是关联到组件。 + 所以，它不需要一个引用变量。 + For more information see [Template Syntax](../guide/template-syntax.html#interpolation). + + 要了解更多，请参见[模板语法](../guide/template-syntax.html#interpolation)。 + tr(style=top) td :marked ### Filters + + ### 过滤器 + code-example. <td>{{movie.title | uppercase}}</td> :marked To filter output in our templates in Angular 1, we use the pipe character (|) and one or more filters. + 要在Angular 1中过滤输出，我们使用管道字符(|)以及一个或多个过滤器。 + In this example, we filter the `title` property to uppercase. + + 在这个例子中，我们把`title`属性过滤成了大写形式。 + td :marked ### Pipes + + ### 管道 + +makeExample('cb-a1-a2-quick-reference/ts/app/app.component.html', 'uppercase')(format="." ) :marked In Angular 2, we use similar syntax with the pipe (|) character to filter output, but now we call them **pipes**. Many (but not all) of the built-in filters from Angular 1 are built-in pipes in Angular 2. + 在Angular 2中，我们使用相似的语法 —— 用管道字符(|)来过滤输出，但是我们现在直接把它叫做**管道**了。 + 很多(但不是所有)Angular 1中的内建过滤器也成了Angular 2中的内建管道。 + See the heading [Filters / Pipes](#Pipes) below for more information. + + 请参见标题[过滤器/管道](#Pipes)了解更多信息。 + tr(style=top) td :marked ### Local variables + + ### 局部变量 + code-example(format=""). <tr ng-repeat="movie in vm.movies"> <td>{{movie.title}}</td> </tr> :marked Here, `movie` is a user-defined local variable. + + 这里的`movie`是一个用户定义的局部变量 + td :marked ### Input variables + + ### 输入变量 + +makeExample('cb-a1-a2-quick-reference/ts/app/app.component.html', 'local')(format="." ) :marked In Angular 2, we have true template input variables that are explicitly defined using the `let` keyword. + 在Angular 2中，我们有了真正的模板输入变量，它需要使用`let`关键字进行明确定义。 + For more information see [ngFor micro-syntax](../guide/template-syntax.html#ngForMicrosyntax). + + 要了解更多信息，请参见[ngFor micro-syntax](../guide/template-syntax.html#ngForMicrosyntax)。 :marked [Back to top](#top) + [返回顶部](#top) + .l-main-section :marked ## Template Directives + + ## 模板指令 + Angular 1 provides over seventy built-in directives for use in our templates. Many of them are no longer needed in Angular 2 because of its more capable and expressive binding system. The following are some of the key Angular 1 built-in directives and the equivalent feature in Angular 2. + Angular 1为模板提供了七十多个内建指令。 + 在Angular 2中，它们很多都已经不需要了，因为Angular 2有了一个更加强大、快捷的绑定系统。 + 下面是一些Angular 1中的关键指令及其在Angular 2中的等价特性。 + table(width="100%") col(width="50%") col(width="50%") @@ -130,19 +212,33 @@ table(width="100%") :marked The application startup process is called **bootstrapping**. + 应用的启动过程被称为**引导**。 + Although we can bootstrap an Angular 1 app in code, many applications bootstrap declaratively with the `ng-app` directive, giving it the name of the application's module (`movieHunter`). + + 虽然我们可以从代码中引导Angular 1应用， + 但很多应用都是通过`ng-app`指令进行声明式引导的，只要给它一个应用模块的名字(`movieHunter`)就可以了。 + td :marked ### Bootstrapping + + ### 引导 + +makeExample('cb-a1-a2-quick-reference/ts/app/main.ts')(format="." ) :marked Angular 2 does not have a bootstrap directive. We always launch the app in code by explicitly calling a bootstrap function and passing it the name of the application's module (`AppComponent`). + Angular 2没有引导指令。 + 我们总是通过显式调用一个`bootstrap`函数，并传入应用模块的名字(`AppComponent`)来启动应用的。 + For more information see [Quick Start](../quickstart.html). + + 要了解更多，参见[“快速起步”](../quickstart.html)。 tr(style=top) td :marked @@ -157,9 +253,17 @@ table(width="100%") key of the object defined as a CSS class name, and each value defined as a template expression that evaluates to a Boolean value. + 在Angular 1中，`ng-class`指令会基于一个表达式来包含/排除某些CSS类。该表达式通常是一个“键-值”型的控制对象， + 对象中的每一个键代表一个CSS类名，每一个值定义为一个返回布尔值的模板表达式。 + In the first example, the `active` class is applied to the element if `isActive` is true. + 在第一个例子中，当`isActive`为真时，`active`类会被应用到元素上。 + We can specify multiple classes as shown in the second example. + + 就像第二个例子中展示的，我们可以指定多个CSS类。 + td :marked ### ngClass @@ -168,15 +272,26 @@ table(width="100%") In Angular 2, the `ngClass` directive works similarly. It includes/excludes CSS classes based on an expression. + 在Angular 2中，`ngClass`指令用类似的方式工作。 + 它根据一个表达式包含/排除某些CSS类。 + In the first example, the `active` class is applied to the element if `isActive` is true. + 在第一个例子中，如果`isActive`为真，则`active`类被应用到那个元素上。 + We can specify multiple classes as shown in the second example. + 就像第二个例子中所展示的那样，我们可以同时指定多个类。 + Angular 2 also has **class binding**, which is a good way to add or remove a single class as shown in the third example. + Angular 2还有**类绑定**，它是单独添加或移除一个类的好办法 —— 就像第三个例子中展示的。 + For more information see [Template Syntax](../guide/template-syntax.html#other-bindings). + 要了解更多信息，参见[模板语法](../guide/template-syntax.html#other-bindings)。 + tr(style=top) td :marked @@ -187,32 +302,56 @@ table(width="100%") :marked In Angular 1, the `ng-click` directive allows us to specify custom behavior when an element is clicked. + 在Angular 1中，`ng-click`指令能让我们指定当元素被点击时的自定义行为。 + In the first example, when the button is clicked, 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`对象，它提供了事件的详情，并被传到控制器。 + td :marked ### bind to the `click` event + + ### 绑定到`click`事件 + +makeExample('cb-a1-a2-quick-reference/ts/app/app.component.html', 'event-binding')(format="." ) :marked The Angular 1 event-based directives do not exist in Angular 2. Rather, we define one-way binding from the template view to the component using **event binding**. + Angular 1基于事件的指令在Angular 2中已经不存在了。 + 不过，我们可以使用**事件绑定**来定义从模板视图到组件的单向数据绑定。 + For event binding, we define the name of the target event within parenthesis and specify a template statement in quotes to the right of the equals. Angular 2 then sets up an event handler for the target event. When the event is raised, the handler executes the template statement. + 要使用事件绑定，我们把目标事件的名字放在圆括号中，并且使用等号右侧引号中的模板语句对它赋值。 + 然后Angular 2为这个目标时间设置事件处理器。当事件被触发时，这个处理器就会执行模板语句。 + In the first example, when the button is clicked, 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事件的列表，请参见。 + For more information see [Template Syntax](../guide/template-syntax.html#event-binding). + 要了解更多，请参见[模板语法](../guide/template-syntax.html#event-binding)。 + tr(style=top) td :marked @@ -223,27 +362,50 @@ table(width="100%") In Angular 1, 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. + + 在Angular 1中，`ng-controller`指令把控制器附加到视图上。 + 使用`ng-controller`(或把控制器定义为路由的一部分)把视图及其控制器的代码联系在一起。 + td :marked ### Component decorator + + ### Component装饰器 + +makeExample('cb-a1-a2-quick-reference/ts/app/movie-list.component.ts', 'component')(format="." ) :marked In Angular 2, the template no longer specifies its associated controller. Rather, the component specifies its associated template as part of the component class decorator. + 在Angular 2中，模板不用再指定它相关的视图。 + 反过来，组件会在组件类的装饰器中指定与它相关的模板。 + For more information see [Architecture Overview](../guide/architecture.html#component). + 要了解更多，请参见[架构概览](../guide/architecture.html#component)。 + tr(style=top) td :marked ### ng-hide In Angular 1, the `ng-hide` directive shows or hides the associated HTML element based on an expression. See [ng-show](#ng-show) for more information. + + 在Angular 1中，`ng-hide`指令会基于一个表达式显示或隐藏相关的HTML元素。 + 参见[ng-show](#ng-show)了解更多。 + td :marked ### bind to the `hidden` property + + ### 绑定`hidden`属性 + In Angular 2, we use property binding; there is no built-in *hide* directive. See [ng-show](#ng-show) for more information. + + 在Angular 2中，并没有一个内建的*hide*指令，我们可以改用属性绑定。 + 参见[ng-show](#ng-show)了解更多。 + tr(style=top) td :marked @@ -255,26 +417,47 @@ table(width="100%") can replace the binding expression with the appropriate URL before the browser fetches from that URL. + `ng-href`指令允许Angular 1对`href`属性进行预处理，以便它能在浏览器获取那个URL之前，使用一个返回适当URL的绑定表达式替换它。 + In Angular 1, the `ng-href` is often used to activate a route as part of navigation. + + 在Angular 1中，`ng-href`通常用来作为导航的一部分，激活一个路由。 + code-example(format=""). <a ng-href="#movies">Movies</a> :marked Routing is handled differently in Angular 2. + + 路由在Angular 2中的处理方式不同。 + td :marked ### bind to the `href` property + + ### 绑定到`href`属性 + +makeExample('cb-a1-a2-quick-reference/ts/app/app.component.html', 'href')(format="." ) :marked In Angular 2, we use property binding; there is no built-in *href* directive. We place the element's `href` property in square brackets and set it to a quoted template expression. + 在Angular 2中，并没有内建的*href*指令，我们可以改用属性绑定。 + 我们把元素的`href`属性放在方括号中，并把它设成一个引号中的模板表达式。 + For more information on property binding see [Template Syntax](../guide/template-syntax.html#property-binding). + 要了解属性绑定的更多知识，参见[模板语法](../guide/template-syntax.html#property-binding)。 + In Angular 2, `href` is no longer used for routing. Routing uses `routerLink` as shown in the third example. + + 在Angular 2中，`href`不再用作路由，而是改用第三个例子中所展示的`routerLink`指令。 + +makeExample('cb-a1-a2-quick-reference/ts/app/app.component.html', 'router-link')(format="." ) :marked For more information on routing see [Routing & Navigation](../guide/router.html#router-link). + 要了解关于路由的更多信息，请参见[路由与导航](../guide/router.html#router-link)。 + tr(style=top) td :marked @@ -285,7 +468,11 @@ table(width="100%") In Angular 1, 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. + 在Angular 1中，`ng-if`指令会根据一个表达式来移除或重建DOM中的一部分。如果表达式为假，元素就会被从DOM中移除。 + In this example, the `table` element is removed from the DOM unless the `movies` array has a length greater than zero. + + 在这个例子中，除非`movies`数组的长度大于0，否则`table`元素就会被从DOM中移除。 td :marked ### *ngIf @@ -294,10 +481,19 @@ table(width="100%") The `*ngIf` directive in Angular 2 works the same as the `ng-if` directive in Angular 1, it removes or recreates a portion of the DOM based on an expression. + Angular 2中的`*ngIf`指令与Angular 1中的`ng-if`指令不同， + 它根据表达式的值移除或重建DOM中的一部分。 + In this example, the `table` element is removed from the DOM unless the `movies` array has a length. + 在这个例子中，除非`movies`数组的长度大于0，否则`table`元素就会被从DOM中移除。 + The (*) before `ngIf` is required in this example. For more information see [Structural Directives](../guide/structural-directives.html). + + 在这个例子中`ngIf`前的星号(*)是必须的。 + 要了解更多信息，参见[结构型指令](../guide/structural-directives.html)。 + tr(style=top) td :marked @@ -308,6 +504,10 @@ table(width="100%") In Angular 1, 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 changes made to the value in the view is synchronized with the model and any changes to the model are synchronized with the value in the view. + + 在Angular1中，`ng-model`指令把一个表单控件绑定到了模板相关控制器的一个属性上。 + 这提供了**双向绑定**功能，因此，任何对视图中值的改动，都会同步到模型中，对模型的改动，也会同步到视图中。 + td :marked ### ngModel @@ -317,7 +517,13 @@ table(width="100%") This syntax is a short-cut for defining both property binding (from the component to the view) and event binding (from the view to the component), thereby giving us two-way binding. + 在Angular 2中，**双向绑定**使用[()]标记出来，它被形象的比作“盒子中的香蕉”。 + 这种语法是一个简写形式，用来同时定义一个属性绑定（从组件到视图）和一个事件绑定（从视图到组件），因此，我们得到了双向绑定。 + For more information on two-way binding with ngModel see [Template Syntax](../guide/template-syntax.html#ngModel). + + 要了解使用ngModel进行双向绑定的更多知识，参见[模板语法](../guide/template-syntax.html#ngModel)。 + tr(style=top) td :marked @@ -328,7 +534,11 @@ table(width="100%") In Angular 1, the `ng-repeat` directive repeats the associated DOM element for each item from the specified collection. + 在Angular1中，`ng-repeat`指令会为指定集合中的每一个条目重复渲染相关的DOM元素。 + In this example, the table row (`tr`) element is repeated for each movie object in the collection of movies. + + 在这个例子中，对`movies`集合中的每一个`movie`对象重复渲染了这个表格行元素(`tr`)。 td :marked ### *ngFor @@ -339,12 +549,21 @@ table(width="100%") More accurately, it turns the defined element (`tr` in this example) and its contents into a template and uses that template to instantiate a view for each item in the list. + Angular 2中的`*ngFor`指令类似于Angular 1中的`ng-repeat`指令。 + 它为指定集合中的每一个条目重复渲染了相关的DOM元素。 + 更准确的说，它把被界定出来的元素（这个例子中是`tr`）及其内容转成了一个模板，并使用那个模板来为列表中的每一个条目实例化一个视图。 + 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.html). + + 要了解更多信息，参见[结构性指令](../guide/structural-directives.html)。 tr(style=top) td :marked @@ -357,21 +576,39 @@ table(width="100%") In Angular 1, the `ng-show` directive shows or hides the associated DOM element based on an expression. + 在Angular 1中，`ng-show`指令根据一个表达式来显示或隐藏相关的DOM元素。 + In this example, the `div` element is shown if the `favoriteHero` variable is truthy. + + 在这个例子中，如果`favoriteHero`变量为真，`div`元素就会显示出来。 + td :marked ### bind to the `hidden` property + + ### 绑定到`hidden`属性 + +makeExample('cb-a1-a2-quick-reference/ts/app/movie-list.component.html', 'hidden')(format="." ) :marked In Angular 2, we use property binding; there is no built-in *show* directive. For hiding and showing elements, we bind to the HTML `hidden` property. + 在Angular 2中，并没有内建的*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 `div` element is hidden if the `favoriteHero` variable is not truthy. + 在这个例子中，如果`favoriteHero`变量不是真值，`div`元素就会被隐藏。 + For more information on property binding see [Template Syntax](../guide/template-syntax.html#property-binding). + + 要了解关于属性绑定的更多信息，参见[模板表达式](../guide/template-syntax.html#property-binding)。 + tr(style=top) td :marked @@ -382,15 +619,27 @@ table(width="100%") The `ng-src` directive allows Angular 1 to preprocess the `src` property so it can replace the binding expression with the appropriate URL before the browser fetches from that URL. + + `ng-src`指令允许Angular 1对`src`属性进行预处理，以便它能够在浏览器获取此URL之前，用一个返回适当URL的绑定表达式替换它。 + td :marked ### bind to the `src` property + + ### 绑定到`src`属性 + +makeExample('cb-a1-a2-quick-reference/ts/app/app.component.html', 'src')(format="." ) :marked In Angular 2, we use property binding; there is no built-in *src* directive. We place the `src` property in square brackets and set it to a quoted template expression. + 在Angular 2中，并没有一个内建的*src*指令，我们可以使用属性绑定。 + 我们把`src`属性放到方括号中，并且把它设为一个引号中的绑定表达式。 + For more information on property binding see [Template Syntax](../guide/template-syntax.html#property-binding). + + 要了解属性绑定的更多知识，参见[模板语法](../guide/template-syntax.html#property-binding)。 + tr(style=top) td :marked @@ -403,7 +652,13 @@ table(width="100%") key of the object defined as a CSS style name, and each value defined as an expression that evaluates to a value appropriate for the style. + 在Angular 1中，`ng-style`指令根据一个绑定表达式设置一个HTML元素的CSS样式。 + 该表达式通常是一个“键-值”形式的控制对象，对象的每个键都是一个CSS的样式名，每个值都是一个能计算为此样式的合适值的表达式。 + In the example, the `color` style is set to the current value of the `colorPreference` variable. + + 在这个例子中，`color`样式被设置为`colorPreference`变量的当前值。 + td :marked ### ngStyle @@ -411,13 +666,23 @@ table(width="100%") :marked In Angular 2, the `ngStyle` directive works similarly. It sets a CSS style on an HTML element based on an expression. + 在Angular 2中，`ngStyle`指令的工作方式与此类似。它根据一个表达式设置HTML元素上的CSS样式。 + In the first example, the `color` style is set to the current value of the `colorPreference` variable. + 在第一个例子中，`color`样式被设置成了`colorPreference`变量的当前值。 + Angular 2 also has **style binding**, which is good way to set a single style. This is shown in the second example. + Angualr 2还有**样式绑定**语法，它是单独设置一个样式的好方法。它展示在第二个例子中。 + For more information on style binding see [Template Syntax](../guide/template-syntax.html#style-binding). + 要了解样式绑定的更多知识，参见[模板语法](../guide/template-syntax.html#style-binding)。 + For more information on the ngStyle directive see [Template Syntax](../guide/template-syntax.html#ngStyle). + + 要了解关于ngStyle指令的更多知识，参见[模板语法](../guide/template-syntax.html#ngStyle)。 tr(style=top) td :marked @@ -439,10 +704,18 @@ table(width="100%") In Angular 1, 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 the `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!”。 + td :marked ### ngSwitch @@ -451,26 +724,49 @@ table(width="100%") In Angular 2, the `ngSwitch` directive works similarly. It displays an element whose `*ngSwitchWhen` matches the current `ngSwitch` expression value. + 在Angular 2中，`ngSwitch`指令的工作方式与此类似。 + 它会显示那个与`ngSwitch`表达式的当前值匹配的那个`*ngSwitchWhen`所在的元素。 + In this example, if `favoriteHero` is not set, the `ngSwitch` value is `null` and we see the `*ngSwitchDefault` paragraph, "Please enter ...". If the `favoriteHero` is set, it checks the movie hero by calling a component method. If that method returns `true`, we see "Excellent choice!". If that methods returns `false`, we see "No movie, sorry!". + 在这个例子中，如果`favoriteHero`没有设置，则`ngSwitch`的值是`null`，并且我们会看到 + `*ngSwitchDefault`中的段落“Please enter ...”。 + 如果`favoriteHero`被设置了，它就会通过调用一个组件方法来检查他是否电影中的英雄。 + 如果该方法返回`true`，我们就会看到“Excellent choice!”。 + 如果该方法返回`false`，我们就会看到“No movie, sorry!”。 + The (*) before `ngSwitchWhen` and `ngSwitchDefault` is required in this example. + 在这个例子中，`ngSwitchWhen`和`ngSwitchDefault`前面的星号(*)是必须的。 + For more information on the ngSwitch directive see [Template Syntax](../guide/template-syntax.html#ngSwitch). + + 要了解关于ngswitch指令的更多信息，参见[模板语法](../guide/template-syntax.html#ngSwitch)。 + :marked [Back to top](#top) + [回到顶部](#top) + a(id="filters-pipes") .l-main-section :marked ## Filters / Pipes + + ## 过滤器/管道 + Angular 2 **pipes** provide formatting and transformation for data in our template, similar to Angular 1 **filters**. Many of the built-in filters in Angular 1 have corresponding pipes in Angular 2. For more information on pipes see [Pipes](../guide/pipes.html). + Angular 2中的**管道**为我们的模板提供了格式化和数据转换功能，类似于Angular 1中的**过滤器**。 + Angular 1中的很多内建过滤器在Angular 2中都有对应的管道。 + 要了解管道的更多信息，参见[Pipes](../guide/pipes.html)。 + table(width="100%") col(width="50%") col(width="50%") @@ -485,12 +781,18 @@ table(width="100%") <td>{{movie.price | currency}}</td> :marked Formats a number as a currency. + + 把一个数字格式化成货币。 + td :marked ### currency +makeExample('cb-a1-a2-quick-reference/ts/app/app.component.html', 'currency')(format="." ) :marked The Angular 2 `currency` pipe is similar although some of the parameters have changed. + + Angular 2的`currency`管道和1中很相似，只是有些参数变化了。 + tr(style=top) td :marked @@ -499,6 +801,9 @@ table(width="100%") <td>{{movie.releaseDate | date}}</td> :marked Formats a date to a string based on the requested format. + + 基于要求的格式把日期格式化成字符串。 + td :marked ### date @@ -506,6 +811,8 @@ table(width="100%") :marked The Angular 2 `date` pipe is similar. See [note](#string-dates) about string date values. + Angular 2的`date`管道和·中很相似。参见[备注](#string-dates)来了解字符串日期值。 + tr(style=top) td :marked @@ -514,14 +821,24 @@ table(width="100%") <tr ng-repeat="movie in movieList | filter: {title:listFilter}"> :marked Selects a subset of items from the defined collection based on the filter criteria. + + 基于过滤条件从指定的集合中选取出一个子集。 + td :marked ### none + + ### 没有 + There is no comparable pipe in Angular 2 for performance reasons. Filtering should be coded in the component. Consider building a custom pipe if the same filtering code will be reused in several templates. + 在Angular 2中，出于性能的考虑，并没有一个类似的管道。 + 过滤逻辑应该在组件中用代码实现。 + 如果它将被复用在几个模板中，可以考虑构建一个自定义管道。 + tr(style=top) td :marked @@ -530,12 +847,18 @@ table(width="100%") <pre>{{movie | json}}</pre> :marked Converts a JavaScript object into a JSON string. This is useful for debugging. + + 把一个JavaScript对象转换成一个JSON字符串。这对调试很有用。 + td :marked ### json +makeExample('cb-a1-a2-quick-reference/ts/app/app.component.html', 'json')(format=".") :marked The Angular 2 `json` pipe does the same thing. + + Angular 2的`json`管道做完全相同的事。 + tr(style=top) td :marked @@ -545,6 +868,8 @@ table(width="100%") :marked Selects up to the first parameter (2) number of items from the collection starting (optionally) at the beginning index (0). + + 从集合中选择从(第二参数指定的)起始索引号(0)开始的最多(第一参数指定的)条目数(2)个条目。 td :marked ### slice @@ -554,6 +879,11 @@ table(width="100%") with the JavaScript `Slice` method. The first parameter is the starting index; the second is the limit. As in Angular 1, performance may improve if we code this operation within the component instead. + + `SlicePipe`做同样的事，但是*两个参数的顺序是相反的*，以便于JavaScript中的`slice`方法保持一致。 + 第一个参数是起始索引号，第二个参数是限制的数量。 + 和Angular 1中一样，如果我们改用组件中的代码实现此操作，性能将会提升。 + tr(style=top) td :marked @@ -562,12 +892,18 @@ table(width="100%") <div>{{movie.title | lowercase}}</div> :marked Converts the string to lowercase. + + 把该字符串转成小写形式。 + td :marked ### lowercase +makeExample('cb-a1-a2-quick-reference/ts/app/app.component.html', 'lowercase')(format=".") :marked The Angular 2 `lowercase` pipe does the same thing. + + Angular 2的`lowercase`管道和1中的功能完全相同。 + tr(style=top) td :marked @@ -576,6 +912,9 @@ table(width="100%") <td>{{movie.starRating | number}}</td> :marked Formats a number as text. + + 把数字格式化为文本。 + td :marked ### number @@ -585,8 +924,13 @@ table(width="100%") It provides more functionality when defining the decimal places as shown in the second example above. + Angular 2的`number`管道很相似。 + 但在指定小数点位置时，它提供了更多的功能，如第二个范例所示。 + Angular 2 also has a `percent` pipe which formats a number as a local percentage as shown in the third example. + + Angular 2还有一个`percent`管道，它把一个数组格式化为本地化的(local)百分比格式，如第三个范例所示。 tr(style=top) td :marked @@ -596,26 +940,48 @@ table(width="100%") :marked Orders the collection as specified by the expression. In this example, the movieList is ordered by the movie title. + + 使用表达式中所指定的方式对集合进行排序。 + 在这个例子中，movieList被根据movie的title排序了。 + td :marked ### none + + ### 没有 + There is no comparable pipe in Angular 2 for performance reasons. Ordering/sorting the results should be coded in the component. Consider building a custom pipe if the same ordering/sorting code will be reused in several templates. + + 由于性能的原因，在Angular 2中并没有一个类似的管道。 + 应该在组件的代码中对结果进行排序。 + 如果同样的排序代码可能被多个模板用到，可以考虑创建一个自定义管道。 + :marked [Back to top](#top) + [回到顶部](#top) + a(id="controllers-components") .l-main-section :marked ## Controllers / Components + + ## 控制器/组件 + In Angular 1, we write the code that provides the model and the methods for the view in a **controller**. In Angular 2, we build a **component**. + 在Angular 1中，我们在**控制器**中写代码，来为视图提供模型和方法。 + 在Angular 2中，我们创建**组件**。 + Because much of our Angular 1 code is in JavaScript, JavaScript code is shown in the Angular 1 column. The Angular 2 code is shown using TypeScript. + 因为很多Angular 1的代码是用JavaScript写的，所以在Angular 1列显示的是JavaScript代码，而Angular 2列显示的是TypeScript代码。 + table(width="100%") col(width="50%") col(width="50%") @@ -633,23 +999,39 @@ table(width="100%") :marked In Angular 1, we often defined an immediately invoked function expression (or IIFE) around our controller code. This kept our controller code out of the global namespace. + + 在Angular 1中，我们通常会定义一个立即调用的函数表达式（IIFE）来包裹我们的控制器代码。 + 以便让我们的控制器代码不会污染全局命名空间。 + td :marked ### none + ### 没有 We don't need to worry about this in Angular 2 because we use ES 2015 modules and modules handle the namespacing for us. + 在Angular 2中我们不用担心这个问题，因为我们使用ES 2015的模块，而模块会为我们处理命名空间问题。 + For more information on modules see [Architecture Overview](../guide/architecture.html#module). + + 要了解关于模块的更多信息，参见[架构概览](../guide/architecture.html#module)。 + tr(style=top) td :marked ### Angular modules + + ### Angular模块 + code-example. angular.module("movieHunter", ["ngRoute"]); :marked In Angular 1, we define an Angular module, which keeps track of our controllers, services, and other code. The second argument defines the list of other modules that this module depends upon. + + 在Angular 1中，我们定义一个Angular模块，它将对我们的控制器、服务和其他代码进行跟踪。第二个参数定义该模块依赖的其它模块列表。 + td :marked ### import @@ -658,13 +1040,24 @@ table(width="100%") Angular 2 does not have its own module system. Instead we use ES 2015 modules. ES 2015 modules are file based, so each code file is its own module. + Angular 2没有它自己的模块系统，而是使用ES 2015的模块。 + ES 2015的模块是基于文件的，所以每个代码文件就是它自己的模块。 + We `import` what we need from the module files. + 我们`import`任何我们想从模块文件中得到的东西。 + For more information on modules see [Architecture Overview](../guide/architecture.html#module). + + 要了解关于模块的更多信息，参见[架构概览](../guide/architecture.html#module)。 + tr(style=top) td :marked ### Controller registration + + ### 控制器注册 + code-example. angular .module("movieHunter") @@ -675,44 +1068,78 @@ table(width="100%") In Angular 1, we have code in each controller that looks up an appropriate Angular module and registers the controller with that module. + 在Angular 1中，我们在每个控制器中都有一些代码，用于找到合适的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. + + 第一个参数是控制器的名称，第二个参数定义了所有将注入到该控制器的依赖的字符串名称，以及一个到控制器函数的引用。 + td :marked ### Component Decorator + + ### 组件装饰器 + +makeExample('cb-a1-a2-quick-reference/ts/app/movie-list.component.ts', 'component')(format=".") :marked In Angular 2, we add a decorator to the component class to provide any required metadata. 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 2中，我们往组件类上添加了一个装饰器，以提供任何需要的元数据。 + 组件装饰器把该类声明为组件，并提供了关于该组件的元数据，比如它的选择器(或标签)及其模板。 + This is how we associate a template with code, which is defined in the component class. + 这就是我们把模板关联到代码的方式，它定义在组件类中。 + For more information on components see [Architecture Overview](../guide/architecture.html#component). + + 要了解关于模板的更多信息，参见[架构概览](../guide/architecture.html#component)。 + tr(style=top) td :marked ### Controller function + + ### 控制器函数 code-example. function MovieListCtrl(movieService) { } :marked In Angular 1, we write the code for the model and methods in a controller function. + + 在Angular1中，我们在控制器函数中写模型和方法的代码。 + td :marked ### Component class + + ### 组件类 + +makeExample('cb-a1-a2-quick-reference/ts/app/movie-list.component.ts', 'class')(format=".") :marked In Angular 2, we create a component class. + 在Angular 2中，我们写组件类。 + NOTE: If you are using TypeScript with Angular 1 then the only difference here is that the component class must be exported using the `export` keyword. + 注意：如果你正在用TypeScript写Angular 1，那么这里唯一的不同是哪个组件类必须用`export`关键字导出。 + For more information on components see [Architecture Overview](../guide/architecture.html#component). + + 要了解关于组件的更多信息，参见[架构概览](../guide/architecture.html#component)。 + tr(style=top) td :marked ### Dependency injection + + ### 依赖注入 + code-example. MovieListCtrl.$inject = ['MovieService']; function MovieListCtrl(movieService) { @@ -721,31 +1148,58 @@ table(width="100%") In Angular 1, we pass in any dependencies as controller function arguments. In this example, we inject a `MovieService`. + 在Angular 1中，我们把所有依赖都作为控制器函数的参数。 + 在这个例子中，我们注入了一个`MovieService`。 + We also guard against minification problems by telling Angular explicitly that it should inject an instance of the `MovieService` in the first parameter. + + 我们还通过在第一个参数明确告诉Angular它应该注入一个`MovieService`的实例，以防止在最小化时出现问题。 + td :marked ### Dependency injection + + ### 依赖注入 + +makeExample('cb-a1-a2-quick-reference/ts/app/movie-list.component.ts', 'di')(format=".") :marked In Angular 2, we pass in dependencies as arguments to the component class constructor. In this example, we inject a `MovieService`. The first parameter's TypeScript type tells Angular what to inject even after minification. + 在Angular 2中，我们把依赖作为组件构造函数的参数传入。 + 在这个例子中，我们注入了一个`MovieService`。 + 即使在最小化之后，第一个参数的TypeScript类型也会告诉Angular它该注入什么。 + For more information on dependency injection see [Architecture Overview](../guide/architecture.html#dependency-injection). + + 要了解关于依赖注入的更多信息，参见[架构概览](../guide/architecture.html#dependency-injection)。 + :marked [Back to top](#top) + [回到顶部](#top) + a(id="style-sheets") .l-main-section :marked ## Style Sheets + + ## 样式表 + Style sheets give our application a nice look. In Angular 1, we specify the style sheets for our entire application. As the application grows over time, the styles for the many parts of the application are merged, which can cause unexpected results. In Angular 2, we can still define style sheets for our entire application. But now we can also encapculate a style sheet within a specific component. + + 样式表美化我们的应用程序。 + 在Angular 1中，我们为整个应用程序指定样式表。 + 当应用程序成长一段时间之后，应用程序中很多部分的样式会被合并，导致无法预计的后果。 + 在Angular 2中，我们仍然会为整个应用程序定义样式，不过现在我们也可以把样式表封装在特定的组件中。 + table(width="100%") col(width="50%") col(width="50%") @@ -761,40 +1215,68 @@ table(width="100%") :marked In Angular 1, we use a `link` tag in the head section of our `index.html` file to define the styles for our application. + + 在Angular 1中，我们在`index.html`的`head`区使用`link`标签来为应用程序定义样式。 td :marked ### Link tag + + ### Link标签 + +makeExample('cb-a1-a2-quick-reference/ts/index.html', 'style')(format=".") :marked In Angular 2, we can continue to use the link tag to define the styles for our application in the `index.html` file. But we can now also encapsulate styles for our components. + + 在Angular2中，我们可以继续在`index.html`中使用link标签来为应用程序定义样式。 + 但是我们也能在组件中封装样式。 + :marked ### StyleUrls In Angular 2, we can use the `styles` or `styleUrls` property of the `@Component` metadata to define a style sheet for a particular component. + + 在Angular 2中，我们可以在`@Component`的元数据中使用`styles`或`styleUrls`属性来为一个特定的组件定义样式表。 + +makeExample('cb-a1-a2-quick-reference/ts/app/movie-list.component.ts', 'style-url')(format=".") :marked This allows us to set appropriate styles for individual components that won’t leak into other parts of the application. + + 这让我们可以为一个独立组件设置合适的样式，而不用担心它被泄漏到程序中的其它部分。 + :marked [Back to top](#top) + [回到顶部](#top) + a(id="string-dates") .l-main-section :marked ## Appendix: String dates + ## 附件：字符串日期 + Currently the Angular 2 `date` pipe does not process string dates such as "2015-12-19T00:00:00". + 目前，Angular 2的`date`管道不能处理字符串日期，比如“2015-12-19T00:00:00”。 + As a work around, subclass the Angular `DatePipe` with a version that can convert strings and substitute that pipe in the HTML: + 作为一项工作，可以为Angular的`DatePipe`派生一个子类，它能够转换字符串，并在HTML中替换那个内置的管道： + +makeExample('cb-a1-a2-quick-reference/ts/app/date.pipe.ts', 'date-pipe', 'date.pipe.ts')(format=".") :marked Then import and declare that pipe in the `@Component` metadata `pipes` array: + + 然后在`@Component`元数据的`pipes`数组中导入并声明该管道： + :marked +makeExample('cb-a1-a2-quick-reference/ts/app/movie-list.component.ts', 'date-pipe')(format=".") :marked [Back to top](#top) + + [回到顶部](#top)