diff --git a/aio/content/guide/ajs-quick-reference.md b/aio/content/guide/ajs-quick-reference.md index 02cb2af1a8..637a5382db 100644 --- a/aio/content/guide/ajs-quick-reference.md +++ b/aio/content/guide/ajs-quick-reference.md @@ -62,9 +62,7 @@ The following table lists some of the key AngularJS template features with their ### 绑定/插值表达式 - Your favorite hero is: {{vm.favoriteHero}} - 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 ### 过滤器 - <td>{{movie.title | uppercase}}</td> - 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 ### 局部变量 - <tr ng-repeat="movie in vm.movies"> <td>{{movie.title}}</td> </tr> - Here, `movie` is a user-defined local variable. @@ -246,9 +240,7 @@ AngularJS 为模板提供了七十多个内置指令。 ### ng-app - <body ng-app="movieHunter"> - The application startup process is called **bootstrapping**. @@ -271,7 +263,6 @@ AngularJS 为模板提供了七十多个内置指令。 ### 引导 -
@@ -295,11 +286,9 @@ AngularJS 为模板提供了七十多个内置指令。 ### ng-class - <div ng-class="{active: isActive}"> <div ng-class="{active: isActive, shazam: isImportant}"> - In AngularJS, the `ng-class` directive includes/excludes CSS classes @@ -361,10 +350,8 @@ AngularJS 为模板提供了七十多个内置指令。 ### ng-click - <button ng-click="vm.toggleImage()"> <button ng-click="vm.toggleImage($event)"> - In AngularJS, the `ng-click` directive allows you to specify custom behavior when an element is clicked. @@ -433,9 +420,7 @@ AngularJS 为模板提供了七十多个内置指令。 ### ng-controller - <div ng-controller="MovieListCtrl as vm"> - In AngularJS, the `ng-controller` directive attaches a controller to the view. @@ -506,9 +491,7 @@ AngularJS 为模板提供了七十多个内置指令。 ### ng-href - <a ng-href="{{ angularDocsUrl }}">Angular Docs</a> - The `ng-href` directive allows AngularJS to preprocess the `href` property so that it @@ -522,9 +505,7 @@ AngularJS 为模板提供了七十多个内置指令。 在AngularJS 中，`ng-href`通常用来作为导航的一部分，激活一个路由。 - <a ng-href="#{{ moviesHash }}">Movies</a> - Routing is handled differently in Angular. @@ -574,9 +555,7 @@ AngularJS 为模板提供了七十多个内置指令。 ### ng-if - <table ng-if="movies.length"> - In AngularJS, the `ng-if` directive removes or recreates a portion of the DOM, @@ -623,9 +602,7 @@ AngularJS 为模板提供了七十多个内置指令。 ### ng-model - <input ng-model="vm.favoriteHero"/> - 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 - <tr ng-repeat="movie in vm.movies"> - In AngularJS, the `ng-repeat` directive repeats the associated DOM element @@ -719,11 +694,9 @@ AngularJS 为模板提供了七十多个内置指令。 ### ng-show - <h3 ng-show="vm.favoriteHero"> Your favorite hero is: {{vm.favoriteHero}} </h3> - In AngularJS, the `ng-show` directive shows or hides the associated DOM element, based on @@ -776,9 +749,7 @@ AngularJS 为模板提供了七十多个内置指令。 ### ng-src - <img ng-src="{{movie.imageurl}}"> - The `ng-src` directive allows AngularJS to preprocess the `src` property so that it @@ -819,9 +790,7 @@ AngularJS 为模板提供了七十多个内置指令。 ### ng-style - <div ng-style="{color: colorPreference}"> - In AngularJS, the `ng-style` directive sets a CSS style on an HTML element @@ -877,7 +846,6 @@ AngularJS 为模板提供了七十多个内置指令。 ### ng-switch - <div ng-switch="vm.favoriteHero && vm.checkMovieHero(vm.favoriteHero)"> <div ng-switch-when="true"> @@ -890,7 +858,6 @@ AngularJS 为模板提供了七十多个内置指令。 Please enter your favorite hero. </div> </div> - In AngularJS, the `ng-switch` directive swaps the contents of @@ -996,9 +963,7 @@ AngularJS中的很多内置过滤器在Angular中都有对应的管道。 ### currency - <td>{{movie.price | currency}}</td> - Formats a number as currency. @@ -1028,9 +993,7 @@ AngularJS中的很多内置过滤器在Angular中都有对应的管道。 ### date - <td>{{movie.releaseDate | date}}</td> - Formats a date to a string based on the requested format. @@ -1060,9 +1023,7 @@ AngularJS中的很多内置过滤器在Angular中都有对应的管道。 ### filter - <tr ng-repeat="movie in movieList | filter: {title:listFilter}"> - Selects a subset of items from the defined collection, based on the filter criteria. @@ -1094,9 +1055,7 @@ AngularJS中的很多内置过滤器在Angular中都有对应的管道。 ### json - <pre>{{movie | json}}</pre> - Converts a JavaScript object into a JSON string. This is useful for debugging. @@ -1126,9 +1085,7 @@ AngularJS中的很多内置过滤器在Angular中都有对应的管道。 ### limitTo - <tr ng-repeat="movie in movieList | limitTo:2:0"> - Selects up to the first parameter (2) number of items from the collection @@ -1164,9 +1121,7 @@ AngularJS中的很多内置过滤器在Angular中都有对应的管道。 ### lowercase - <div>{{movie.title | lowercase}}</div> - Converts the string to lowercase. @@ -1196,9 +1151,7 @@ AngularJS中的很多内置过滤器在Angular中都有对应的管道。 ### number - <td>{{movie.starRating | number}}</td> - Formats a number as text. @@ -1236,9 +1189,7 @@ AngularJS中的很多内置过滤器在Angular中都有对应的管道。 ### orderBy - <tr ng-repeat="movie in movieList | orderBy : 'title'"> - Displays the collection in the order specified by the expression. @@ -1322,11 +1273,9 @@ The Angular code is shown using TypeScript. ### IIFE - (function () { ... }()); - 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.module("movieHunter", ["ngRoute"]); - In AngularJS, an Angular module keeps track of controllers, services, and other code. @@ -1412,13 +1359,11 @@ The Angular code is shown using TypeScript. ### 控制器注册 - angular .module("movieHunter") .controller("MovieListCtrl", ["movieService", MovieListCtrl]); - AngularJS has code in each controller that looks up an appropriate Angular module @@ -1470,10 +1415,8 @@ The Angular code is shown using TypeScript. ### 控制器函数 - function MovieListCtrl(movieService) { } - 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. ### 依赖注入 - MovieListCtrl.$inject = ['MovieService']; function MovieListCtrl(movieService) { } - In AngularJS, you pass in any dependencies as controller function arguments. @@ -1612,13 +1553,11 @@ also encapsulate a style sheet within a specific component. ### Link tag - + ### Link 标签 - <link href="styles.css" rel="stylesheet" /> - 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. - diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md index a51d15436d..9423f2ac1e 100644 --- a/aio/content/guide/animations.md +++ b/aio/content/guide/animations.md @@ -78,7 +78,7 @@ driven by a model attribute. 我们来构建一个简单的动画，它会让一个元素用模型驱动的方式在两个状态之间转场。 -Animations can be defined inside `@Component` metadata. +Animations can be defined inside `@Component` metadata. 动画会被定义在`@Component`元数据中。 @@ -162,9 +162,7 @@ controls the timing of switching between one set of styles and the next:
- In Angular animations you define states and transitions between states -
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 当在*任意*两个状态之间切换时，`* => *`转场都会生效。
- The wildcard state can be used to match many different transitions at once -
### The `void` state @@ -233,9 +229,7 @@ regardless of what state it was in before it left. 比如当一个元素离开视图时，`* => void`转场就会生效，而不管它在离场以前是什么状态。
- The void state can be used for enter and leave transitions -
The wildcard state `*` also matches `void`. @@ -283,10 +277,8 @@ These two common animations have their own aliases: 这两个常见的动画有自己的别名： - transition(':enter', [ ... ]); // void => * transition(':leave', [ ... ]); // * => void - @@ -325,9 +317,7 @@ This gives you fine-grained control over each transition: 现在就对每一种转场都有了细粒度的控制：
- This example transitions between active, inactive, and void states -
@@ -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. -无论动画是否实际执行过，那些回调都会触发。 \ No newline at end of file +无论动画是否实际执行过，那些回调都会触发。 diff --git a/aio/content/guide/api-page-class.md b/aio/content/guide/api-page-class.md index 58c413c75e..990ecd9c21 100644 --- a/aio/content/guide/api-page-class.md +++ b/aio/content/guide/api-page-class.md @@ -1,5 +1,3 @@ - -
API / @core @@ -8,7 +6,7 @@
-

Class Name

+

Class Name

@@ -19,7 +17,11 @@
-

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.

+

+ + 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. + +

@@ -29,32 +31,25 @@ 
-
         class Compiler {
-
     compileModuleSync<T>(moduleType: Type<T>): NgModuleFactory<T>
-
     compileModuleAsync<T>(moduleType: Type<T>): Promise<NgModuleFactory<T>>
-
     compileModuleAndAllComponentsSync<T>(moduleType: Type<T>): ModuleWithComponentFactories<T>
-
     compileModuleAndAllComponentsAsync<T>(moduleType: Type<T>): Promise<ModuleWithComponentFactories<T>>
-
     clearCache(): void
-
     clearCacheFor(type: Type<any>)
-
     }
-
- -

Description

-

The longer class description goes here which can include multiple paragraphs.

+

+ + The longer class description goes here which can include multiple paragraphs. + +

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.

@@ -62,11 +57,23 @@ @@ -74,32 +81,31 @@ -
-

Constructor

- 
   
-
         constructor(element: any, keyframes: {
-
         [key: string]: string | number;
-
     }[], duration: number, delay: number, easing: string, previousPlayers: any[])
-
-
-

Properties

@@ -110,18 +116,35 @@ - Property + - Type + Property - Description + 属性 + + + + + + Type + + 绑定类型 + + + + + + Description + + 描述 + + - @@ -130,12 +153,19 @@ - + - Description goes here + + + + + + + Description goes here + + - @@ -144,12 +174,21 @@ - Type + - Description goes here + Type + + 绑定类型 + + + + + + Description goes here + + - @@ -158,18 +197,24 @@ - Type + - Description goes here + Type + + 绑定类型 + + + + + + Description goes here + + - - -
-

Methods

@@ -180,75 +225,94 @@ - Method1Name( ) + + + Method1Name( ) + + - -

Description goes here

+

+ + Description goes here + +


-

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.

+

+ + 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. + +

- - - - + - - -
Method2Name( ) + + Method2Name( ) + +
-

Description goes here

+

+ + Description goes here + +

Declaration
- 
-
                     class AnimationBuilder {build(animation: AnimationMetadata | AnimationMetadata[]): AnimationFactory}
- -
Parameters
Returns
-

Returns information and results goes here.

+

+ + Returns information and results goes here. + +

Errors
-

Error information goes here

+

+ + Error information goes here + +

@@ -257,93 +321,89 @@
Overloads
- - - + - - + - -
- 
   
-
         constructor(element: any, keyframes: {
-
         [key: string]: string | number;
-
     }[], duration: number, delay: number, easing: string, previousPlayers: any[])
-
Description goes here + + Description goes here + +
- 
   
-
         constructor(element: any, keyframes: {
-
         [key: string]: string | number;
-
     }[], duration: number, delay: number, easing: string, previousPlayers: any[])
-
Description goes here + + Description goes here + +
Example: Descriptive Title of Method Example
-

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.

+

+ + 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. + +

-
-

Example: Descriptive Title of Combined Example Goes Here

-

Intro description text about what the example is and how it can be used.

+

+ + Intro description text about what the example is and how it can be used. + +

- 
   
-
         constructor(element: any, keyframes: {
-
         [key: string]: string | number;
-
     }[], duration: number, delay: number, easing: string, previousPlayers: any[])
-
-

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.

+

+ + 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. + +

-
\ No newline at end of file + diff --git a/aio/content/guide/architecture.md b/aio/content/guide/architecture.md index 20a2f9efa1..880dfa750e 100644 --- a/aio/content/guide/architecture.md +++ b/aio/content/guide/architecture.md @@ -32,9 +32,7 @@ You'll learn the details in the pages that follow. For now, focus on the big pic 当然，这只是冰山一角。后面我们将学习更多的细节。不过，目前我们还是先关注全景图吧。
- overview -
@@ -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 . 本章所引用的代码见。 - +
## Modules @@ -492,9 +490,7 @@ from the root of the application component tree through all child components. Angular 在每个 JavaScript 事件循环中处理*所有的*数据绑定，它会从组件树的根部开始，递归处理全部子组件。
- Data Binding -
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 数据绑定在模板与对应组件的交互中扮演了重要的角色。
- Parent/Child binding -
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`注入的过程差不多是这样的：
- Service -
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 using the _Angular Testing Platform_. + > [**测试**](guide/testing)：使用 _Angular 测试平台_，在你的应用部件与 Angular 框架交互时进行单元测试。