honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修订完ajs-quick-ref

This commit is contained in:
Zhicheng Wang 2017-04-15 16:47:27 +08:00
parent 505d93e0ce
commit 8bf42bec1a
1 changed files with 59 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
public/docs/ts/latest/cookbook/ajs-quick-reference.jade
View File

@ -19,24 +19,22 @@ a(id="top")
内容 内容
* [Template basics](#template-basics) - binding and local variables. * [Template basics](#template-basics)—binding and local variables.
[模板基础](#template-basics) - 绑定变量与局部变量。 [模板基础](#template-basics) - 绑定变量与局部变量。
* [Template basics](#template-basics)—binding and local variables. * [Template directives](#template-directives)—built-in directives `ngIf` and `ngClass`.
[模板指令](#template-directives) - 内置指令`ngIf`和`ngClass`。 [模板指令](#template-directives) - 内置指令`ngIf`和`ngClass`。
* [Template directives](#template-directives)—built-in directives `ngIf` and `ngClass`. * [Filters/pipes](#filters-pipes)—built-in *filters*, known as *pipes* in Angular.
[过滤器/管道](#filters-pipes) - 内置*过滤器(filter)*，在Angular中叫*管道(pipe)*。 [过滤器/管道](#filters-pipes) - 内置*过滤器(filter)*，在Angular中叫*管道(pipe)*。
* [Filters/pipes](#filters-pipes)—built-in *filters*, known as *pipes* in Angular.
[模块/控制器/组件](#controllers-components) - Angular 中的*模块*和AngularJS 中的略有不同；而*控制器*在Angular 中叫组件。
* [Modules/controllers/components](#controllers-components)—*modules* in Angular are slightly different from *modules* in AngularJS, and *controllers* are *components* in Angular. * [Modules/controllers/components](#controllers-components)—*modules* in Angular are slightly different from *modules* in AngularJS, and *controllers* are *components* in Angular.
[模块/控制器/组件](#controllers-components) - Angular 中的*模块*和AngularJS 中的略有不同；而*控制器*在Angular 中叫组件。
* [Style sheets](#style-sheets)—more options for CSS than in AngularJS. * [Style sheets](#style-sheets)—more options for CSS than in AngularJS.
[样式表](#style-sheets) - Angular 相对AngularJS 在 CSS 方面有了更多选项。 [样式表](#style-sheets) - Angular 相对AngularJS 在 CSS 方面有了更多选项。
@ -103,7 +101,7 @@ table(width="100%")
For more information, see the [Interpolation](../guide/template-syntax.html#interpolation) For more information, see the [Interpolation](../guide/template-syntax.html#interpolation)
section of the [Template Syntax](../guide/template-syntax.html) page. section of the [Template Syntax](../guide/template-syntax.html) page.
要了解更多，请参见模板语法中的[插值表达式](../guide/template-syntax.html#interpolation)部分。 要了解更多，请参见[模板语法](../guide/template-syntax.html)中的[插值表达式](../guide/template-syntax.html#interpolation)部分。
tr(style=top) tr(style=top)
td td
:marked :marked
@ -171,7 +169,7 @@ table(width="100%")
For more information, see the [ngFor micro-syntax](../guide/template-syntax.html#microsyntax) For more information, see the [ngFor micro-syntax](../guide/template-syntax.html#microsyntax)
section of the [Template Syntax](../guide/template-syntax.html) page. section of the [Template Syntax](../guide/template-syntax.html) page.
要了解更多信息，请参见模板语法中的[ngFor微语法](../guide/template-syntax.html#ngForMicrosyntax)部分。 要了解更多信息，请参见[模板语法](../guide/template-syntax.html)中的[ngFor微语法](../guide/template-syntax.html#ngForMicrosyntax)部分。
:marked :marked
[Back to top](#top) [Back to top](#top)
@ -289,7 +287,7 @@ table(width="100%")
For more information see the [Attribute, class, and style bindings](../guide/template-syntax.html#other-bindings) For more information see the [Attribute, class, and style bindings](../guide/template-syntax.html#other-bindings)
section of the [Template Syntax](../guide/template-syntax.html) page. section of the [Template Syntax](../guide/template-syntax.html) page.
要了解更多信息，参见模板语法中的[属性、CSS类和样式绑定](../guide/template-syntax.html#other-bindings)部分。 要了解更多信息，参见[模板语法](../guide/template-syntax.html)中的[属性、CSS类和样式绑定](../guide/template-syntax.html#other-bindings)部分。
tr(style=top) tr(style=top)
td td
@ -317,6 +315,7 @@ table(width="100%")
### Bind to the `click` event ### Bind to the `click` event
### 绑定到`click`事件 ### 绑定到`click`事件
+makeExample('cb-ajs-quick-reference/ts/src/app/app.component.html', 'event-binding')(format="." ) +makeExample('cb-ajs-quick-reference/ts/src/app/app.component.html', 'event-binding')(format="." )
:marked :marked
AngularJS event-based directives do not exist in Angular. AngularJS event-based directives do not exist in Angular.
@ -349,7 +348,7 @@ table(width="100%")
For more information, see the [Event binding](../guide/template-syntax.html#event-binding) For more information, see the [Event binding](../guide/template-syntax.html#event-binding)
section of the [Template Syntax](../guide/template-syntax.html) page. section of the [Template Syntax](../guide/template-syntax.html) page.
要了解更多，请参见模板语法中的[事件绑定](../guide/template-syntax.html#event-binding)部分。 要了解更多，请参见[模板语法](../guide/template-syntax.html)中的[事件绑定](../guide/template-syntax.html#event-binding)部分。
tr(style=top) tr(style=top)
td td
@ -398,6 +397,7 @@ table(width="100%")
### Bind to the `hidden` property ### Bind to the `hidden` property
### 绑定`hidden`属性 ### 绑定`hidden`属性
In Angular, you use property binding; there is no built-in *hide* directive. In Angular, you use property binding; there is no built-in *hide* directive.
For more information, see [ng-show](#ng-show). For more information, see [ng-show](#ng-show).
@ -431,7 +431,9 @@ table(width="100%")
### Bind to the `href` property ### Bind to the `href` property
### 绑定到`href`属性 ### 绑定到`href`属性
+makeExample('cb-ajs-quick-reference/ts/src/app/app.component.html', 'href')(format="." ) +makeExample('cb-ajs-quick-reference/ts/src/app/app.component.html', 'href')(format="." )
:marked :marked
Angular uses property binding; there is no built-in *href* directive. 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. Place the element's `href` property in square brackets and set it to a quoted template expression.
@ -442,17 +444,19 @@ table(width="100%")
For more information see the [Property binding](../guide/template-syntax.html#property-binding) For more information see the [Property binding](../guide/template-syntax.html#property-binding)
section of the [Template Syntax](../guide/template-syntax.html) page. section of the [Template Syntax](../guide/template-syntax.html) page.
要了解属性绑定的更多知识，参见[模板语法](../guide/template-syntax.html#property-binding)。 要了解[属性绑定](../guide/template-syntax.html#property-binding)的更多知识，参见[模板语法](../guide/template-syntax.html)。
In Angular, `href` is no longer used for routing. Routing uses `routerLink`, as shown in the following example. In Angular, `href` is no longer used for routing. Routing uses `routerLink`, as shown in the following example.
在Angular中，`href`不再用作路由，而是改用第三个例子中所展示的`routerLink`指令。 在Angular中，`href`不再用作路由，而是改用第三个例子中所展示的`routerLink`指令。
+makeExample('cb-ajs-quick-reference/ts/src/app/app.component.html', 'router-link')(format="." ) +makeExample('cb-ajs-quick-reference/ts/src/app/app.component.html', 'router-link')(format="." )
:marked :marked
For more information on routing, see the [RouterLink binding](../guide/router.html#router-link) For more information on routing, see the [RouterLink binding](../guide/router.html#router-link)
section of the [Routing & Navigation](../guide/router.html) page. section of the [Routing & Navigation](../guide/router.html) page.
要了解关于路由的更多信息，请参见[路由与导航](../guide/router.html#router-link)。 要了解关于路由的更多信息，请参见[路由与导航](../guide/router.html)的[RouterLink绑定](../guide/router.html#router-link)部分。
tr(style=top) tr(style=top)
td td
@ -468,7 +472,7 @@ table(width="100%")
In this example, the `<table>` element is removed from the DOM unless the `movies` array has a length greater than zero. 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中移除。 在这个例子中，除非`movies`数组的长度大于0，否则`<table>`元素就会被从DOM中移除。
td td
:marked :marked
### *ngIf ### *ngIf
@ -482,7 +486,7 @@ table(width="100%")
In this example, the `<table>` element is removed from the DOM unless the `movies` array has a length. In this example, the `<table>` element is removed from the DOM unless the `movies` array has a length.
在这个例子中，除非`movies`数组的长度大于0，否则`table`元素就会被从DOM中移除。 在这个例子中，除非`movies`数组的长度大于0，否则`<table>`元素就会被从DOM中移除。
The (*) before `ngIf` is required in this example. The (*) before `ngIf` is required in this example.
For more information, see [Structural Directives](../guide/structural-directives.html). For more information, see [Structural Directives](../guide/structural-directives.html).
@ -506,7 +510,9 @@ table(width="100%")
td td
:marked :marked
### ngModel ### ngModel
+makeExample('cb-ajs-quick-reference/ts/src/app/movie-list.component.html', 'ngModel')(format="." ) +makeExample('cb-ajs-quick-reference/ts/src/app/movie-list.component.html', 'ngModel')(format="." )
:marked :marked
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) 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. and event binding (from the view to the component), thereby providing two-way binding.
@ -518,7 +524,8 @@ table(width="100%")
form elements with `[(ngModel)]`](../guide/template-syntax.html#ngModel) form elements with `[(ngModel)]`](../guide/template-syntax.html#ngModel)
section of the [Template Syntax](../guide/template-syntax.html) page. section of the [Template Syntax](../guide/template-syntax.html) page.
要了解使用ngModel进行双向绑定的更多知识，参见[模板语法](../guide/template-syntax.html#ngModel)。 要了解使用ngModel进行双向绑定的更多知识，参见[模板语法](../guide/template-syntax.html)中的[NgModel&mdash;使用`[(ngModel)]`进行双向绑定](../guide/template-syntax.html#ngModel)部分。
tr(style=top) tr(style=top)
td td
:marked :marked
@ -533,7 +540,7 @@ table(width="100%")
In this example, the table row (`<tr>`) element repeats for each movie object in the collection of movies. In this example, the table row (`<tr>`) element repeats for each movie object in the collection of movies.
在这个例子中，对`movies`集合中的每一个`movie`对象重复渲染了这个表格行元素(`tr`)。 在这个例子中，对`movies`集合中的每一个`movie`对象重复渲染了这个表格行元素(`<tr>`)。
td td
:marked :marked
### *ngFor ### *ngFor
@ -546,7 +553,7 @@ table(width="100%")
Angular中的`*ngFor`指令类似于AngularJS中的`ng-repeat`指令。 Angular中的`*ngFor`指令类似于AngularJS中的`ng-repeat`指令。
它为指定集合中的每一个条目重复渲染了相关的DOM元素。 它为指定集合中的每一个条目重复渲染了相关的DOM元素。
更准确的说，它把被界定出来的元素(这个例子中是`tr`)及其内容转成了一个模板，并使用那个模板来为列表中的每一个条目实例化一个视图。 更准确的说，它把被界定出来的元素(这个例子中是`<tr>`)及其内容转成了一个模板，并使用那个模板来为列表中的每一个条目实例化一个视图。
Notice the other syntax differences: Notice the other syntax differences:
The (*) before `ngFor` is required; The (*) before `ngFor` is required;
@ -575,7 +582,7 @@ table(width="100%")
In this example, the `<div>` element is shown if the `favoriteHero` variable is truthy. In this example, the `<div>` element is shown if the `favoriteHero` variable is truthy.
在这个例子中，如果`favoriteHero`变量为真，`div`元素就会显示出来。 在这个例子中，如果`favoriteHero`变量为真，`<div>`元素就会显示出来。
td td
:marked :marked
### Bind to the `hidden` property ### Bind to the `hidden` property
@ -596,18 +603,21 @@ table(width="100%")
In this example, the `<div>` element is hidden if the `favoriteHero` variable is not truthy. In this example, the `<div>` element is hidden if the `favoriteHero` variable is not truthy.
在这个例子中，如果`favoriteHero`变量不是真值，`div`元素就会被隐藏。 在这个例子中，如果`favoriteHero`变量不是真值，`<div>`元素就会被隐藏。
For more information on property binding, see the [Property binding](../guide/template-syntax.html#property-binding) For more information on property binding, see the [Property binding](../guide/template-syntax.html#property-binding)
section of the [Template Syntax](../guide/template-syntax.html) page. section of the [Template Syntax](../guide/template-syntax.html) page.
要了解关于属性绑定的更多信息，参见[模板表达式](../guide/template-syntax.html#property-binding)。 要了解关于属性绑定的更多信息，参见[模板语法](../guide/template-syntax.html)中的[模板表达式](../guide/template-syntax.html#property-binding)部分。
tr(style=top) tr(style=top)
td td
:marked :marked
### ng-src ### ng-src
code-example(format=""). code-example(format="").
&lt;img ng-src="{{movie.imageurl}}"> &lt;img ng-src="{{movie.imageurl}}">
:marked :marked
The `ng-src` directive allows AngularJS to preprocess the `src` property so that it 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 can replace the binding expression with the appropriate URL before the browser
@ -620,7 +630,9 @@ table(width="100%")
### Bind to the `src` property ### Bind to the `src` property
### 绑定到`src`属性 ### 绑定到`src`属性
+makeExample('cb-ajs-quick-reference/ts/src/app/app.component.html', 'src')(format="." ) +makeExample('cb-ajs-quick-reference/ts/src/app/app.component.html', 'src')(format="." )
:marked :marked
Angular uses property binding; there is no built-in *src* directive. 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. Place the `src` property in square brackets and set it to a quoted template expression.
@ -631,13 +643,16 @@ table(width="100%")
For more information on property binding, see the [Property binding](../guide/template-syntax.html#property-binding) For more information on property binding, see the [Property binding](../guide/template-syntax.html#property-binding)
section of the [Template Syntax](../guide/template-syntax.html) page. section of the [Template Syntax](../guide/template-syntax.html) page.
要了解属性绑定的更多知识，参见[模板语法](../guide/template-syntax.html#property-binding)。 要了解属性绑定的更多知识，参见[模板语法](../guide/template-syntax.html)中的[属性绑定](../guide/template-syntax.html#property-binding)部分。
tr(style=top) tr(style=top)
td td
:marked :marked
### ng-style ### ng-style
code-example(format=""). code-example(format="").
&lt;div ng-style="{color: colorPreference}"> &lt;div ng-style="{color: colorPreference}">
:marked :marked
In AngularJS, the `ng-style` directive sets a CSS style on an HTML element In AngularJS, the `ng-style` directive sets a CSS style on an HTML element
based on an expression. That expression is often a key-value control object with each based on an expression. That expression is often a key-value control object with each
@ -645,7 +660,7 @@ table(width="100%")
that evaluates to a value appropriate for the style. that evaluates to a value appropriate for the style.
在AngularJS中，`ng-style`指令根据一个绑定表达式设置一个HTML元素的CSS样式。 在AngularJS中，`ng-style`指令根据一个绑定表达式设置一个HTML元素的CSS样式。
该表达式通常是一个“键-值”形式的控制对象，对象的每个键都是一个CSS的样式名，每个值都是一个能计算为此样式的合适值的表达式。 该表达式通常是一个“键-值”形式的控制对象，对象的每个键都是一个CSS属性，每个值都是一个能计算为此样式的合适值的表达式。
In the example, the `color` style is set to the current value of the `colorPreference` variable. In the example, the `color` style is set to the current value of the `colorPreference` variable.
@ -671,16 +686,18 @@ table(width="100%")
For more information on style binding, see the [Style binding](../guide/template-syntax.html#style-binding) section of the For more information on style binding, see the [Style binding](../guide/template-syntax.html#style-binding) section of the
[Template Syntax](../guide/template-syntax.html) page. [Template Syntax](../guide/template-syntax.html) page.
要了解样式绑定的更多知识，参见[模板语法](../guide/template-syntax.html#style-binding)。 要了解样式绑定的更多知识，参见[模板语法](../guide/template-syntax.html)中的[样式绑定](../guide/template-syntax.html#style-binding)部分。
For more information on the `ngStyle` directive, see [NgStyle](../guide/template-syntax.html#ngStyle) For more information on the `ngStyle` directive, see [NgStyle](../guide/template-syntax.html#ngStyle)
section of the [Template Syntax](../guide/template-syntax.html) page. section of the [Template Syntax](../guide/template-syntax.html) page.
要了解关于ngStyle指令的更多知识，参见[模板语法](../guide/template-syntax.html#ngStyle)。 要了解关于`ngStyle`指令的更多知识，参见[模板语法](../guide/template-syntax.html)中的[NgStyle](../guide/template-syntax.html#ngStyle)部分。
tr(style=top) tr(style=top)
td td
:marked :marked
### ng-switch ### ng-switch
code-example(format=""). code-example(format="").
&lt;div ng-switch="vm.favoriteHero && &lt;div ng-switch="vm.favoriteHero &&
vm.checkMovieHero(vm.favoriteHero)"> vm.checkMovieHero(vm.favoriteHero)">
@ -694,6 +711,7 @@ table(width="100%")
Please enter your favorite hero. Please enter your favorite hero.
&lt;/div> &lt;/div>
&lt;/div> &lt;/div>
:marked :marked
In AngularJS, the `ng-switch` directive swaps the contents of 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. an element by selecting one of the templates based on the current value of an expression.
@ -740,7 +758,8 @@ table(width="100%")
For more information, see [The NgSwitch directives](../guide/template-syntax.html#ngSwitch) For more information, see [The NgSwitch directives](../guide/template-syntax.html#ngSwitch)
section of the [Template Syntax](../guide/template-syntax.html) page. section of the [Template Syntax](../guide/template-syntax.html) page.
要了解关于ngswitch指令的更多信息，参见[模板语法](../guide/template-syntax.html#ngSwitch)。 要了解更多信息，参见[模板语法](../guide/template-syntax.html)中的[NgSwitch指令](../guide/template-syntax.html#ngSwitch)部分。
:marked :marked
[Back to top](#top) [Back to top](#top)
@ -926,7 +945,7 @@ table(width="100%")
In this example, the movie title orders the `movieList`. In this example, the movie title orders the `movieList`.
使用表达式中所指定的方式对集合进行排序。 使用表达式中所指定的方式对集合进行排序。
在这个例子中，movieList被根据movie的title排序了。 在这个例子中，`movieList`被根据movie的title排序了。
td td
:marked :marked
### none ### none
@ -981,11 +1000,14 @@ table(width="100%")
}()); }());
:marked :marked
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)来包裹控制器代码。 keeps it out of the global namespace.
这样让控制器代码不会污染全局命名空间。
在AngularJS中，用立即调用的函数表达式(IIFE)来包裹控制器代码可以让控制器代码不会污染全局命名空间。
td td
:marked :marked
### none ### none
### 没了 ### 没了
This is a nonissue in Angular because ES 2015 modules This is a nonissue in Angular because ES 2015 modules
@ -996,7 +1018,8 @@ table(width="100%")
For more information on modules, see the [Modules](../guide/architecture.html#modules) section of the For more information on modules, see the [Modules](../guide/architecture.html#modules) section of the
[Architecture Overview](../guide/architecture.html). [Architecture Overview](../guide/architecture.html).
要了解关于模块的更多信息，参见[架构概览](../guide/architecture.html#module)。 要了解关于模块的更多信息，参见[架构概览](../guide/architecture.html)中的[模块](../guide/architecture.html#modules)部分。
tr(style=top) tr(style=top)
td td
:marked :marked
@ -1069,7 +1092,7 @@ table(width="100%")
that component such as its selector (or tag) and its template. that component such as its selector (or tag) and its template.
在Angular中，我们往组件类上添加了一个装饰器，以提供任何需要的元数据。 在Angular中，我们往组件类上添加了一个装饰器，以提供任何需要的元数据。
组件装饰器把该类声明为组件，并提供了关于该组件的元数据，比如它的选择器(或标签)和模板。 `@Component`装饰器把该类声明为组件，并提供了关于该组件的元数据，比如它的选择器(或标签)和模板。
This is how you associate a template with logic, which is defined in the component class. This is how you associate a template with logic, which is defined in the component class.
@ -1078,13 +1101,15 @@ table(width="100%")
For more information, see the [Components](../guide/architecture.html#components) For more information, see the [Components](../guide/architecture.html#components)
section of the [Architecture Overview](../guide/architecture.html) page. section of the [Architecture Overview](../guide/architecture.html) page.
要了解关于模板的更多信息，参见架构概览中的[组件](../guide/architecture.html#components)部分。 要了解关于模板的更多信息，参见[架构概览](../guide/architecture.html)中的[组件](../guide/architecture.html#components)部分。
tr(style=top) tr(style=top)
td td
:marked :marked
### Controller function ### Controller function
### 控制器函数 ### 控制器函数
code-example. code-example.
function MovieListCtrl(movieService) { function MovieListCtrl(movieService) {
} }
@ -1111,7 +1136,7 @@ table(width="100%")
For more information, see the [Components](../guide/architecture.html#components) For more information, see the [Components](../guide/architecture.html#components)
section of the [Architecture Overview](../guide/architecture.html) page. section of the [Architecture Overview](../guide/architecture.html) page.
要了解关于组件的更多信息，参见架构概览中的[组件](../guide/architecture.html#components)部分。 要了解关于组件的更多信息，参见[架构概览](../guide/architecture.html)中的[组件](../guide/architecture.html#components)部分。
tr(style=top) tr(style=top)
td td
:marked :marked
@ -1154,7 +1179,7 @@ table(width="100%")
For more information, see the [Dependency injection](../guide/architecture.html#dependency-injection) For more information, see the [Dependency injection](../guide/architecture.html#dependency-injection)
section of the [Architecture Overview](../guide/architecture.html). section of the [Architecture Overview](../guide/architecture.html).
要了解关于依赖注入的更多信息，参见架构概览中的[依赖注入](../guide/architecture.html#dependency-injection)部分。 要了解关于依赖注入的更多信息，参见[架构概览](../guide/architecture.html)中的[依赖注入](../guide/architecture.html#dependency-injection)部分。
:marked :marked
[Back to top](#top) [Back to top](#top)