diff --git a/aio/content/examples/cli-quickstart/README.md b/aio/content/examples/cli-quickstart/README.md index efe9ec67ae..2ce1f76b36 100644 --- a/aio/content/examples/cli-quickstart/README.md +++ b/aio/content/examples/cli-quickstart/README.md @@ -3,6 +3,7 @@ This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.0.0-rc.0. ## Development server + Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. ## Code scaffolding diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/README.md b/aio/content/examples/upgrade-phonecat-1-typescript/README.md index f3433b901a..6ec29d8f3f 100644 --- a/aio/content/examples/upgrade-phonecat-1-typescript/README.md +++ b/aio/content/examples/upgrade-phonecat-1-typescript/README.md @@ -5,13 +5,17 @@ The following changes from vanilla Phonecat are applied: * The TypeScript config file shown in the guide is `tsconfig.ajs.json` instead of the default, because we don't want to enable `noImplicitAny` for migration. + * Karma config for unit tests is in karma.conf.ajs.js because the boilerplate Karma config is not compatible with the way AngularJS tests need to be run. The shell script run-unit-tests.sh can be used to run the unit tests. + * Instead of using Bower, AngularJS and its dependencies are fetched from a CDN in index.html and karma.conf.ajs.js. + * E2E tests have been moved to the parent directory, where `gulp run-e2e-tests` can discover and run them along with all the other examples. + * Most of the phone JSON and image data removed in the interest of keeping repo weight down. Keeping enough to retain testability of the app. diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/README.md b/aio/content/examples/upgrade-phonecat-2-hybrid/README.md index 76eb21fc6c..a9d9293e00 100644 --- a/aio/content/examples/upgrade-phonecat-2-hybrid/README.md +++ b/aio/content/examples/upgrade-phonecat-2-hybrid/README.md @@ -6,12 +6,16 @@ The following changes from vanilla Phonecat are applied: * Karma config for unit tests is in karma.conf.ajs.js because the boilerplate Karma config is not compatible with the way AngularJS tests need to be run. The shell script run-unit-tests.sh can be used to run the unit tests. + * Also for the Karma shim, there is a `karma-test-shim.1.js` file which isn't used but is shown in the test appendix. + * Instead of using Bower, AngularJS and its dependencies are fetched from a CDN in index.html and karma.conf.ajs.js. + * E2E tests have been moved to the parent directory, where `run-e2e-tests` can discover and run them along with all the other examples. + * Most of the phone JSON and image data removed in the interest of keeping repo weight down. Keeping enough to retain testability of the app. diff --git a/aio/content/examples/upgrade-phonecat-3-final/README.md b/aio/content/examples/upgrade-phonecat-3-final/README.md index 7448da44e6..4fe84b1617 100644 --- a/aio/content/examples/upgrade-phonecat-3-final/README.md +++ b/aio/content/examples/upgrade-phonecat-3-final/README.md @@ -6,8 +6,10 @@ The following changes from vanilla Phonecat are applied: * Karma config for unit tests is in karma.conf.ng1.js because the boilerplate Karma config is not compatible with the way tests in this project need to be run. The shell script run-unit-tests.sh can be used to run the unit tests. + * E2E tests have been moved to the parent directory, where `run-e2e-tests` can discover and run them along with all the other examples. + * Most of the phone JSON and image data removed in the interest of keeping repo weight down. Keeping enough to retain testability of the app. diff --git a/aio/content/file-not-found.md b/aio/content/file-not-found.md index 8bdba34990..e9ce485f01 100644 --- a/aio/content/file-not-found.md +++ b/aio/content/file-not-found.md @@ -15,4 +15,3 @@ - diff --git a/aio/content/guide/dynamic-component-loader.md b/aio/content/guide/dynamic-component-loader.md index 6788e97047..3dae7788c1 100644 --- a/aio/content/guide/dynamic-component-loader.md +++ b/aio/content/guide/dynamic-component-loader.md @@ -259,12 +259,10 @@ Here are two sample components and the `AdComponent` interface for reference: 最终的广告栏是这样的：
- Ads -
See the . -参见。 \ No newline at end of file +参见。 diff --git a/aio/content/guide/dynamic-form.md b/aio/content/guide/dynamic-form.md index 7f78b24bd6..b49eb9b146 100644 --- a/aio/content/guide/dynamic-form.md +++ b/aio/content/guide/dynamic-form.md @@ -261,12 +261,10 @@ The final form looks like this: 完整的表单是这样的：
- Dynamic-Form -
[Back to top](guide/dynamic-form#top) -[回到顶部](guide/dynamic-form#top) \ No newline at end of file +[回到顶部](guide/dynamic-form#top) diff --git a/aio/content/guide/entry-components.md b/aio/content/guide/entry-components.md index cffb6257eb..b0765d8d0f 100644 --- a/aio/content/guide/entry-components.md +++ b/aio/content/guide/entry-components.md @@ -32,6 +32,7 @@ The following is an example of specifying a bootstrapped component, `AppComponent`, in a basic `app.module.ts`: ```typescript + @NgModule({ declarations: [ AppComponent @@ -45,6 +46,7 @@ The following is an example of specifying a bootstrapped component, providers: [], bootstrap: [AppComponent] // bootstrapped entry component }) + ``` A bootstrapped component is an entry component @@ -69,12 +71,14 @@ The second kind of entry component occurs in a route definition like this: ```typescript + const routes: Routes = [ { path: '', component: CustomerListComponent } ]; + ``` A route definition refers to a component by its type with `component: CustomerListComponent`. diff --git a/aio/content/guide/feature-modules.md b/aio/content/guide/feature-modules.md index b80f6ffb92..346035832b 100644 --- a/aio/content/guide/feature-modules.md +++ b/aio/content/guide/feature-modules.md @@ -42,6 +42,7 @@ root project directory. Replace `CustomerDashboard` with the name of your module. You can omit the "Module" suffix from the name because the CLI appends it: ```sh + ng generate module CustomerDashboard ``` @@ -49,6 +50,7 @@ ng generate module CustomerDashboard This causes the CLI to create a folder called `customer-dashboard` with a file inside called `customer-dashboard.module.ts` with the following contents: ```typescript + import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; @@ -59,6 +61,7 @@ import { CommonModule } from '@angular/common'; declarations: [] }) export class CustomerDashboardModule { } + ``` The structure of an NgModule is the same whether it is a root module or a feature module. In the CLI generated feature module, there are two JavaScript import statements at the top of the file: the first imports `NgModule`, which, like the root module, lets you use the `@NgModule` decorator; the second imports `CommonModule`, which contributes many common directives such as `ngIf` and `ngFor`. Feature modules import `CommonModule` instead of `BrowserModule`, which is only imported once in the root module. `CommonModule` only contains information for common directives such as `ngIf` and `ngFor` which are needed in most templates, whereas `BrowserModule` configures the Angular app for the browser which needs to be done only once. @@ -67,6 +70,7 @@ The `declarations` array is available for you to add declarables, which are components, directives, and pipes that belong exclusively to this particular module. To add a component, enter the following command at the command line where `customer-dashboard` is the directory where the CLI generated the feature module and `CustomerDashboard` is the name of the component: ```sh + ng generate component customer-dashboard/CustomerDashboard ``` @@ -112,9 +116,7 @@ Next, in the `AppComponent`, `app.component.html`, add the tag ` - feature module component -
diff --git a/aio/content/guide/form-validation.md b/aio/content/guide/form-validation.md index 934e6fda08..5070e4fbf0 100644 --- a/aio/content/guide/form-validation.md +++ b/aio/content/guide/form-validation.md @@ -49,7 +49,7 @@ The following example exports `NgModel` into a variable called `name`: Note the following: -请注意以下几点： +要注意的有两点： * The `` element carries the HTML validation attributes: `required` and `minlength`. It also carries a custom validator directive, `forbiddenName`. For more @@ -164,7 +164,7 @@ for the template. 这个例子添加了一些getter方法。在响应式表单中，我们通常会通过它所属的控件组（FormGroup）的`get`方法来访问表单控件，但有时候为模板定义一些getter作为简短形式。 -If you look at the template for the name input again, it is fairly similar to the template-driven example. +If you look at the template for the name input again, it is fairly similar to the template-driven example. 如果我们到模板中找到name输入框，就会发现它和模板驱动的例子很相似。 @@ -331,4 +331,4 @@ set the color of each form control's border. **You can run the to see the complete reactive and template-driven example code.** -**你可以运行来查看完整的响应式和模板驱动表单的代码。** \ No newline at end of file +**你可以运行来查看完整的响应式和模板驱动表单的代码。** diff --git a/aio/content/guide/forms.md b/aio/content/guide/forms.md index d9d24c1293..c7377836c8 100644 --- a/aio/content/guide/forms.md +++ b/aio/content/guide/forms.md @@ -89,9 +89,7 @@ You'll learn to build a template-driven form that looks like this: 我们将学习构建如下的“模板驱动”表单：
- Clean Form -
The *Hero Employment Agency* uses this form to maintain personal information about heroes. @@ -109,9 +107,7 @@ If you delete the hero name, the form displays a validation error in an attentio 如果删除了英雄的名字，表单就会用醒目的样式把验证错误显示出来。
- Invalid, Name Required -
Note that the *Submit* button is disabled, and the "required" bar to the left of the input control changes from green to red. @@ -496,9 +492,7 @@ Running the app right now would be disappointing. 如果立即运行此应用，你将会失望。
- Early form with no binding -
You don't see hero data because you're not binding to the `Hero` yet. @@ -599,9 +593,7 @@ At some point it might look like this: 某一瞬间，它可能是这样的：
- ngModel in action -
The diagnostic is evidence that values really are flowing from the input box to the model and @@ -675,9 +667,7 @@ If you run the app now and change every hero model property, the form might disp 如果现在运行本应用，修改 Hero 模型的每个属性，表单是这样的：
- ngModel in action -
The diagnostic near the top of the form @@ -845,9 +835,7 @@ The actions and effects are as follows: 动作和它对应的效果如下：
- Control State Transition -
You should see the following transitions and class names: @@ -855,9 +843,7 @@ You should see the following transitions and class names: 我们会看到下列转换及其类名：
- Control state transitions -
The `ng-valid`/`ng-invalid` pair is the most interesting, because you want to send a @@ -881,9 +867,7 @@ on the left of the input box: 可以在输入框的左侧添加带颜色的竖条，用于标记必填字段和无效输入：
- Invalid Form -
You achieve this effect by adding these class definitions to a new `forms.css` file @@ -919,9 +903,7 @@ When the user deletes the name, the form should look like this: 当用户删除姓名时，应该是这样的：
- Name required -
To achieve this effect, extend the `` tag with the following: @@ -1291,4 +1273,3 @@ Here’s the code for the final version of the application: - diff --git a/aio/content/guide/frequent-ngmodules.md b/aio/content/guide/frequent-ngmodules.md index ee00d967d5..ab34160b96 100644 --- a/aio/content/guide/frequent-ngmodules.md +++ b/aio/content/guide/frequent-ngmodules.md @@ -37,61 +37,133 @@ of some of the things they contain: - BrowserModule + - @angular/platform-browser + BrowserModule - When you want to run your app in a browser + + + + + @angular/platform-browser + + + + + + When you want to run your app in a browser + + - CommonModule + - @angular/common + CommonModule - When you want to use NgIf, NgFor + + + + + @angular/common + + + + + + When you want to use NgIf, NgFor + + - FormsModule + - @angular/forms + FormsModule - When you build template driven forms (includes NgModel) + + + + + @angular/forms + + + + + + When you build template driven forms (includes NgModel) + + - ReactiveFormsModule + - @angular/forms + ReactiveFormsModule - When building reactive forms + + + + + @angular/forms + + + + + + When building reactive forms + + - RouterModule + - @angular/router + RouterModule - For Routing and when you want to use RouterLink,.forRoot(), and .forChild() + + + + + @angular/router + + + + + + For Routing and when you want to use RouterLink,.forRoot(), and .forChild() + + - HttpClientModule + - @angular/common/http + HttpClientModule - When you to talk to a server + + + + + @angular/common/http + + + + + + When you to talk to a server + + @@ -106,6 +178,7 @@ or your feature module as appropriate, and list them in the `@NgModule` `app.module.ts`. ```typescript + /* import modules so that AppModule can access them */ import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; @@ -123,6 +196,7 @@ import { AppComponent } from './app.component'; bootstrap: [AppComponent] }) export class AppModule { } + ``` The imports at the top of the array are JavaScript import statements @@ -147,9 +221,7 @@ If you do import `BrowserModule` into a lazy loaded feature module, Angular returns an error telling you to use `CommonModule` instead.
- BrowserModule error -
diff --git a/aio/content/guide/glossary.md b/aio/content/guide/glossary.md index 63a56fae7e..da80ff9b64 100644 --- a/aio/content/guide/glossary.md +++ b/aio/content/guide/glossary.md @@ -20,6 +20,7 @@ unexpected definitions. [S](guide/glossary#S) [T](guide/glossary#T) [U](guide/glossary#U) [V](guide/glossary#V) [W](guide/glossary#W) [X](guide/glossary#X) [Y](guide/glossary#Y) [Z](guide/glossary#Z) {@a A} + {@a aot} ## Ahead-of-time (AOT) compilation @@ -276,31 +277,31 @@ Angular 有一个非常强大的数据绑定框架，具有各种数据绑定操 * [Interpolation](guide/template-syntax#interpolation). - [插值表达式 (interpolation)](guide/template-syntax#interpolation)。 + [插值表达式 (interpolation)](guide/template-syntax#interpolation)。 * [Property binding](guide/template-syntax#property-binding). - [property 绑定 (property binding)](guide/template-syntax#property-binding)。 + [property 绑定 (property binding)](guide/template-syntax#property-binding)。 * [Event binding](guide/template-syntax#event-binding). - [事件绑定 (event binding)](guide/template-syntax#event-binding)。 + [事件绑定 (event binding)](guide/template-syntax#event-binding)。 * [Attribute binding](guide/template-syntax#attribute-binding). - [attribute 绑定 (attribute binding)](guide/template-syntax#attribute-binding)。 + [attribute 绑定 (attribute binding)](guide/template-syntax#attribute-binding)。 * [Class binding](guide/template-syntax#class-binding). - [CSS 类绑定 (class binding)](guide/template-syntax#class-binding)。 + [CSS 类绑定 (class binding)](guide/template-syntax#class-binding)。 * [Style binding](guide/template-syntax#style-binding). - [样式绑定 (style binding)](guide/template-syntax#style-binding)。 + [样式绑定 (style binding)](guide/template-syntax#style-binding)。 * [Two-way data binding with ngModel](guide/template-syntax#ngModel). - [基于 ngModel 的双向数据绑定 (Two-way data binding with ngModel)](guide/template-syntax#ngModel)。 + [基于 ngModel 的双向数据绑定 (Two-way data binding with ngModel)](guide/template-syntax#ngModel)。 {@a decorator} @@ -333,11 +334,13 @@ Angular 使用自己的一套装饰器来实现应用程序各部件之间的相 `@Component`装饰器中省略的参数对象会包含与组件有关的元数据。 ``` + @Component({...}) export class AppComponent { constructor(@Inject('SpecialFoo') public foo:Foo) {} @Input() name:string; } + ``` The scope of a decorator is limited to the language feature @@ -346,7 +349,7 @@ classes that follow it in the file. 装饰器的作用域会被限制在它所装饰的语言特性。 在同一文件中，装饰器不会“泄露”到它后面的其它类。 - +
Always include parentheses `()` when applying a decorator. @@ -1238,4 +1241,4 @@ Learn more about zones in this [Brian Ford video](https://www.youtube.com/watch?v=3IqtmUscE_U). -更多信息，见 [Brian Ford 的视频](https://www.youtube.com/watch?v=3IqtmUscE_U)。 \ No newline at end of file +更多信息，见 [Brian Ford 的视频](https://www.youtube.com/watch?v=3IqtmUscE_U)。 diff --git a/aio/content/guide/hierarchical-dependency-injection.md b/aio/content/guide/hierarchical-dependency-injection.md index 5b0884e410..f20a63659d 100644 --- a/aio/content/guide/hierarchical-dependency-injection.md +++ b/aio/content/guide/hierarchical-dependency-injection.md @@ -64,11 +64,8 @@ open simultaneously. `HeroesListComponent`组件保存和管理着`HeroTaxReturnComponent`的多个实例。 下图展示了当`HeroesCardComponent`的三个 `HeroTaxReturnComponent` 实例同时展开时的三级组件树状态。 -
- injector tree -
### Injector bubbling @@ -215,9 +212,7 @@ Each tax return component has the following characteristics: 能把所做的修改保存到它的报税单中，或者放弃它们。
- Heroes in action -
One might suppose that the `HeroTaxReturnComponent` has logic to manage and restore changes. @@ -325,9 +320,7 @@ Component (B) is the parent of another component (C) that defines its own, even 组件B是另一个组件C的父组件，而组件C又定义了自己的，*更特殊的*`CarService`提供商。
- car components -
Behind the scenes, each component sets up its own injector with zero, one, or more providers defined for that component itself. @@ -341,9 +334,7 @@ its injector produces an instance of `Car` resolved by injector (C) with an `Eng 当我们在最深层的组件C解析`Car`的实例时，它使用注入器C解析生成了一个`Car`的实例，使用注入器B解析了`Engine`，而`Tires`则是由根注入器A解析的。
- car injector tree -
@@ -354,4 +345,3 @@ which you can review and download from the . *车辆*场景下的代码位于`car.components.ts`和`car.services.ts`文件中，这个例子你可以在查看和下载。
- diff --git a/aio/content/guide/http.md b/aio/content/guide/http.md index 13efcff27a..4e4ea82e3c 100644 --- a/aio/content/guide/http.md +++ b/aio/content/guide/http.md @@ -454,12 +454,14 @@ Subscribing twice results in two HTTP requests. 比如，下列代码会使用同样的数据发送两次同样的 POST 请求： ```javascript + const req = http.get('/api/heroes'); // 0 requests made - .subscribe() not called. req.subscribe(); // 1 request made. req.subscribe(); // 2 requests made. + ```
@@ -592,7 +594,7 @@ The `switchMap()` operator has three important characteristics. it cancels that request and sends a new one. 3. It returns service responses in their original request order, even if the -server returns them out of order. +server returns them out of order.
@@ -631,9 +633,11 @@ In this sense, each interceptor is fully capable of handling the request entirel Most interceptors inspect the request on the way in and forward the (perhaps altered) request to the `handle()` method of the `next` object which implements the [`HttpHandler`](api/common/http/HttpHandler) interface. ```javascript + export abstract class HttpHandler { abstract handle(req: HttpRequest): Observable>; } + ``` Like `intercept()`, the `handle()` method transforms an HTTP request into an `Observable` of [`HttpEvents`](#httpevents) which ultimately include the server's response. The `intercept()` method could inspect that observable and alter it before returning it to the caller. @@ -743,9 +747,12 @@ If an interceptor could modify the original request object, the re-tried operati TypeScript will prevent you from setting `HttpRequest` readonly properties. ```javascript + // Typescript disallows the following assignment because req.url is readonly req.url = req.url.replace('http://', 'https://'); + ``` + To alter the request, clone it first and modify the clone before passing it to `next.handle()`. You can clone and modify the request in a single step as in this example. @@ -764,7 +771,9 @@ The `readonly` assignment guard can't prevent deep updates and, in particular, it can't prevent you from modifying a property of a request body object. ```javascript + req.body.name = req.body.name.trim(); // bad idea! + ``` If you must mutate the request body, copy it first, change the copy, @@ -787,9 +796,11 @@ If you set the cloned request body to `null`, Angular knows you intend to clear 这种克隆一个请求并设置一组新的请求头的操作非常常见，因此有了一种快捷写法： ```javascript + newReq = req.clone({ ... }); // body not mentioned => preserve original body newReq = req.clone({ body: undefined }); // preserve original body newReq = req.clone({ body: null }); // clear the body + ``` #### Set default headers @@ -885,6 +896,7 @@ the cached response, by-passing the `next` handler (and all other interceptors d If a cachable request is not in cache, the code calls `sendRequest`. {@a send-request} + @@ -1082,10 +1094,7 @@ At the end, tests may verify that the app has made no unexpected requests.
-You can run - - these sample tests - +You can run these sample tests in a live coding environment. The tests described in this guide are in `src/testing/http-client.spec.ts`. @@ -1197,4 +1206,3 @@ Call `request.error()` with an `ErrorEvent` instead of `request.flush()`, as in linenums="false"> - diff --git a/aio/content/guide/i18n.md b/aio/content/guide/i18n.md index 328b837b7b..3cd4137b5d 100644 --- a/aio/content/guide/i18n.md +++ b/aio/content/guide/i18n.md @@ -135,7 +135,7 @@ import from `@angular/common/locales/extra`. An error message informs you when t
This document refers to a unit of translatable text as "text," a "message", or a - "text message." + "text message."
@@ -244,7 +244,7 @@ You must then update the translation file with the new id. 我们就要使用这个新的 id 来修改这个翻译文件。 Alternatively, you can specify a custom id in the `i18n` attribute by using the prefix `@@`. -The example below defines the custom id `introductionHeader`: +The example below defines the custom id `introductionHeader`: @@ -304,11 +304,8 @@ Consider this translation to French: ```xml - Hello - Bonjour - ``` @@ -421,7 +418,9 @@ the number of minutes.
This syntax conforms to the + ICU Message Format + as specified in the CLDR pluralization rules. @@ -520,8 +519,7 @@ You can also nest different ICU expressions together, as shown in this example: Use the `ng xi18n` command provided by the CLI to extract the text messages marked with `i18n` into a translation source file. - 使用`ng-xi18n`提取工具来将带`i18n`标记的文本提取到一个翻译源文件中。 - +使用`ng-xi18n`提取工具来将带`i18n`标记的文本提取到一个翻译源文件中。 Open a terminal window at the root of the app project and enter the `ng xi18n` command: @@ -658,7 +656,6 @@ internationalization files, there. 其中一种方法是为本土化和相关资源（比如国际化文件）创建一个专门的目录。 -
Localization and internationalization are @@ -705,6 +702,7 @@ This sample file is easy to translate without a special editor or knowledge of F 1. Open `messages.fr.xlf` and find the first `` section: > + > This XML element represents the translation of the `

` greeting tag that you marked with the @@ -720,11 +718,13 @@ This sample file is easy to translate without a special editor or knowledge of F the appropriate French translation. > + 3. Translate the other text nodes the same way: > +
@@ -854,27 +854,16 @@ The sample app and its translation file are now as follows: 下面是例子应用及其翻译文件： - - - - - - - - - - - {@a merge} @@ -1022,4 +1011,3 @@ error: - diff --git a/aio/content/guide/language-service.md b/aio/content/guide/language-service.md index 5edf145920..e011b2fe91 100644 --- a/aio/content/guide/language-service.md +++ b/aio/content/guide/language-service.md @@ -25,9 +25,7 @@ you can hit tab to complete. 自动完成可以在输入时为我们提供当前情境下的候选内容和提示，从而提高开发速度。下面这个例子展示了插值表达式中的自动完成功能。当我们进行输入的时候，就可以按tab键来自动完成。
- autocompletion -
There are also completions within @@ -41,14 +39,12 @@ show up in the completion list. ## 错误检查 The Angular Language Service can also forewarn you of mistakes in your code. -In this example, Angular doesn't know what `orders` is or where it comes from. +In this example, Angular doesn't know what `orders` is or where it comes from. Angular 语言服务还能对代码中存在的错误进行预警。在这个例子中，Angular 不知道什么是`orders`或者它来自哪里。
- error checking -
## Navigation @@ -62,9 +58,7 @@ click and press F12 to go directly to its definition. 导航可以让我们在鼠标悬浮时看到某个组件、指令、模块等来自哪里，然后可以点击并按 F12 直接跳转到它的定义处。
- navigation -
## Angular Language Service in your editor @@ -89,7 +83,9 @@ Visual Studio Code 可以从商店中安装语言服务，这个功能就在左 我们也可以使用 VS 的快速打开（⌘+P）功能来查找这个扩展插件。打开它之后就输入下列命令： ```sh + ext install Angular.ng-template + ``` Then click the install button to install the Angular Language Service. @@ -118,6 +114,7 @@ you need to have in `package.json`: devDependencies { "@angular/language-service": "^4.0.0" } + ``` Then in the terminal window at the root of your project, @@ -126,15 +123,9 @@ install the `devDependencies` with `npm` or `yarn`: 然后，打开终端窗口，在项目根目录下使用`npm`或`yarn`来安装这些`devDependencies`： ```sh + npm install -``` -*OR* - -*或* - -```sh -yarn ``` *OR* @@ -142,7 +133,19 @@ yarn *或* ```sh + +yarn + +``` + +*OR* + +*或* + +```sh + yarn install + ``` ### Sublime Text @@ -156,7 +159,9 @@ Install the latest version of typescript in a local `node_modules` directory: 把最新版本的 TypeScript 安装到本地的`node_modules`目录下： ```sh + npm install --save-dev typescript + ``` Then install the Angular Language Service in the same location: @@ -164,7 +169,9 @@ Then install the Angular Language Service in the same location: 然后把 Angular 语言服务安装到同一位置： ```sh + npm install --save-dev @angular/language-service + ``` Starting with TypeScript 2.3, TypeScript has a language service plugin model that the language service can use. @@ -176,7 +183,9 @@ Next, in your user preferences (`Cmd+,` or `Ctrl+,`), add: 接下来，在你的用户首选项中（按`Cmd+,`或`Ctrl+,`）添加： ```json + "typescript-tsdk": "/node_modules/typescript/lib" + ``` ## Installing in your project @@ -189,18 +198,24 @@ following `npm` command: 我们还可以使用下列`npm`命令来把 Angular 语言服务安装到工程中： ```sh + npm install --save-dev @angular/language-service + ``` + Additionally, add the following to the `"compilerOptions"` section of your project's `tsconfig.json`. 另外，还要在工程的`tsconfig.json`中添加下列`"compilerOptions"`区域： ```json + "plugins": [ {"name": "@angular/language-service"} ] + ``` + Note that this only provides diagnostics and completions in `.ts` files. You need a custom sublime plugin (or modifications to the current plugin) for completions in HTML files. @@ -242,5 +257,5 @@ For more in-depth information, see the For more information, see [Chuck Jazdzewski's presentation](https://www.youtube.com/watch?v=ez3R0Gi4z5A&t=368s) on the Angular Language Service from [ng-conf](https://www.ng-conf.org/) 2017. -要了解更多信息，参见 [ng-conf](https://www.ng-conf.org/) 2017 中 [Chuck Jazdzewski的演讲](https://www.youtube.com/watch?v=ez3R0Gi4z5A&t=368s) 中讲解的 Angular 语言服务。 +要了解更多信息，参见 [ng-conf](https://www.ng-conf.org/) 2017 中 [Chuck Jazdzewski的演讲](https://www.youtube.com/watch?v=ez3R0Gi4z5A&t=368s) 中讲解的 Angular 语言服务。 diff --git a/aio/content/guide/lazy-loading-ngmodules.md b/aio/content/guide/lazy-loading-ngmodules.md index 227d644dcf..6d7aa243c1 100644 --- a/aio/content/guide/lazy-loading-ngmodules.md +++ b/aio/content/guide/lazy-loading-ngmodules.md @@ -37,7 +37,9 @@ create one with the CLI. If you do already have an app, skip to where `customer-app` is the name of your app: ```sh + ng new customer-app --routing + ``` This creates an app called `customer-app` and the `--routing` flag @@ -51,7 +53,9 @@ Next, you’ll need a feature module to route to. To make one, enter the following command at the terminal window prompt where `customers` is the name of the module: ```sh + ng generate module customers --routing + ``` This creates a customers folder with two files inside; `CustomersModule` @@ -69,7 +73,9 @@ adding a JavaScript import statement at the top of the file and adding In order to see the module being lazy loaded in the browser, create a component to render some HTML when the app loads `CustomersModule`. At the command line, enter the following: ```sh + ng generate component customers/customer-list + ``` This creates a folder inside of `customers` called `customer-list` @@ -86,7 +92,9 @@ Just like with the routing module, the CLI imports the For another place to route to, create a second feature module with routing: ```sh + ng generate module orders --routing + ``` This makes a new folder called `orders` containing an `OrdersModule` and an `OrdersRoutingModule`. @@ -94,7 +102,9 @@ This makes a new folder called `orders` containing an `OrdersModule` and an `Ord Now, just like with the `CustomersModule`, give it some content: ```sh + ng generate component orders/order-list + ``` ## Set up the UI @@ -111,15 +121,15 @@ so you can easily navigate to your modules in the browser: To see your app in the browser so far, enter the following command in the terminal window: ```sh + ng serve + ``` Then go to `localhost:4200` where you should see “app works!” and three buttons.
- three buttons in the browser -
To make the buttons work, you need to configure the routing modules. @@ -132,9 +142,7 @@ The two feature modules, `OrdersModule` and `CustomersModule`, have to be wired up to the `AppRoutingModule` so the router knows about them. The structure is as follows:
- lazy loaded modules diagram -
Each feature module acts as a doorway via the router. In the `AppRoutingModule`, you configure the routes to the feature modules, in this case `OrdersModule` and `CustomersModule`. This way, the router knows to go to the feature module. The feature module then connects the `AppRoutingModule` to the `CustomersRoutingModule` or the `OrdersRoutingModule`. Those routing modules tell the router where to go to load relevant components. @@ -182,25 +190,19 @@ Now, if you view the app in the browser, the three buttons take you to each modu You can check to see that a module is indeed being lazy loaded with the Chrome developer tools. In Chrome, open the dev tools by pressing `Cmd+Option+i` on a Mac or `Ctrl+Alt+i` on a PC and go to the Network Tab.
- lazy loaded modules diagram -
Click on the Orders or Customers button. If you see a chunk appear, you’ve wired everything up properly and the feature module is being lazy loaded. A chunk should appear for Orders and for Customers but will only appear once for each.
- lazy loaded modules diagram -
To see it again, or to test after working in the project, clear everything out by clicking the circle with a line through it in the upper left of the Network Tab:
- lazy loaded modules diagram -
Then reload with `Cmd+r` or `Ctrl+r`, depending on your platform. diff --git a/aio/content/guide/lifecycle-hooks.md b/aio/content/guide/lifecycle-hooks.md index 033cb629eb..f01666dacc 100644 --- a/aio/content/guide/lifecycle-hooks.md +++ b/aio/content/guide/lifecycle-hooks.md @@ -60,19 +60,23 @@ calls the lifecycle hook methods in the following sequence at specific moments: 当Angular使用构造函数新建一个组件或指令后，就会按下面的顺序在特定时刻调用这些生命周期钩子方法： - - - - + + Hook + + + + - - - - - - - - -
Hook - Purpose and Timing + + Purpose and Timing + +
@@ -96,7 +100,6 @@ calls the lifecycle hook methods in the following sequence at specific moments:
@@ -119,7 +122,6 @@ calls the lifecycle hook methods in the following sequence at specific moments:
@@ -141,7 +143,6 @@ calls the lifecycle hook methods in the following sequence at specific moments:
@@ -163,7 +164,6 @@ calls the lifecycle hook methods in the following sequence at specific moments:
@@ -185,7 +185,6 @@ calls the lifecycle hook methods in the following sequence at specific moments:
@@ -207,7 +206,6 @@ calls the lifecycle hook methods in the following sequence at specific moments:
@@ -229,7 +227,6 @@ calls the lifecycle hook methods in the following sequence at specific moments:
@@ -253,7 +250,6 @@ calls the lifecycle hook methods in the following sequence at specific moments:
{@a interface-optional} @@ -323,19 +319,25 @@ Here's a brief description of each exercise: 下面是每个练习简短的描述： - - - - + + Component + + + + - - - - - - - -
Component - Description + + Description + + 描述 + +
@@ -354,7 +356,6 @@ Here's a brief description of each exercise:
@@ -379,7 +380,6 @@ Here's a brief description of each exercise:
@@ -400,7 +400,6 @@ Here's a brief description of each exercise:
@@ -420,7 +419,6 @@ Here's a brief description of each exercise:
@@ -440,7 +438,6 @@ Here's a brief description of each exercise:
@@ -461,7 +458,6 @@ Here's a brief description of each exercise:
@@ -490,7 +486,6 @@ Here's a brief description of each exercise:
The remainder of this page discusses selected exercises in further detail. @@ -518,9 +513,7 @@ This snapshot reflects the state of the log after the user clicked the *Create.. 用户点击**Create...**按钮，然后点击**Destroy...**按钮后，日志的状态如下图所示：
- Peek-a-boo -
The sequence of log messages follows the prescribed hook calling order: @@ -575,7 +568,7 @@ The heroes will never know they're being watched. 1. Angular calls hook methods for *directives* as well as components.

- 就像对组件一样，Angular也会对*指令*调用这些钩子方法。

+ 就像对组件一样，Angular也会对*指令*调用这些钩子方法。

2. A spy directive can provide insight into a DOM object that you cannot change directly. Obviously you can't touch the implementation of a native `
`. @@ -611,9 +604,7 @@ with an entry in the *Hook Log* as seen here: 每个“侦探”的出生和死亡也同时标记出了存放英雄的那个`
`的出生和死亡。*钩子记录*中的结构是这样的：
- Spy Directive -
Adding a hero results in a new hero `
`. The spy's `ngOnInit()` logs that event. @@ -764,9 +755,7 @@ Here's the sample in action as the user makes changes. 下面是此例子中的当用户做出更改时的操作演示：
- OnChanges -
The log entries appear as the string value of the *power* property changes. @@ -820,9 +809,7 @@ so you can see how often `DoCheck` is called. The results are illuminating: 这样你可以看到`DoCheck`被调用的频率。结果非常显眼：
- DoCheck -
While the `ngDoCheck()` hook can detect when the hero's `name` has changed, it has a frightful cost. @@ -909,9 +896,7 @@ Here's *AfterView* in action: 这里是*AfterView*的操作演示：
- AfterView -
Notice that Angular frequently calls `AfterViewChecked()`, often when there are no changes of interest. @@ -981,9 +966,7 @@ In this case, the projected content is the `` from the parent. 在这里，被投影进去的内容就是来自父组件的``标签。
- Projected Content -
@@ -1050,4 +1033,4 @@ There is a small window between the `AfterContent...` and `AfterView...` hooks t 回忆一下，Angular在每次调用*AfterView*钩子之前也会同时调用*AfterContent*。 Angular在完成当前组件的视图合成之前，就已经完成了被投影内容的合成。 -所以我们仍然有机会去修改那个视图。 \ No newline at end of file +所以我们仍然有机会去修改那个视图。 diff --git a/aio/content/guide/module-types.md b/aio/content/guide/module-types.md index 7c338d5ae1..a7d39a8d6e 100644 --- a/aio/content/guide/module-types.md +++ b/aio/content/guide/module-types.md @@ -1,5 +1,3 @@ - - # Types of Feature Modules #### Prerequisites @@ -52,7 +50,11 @@ typical characteristics, in real world apps, you may see hybrids. - Domain + + + Domain + + @@ -71,10 +73,13 @@ typical characteristics, in real world apps, you may see hybrids. - - Routed + + + Routed + + @@ -94,7 +99,11 @@ typical characteristics, in real world apps, you may see hybrids. - Routing + + + Routing + + @@ -104,17 +113,41 @@ typical characteristics, in real world apps, you may see hybrids.
    -
  • Defines routes.
    • +
  • -
  • Adds router configuration to the module's imports.
    • + Defines routes. -
  • Adds guard and resolver service providers to the module's providers.
    • + -
  • The name of the routing module should parallel the name of its companion module, using the suffix "Routing". For example, FooModule in foo.module.ts has a routing module named FooRoutingModule in foo-routing.module.ts. If the companion module is the root AppModule, the AppRoutingModule adds router configuration to its imports with RouterModule.forRoot(routes). All other routing modules are children that import RouterModule.forChild(routes).
    • +
  • -
  • A routing module re-exports the RouterModule as a convenience so that components of the companion module have access to router directives such as RouterLink and RouterOutlet.
    • + Adds router configuration to the module's imports. -
  • A routing module does not have its own declarations. Components, directives, and pipes are the responsibility of the feature module, not the routing module.
    • + + +
  • + + Adds guard and resolver service providers to the module's providers. + +
    • + +
  • + + The name of the routing module should parallel the name of its companion module, using the suffix "Routing". For example, FooModule in foo.module.ts has a routing module named FooRoutingModule in foo-routing.module.ts. If the companion module is the root AppModule, the AppRoutingModule adds router configuration to its imports with RouterModule.forRoot(routes). All other routing modules are children that import RouterModule.forChild(routes). + +
    • + +
  • + + A routing module re-exports the RouterModule as a convenience so that components of the companion module have access to router directives such as RouterLink and RouterOutlet. + +
    • + +
  • + + A routing module does not have its own declarations. Components, directives, and pipes are the responsibility of the feature module, not the routing module. + +
@@ -126,7 +159,11 @@ typical characteristics, in real world apps, you may see hybrids. - Service + + + Service + + @@ -140,7 +177,11 @@ typical characteristics, in real world apps, you may see hybrids. - Widget + + + Widget + + @@ -161,7 +202,6 @@ typical characteristics, in real world apps, you may see hybrids. The following table summarizes the key characteristics of each feature module group. - - + + Domain - + - + + Yes + + + + + + + + - + + Routed - + - + + Yes + + + + + + + + - + + Routing - + - + + No + + + + + + + + - + + Service - + - + + No + + + + + + + + - + + Widget - + - + + Yes + + + + + + + + -
@@ -198,74 +238,175 @@ The following table summarizes the key characteristics of each feature module gr
Domain - YesRareTop component - Feature, AppModule + + Rare + + + + Top component + + + + Feature, AppModule + +
Routed - YesRareNo - None + + Rare + + + + No + + + + None + +
Routing - NoYes (Guards)RouterModule - Feature (for routing) + + Yes (Guards) + + + + RouterModule + + + + Feature (for routing) + +
Service - NoYesNo - AppModule + + Yes + + + + No + + + + AppModule + +
Widget - YesRareYes - Feature + + Rare + + + + Yes + + + + Feature + + 特性 + +
diff --git a/aio/content/guide/ngmodule-api.md b/aio/content/guide/ngmodule-api.md index 024796fd2f..4dbb596da6 100644 --- a/aio/content/guide/ngmodule-api.md +++ b/aio/content/guide/ngmodule-api.md @@ -26,6 +26,7 @@ into three categories: * **Composability/Grouping:** Bringing NgModules together and making them available via the `imports` and `exports` arrays. ```typescript + @NgModule({ // Static, that is compiler configuration declarations: [], // Configure the selectors @@ -38,6 +39,7 @@ into three categories: imports: [], // composing NgModules together exports: [] // making NgModules available to other parts of the app }) + ``` ## `@NgModule` metadata @@ -81,22 +83,30 @@ The following table summarizes the `@NgModule` metadata properties.
    -
  1. When compiling a template, you need to determine a set of selectors which should be used for triggering their corresponding directives.
    2. -
  2. - The template is compiled within the context of an NgModule—the NgModule within which the template's component is declared—which determines the set of selectors using the following rules: - -
      - -
    • All selectors of directives listed in `declarations`.
      • - -
    • All selectors of directives exported from imported NgModules.
      • - -
    + When compiling a template, you need to determine a set of selectors which should be used for triggering their corresponding directives.
    3. +
  3. + The template is compiled within the context of an NgModule—the NgModule within which the template's component is declared—which determines the set of selectors using the following rules: +
      + +
    • + + All selectors of directives listed in `declarations`. + +
      • + +
    • + + All selectors of directives exported from imported NgModules. + +
      • + +
    +
Components, directives, and pipes must belong to _exactly_ one module. diff --git a/aio/content/guide/ngmodule-faq.md b/aio/content/guide/ngmodule-faq.md index 4460866788..6f8ebd3ad2 100644 --- a/aio/content/guide/ngmodule-faq.md +++ b/aio/content/guide/ngmodule-faq.md @@ -316,7 +316,9 @@ Angular's own `BrowserModule` exports a couple of NgModules like this: Angular自己的`BrowserModule`就重新导出了一组模块，例如： ```typescript + exports: [CommonModule, ApplicationModule] + ``` An NgModule can export a combination of its own declarations, selected imported classes, and imported NgModules. @@ -373,11 +375,12 @@ configure services in root and feature modules respectively. Angular doesn't recognize these names but Angular developers do. Follow this convention when you write similar modules with configurable service providers. - Angular并不识别这些名字，但是Angular的开发人员可以。 当你写类似的需要可配置的服务提供商时，请遵循这个约定。 + +
## Why is a service provided in a feature module visible everywhere? @@ -1115,4 +1118,4 @@ the Angular compiler incorporates them into compiled component code too. how to link this module with other modules. -`@NgModule`元数据告诉*Angular编译器*要为当前模块编译哪些组件，以及如何把当前模块和其它模块链接起来。 \ No newline at end of file +`@NgModule`元数据告诉*Angular编译器*要为当前模块编译哪些组件，以及如何把当前模块和其它模块链接起来。 diff --git a/aio/content/guide/ngmodule-vs-jsmodule.md b/aio/content/guide/ngmodule-vs-jsmodule.md index 92b862a45c..6417ed7492 100644 --- a/aio/content/guide/ngmodule-vs-jsmodule.md +++ b/aio/content/guide/ngmodule-vs-jsmodule.md @@ -14,13 +14,17 @@ though they organize it differently, Angular apps rely on both. In JavaScript, modules are individual files with JavaScript code in them. To make what’s in them available, you write an export statement, usually after the relevant code, like this: ```typescript + export class AppComponent { ... } + ``` Then, when you need that file’s code in another file, you import it like this: ```typescript + import { AppComponent } from './app.component'; + ``` JavaScript modules help you namespace, preventing accidental global variables. @@ -28,11 +32,13 @@ JavaScript modules help you namespace, preventing accidental global variables. ## NgModules + NgModules are classes decorated with `@NgModule`. The `@NgModule` decorator’s `imports` array tells Angular what other NgModules the current module needs. The modules in the `imports` array are different than JavaScript modules because they are NgModules rather than regular JavaScript modules. Classes with an `@NgModule` decorator are by convention kept in their own files, but what makes them an `NgModule` isn’t being in their own file, like JavaScript modules; it’s the presence of `@NgModule` and its metadata. The `AppModule` generated from the Angular CLI demonstrates both kinds of modules in action: ```typescript + /* These are JavaScript import statements. Angular doesn’t know anything about these. */ import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; @@ -51,6 +57,7 @@ import { AppComponent } from './app.component'; bootstrap: [AppComponent] }) export class AppModule { } + ``` The NgModule classes differ from JavaScript module in the following key ways: diff --git a/aio/content/guide/npm-packages.md b/aio/content/guide/npm-packages.md index 3f106f744e..1a436f17c8 100644 --- a/aio/content/guide/npm-packages.md +++ b/aio/content/guide/npm-packages.md @@ -88,8 +88,8 @@ The `dependencies` section of `package.json` contains: * **Angular packages**: Angular core and optional modules; their package names begin `@angular/`. - **Angular 包**：Angular 的核心和可选模块，它们的包名以`@angular/`开头。 - + **Angular 包**：Angular 的核心和可选模块，它们的包名以`@angular/`开头。 + * **Support packages**: 3rd party libraries that must be present for Angular apps to run. **支持包**：那些Angular 应用运行时必需的第三方库。 @@ -282,4 +282,4 @@ The browser downloads this bundle, not the original package files. See the [Deployment](guide/deployment) to learn more. -参见[部署](guide/deployment)一章了解详情。 \ No newline at end of file +参见[部署](guide/deployment)一章了解详情。 diff --git a/aio/content/guide/observables-in-angular.md b/aio/content/guide/observables-in-angular.md index 978a95151c..04f140dbcf 100644 --- a/aio/content/guide/observables-in-angular.md +++ b/aio/content/guide/observables-in-angular.md @@ -59,4 +59,3 @@ The [ActivatedRoute](https://angular.io/api/router/ActivatedRoute) is an injecte Reactive forms have properties that use observables to monitor form control values. The [`FormControl`](https://angular.io/api/forms/FormControl) properties `valueChanges` and `statusChanges` contain observables that raise change events. Subscribing to an observable form-control property is a way of triggering application logic within the component class. For example: - diff --git a/aio/content/guide/observables.md b/aio/content/guide/observables.md index 204046dad4..0bd2a222bb 100644 --- a/aio/content/guide/observables.md +++ b/aio/content/guide/observables.md @@ -49,9 +49,7 @@ Here's an example of creating and subscribing to a simple observable, with an ob - - + title="Subscribe using observer"> Alternatively, the `subscribe()` method can accept callback function definitions in line, for `next`, `error`, and `complete` handlers. For example, the following `subscribe()` call is the same as the one that specifies the predefined observer: diff --git a/aio/content/guide/pipes.md b/aio/content/guide/pipes.md index 1bf7483b5d..91f542ddef 100644 --- a/aio/content/guide/pipes.md +++ b/aio/content/guide/pipes.md @@ -146,9 +146,7 @@ As you click the button, the displayed date alternates between 当我们点击按钮的时候，显示的日志会在“**04/15/1988**”和“**Friday, April 15, 1988**”之间切换。
- Date Format Toggle -
@@ -255,9 +253,7 @@ Now you need a component to demonstrate the pipe.
- Power Booster -
Note the following: @@ -312,9 +308,7 @@ your pipe and two-way data binding with `ngModel`.
- Power Boost Calculator -
{@a change-detection} @@ -423,9 +417,7 @@ code with checkbox switches and additional displays to help you experience these 这个*飞行英雄*的例子用检查框和其它显示内容扩展了原有代码，来帮我们体验这些效果。
- Flying Heroes -
Replacing the array is an efficient way to signal Angular to update the display. @@ -515,7 +507,6 @@ a point that's discussed later in this page. 或者我们也可以完全不用管道。 有时候，使用组件的属性能比用管道更好的达到目的，这一点我们等后面会再提起。 -

Impure pipes

@@ -664,9 +655,7 @@ The component renders as the following: 组件渲染起来是这样的：
- Hero List -
A breakpoint on the pipe's request for data shows the following: @@ -836,4 +825,4 @@ If these performance and minification considerations don't apply to you, you can (similar to the [FlyingHeroesPipe](guide/pipes#impure-flying-heroes)) or find them in the community. -如果你不需要顾虑这些性能和最小化问题，也可以创建自己的管道来实现这些功能(参考[FlyingHeroesPipe](guide/pipes#impure-flying-heroes)中的写法)或到社区中去找找。 \ No newline at end of file +如果你不需要顾虑这些性能和最小化问题，也可以创建自己的管道来实现这些功能(参考[FlyingHeroesPipe](guide/pipes#impure-flying-heroes)中的写法)或到社区中去找找。 diff --git a/aio/content/guide/practical-observable-usage.md b/aio/content/guide/practical-observable-usage.md index 58ee8eb26f..d6c1ae2236 100644 --- a/aio/content/guide/practical-observable-usage.md +++ b/aio/content/guide/practical-observable-usage.md @@ -25,4 +25,3 @@ Writing this in full JavaScript can be quite involved. With observables, you can Exponential backoff is a technique in which you retry an API after failure, making the time in between retries longer after each consecutive failure, with a maximum number of retries after which the request is considered to have failed. This can be quite complex to implement with promises and other methods of tracking AJAX calls. With observables, it is very easy: - diff --git a/aio/content/guide/providers.md b/aio/content/guide/providers.md index bbf7478ec4..8d067b63ca 100644 --- a/aio/content/guide/providers.md +++ b/aio/content/guide/providers.md @@ -20,7 +20,9 @@ Consider the default app generated by the CLI. In order to add a user service to you can generate one by entering the following command in the terminal window: ```sh + ng generate service User + ``` This creates a service called `UserService`. You now need to make the service available in your @@ -42,7 +44,9 @@ In the basic CLI generated app, modules are eagerly loaded which means that they This behavior necessarily changes when you use lazy loading. Lazy loading is when you load modules only when you need them; for example, when routing. They aren’t loaded right away like with eagerly loaded modules. This means that any services listed in their provider arrays aren’t available because the root injector doesn’t know about these modules. + + When the Angular router lazy-loads a module, it creates a new injector. This injector is a child of the root application injector. Imagine a tree of injectors; there is a single root injector and then a child injector for each lazy loaded module. The router adds all of the providers from the root injector to the child injector. When the router creates a component within the lazy-loaded context, Angular prefers service instances created from these providers to the service instances of the application root injector. Any component created within a lazy loaded module’s context, such as by router navigation, gets the local instance of the service, not the instance in the root application injector. Components in external modules continue to receive the instance created for the application root. @@ -68,6 +72,7 @@ Generally, provide services the whole app needs in the root module and scope ser The router works at the root level so if you put providers in a component, even `AppComponent`, lazy loaded modules, which rely on the router, can’t see them. + Register a provider with a component when you must limit a service instance to a component and its component tree, that is, its child components. For example, a user editing component, `UserEditorComponent`, that needs a private copy of a caching `UserService` should register the `UserService` with the `UserEditorComponent`. Then each new instance of the `UserEditorComponent` gets its own cached service instance.
diff --git a/aio/content/guide/quickstart.md b/aio/content/guide/quickstart.md index 2e6b7ad7aa..c53d02e077 100644 --- a/aio/content/guide/quickstart.md +++ b/aio/content/guide/quickstart.md @@ -134,9 +134,7 @@ Your app greets you with a message: 本应用会用一条消息来跟你打招呼：
- The app works! -

@@ -172,9 +170,7 @@ Open `src/app/app.component.css` and give the component some style.
- Output of QuickStart app -
Looking good! @@ -294,21 +290,14 @@ Any files outside of this folder are meant to support building your app.

- - - - - - - - - - - - - - - - -
@@ -328,7 +317,6 @@ Any files outside of this folder are meant to support building your app.
@@ -349,7 +337,6 @@ Any files outside of this folder are meant to support building your app.
@@ -371,7 +358,6 @@ Any files outside of this folder are meant to support building your app.
@@ -390,7 +376,6 @@ Any files outside of this folder are meant to support building your app.
@@ -418,7 +403,6 @@ Any files outside of this folder are meant to support building your app.
@@ -438,7 +422,6 @@ Any files outside of this folder are meant to support building your app.
@@ -461,7 +444,6 @@ Any files outside of this folder are meant to support building your app.
@@ -485,7 +467,6 @@ Any files outside of this folder are meant to support building your app.
@@ -508,7 +489,6 @@ Any files outside of this folder are meant to support building your app.
@@ -529,7 +509,6 @@ Any files outside of this folder are meant to support building your app.
@@ -550,7 +529,6 @@ Any files outside of this folder are meant to support building your app.
@@ -569,7 +547,6 @@ Any files outside of this folder are meant to support building your app.
### The root folder @@ -628,21 +605,14 @@ These files go in the root folder next to `src/`.
- - - - - - - - - - - - - - - - -
@@ -662,7 +632,6 @@ These files go in the root folder next to `src/`.
@@ -685,7 +654,6 @@ These files go in the root folder next to `src/`.
@@ -704,7 +672,6 @@ These files go in the root folder next to `src/`.
@@ -727,7 +694,6 @@ These files go in the root folder next to `src/`.
@@ -749,7 +715,6 @@ These files go in the root folder next to `src/`.
@@ -767,7 +732,6 @@ These files go in the root folder next to `src/`.
@@ -786,7 +750,6 @@ These files go in the root folder next to `src/`.
@@ -806,7 +769,6 @@ These files go in the root folder next to `src/`.
@@ -825,7 +787,6 @@ These files go in the root folder next to `src/`.
@@ -846,7 +807,6 @@ These files go in the root folder next to `src/`.
@@ -864,7 +824,6 @@ These files go in the root folder next to `src/`.
@@ -885,7 +844,6 @@ These files go in the root folder next to `src/`.
@@ -902,4 +860,3 @@ You can skip the "Setup" step since you're already using the Angular CLI setup. 你可以跳过“环境设置”一章，因为你已经在使用 Angular-CLI 设置好环境了。
- diff --git a/aio/content/guide/reactive-forms.md b/aio/content/guide/reactive-forms.md index a2f44b7176..1e69790d1c 100644 --- a/aio/content/guide/reactive-forms.md +++ b/aio/content/guide/reactive-forms.md @@ -447,9 +447,7 @@ Now that everything is wired up, the browser should display something like this: 这些做好之后，浏览器中应该显示成这样：
- Single FormControl -
{@a formgroup} @@ -561,9 +559,7 @@ Piping it through the `JsonPipe` renders the model as JSON in the browser: 用`JsonPipe`管道把这个模型以JSON格式渲染到浏览器中。
- JSON output -
The initial `name` property value is the empty string. @@ -695,9 +691,7 @@ The browser displays the following: 浏览器会显示下列内容：
- Single FormControl -
`Validators.required` is working. The status is `INVALID` because the input box has no value. @@ -857,9 +851,7 @@ with the nested address `FormGroup`: 做完这些之后，浏览器中的JSON输出就变成了带有多级`FormGroup`的住址。
- JSON output -
Great! You’ve made a group and you can see that the template @@ -905,9 +897,7 @@ such as one of the following: 我们可以使用此技术来显示`FromControl`的*任意*属性，代码如下： @@ -1309,9 +1299,7 @@ Together they look a bit like this: `HeroDetalComponent`是一个嵌套在`HeroListComponent`的*主从*视图中的子组件。如果把它们放在一起就是这样的：
- HeroListComponent -
The `HeroListComponent` uses an injected `HeroService` to retrieve heroes from the server @@ -1609,9 +1597,7 @@ Back in the browser, select the hero named "Magneta". "Magneta"没有地址，我们会在表单底部的诊断用JSON中看到这一点。
- JSON output of addresses array -
Click the "_Add a Secret Lair_" button. @@ -1714,9 +1700,7 @@ After you implement both features in this section, the form will look like this: 在实现完本节的这些特性之后，表单是这样的：
- Form with save & revert buttons -
### Save @@ -1897,4 +1881,4 @@ You can download the complete source for all steps in this guide from the Reactive Forms Demo live example. -你可以到响应式表单在线例子中下载本章所有步骤的完整代码。 \ No newline at end of file +你可以到响应式表单在线例子中下载本章所有步骤的完整代码。 diff --git a/aio/content/guide/router.md b/aio/content/guide/router.md index 54a5091041..71dbc98f91 100644 --- a/aio/content/guide/router.md +++ b/aio/content/guide/router.md @@ -15,9 +15,7 @@ of a small application that you can run live in the browser ## Overview @@ -296,7 +294,6 @@ It has a great deal of useful information including: 它有一大堆有用的信息，包括：
- -
@@ -496,7 +493,6 @@ It has a great deal of useful information including:
@@ -525,7 +521,6 @@ During each navigation, the `Router` emits navigation events through the `Router 在每次导航中，`Router`都会通过`Router.events`属性发布一些导航事件。这些事件的范围涵盖了从开始导航到结束导航之间的很多时间点。下表中列出了全部导航事件： - -
@@ -674,7 +669,6 @@ During each navigation, the `Router` emits navigation events through the `Router
These events are logged to the console when the `enableTracing` option is enabled also. Since the events are provided as an `Observable`, you can `filter()` for events of interest and `subscribe()` to them to make decisions based on the sequence of events in the navigation process. @@ -726,7 +720,7 @@ Here are the key `Router` terms and their meanings: Router - + 路由器 @@ -766,7 +760,7 @@ Here are the key `Router` terms and their meanings: Routes - + 路由定义（数组） @@ -786,7 +780,7 @@ Here are the key `Router` terms and their meanings: Route - + 路由器 @@ -900,7 +894,7 @@ Here are the key `Router` terms and their meanings: Link parameters array - + 链接参数数组 @@ -922,7 +916,7 @@ Here are the key `Router` terms and their meanings: Routing component - + 路由组件 @@ -1038,9 +1032,7 @@ and the *Heroes* view with its list of heroes. 等应用热身完毕，我们就会看到一排导航按钮，以及一个*英雄列表*视图。
- Hero List -
Select one hero and the app takes you to a hero editing screen. @@ -1048,9 +1040,7 @@ Select one hero and the app takes you to a hero editing screen. 选择其中之一，该应用就会把我们带到此英雄的编辑页面。
- Crisis Center Detail -
Alter the name. @@ -1071,9 +1061,7 @@ Now click the *Crisis Center* link for a list of ongoing crises. 现在，点击*危机中心*链接，前往*危机*列表页。
- Crisis Center List -
Select a crisis and the application takes you to a crisis editing screen. @@ -1089,9 +1077,7 @@ Notice that the corresponding name in the crisis list does _not_ change. 注意，危机列表中的相应名称**并没有**修改。
- Crisis Center Detail -
Unlike *Hero Detail*, which updates as you type, @@ -1113,9 +1099,7 @@ Up pops a dialog box. 我们会看到弹出了一个对话框。
- Confirm Dialog -
You can say "OK" and lose your changes or click "Cancel" and continue editing. @@ -1148,9 +1132,7 @@ Begin with a simple version of the app that navigates between two empty views. 开始本应用的一个简版，它在两个空路由之间导航。
- App in action -
{@a base-href} @@ -1160,7 +1142,9 @@ Begin with a simple version of the app that navigates between two empty views. ### 设置*<base href>* The router uses the browser's + history.pushState + for navigation. Thanks to `pushState`, you can make in-app URL paths look the way you want them to look, e.g. `localhost:3000/crisis-center`. The in-app URLs can be indistinguishable from server URLs. @@ -1208,7 +1192,7 @@ set the `href` value in **`index.html`** *exactly* as shown here.
Live example note - + 在线例子说明
@@ -1329,9 +1313,7 @@ and a *router outlet* where the router swaps views on and off the page. Here's w 根组件`AppComponent`是本应用的壳。它在顶部有一个标题、一个带两个链接的导航条，在底部有一个*路由器出口*，路由器会在它所指定的位置上把视图切入或调出页面。就像下图中所标出的：
- Shell -
{@a shell-template} @@ -1884,7 +1866,6 @@ then replacing `RouterModule.forRoot` in the `imports` array with the `AppRoutin 接下来，修改`app.module.ts`文件，首先从`app-routing.module.ts`中导入新创建的`AppRoutingModule`， 然后把`imports`数组中的`RouterModule.forRoot`替换为`AppRoutingModule`。 - @@ -1977,9 +1958,7 @@ Here's how the user will experience this version of the app: 下面是用户将看到的版本：
- App in action -
A typical application has multiple *feature areas*, @@ -2511,7 +2490,6 @@ to handle parameter access for both route parameters (`paramMap`) and query para `ParamMap` API 是参照[URLSearchParams 接口](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams)来设计的。它提供了一些方法来处理对路由参数（`paramMap`）和查询参数(`queryParamMap`)中的参数访问。 - -
@@ -2603,7 +2581,6 @@ to handle parameter access for both route parameters (`paramMap`) and query para
{@a reuse} @@ -2764,9 +2741,7 @@ it would be nice if the viewed hero was preselected in the list. 比如，当从`HeroDetailComponent`返回英雄列表时，如果能自动选中刚刚查看过的英雄就好了。
- Selected hero -
You'll implement this feature in a moment by including the viewed hero's `id` @@ -2999,9 +2974,7 @@ When the user navigates from the heroes list to the "Magneta" hero and back, "Ma 当用户从英雄列表导航到英雄“Magneta”并返回时，“Magneta”看起来是选中的：
- Selected List -
The optional `foo` route parameter is harmless and continues to be ignored. @@ -3408,9 +3381,7 @@ If your app had many feature areas, the app component trees might look like this 如果我们有更多特性区，它们的组件树是这样的：
- Component Tree -
{@a child-routing-component} @@ -3767,9 +3738,7 @@ and two buttons, "Send" and "Cancel". 它显示一个简单的表单，包括一个头、一个消息输入框和两个按钮：“Send”和“Cancel”。
- Contact popup -
Here's the component and its template: @@ -5856,4 +5825,3 @@ in the `AppModule`. - diff --git a/aio/content/guide/rx-library.md b/aio/content/guide/rx-library.md index c9ca32382b..f4d147d6fe 100644 --- a/aio/content/guide/rx-library.md +++ b/aio/content/guide/rx-library.md @@ -101,4 +101,4 @@ This can be useful when scanning through code and looking for observable values. For example: - \ No newline at end of file + diff --git a/aio/content/guide/security.md b/aio/content/guide/security.md index ce07b13a88..3b34509e47 100644 --- a/aio/content/guide/security.md +++ b/aio/content/guide/security.md @@ -138,7 +138,7 @@ Angular定义了四个安全环境 - HTML，样式，URL，和资源URL： * **URL** is used for URL properties, such as ``. - **URL**：值需要被用作URL属性时使用，比如``。 + **URL**：值需要被用作URL属性时使用，比如``。 * **Resource URL** is a URL that will be loaded and executed as code, for example, in `