fix: 提交没错误的自动翻译结果

This commit is contained in:
Zhicheng Wang 2018-03-07 10:20:29 +08:00
parent 43e7e9fe8c
commit 1c028aee24
4 changed files with 157 additions and 176 deletions

View File

@ -62,9 +62,7 @@ The following table lists some of the key AngularJS template features with their
### 绑定/插值表达式 ### 绑定/插值表达式
<code-example hideCopy> <code-example hideCopy>
Your favorite hero is: {{vm.favoriteHero}} Your favorite hero is: {{vm.favoriteHero}}
</code-example> </code-example>
In AngularJS, an expression in curly braces denotes one-way binding. In AngularJS, an expression in curly braces denotes one-way binding.
@ -118,9 +116,7 @@ The following table lists some of the key AngularJS template features with their
### 过滤器 ### 过滤器
<code-example hideCopy> <code-example hideCopy>
&lt;td>{{movie.title | uppercase}}&lt;/td> &lt;td>{{movie.title | uppercase}}&lt;/td>
</code-example> </code-example>
To filter output in AngularJS templates, use the pipe character (|) and one or more filters. To filter output in AngularJS templates, use the pipe character (|) and one or more filters.
@ -165,11 +161,9 @@ The following table lists some of the key AngularJS template features with their
### 局部变量 ### 局部变量
<code-example hideCopy format=""> <code-example hideCopy format="">
&lt;tr ng-repeat="movie in vm.movies"> &lt;tr ng-repeat="movie in vm.movies">
&lt;td>{{movie.title}}&lt;/td> &lt;td>{{movie.title}}&lt;/td>
&lt;/tr> &lt;/tr>
</code-example> </code-example>
Here, `movie` is a user-defined local variable. Here, `movie` is a user-defined local variable.
@ -246,9 +240,7 @@ AngularJS 为模板提供了七十多个内置指令。
### ng-app ### ng-app
<code-example hideCopy> <code-example hideCopy>
&lt;body ng-app="movieHunter"> &lt;body ng-app="movieHunter">
</code-example> </code-example>
The application startup process is called **bootstrapping**. The application startup process is called **bootstrapping**.
@ -271,7 +263,6 @@ AngularJS 为模板提供了七十多个内置指令。
### 引导 ### 引导
<code-example hideCopy path="ajs-quick-reference/src/main.ts" title="main.ts" linenums="false"></code-example> <code-example hideCopy path="ajs-quick-reference/src/main.ts" title="main.ts" linenums="false"></code-example>
<br> <br>
<code-example hideCopy path="ajs-quick-reference/src/app/app.module.1.ts" title="app.module.ts" linenums="false"></code-example> <code-example hideCopy path="ajs-quick-reference/src/app/app.module.1.ts" title="app.module.ts" linenums="false"></code-example>
@ -295,11 +286,9 @@ AngularJS 为模板提供了七十多个内置指令。
### ng-class ### ng-class
<code-example hideCopy format=""> <code-example hideCopy format="">
&lt;div ng-class="{active: isActive}"> &lt;div ng-class="{active: isActive}">
&lt;div ng-class="{active: isActive, &lt;div ng-class="{active: isActive,
shazam: isImportant}"> shazam: isImportant}">
</code-example> </code-example>
In AngularJS, the `ng-class` directive includes/excludes CSS classes In AngularJS, the `ng-class` directive includes/excludes CSS classes
@ -361,10 +350,8 @@ AngularJS 为模板提供了七十多个内置指令。
### ng-click ### ng-click
<code-example hideCopy format=""> <code-example hideCopy format="">
&lt;button ng-click="vm.toggleImage()"> &lt;button ng-click="vm.toggleImage()">
&lt;button ng-click="vm.toggleImage($event)"> &lt;button ng-click="vm.toggleImage($event)">
</code-example> </code-example>
In AngularJS, the `ng-click` directive allows you to specify custom behavior when an element is clicked. In AngularJS, the `ng-click` directive allows you to specify custom behavior when an element is clicked.
@ -433,9 +420,7 @@ AngularJS 为模板提供了七十多个内置指令。
### ng-controller ### ng-controller
<code-example hideCopy format=""> <code-example hideCopy format="">
&lt;div ng-controller="MovieListCtrl as vm"> &lt;div ng-controller="MovieListCtrl as vm">
</code-example> </code-example>
In AngularJS, the `ng-controller` directive attaches a controller to the view. In AngularJS, the `ng-controller` directive attaches a controller to the view.
@ -506,9 +491,7 @@ AngularJS 为模板提供了七十多个内置指令。
### ng-href ### ng-href
<code-example hideCopy format=""> <code-example hideCopy format="">
&lt;a ng-href="{{ angularDocsUrl }}">Angular Docs&lt;/a> &lt;a ng-href="{{ angularDocsUrl }}">Angular Docs&lt;/a>
</code-example> </code-example>
The `ng-href` directive allows AngularJS to preprocess the `href` property so that it The `ng-href` directive allows AngularJS to preprocess the `href` property so that it
@ -522,9 +505,7 @@ AngularJS 为模板提供了七十多个内置指令。
在AngularJS 中,`ng-href`通常用来作为导航的一部分,激活一个路由。 在AngularJS 中,`ng-href`通常用来作为导航的一部分,激活一个路由。
<code-example hideCopy format=""> <code-example hideCopy format="">
&lt;a ng-href="#{{ moviesHash }}">Movies&lt;/a> &lt;a ng-href="#{{ moviesHash }}">Movies&lt;/a>
</code-example> </code-example>
Routing is handled differently in Angular. Routing is handled differently in Angular.
@ -574,9 +555,7 @@ AngularJS 为模板提供了七十多个内置指令。
### ng-if ### ng-if
<code-example hideCopy format=""> <code-example hideCopy format="">
&lt;table ng-if="movies.length"> &lt;table ng-if="movies.length">
</code-example> </code-example>
In AngularJS, the `ng-if` directive removes or recreates a portion of the DOM, In AngularJS, the `ng-if` directive removes or recreates a portion of the DOM,
@ -623,9 +602,7 @@ AngularJS 为模板提供了七十多个内置指令。
### ng-model ### ng-model
<code-example hideCopy format=""> <code-example hideCopy format="">
&lt;input ng-model="vm.favoriteHero"/> &lt;input ng-model="vm.favoriteHero"/>
</code-example> </code-example>
In AngularJS, the `ng-model` directive binds a form control to a property in the controller associated with the template. In AngularJS, the `ng-model` directive binds a form control to a property in the controller associated with the template.
@ -665,9 +642,7 @@ AngularJS 为模板提供了七十多个内置指令。
### ng-repeat ### ng-repeat
<code-example hideCopy format=""> <code-example hideCopy format="">
&lt;tr ng-repeat="movie in vm.movies"> &lt;tr ng-repeat="movie in vm.movies">
</code-example> </code-example>
In AngularJS, the `ng-repeat` directive repeats the associated DOM element In AngularJS, the `ng-repeat` directive repeats the associated DOM element
@ -719,11 +694,9 @@ AngularJS 为模板提供了七十多个内置指令。
### ng-show ### ng-show
<code-example hideCopy format=""> <code-example hideCopy format="">
&lt;h3 ng-show="vm.favoriteHero"> &lt;h3 ng-show="vm.favoriteHero">
Your favorite hero is: {{vm.favoriteHero}} Your favorite hero is: {{vm.favoriteHero}}
&lt;/h3> &lt;/h3>
</code-example> </code-example>
In AngularJS, the `ng-show` directive shows or hides the associated DOM element, based on In AngularJS, the `ng-show` directive shows or hides the associated DOM element, based on
@ -776,9 +749,7 @@ AngularJS 为模板提供了七十多个内置指令。
### ng-src ### ng-src
<code-example hideCopy format=""> <code-example hideCopy format="">
&lt;img ng-src="{{movie.imageurl}}"> &lt;img ng-src="{{movie.imageurl}}">
</code-example> </code-example>
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
@ -819,9 +790,7 @@ AngularJS 为模板提供了七十多个内置指令。
### ng-style ### ng-style
<code-example hideCopy format=""> <code-example hideCopy format="">
&lt;div ng-style="{color: colorPreference}"> &lt;div ng-style="{color: colorPreference}">
</code-example> </code-example>
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
@ -877,7 +846,6 @@ AngularJS 为模板提供了七十多个内置指令。
### ng-switch ### ng-switch
<code-example hideCopy format=""> <code-example hideCopy format="">
&lt;div ng-switch="vm.favoriteHero && &lt;div ng-switch="vm.favoriteHero &&
vm.checkMovieHero(vm.favoriteHero)"> vm.checkMovieHero(vm.favoriteHero)">
&lt;div ng-switch-when="true"> &lt;div ng-switch-when="true">
@ -890,7 +858,6 @@ AngularJS 为模板提供了七十多个内置指令。
Please enter your favorite hero. Please enter your favorite hero.
&lt;/div> &lt;/div>
&lt;/div> &lt;/div>
</code-example> </code-example>
In AngularJS, the `ng-switch` directive swaps the contents of In AngularJS, the `ng-switch` directive swaps the contents of
@ -996,9 +963,7 @@ AngularJS中的很多内置过滤器在Angular中都有对应的管道。
### currency ### currency
<code-example hideCopy> <code-example hideCopy>
&lt;td>{{movie.price | currency}}&lt;/td> &lt;td>{{movie.price | currency}}&lt;/td>
</code-example> </code-example>
Formats a number as currency. Formats a number as currency.
@ -1028,9 +993,7 @@ AngularJS中的很多内置过滤器在Angular中都有对应的管道。
### date ### date
<code-example hideCopy> <code-example hideCopy>
&lt;td>{{movie.releaseDate | date}}&lt;/td> &lt;td>{{movie.releaseDate | date}}&lt;/td>
</code-example> </code-example>
Formats a date to a string based on the requested format. Formats a date to a string based on the requested format.
@ -1060,9 +1023,7 @@ AngularJS中的很多内置过滤器在Angular中都有对应的管道。
### filter ### filter
<code-example hideCopy> <code-example hideCopy>
&lt;tr ng-repeat="movie in movieList | filter: {title:listFilter}"> &lt;tr ng-repeat="movie in movieList | filter: {title:listFilter}">
</code-example> </code-example>
Selects a subset of items from the defined collection, based on the filter criteria. Selects a subset of items from the defined collection, based on the filter criteria.
@ -1094,9 +1055,7 @@ AngularJS中的很多内置过滤器在Angular中都有对应的管道。
### json ### json
<code-example hideCopy> <code-example hideCopy>
&lt;pre>{{movie | json}}&lt;/pre> &lt;pre>{{movie | json}}&lt;/pre>
</code-example> </code-example>
Converts a JavaScript object into a JSON string. This is useful for debugging. Converts a JavaScript object into a JSON string. This is useful for debugging.
@ -1126,9 +1085,7 @@ AngularJS中的很多内置过滤器在Angular中都有对应的管道。
### limitTo ### limitTo
<code-example hideCopy> <code-example hideCopy>
&lt;tr ng-repeat="movie in movieList | limitTo:2:0"> &lt;tr ng-repeat="movie in movieList | limitTo:2:0">
</code-example> </code-example>
Selects up to the first parameter (2) number of items from the collection Selects up to the first parameter (2) number of items from the collection
@ -1164,9 +1121,7 @@ AngularJS中的很多内置过滤器在Angular中都有对应的管道。
### lowercase ### lowercase
<code-example hideCopy> <code-example hideCopy>
&lt;div>{{movie.title | lowercase}}&lt;/div> &lt;div>{{movie.title | lowercase}}&lt;/div>
</code-example> </code-example>
Converts the string to lowercase. Converts the string to lowercase.
@ -1196,9 +1151,7 @@ AngularJS中的很多内置过滤器在Angular中都有对应的管道。
### number ### number
<code-example hideCopy> <code-example hideCopy>
&lt;td>{{movie.starRating | number}}&lt;/td> &lt;td>{{movie.starRating | number}}&lt;/td>
</code-example> </code-example>
Formats a number as text. Formats a number as text.
@ -1236,9 +1189,7 @@ AngularJS中的很多内置过滤器在Angular中都有对应的管道。
### orderBy ### orderBy
<code-example hideCopy> <code-example hideCopy>
&lt;tr ng-repeat="movie in movieList | orderBy : 'title'"> &lt;tr ng-repeat="movie in movieList | orderBy : 'title'">
</code-example> </code-example>
Displays the collection in the order specified by the expression. Displays the collection in the order specified by the expression.
@ -1322,11 +1273,9 @@ The Angular code is shown using TypeScript.
### IIFE ### IIFE
<code-example hideCopy> <code-example hideCopy>
(function () { (function () {
... ...
}()); }());
</code-example> </code-example>
In AngularJS, an immediately invoked function expression (or IIFE) around controller code In AngularJS, an immediately invoked function expression (or IIFE) around controller code
@ -1365,9 +1314,7 @@ The Angular code is shown using TypeScript.
### Angular模块 ### Angular模块
<code-example hideCopy> <code-example hideCopy>
angular.module("movieHunter", ["ngRoute"]); angular.module("movieHunter", ["ngRoute"]);
</code-example> </code-example>
In AngularJS, an Angular module keeps track of controllers, services, and other code. In AngularJS, an Angular module keeps track of controllers, services, and other code.
@ -1412,13 +1359,11 @@ The Angular code is shown using TypeScript.
### 控制器注册 ### 控制器注册
<code-example hideCopy> <code-example hideCopy>
angular angular
.module("movieHunter") .module("movieHunter")
.controller("MovieListCtrl", .controller("MovieListCtrl",
["movieService", ["movieService",
MovieListCtrl]); MovieListCtrl]);
</code-example> </code-example>
AngularJS has code in each controller that looks up an appropriate Angular module AngularJS has code in each controller that looks up an appropriate Angular module
@ -1470,10 +1415,8 @@ The Angular code is shown using TypeScript.
### 控制器函数 ### 控制器函数
<code-example hideCopy> <code-example hideCopy>
function MovieListCtrl(movieService) { function MovieListCtrl(movieService) {
} }
</code-example> </code-example>
In AngularJS, you write the code for the model and methods in a controller function. In AngularJS, you write the code for the model and methods in a controller function.
@ -1516,11 +1459,9 @@ The Angular code is shown using TypeScript.
### 依赖注入 ### 依赖注入
<code-example hideCopy> <code-example hideCopy>
MovieListCtrl.$inject = ['MovieService']; MovieListCtrl.$inject = ['MovieService'];
function MovieListCtrl(movieService) { function MovieListCtrl(movieService) {
} }
</code-example> </code-example>
In AngularJS, you pass in any dependencies as controller function arguments. In AngularJS, you pass in any dependencies as controller function arguments.
@ -1612,13 +1553,11 @@ also encapsulate a style sheet within a specific component.
<td> <td>
### Link tag ### Link tag
### Link 标签 ### Link 标签
<code-example hideCopy> <code-example hideCopy>
&lt;link href="styles.css" rel="stylesheet" /> &lt;link href="styles.css" rel="stylesheet" />
</code-example> </code-example>
AngularJS, uses a `link` tag in the head section of the `index.html` file AngularJS, uses a `link` tag in the head section of the `index.html` file
@ -1661,4 +1600,3 @@ also encapsulate a style sheet within a specific component.
</tr> </tr>
</table> </table>

View File

@ -78,7 +78,7 @@ driven by a model attribute.
我们来构建一个简单的动画,它会让一个元素用模型驱动的方式在两个状态之间转场。 我们来构建一个简单的动画,它会让一个元素用模型驱动的方式在两个状态之间转场。
Animations can be defined inside `@Component` metadata. Animations can be defined inside `@Component` metadata.
动画会被定义在`@Component`元数据中。 动画会被定义在`@Component`元数据中。
@ -162,9 +162,7 @@ controls the timing of switching between one set of styles and the next:
<code-example path="animations/src/app/hero-list-basic.component.ts" region="transitions" title="src/app/hero-list-basic.component.ts" linenums="false"></code-example> <code-example path="animations/src/app/hero-list-basic.component.ts" region="transitions" title="src/app/hero-list-basic.component.ts" linenums="false"></code-example>
<figure> <figure>
<img src="generated/images/guide/animations/ng_animate_transitions_inactive_active.png" alt="In Angular animations you define states and transitions between states" width="400"> <img src="generated/images/guide/animations/ng_animate_transitions_inactive_active.png" alt="In Angular animations you define states and transitions between states" width="400">
</figure> </figure>
If several transitions have the same timing configuration, you can combine If several transitions have the same timing configuration, you can combine
@ -210,9 +208,7 @@ transitions that apply regardless of which state the animation is in. For exampl
当在*任意*两个状态之间切换时,`* => *`转场都会生效。 当在*任意*两个状态之间切换时,`* => *`转场都会生效。
<figure> <figure>
<img src="generated/images/guide/animations/ng_animate_transitions_inactive_active_wildcards.png" alt="The wildcard state can be used to match many different transitions at once" width="400"> <img src="generated/images/guide/animations/ng_animate_transitions_inactive_active_wildcards.png" alt="The wildcard state can be used to match many different transitions at once" width="400">
</figure> </figure>
### The `void` state ### The `void` state
@ -233,9 +229,7 @@ regardless of what state it was in before it left.
比如当一个元素离开视图时,`* => void`转场就会生效,而不管它在离场以前是什么状态。 比如当一个元素离开视图时,`* => void`转场就会生效,而不管它在离场以前是什么状态。
<figure> <figure>
<img src="generated/images/guide/animations/ng_animate_transitions_void_in.png" alt="The void state can be used for enter and leave transitions" width="400"> <img src="generated/images/guide/animations/ng_animate_transitions_void_in.png" alt="The void state can be used for enter and leave transitions" width="400">
</figure> </figure>
The wildcard state `*` also matches `void`. The wildcard state `*` also matches `void`.
@ -283,10 +277,8 @@ These two common animations have their own aliases:
这两个常见的动画有自己的别名: 这两个常见的动画有自己的别名:
<code-example language="typescript"> <code-example language="typescript">
transition(':enter', [ ... ]); // void => * transition(':enter', [ ... ]); // void => *
transition(':leave', [ ... ]); // * => void transition(':leave', [ ... ]); // * => void
</code-example> </code-example>
</div> </div>
@ -325,9 +317,7 @@ This gives you fine-grained control over each transition:
现在就对每一种转场都有了细粒度的控制: 现在就对每一种转场都有了细粒度的控制:
<figure> <figure>
<img src="generated/images/guide/animations/ng_animate_transitions_inactive_active_void.png" alt="This example transitions between active, inactive, and void states" width="400"> <img src="generated/images/guide/animations/ng_animate_transitions_inactive_active_void.png" alt="This example transitions between active, inactive, and void states" width="400">
</figure> </figure>
<code-example path="animations/src/app/hero-list-enter-leave-states.component.ts" region="animationdef" title="hero-list-enter-leave.component.ts (excerpt)" linenums="false"></code-example> <code-example path="animations/src/app/hero-list-enter-leave-states.component.ts" region="animationdef" title="hero-list-enter-leave.component.ts (excerpt)" linenums="false"></code-example>
@ -557,4 +547,4 @@ The callbacks receive an `AnimationEvent` that contains useful properties such a
Those callbacks will fire whether or not an animation is picked up. Those callbacks will fire whether or not an animation is picked up.
无论动画是否实际执行过,那些回调都会触发。 无论动画是否实际执行过,那些回调都会触发。

View File

@ -1,5 +1,3 @@
<div class="breadcrumb"> <div class="breadcrumb">
<a href="#">API<a> / <a href="#">@core<a> <a href="#">API<a> / <a href="#">@core<a>
@ -8,7 +6,7 @@
<header class="api-header"> <header class="api-header">
<h1><label class="api-status-label experimental">experimental</label><label class="api-type-label class">class</label>Class Name</h1> <h1><label class="api-status-label experimental">experimental</label><label class="api-type-label class">class</label>Class Name</h1>
</header> </header>
@ -19,7 +17,11 @@
</div> </div>
<p>Class description goes here. This is a short and to the point one or two sentence description that easily introduces the reader to the class.</p> <p>
Class description goes here. This is a short and to the point one or two sentence description that easily introduces the reader to the class.
</p>
<div class="api-body"> <div class="api-body">
@ -29,32 +31,25 @@
<code-example language="ts" hidecopy="true" ng-version="5.2.0"><aio-code class="simple-code" ng-reflect-ng-class="[object Object]" ng-reflect-code=" <code-example language="ts" hidecopy="true" ng-version="5.2.0"><aio-code class="simple-code" ng-reflect-ng-class="[object Object]" ng-reflect-code="
class <a href=&quot;api/core/Compi" ng-reflect-hide-copy="true" ng-reflect-language="ts" ng-reflect-linenums="" ng-reflect-path="" ng-reflect-region="" ng-reflect-title=""><pre class="prettyprint lang-ts"> class <a href=&quot;api/core/Compi" ng-reflect-hide-copy="true" ng-reflect-language="ts" ng-reflect-linenums="" ng-reflect-path="" ng-reflect-region="" ng-reflect-title=""><pre class="prettyprint lang-ts">
<code class="animated fadeIn"><span class="kwd">class</span><span class="pln"> </span><a href="api/core/Compiler" class="code-anchor"><span class="typ">Compiler</span></a><span class="pln"> </span><span class="pun">{</span><span class="pln"> <code class="animated fadeIn"><span class="kwd">class</span><span class="pln"> </span><a href="api/core/Compiler" class="code-anchor"><span class="typ">Compiler</span></a><span class="pln"> </span><span class="pun">{</span><span class="pln">
</span><a class="code-anchor" href="api/core/Compiler#compileModuleSync"><span class="pln">compileModuleSync</span><span class="pun">&lt;</span><span class="pln">T</span><span class="pun">&gt;(</span><span class="pln">moduleType</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Type</span><span class="pun">&lt;</span><span class="pln">T</span><span class="pun">&gt;):</span><span class="pln"> </span><span class="typ">NgModuleFactory</span><span class="pun">&lt;</span><span class="pln">T</span><span class="pun">&gt;</span></a><span class="pln"> </span><a class="code-anchor" href="api/core/Compiler#compileModuleSync"><span class="pln">compileModuleSync</span><span class="pun">&lt;</span><span class="pln">T</span><span class="pun">&gt;(</span><span class="pln">moduleType</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Type</span><span class="pun">&lt;</span><span class="pln">T</span><span class="pun">&gt;):</span><span class="pln"> </span><span class="typ">NgModuleFactory</span><span class="pun">&lt;</span><span class="pln">T</span><span class="pun">&gt;</span></a><span class="pln">
</span><a class="code-anchor" href="api/core/Compiler#compileModuleAsync"><span class="pln">compileModuleAsync</span><span class="pun">&lt;</span><span class="pln">T</span><span class="pun">&gt;(</span><span class="pln">moduleType</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Type</span><span class="pun">&lt;</span><span class="pln">T</span><span class="pun">&gt;):</span><span class="pln"> </span><span class="typ">Promise</span><span class="pun">&lt;</span><span class="typ">NgModuleFactory</span><span class="pun">&lt;</span><span class="pln">T</span><span class="pun">&gt;&gt;</span></a><span class="pln"> </span><a class="code-anchor" href="api/core/Compiler#compileModuleAsync"><span class="pln">compileModuleAsync</span><span class="pun">&lt;</span><span class="pln">T</span><span class="pun">&gt;(</span><span class="pln">moduleType</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Type</span><span class="pun">&lt;</span><span class="pln">T</span><span class="pun">&gt;):</span><span class="pln"> </span><span class="typ">Promise</span><span class="pun">&lt;</span><span class="typ">NgModuleFactory</span><span class="pun">&lt;</span><span class="pln">T</span><span class="pun">&gt;&gt;</span></a><span class="pln">
</span><a class="code-anchor" href="api/core/Compiler#compileModuleAndAllComponentsSync"><span class="pln">compileModuleAndAllComponentsSync</span><span class="pun">&lt;</span><span class="pln">T</span><span class="pun">&gt;(</span><span class="pln">moduleType</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Type</span><span class="pun">&lt;</span><span class="pln">T</span><span class="pun">&gt;):</span><span class="pln"> </span><span class="typ">ModuleWithComponentFactories</span><span class="pun">&lt;</span><span class="pln">T</span><span class="pun">&gt;</span></a><span class="pln"> </span><a class="code-anchor" href="api/core/Compiler#compileModuleAndAllComponentsSync"><span class="pln">compileModuleAndAllComponentsSync</span><span class="pun">&lt;</span><span class="pln">T</span><span class="pun">&gt;(</span><span class="pln">moduleType</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Type</span><span class="pun">&lt;</span><span class="pln">T</span><span class="pun">&gt;):</span><span class="pln"> </span><span class="typ">ModuleWithComponentFactories</span><span class="pun">&lt;</span><span class="pln">T</span><span class="pun">&gt;</span></a><span class="pln">
</span><a class="code-anchor" href="api/core/Compiler#compileModuleAndAllComponentsAsync"><span class="pln">compileModuleAndAllComponentsAsync</span><span class="pun">&lt;</span><span class="pln">T</span><span class="pun">&gt;(</span><span class="pln">moduleType</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Type</span><span class="pun">&lt;</span><span class="pln">T</span><span class="pun">&gt;):</span><span class="pln"> </span><span class="typ">Promise</span><span class="pun">&lt;</span><span class="typ">ModuleWithComponentFactories</span><span class="pun">&lt;</span><span class="pln">T</span><span class="pun">&gt;&gt;</span></a><span class="pln"> </span><a class="code-anchor" href="api/core/Compiler#compileModuleAndAllComponentsAsync"><span class="pln">compileModuleAndAllComponentsAsync</span><span class="pun">&lt;</span><span class="pln">T</span><span class="pun">&gt;(</span><span class="pln">moduleType</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Type</span><span class="pun">&lt;</span><span class="pln">T</span><span class="pun">&gt;):</span><span class="pln"> </span><span class="typ">Promise</span><span class="pun">&lt;</span><span class="typ">ModuleWithComponentFactories</span><span class="pun">&lt;</span><span class="pln">T</span><span class="pun">&gt;&gt;</span></a><span class="pln">
</span><a class="code-anchor" href="api/core/Compiler#clearCache"><span class="pln">clearCache</span><span class="pun">():</span><span class="pln"> </span><span class="kwd">void</span></a><span class="pln"> </span><a class="code-anchor" href="api/core/Compiler#clearCache"><span class="pln">clearCache</span><span class="pun">():</span><span class="pln"> </span><span class="kwd">void</span></a><span class="pln">
</span><a class="code-anchor" href="api/core/Compiler#clearCacheFor"><span class="pln">clearCacheFor</span><span class="pun">(</span><span class="pln">type</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Type</span><span class="pun">&lt;</span><span class="pln">any</span><span class="pun">&gt;)</span></a><span class="pln"> </span><a class="code-anchor" href="api/core/Compiler#clearCacheFor"><span class="pln">clearCacheFor</span><span class="pun">(</span><span class="pln">type</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Type</span><span class="pun">&lt;</span><span class="pln">any</span><span class="pun">&gt;)</span></a><span class="pln">
</span><span class="pun">}</span></code> </span><span class="pun">}</span></code>
</pre></aio-code></code-example> </pre></aio-code></code-example>
</section> </section>
<section> <section>
<h2>Description</h2> <h2>Description</h2>
<p>The longer class description goes here which can include multiple paragraphs.</p> <p>
The longer class description goes here which can include multiple paragraphs.
</p>
</p>Bacon ipsum dolor amet pork belly capicola sirloin venison alcatra ground round ham hock jowl turkey picanha bresaola pancetta brisket chicken fatback. Burgdoggen kevin salami jowl shoulder jerky leberkas meatball. Ham hock picanha burgdoggen pork belly rump bacon cupim. Bacon kielbasa sirloin shank strip steak ground round. Bresaola cow salami meatloaf pork chop leberkas flank turducken biltong meatball chuck pork tri-tip chicken. Ribeye corned beef shoulder, meatloaf strip steak jerky porchetta capicola alcatra ham.</p> </p>Bacon ipsum dolor amet pork belly capicola sirloin venison alcatra ground round ham hock jowl turkey picanha bresaola pancetta brisket chicken fatback. Burgdoggen kevin salami jowl shoulder jerky leberkas meatball. Ham hock picanha burgdoggen pork belly rump bacon cupim. Bacon kielbasa sirloin shank strip steak ground round. Bresaola cow salami meatloaf pork chop leberkas flank turducken biltong meatball chuck pork tri-tip chicken. Ribeye corned beef shoulder, meatloaf strip steak jerky porchetta capicola alcatra ham.</p>
@ -62,11 +57,23 @@
<ul> <ul>
<li><a href="#">Subclass1</a></li> <li>
<li><a href="#">Subclass2</a></li> <a href="#">Subclass1</a>
<li><a href="#">Subclass3</a></li> </li>
<li>
<a href="#">Subclass2</a>
</li>
<li>
<a href="#">Subclass3</a>
</li>
</ul> </ul>
@ -74,32 +81,31 @@
<ul> <ul>
<li><a href="#">Link1</a></li> <li>
<li><a href="#">Link2</a></li> <a href="#">Link1</a>
</li>
<li>
<a href="#">Link2</a>
</li>
</ul> </ul>
</section> </section>
<section> <section>
<h2>Constructor</h2> <h2>Constructor</h2>
<code-example hidecopy="true" class="no-box api-heading" ng-version="5.2.0"> <code-example hidecopy="true" class="no-box api-heading" ng-version="5.2.0">
<aio-code class="simple-code"><pre class="prettyprint lang-"> <aio-code class="simple-code"><pre class="prettyprint lang-">
<code class="animated fadeIn"><span class="kwd">constructor</span><span class="pun">(</span><span class="pln">element</span><span class="pun">:</span><span class="pln"> any</span><span class="pun">,</span><span class="pln"> keyframes</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> <code class="animated fadeIn"><span class="kwd">constructor</span><span class="pun">(</span><span class="pln">element</span><span class="pun">:</span><span class="pln"> any</span><span class="pun">,</span><span class="pln"> keyframes</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
</span><span class="pun">[</span><span class="pln">key</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">]:</span><span class="pln"> </span><span class="kwd">string</span><span class="pln"> </span><span class="pun">|</span><span class="pln"> number</span><span class="pun">;</span><span class="pln"> </span><span class="pun">[</span><span class="pln">key</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">]:</span><span class="pln"> </span><span class="kwd">string</span><span class="pln"> </span><span class="pun">|</span><span class="pln"> number</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}[],</span><span class="pln"> duration</span><span class="pun">:</span><span class="pln"> number</span><span class="pun">,</span><span class="pln"> delay</span><span class="pun">:</span><span class="pln"> number</span><span class="pun">,</span><span class="pln"> easing</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">,</span><span class="pln"> previousPlayers</span><span class="pun">:</span><span class="pln"> any</span><span class="pun">[])</span></code> </span><span class="pun">}[],</span><span class="pln"> duration</span><span class="pun">:</span><span class="pln"> number</span><span class="pun">,</span><span class="pln"> delay</span><span class="pun">:</span><span class="pln"> number</span><span class="pun">,</span><span class="pln"> easing</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">,</span><span class="pln"> previousPlayers</span><span class="pun">:</span><span class="pln"> any</span><span class="pun">[])</span></code>
</pre></aio-code></code-example> </pre></aio-code></code-example>
</section> </section>
<section> <section>
<h2>Properties</h2> <h2>Properties</h2>
@ -110,18 +116,35 @@
<tr> <tr>
<th>Property</th> <th>
<th>Type</th> Property
<th>Description</th> 属性
</th>
<th>
Type
绑定类型
</th>
<th>
Description
描述
</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td> <td>
@ -130,12 +153,19 @@
</td> </td>
<td><label class="property-type-label type">Type</label></td> <td>
<td>Description goes here</td> <label class="property-type-label type">Type</label>
</td>
<td>
Description goes here
</td>
</tr> </tr>
<tr> <tr>
<td> <td>
@ -144,12 +174,21 @@
</td> </td>
<td>Type</td> <td>
<td>Description goes here</td> Type
绑定类型
</td>
<td>
Description goes here
</td>
</tr> </tr>
<tr> <tr>
<td> <td>
@ -158,18 +197,24 @@
</td> </td>
<td>Type</td> <td>
<td>Description goes here</td> Type
绑定类型
</td>
<td>
Description goes here
</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</section> </section>
<section class="api-method"> <section class="api-method">
<h2>Methods</h2> <h2>Methods</h2>
@ -180,75 +225,94 @@
<tr> <tr>
<th>Method1Name( )</th> <th>
Method1Name( )
</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td> <td>
<p>Description goes here</p> <p>
Description goes here
</p>
<br> <br>
<p>Bacon ipsum dolor amet pork belly capicola sirloin venison alcatra ground round ham hock jowl turkey picanha bresaola pancetta brisket chicken fatback. Burgdoggen kevin salami jowl shoulder jerky leberkas meatball. Ham hock picanha burgdoggen pork belly rump bacon cupim. Bacon kielbasa sirloin shank strip steak ground round. Bresaola cow salami meatloaf pork chop leberkas flank turducken biltong meatball chuck pork tri-tip chicken. Ribeye corned beef shoulder, meatloaf strip steak jerky porchetta capicola alcatra ham.</p> <p>
Bacon ipsum dolor amet pork belly capicola sirloin venison alcatra ground round ham hock jowl turkey picanha bresaola pancetta brisket chicken fatback. Burgdoggen kevin salami jowl shoulder jerky leberkas meatball. Ham hock picanha burgdoggen pork belly rump bacon cupim. Bacon kielbasa sirloin shank strip steak ground round. Bresaola cow salami meatloaf pork chop leberkas flank turducken biltong meatball chuck pork tri-tip chicken. Ribeye corned beef shoulder, meatloaf strip steak jerky porchetta capicola alcatra ham.
</p>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<table class="is-full-width api-method item-table"> <table class="is-full-width api-method item-table">
<thead> <thead>
<tr> <tr>
<th>Method2Name( )</th> <th>
Method2Name( )
</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td> <td>
<p>Description goes here</p> <p>
Description goes here
</p>
<hr> <hr>
<h5>Declaration</h5> <h5>Declaration</h5>
<code-example language="ts" hidecopy="true" ng-version="5.2.0"> <code-example language="ts" hidecopy="true" ng-version="5.2.0">
<aio-code class="simple-code"><pre class="prettyprint lang-ts"> <aio-code class="simple-code"><pre class="prettyprint lang-ts">
<code class="animated fadeIn"><span class="kwd">class</span><span class="pln"> </span><a href="api/animations/AnimationBuilder" class="code-anchor"><span class="typ">AnimationBuilder</span></a><span class="pln"> </span><span class="pun">{</span><span class="pln"></span><a class="code-anchor" href="api/animations/AnimationBuilder#build"><span class="pln">build</span><span class="pun">(</span><span class="pln">animation</span><span class="pun">:</span><span class="pln"> </span><span class="typ">AnimationMetadata</span><span class="pln"> </span><span class="pun">|</span><span class="pln"> </span><span class="typ">AnimationMetadata</span><span class="pun">[]):</span><span class="pln"> </span><span class="typ">AnimationFactory</span></a><span class="pln"></span><span class="pun">}</span></code></pre> <code class="animated fadeIn"><span class="kwd">class</span><span class="pln"> </span><a href="api/animations/AnimationBuilder" class="code-anchor"><span class="typ">AnimationBuilder</span></a><span class="pln"> </span><span class="pun">{</span><span class="pln"></span><a class="code-anchor" href="api/animations/AnimationBuilder#build"><span class="pln">build</span><span class="pun">(</span><span class="pln">animation</span><span class="pun">:</span><span class="pln"> </span><span class="typ">AnimationMetadata</span><span class="pln"> </span><span class="pun">|</span><span class="pln"> </span><span class="typ">AnimationMetadata</span><span class="pun">[]):</span><span class="pln"> </span><span class="typ">AnimationFactory</span></a><span class="pln"></span><span class="pun">}</span></code></pre>
</aio-code> </aio-code>
</code-example> </code-example>
<h6>Parameters</h6> <h6>Parameters</h6>
<h6>Returns</h6> <h6>Returns</h6>
<p>Returns information and results goes here.</p> <p>
Returns information and results goes here.
</p>
<h6>Errors</h6> <h6>Errors</h6>
<p>Error information goes here</p> <p>
Error information goes here
</p>
<hr> <hr>
@ -257,93 +321,89 @@
<h6>Overloads</h6> <h6>Overloads</h6>
<table class="is-full-width"> <table class="is-full-width">
<tbody> <tbody>
<tr> <tr>
<td> <td>
<code-example hidecopy="true" class="no-box api-heading" ng-version="5.2.0"> <code-example hidecopy="true" class="no-box api-heading" ng-version="5.2.0">
<aio-code class="simple-code"><pre class="prettyprint lang-"> <aio-code class="simple-code"><pre class="prettyprint lang-">
<code class="animated fadeIn"><span class="kwd">constructor</span><span class="pun">(</span><span class="pln">element</span><span class="pun">:</span><span class="pln"> any</span><span class="pun">,</span><span class="pln"> keyframes</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> <code class="animated fadeIn"><span class="kwd">constructor</span><span class="pun">(</span><span class="pln">element</span><span class="pun">:</span><span class="pln"> any</span><span class="pun">,</span><span class="pln"> keyframes</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
</span><span class="pun">[</span><span class="pln">key</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">]:</span><span class="pln"> </span><span class="kwd">string</span><span class="pln"> </span><span class="pun">|</span><span class="pln"> number</span><span class="pun">;</span><span class="pln"> </span><span class="pun">[</span><span class="pln">key</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">]:</span><span class="pln"> </span><span class="kwd">string</span><span class="pln"> </span><span class="pun">|</span><span class="pln"> number</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}[],</span><span class="pln"> duration</span><span class="pun">:</span><span class="pln"> number</span><span class="pun">,</span><span class="pln"> delay</span><span class="pun">:</span><span class="pln"> number</span><span class="pun">,</span><span class="pln"> easing</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">,</span><span class="pln"> previousPlayers</span><span class="pun">:</span><span class="pln"> any</span><span class="pun">[])</span></code> </span><span class="pun">}[],</span><span class="pln"> duration</span><span class="pun">:</span><span class="pln"> number</span><span class="pun">,</span><span class="pln"> delay</span><span class="pun">:</span><span class="pln"> number</span><span class="pun">,</span><span class="pln"> easing</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">,</span><span class="pln"> previousPlayers</span><span class="pun">:</span><span class="pln"> any</span><span class="pun">[])</span></code>
</pre></aio-code></code-example> </pre></aio-code></code-example>
</td> </td>
<td>Description goes here</td> <td>
Description goes here
</td>
</tr> </tr>
<tr> <tr>
<td> <td>
<code-example hidecopy="true" class="no-box api-heading" ng-version="5.2.0"> <code-example hidecopy="true" class="no-box api-heading" ng-version="5.2.0">
<aio-code class="simple-code"><pre class="prettyprint lang-"> <aio-code class="simple-code"><pre class="prettyprint lang-">
<code class="animated fadeIn"><span class="kwd">constructor</span><span class="pun">(</span><span class="pln">element</span><span class="pun">:</span><span class="pln"> any</span><span class="pun">,</span><span class="pln"> keyframes</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> <code class="animated fadeIn"><span class="kwd">constructor</span><span class="pun">(</span><span class="pln">element</span><span class="pun">:</span><span class="pln"> any</span><span class="pun">,</span><span class="pln"> keyframes</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
</span><span class="pun">[</span><span class="pln">key</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">]:</span><span class="pln"> </span><span class="kwd">string</span><span class="pln"> </span><span class="pun">|</span><span class="pln"> number</span><span class="pun">;</span><span class="pln"> </span><span class="pun">[</span><span class="pln">key</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">]:</span><span class="pln"> </span><span class="kwd">string</span><span class="pln"> </span><span class="pun">|</span><span class="pln"> number</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}[],</span><span class="pln"> duration</span><span class="pun">:</span><span class="pln"> number</span><span class="pun">,</span><span class="pln"> delay</span><span class="pun">:</span><span class="pln"> number</span><span class="pun">,</span><span class="pln"> easing</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">,</span><span class="pln"> previousPlayers</span><span class="pun">:</span><span class="pln"> any</span><span class="pun">[])</span></code> </span><span class="pun">}[],</span><span class="pln"> duration</span><span class="pun">:</span><span class="pln"> number</span><span class="pun">,</span><span class="pln"> delay</span><span class="pun">:</span><span class="pln"> number</span><span class="pun">,</span><span class="pln"> easing</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">,</span><span class="pln"> previousPlayers</span><span class="pun">:</span><span class="pln"> any</span><span class="pun">[])</span></code>
</pre></aio-code></code-example> </pre></aio-code></code-example>
</td> </td>
<td>Description goes here</td> <td>
Description goes here
</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<hr> <hr>
<h5>Example: Descriptive Title of Method Example</h5> <h5>Example: Descriptive Title of Method Example</h5>
<p>Bacon ipsum dolor amet pork belly capicola sirloin venison alcatra ground round ham hock jowl turkey picanha bresaola pancetta brisket chicken fatback. Burgdoggen kevin salami jowl shoulder jerky leberkas meatball. Ham hock picanha burgdoggen pork belly rump bacon cupim. Bacon kielbasa sirloin shank strip steak ground round. Bresaola cow salami meatloaf pork chop leberkas flank turducken biltong meatball chuck pork tri-tip chicken. Ribeye corned beef shoulder, meatloaf strip steak jerky porchetta capicola alcatra ham.</p> <p>
Bacon ipsum dolor amet pork belly capicola sirloin venison alcatra ground round ham hock jowl turkey picanha bresaola pancetta brisket chicken fatback. Burgdoggen kevin salami jowl shoulder jerky leberkas meatball. Ham hock picanha burgdoggen pork belly rump bacon cupim. Bacon kielbasa sirloin shank strip steak ground round. Bresaola cow salami meatloaf pork chop leberkas flank turducken biltong meatball chuck pork tri-tip chicken. Ribeye corned beef shoulder, meatloaf strip steak jerky porchetta capicola alcatra ham.
</p>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</section> </section>
<section> <section>
<h2>Example: Descriptive Title of Combined Example Goes Here</h2> <h2>Example: Descriptive Title of Combined Example Goes Here</h2>
<p>Intro description text about what the example is and how it can be used.</p> <p>
Intro description text about what the example is and how it can be used.
</p>
<code-example hidecopy="true" class="no-box api-heading" ng-version="5.2.0"> <code-example hidecopy="true" class="no-box api-heading" ng-version="5.2.0">
<aio-code class="simple-code"><pre class="prettyprint lang-"> <aio-code class="simple-code"><pre class="prettyprint lang-">
<code class="animated fadeIn"><span class="kwd">constructor</span><span class="pun">(</span><span class="pln">element</span><span class="pun">:</span><span class="pln"> any</span><span class="pun">,</span><span class="pln"> keyframes</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> <code class="animated fadeIn"><span class="kwd">constructor</span><span class="pun">(</span><span class="pln">element</span><span class="pun">:</span><span class="pln"> any</span><span class="pun">,</span><span class="pln"> keyframes</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
</span><span class="pun">[</span><span class="pln">key</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">]:</span><span class="pln"> </span><span class="kwd">string</span><span class="pln"> </span><span class="pun">|</span><span class="pln"> number</span><span class="pun">;</span><span class="pln"> </span><span class="pun">[</span><span class="pln">key</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">]:</span><span class="pln"> </span><span class="kwd">string</span><span class="pln"> </span><span class="pun">|</span><span class="pln"> number</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}[],</span><span class="pln"> duration</span><span class="pun">:</span><span class="pln"> number</span><span class="pun">,</span><span class="pln"> delay</span><span class="pun">:</span><span class="pln"> number</span><span class="pun">,</span><span class="pln"> easing</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">,</span><span class="pln"> previousPlayers</span><span class="pun">:</span><span class="pln"> any</span><span class="pun">[])</span></code> </span><span class="pun">}[],</span><span class="pln"> duration</span><span class="pun">:</span><span class="pln"> number</span><span class="pun">,</span><span class="pln"> delay</span><span class="pun">:</span><span class="pln"> number</span><span class="pun">,</span><span class="pln"> easing</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">,</span><span class="pln"> previousPlayers</span><span class="pun">:</span><span class="pln"> any</span><span class="pun">[])</span></code>
</pre></aio-code></code-example> </pre></aio-code></code-example>
<p>Further explanation provided as needed. Bacon ipsum dolor amet pork belly capicola sirloin venison alcatra ground round ham hock jowl turkey picanha bresaola pancetta brisket chicken fatback. Burgdoggen kevin salami jowl shoulder jerky leberkas meatball.</p> <p>
Further explanation provided as needed. Bacon ipsum dolor amet pork belly capicola sirloin venison alcatra ground round ham hock jowl turkey picanha bresaola pancetta brisket chicken fatback. Burgdoggen kevin salami jowl shoulder jerky leberkas meatball.
</p>
</section> </section>
</div> </div>

View File

@ -32,9 +32,7 @@ You'll learn the details in the pages that follow. For now, focus on the big pic
当然,这只是冰山一角。后面我们将学习更多的细节。不过,目前我们还是先关注全景图吧。 当然,这只是冰山一角。后面我们将学习更多的细节。不过,目前我们还是先关注全景图吧。
<figure> <figure>
<img src="generated/images/guide/architecture/overview2.png" alt="overview"> <img src="generated/images/guide/architecture/overview2.png" alt="overview">
</figure> </figure>
<div class="l-sub-section"> <div class="l-sub-section">
@ -42,7 +40,7 @@ You'll learn the details in the pages that follow. For now, focus on the big pic
The code referenced on this page is available as a <live-example></live-example>. The code referenced on this page is available as a <live-example></live-example>.
本章所引用的代码见<live-example></live-example> 本章所引用的代码见<live-example></live-example>
</div> </div>
## Modules ## Modules
@ -492,9 +490,7 @@ from the root of the application component tree through all child components.
Angular 在每个 JavaScript 事件循环中处理*所有的*数据绑定,它会从组件树的根部开始,递归处理全部子组件。 Angular 在每个 JavaScript 事件循环中处理*所有的*数据绑定,它会从组件树的根部开始,递归处理全部子组件。
<figure> <figure>
<img src="generated/images/guide/architecture/component-databinding.png" alt="Data Binding"> <img src="generated/images/guide/architecture/component-databinding.png" alt="Data Binding">
</figure> </figure>
Data binding plays an important role in communication between a template and its component. Data binding plays an important role in communication between a template and its component.
@ -502,9 +498,7 @@ Data binding plays an important role in communication between a template and its
数据绑定在模板与对应组件的交互中扮演了重要的角色。 数据绑定在模板与对应组件的交互中扮演了重要的角色。
<figure> <figure>
<img src="generated/images/guide/architecture/parent-child-binding.png" alt="Parent/Child binding"> <img src="generated/images/guide/architecture/parent-child-binding.png" alt="Parent/Child binding">
</figure> </figure>
Data binding is also important for communication between parent and child components. Data binding is also important for communication between parent and child components.
@ -743,9 +737,7 @@ The process of `HeroService` injection looks a bit like this:
`HeroService`注入的过程差不多是这样的: `HeroService`注入的过程差不多是这样的:
<figure> <figure>
<img src="generated/images/guide/architecture/injector-injects.png" alt="Service"> <img src="generated/images/guide/architecture/injector-injects.png" alt="Service">
</figure> </figure>
If the injector doesn't have a `HeroService`, how does it know how to make one? If the injector doesn't have a `HeroService`, how does it know how to make one?
@ -918,4 +910,5 @@ by implementing the lifecycle hook interfaces.
> [**Testing**](guide/testing): Run unit tests on your application parts as they interact with the Angular framework > [**Testing**](guide/testing): Run unit tests on your application parts as they interact with the Angular framework
using the _Angular Testing Platform_. using the _Angular Testing Platform_.
> [**测试**](guide/testing):使用 _Angular 测试平台_,在你的应用部件与 Angular 框架交互时进行单元测试。 > [**测试**](guide/testing):使用 _Angular 测试平台_,在你的应用部件与 Angular 框架交互时进行单元测试。