From 0a5eb3a660b8fa86355456f6e308e75e0315daaa Mon Sep 17 00:00:00 2001 From: Zhicheng WANG Date: Thu, 3 Jan 2019 19:03:12 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E7=BF=BB=E8=AF=91=E9=81=97=E6=BC=8F?= =?UTF-8?q?=E7=9A=84=E9=83=A8=E5=88=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- aio/content/guide/form-validation.md | 2 +- aio/content/guide/glossary.md | 51 ++++++++++++++++++++++------ aio/content/guide/npm-packages.md | 37 +++++++++++++++++--- aio/content/guide/reactive-forms.md | 4 +-- 4 files changed, 75 insertions(+), 19 deletions(-) diff --git a/aio/content/guide/form-validation.md b/aio/content/guide/form-validation.md index 0c0b62bcd7..0ec8ade1aa 100644 --- a/aio/content/guide/form-validation.md +++ b/aio/content/guide/form-validation.md @@ -95,7 +95,7 @@ turning the control dirty; or blurs the form control element, setting the contro In a reactive form, the source of truth is the component class. Instead of adding validators through attributes in the template, you add validator functions directly to the form control model in the component class. Angular then calls these functions whenever the value of the control changes. -在响应式表单中，真正的源码都在组件类中。不应该通过模板上的属性来添加验证器，而应该在组件类中直接把验证器函数添加到表单控件模型上（`FormControl`）。然后，一旦控件发生了变化，Angular 就会调用这些函数。 +在响应式表单中，权威数据源是其组件类。不应该通过模板上的属性来添加验证器，而应该在组件类中直接把验证器函数添加到表单控件模型上（`FormControl`）。然后，一旦控件发生了变化，Angular 就会调用这些函数。 ### Validator functions diff --git a/aio/content/guide/glossary.md b/aio/content/guide/glossary.md index 9dc39b2c61..0f3959174a 100644 --- a/aio/content/guide/glossary.md +++ b/aio/content/guide/glossary.md @@ -44,7 +44,7 @@ By compiling your application using the `ngc` command-line tool, you can bootstr ## Angular element -## Angular 元素 +## Angular 元素（element） An Angular [component](guide/glossary#component) packaged as a [custom element](guide/glossary#custom-element). @@ -58,6 +58,8 @@ Learn more in [Angular Elements Overview](guide/elements). ## Annotation +## 注解（Annotation） + A structure that provides metadata for a class. See [decorator](guide/glossary#decorator). 一种为类提供元数据的结构。参见 [装饰器](guide/glossary#decorator)。 @@ -68,7 +70,7 @@ A structure that provides metadata for a class. See [decorator](guide/glossary#d ## attribute directives -## 属性型指令 +## 属性型指令（attribute directives） A category of [directive](guide/glossary#directive) that can listen to and modify the behavior of other HTML elements, attributes, properties, and components. They are usually represented @@ -135,7 +137,7 @@ Learn more in [Bootstrapping](guide/bootstrapping). ## case types -## 大小写类型 +## 大小写类型（case types） Angular uses capitalization conventions to distinguish the names of various types, as described in the [naming guidelines section](guide/styleguide#02-01) of the Style Guide. Here's a summary of the case types: @@ -174,7 +176,7 @@ Upper snake case uses words in all capital letters connected with underscores. F ## class decorator -## 类装饰器 +## 类装饰器（class decorator） A [decorator](guide/glossary#decorator) that appears immediately before a class definition, which declares the class to be of the given type, and provides metadata suitable to the type. @@ -198,7 +200,7 @@ The following decorators can declare Angular class types: ## class field decorator -## 类字段装饰器 +## 类字段装饰器（class field decorator） A [decorator](guide/glossary#decorator) statement immediately before a field in a class definition that declares the type of that field. Some examples are `@Input` and `@Output`. @@ -327,7 +329,7 @@ Read about the following forms of binding in [Template Syntax](guide/template-sy ## declarable -## 可声明对象 +## 可声明对象（declarable） A class type that you can add to the `declarations` list of an [NgModule](guide/glossary#ngmodule). You can declare [components](guide/glossary#component), [directives](guide/glossary#directive), and [pipes](guide/glossary#pipe). @@ -478,7 +480,7 @@ Angular 在一些相关的应用领域中用领域特定语言扩展了 TypeScri ## dynamic component loading -## 动态组件加载 +## 动态组件加载（dynamic component loading） A technique for adding a component to the DOM at run time. Requires that you exclude the component from compilation and then connect it to Angular's change-detection and event-handling framework when you add it to the DOM. @@ -564,29 +566,44 @@ Within Angular, use [NgModules](guide/glossary#ngmodule) to make public parts av ## form control - +## 表单控件（form control） A instance of `FormControl`, which is a fundamental building block for Angular forms. Together with `FormGroup` and `FormArray`, tracks the value, validation, and status of a form input element. +一个 `FormControl` 实例，它是 Angular 表单的基本构造块。它会和 `FormGroup` 和 `FormArray` 一起，跟踪表单输入元素的值、有效性和状态。 + Read more forms in the [Introduction to forms in Angular](guide/forms-overview). +欲知详情，参见 [Angular 表单简介](guide/forms-overview)。 + {@a form-model} ## form model +## 表单模型（form model） + The "source of truth" for the value and validation status of a form input element at a given point in time. When using [reactive forms](guide/glossary#reactive-forms), the form model is created explicitly in the component class. When using [template-driven forms](guide/glossary#template-driven-forms), the form model is implicitly created by directives. +是指在指定的时间点，表单输入元素的值和验证状态的"权威数据源"。当使用[响应式表单](guide/glossary#reactive-forms)时，表单模型会在组件类中显式创建。当使用[模板驱动表单](guide/glossary#template-driven-forms)时，表单模型是由一些指令隐式创建的。 + Learn more about reactive and template-driven forms in the [Introduction to forms in Angular](guide/forms-overview). +要深入了解响应式表单和模板驱动表单，参见 [Angular 表单简介](guide/forms-overview)。 + {@a form-validation} ## form validation +## 表单验证（form validation） + A check that runs when form values change and reports whether the given values are correct and complete, according to the defined constraints. Reactive forms apply [validator functions](guide/form-validation#adding-to-reactive-forms). Template-driven forms use [validator directives](guide/form-validation#adding-to-template-driven-forms). +一种检查，当表单值发生变化时运行，并根据预定义的约束来汇报指定的这些值是否正确并完全。响应式表单使用[验证器函数](guide/form-validation#adding-to-reactive-forms)，而模板驱动表单则使用[验证器指令](guide/form-validation#adding-to-template-driven-forms)。 To learn more, see [Form Validation](guide/form-validation). +要了解更多，参见[表单验证器](guide/form-validation)。 + {@a G} {@a H} @@ -598,9 +615,14 @@ To learn more, see [Form Validation](guide/form-validation). ## immutability +## 不可变性（immutability） + The ability to alter the state of a value after its creation. [Reactive forms](guide/glossary#reactive-forms) perform immutable changes in that each change to the data model produces a new data model rather than modifying the existing one. [Template-driven forms](guide/glossary#template-driven-forms) perform mutable changes with `NgModel` and [two-way data binding](guide/glossary#data-binding) to modify the existing data model in place. +是否能够在创建之后修改值的状态。[响应式表单](guide/glossary#reactive-forms)会执行不可变性的更改，每次更改数据模型都会生成一个新的数据模型，而不是修改现有的数据模型。 +[模板驱动表单](guide/glossary#template-driven-forms)则会执行可变的更改，它通过 `NgModel` 和[双向数据绑定](guide/glossary#data-binding)来就地修改现有的数据模型。 + {@a injectable} ## injectable @@ -814,6 +836,8 @@ To learn more, see [Lifecycle Hooks](guide/lifecycle-hooks). {@a module} +## module + ## 模块 (module) In general, a module collects a block of code dedicated to a single purpose. Angular uses standard JavaScript modules and also defines an Angular module, `NgModule`. @@ -866,6 +890,8 @@ To learn more, see [NgModules](guide/ngmodules). ## npm package +## npm 包 + The [npm package manager](https://docs.npmjs.com/getting-started/what-is-npm) is used to distribute and load Angular modules and libraries. [npm 包管理器](https://docs.npmjs.com/getting-started/what-is-npm)用于分发与加载 Angular 的模块和库。 @@ -880,7 +906,7 @@ Learn more about how Angular uses [Npm Packages](guide/npm-packages). ## observable -## Observable（可观察对象） +## 可观察对象（Observable） A producer of multiple values, which it pushes to [subscribers](guide/glossary#subscriber). Used for asynchronous event handling throughout Angular. You execute an observable by subscribing to it with its `subscribe()` method, passing callbacks for notifications of new values, errors, or completion. @@ -1018,7 +1044,7 @@ When using reactive forms: * The "source of truth", the form model, is defined in the component class. * Validation is set up through validation functions rather than valdation directives. - 组件是“真理之源”。表单验证在组件代码中定义。 + 组件是“权威数据源”。表单验证在组件代码中定义。 * Each control is explicitly created in the component class by creating a `FormControl` instance manually or with `FormBuilder`. @@ -1223,6 +1249,8 @@ Additional templates, represented by `TemplateRef` objects, can define alternati ## template-driven forms +## 模板驱动表单（template-driven forms） + A format for building Angular forms using HTML forms and input elements in the view. The alternative format uses the [reactive forms](guide/glossary#reactive-forms) framework. @@ -1235,7 +1263,7 @@ When using template-driven forms: * The "source of truth" is the template. The validation is defined using attributes on the individual input elements. - 模板是“真理之源”。使用属性 (attribute) 在单个输入元素上定义验证规则。 + 模板是“权威数据源”。使用属性 (attribute) 在单个输入元素上定义验证规则。 * [Two-way binding](guide/glossary#data-binding) with `ngModel` keeps the component model synchronized with the user's entry into the input elements. @@ -1312,6 +1340,7 @@ TypeScript 是 Angular 的首选语言。要了解更多，参见 [typescriptlan {@a view} ## view + ## 视图 (view) The smallest grouping of display elements that can be created and destroyed together. diff --git a/aio/content/guide/npm-packages.md b/aio/content/guide/npm-packages.md index 3d7f73b52a..609f100f26 100644 --- a/aio/content/guide/npm-packages.md +++ b/aio/content/guide/npm-packages.md @@ -2,9 +2,9 @@ # Npm 包 - The Angular Framework, Angular CLI, and components used by Angular applications are packaged as [npm packages](https://docs.npmjs.com/getting-started/what-is-npm "What is npm?") and distributed via the [npm registry](https://docs.npmjs.com/). +The Angular Framework, Angular CLI, and components used by Angular applications are packaged as [npm packages](https://docs.npmjs.com/getting-started/what-is-npm "What is npm?") and distributed via the [npm registry](https://docs.npmjs.com/). - Angular 框架、[**Angular CLI**](https://cli.angular.io/)、Angular 应用程序所用到的组件都打包成 [npm packages](https://docs.npmjs.com/getting-started/what-is-npm "What is npm?")，并通过 [npm registry](https://docs.npmjs.com/) 进行分发。 +Angular 框架、[**Angular CLI**](https://cli.angular.io/)、Angular 应用程序所用到的组件都打包成 [npm packages](https://docs.npmjs.com/getting-started/what-is-npm "What is npm?")，并通过 [npm registry](https://docs.npmjs.com/) 进行分发。 You can download and install these npm packages by using the [npm CLI client](https://docs.npmjs.com/cli/install), which is installed with and runs as a [Node.js®](https://nodejs.org "Nodejs.org") application. By default, the Angular CLI uses the npm client. @@ -73,9 +73,12 @@ For more information, see the CLI wiki page [Library Support](https://github.com ## Dependencies The packages listed in the `dependencies` section of `package.json` are essential to *running* applications. + +`package.json` 文件的 `dependencies` 区列出的包都是运行应用时必备的。 + The `dependencies` section of `package.json` contains: -应用程序的 `package.json` 文件中，`dependencies` 下包括： + `package.json` 的 `dependencies` 区包括： * [**Angular packages**](#angular-packages): Angular core and optional modules; their package names begin `@angular/`. @@ -101,20 +104,29 @@ To add a new dependency, use the [`ng add`](cli/add) command. The following Angular packages are included as dependencies in the default `package.json` file for a new Angular workspace. For a complete list of Angular packages, see the [API reference](http://angular.io/api?type=package). -新的 Angular 工作空间的 `package.json` 文件中默认包含下列 Angular 包。 +新 Angular 工作空间的 `package.json` 文件中默认包含下列 Angular 包。 要了解 Angular 包的完整列表，参见 [API 参考手册](http://angular.io/api?type=package)。 Package name | Description ---------------------------------------- | -------------------------------------------------- [**@angular/animations**](api/animations) | Angular's animations library makes it easy to define and apply animation effects such as page and list transitions. For more information, see the [Animations guide](guide/animations). +[**@angular/animations**](api/animations) | Angular 的动画库能让你更容易地定义和应用页面和列表的动画效果。欲知详情，参见[动画](guide/animations)。 [**@angular/common**](api/common) | The commonly-needed services, pipes, and directives provided by the Angular team. The [`HttpClientModule`](api/common/http/HttpClientModule) is also here, in the [`@angular/common/http`](api/common/http) subfolder. For more information, see the [HttpClient guide](guide/http). +[**@angular/common**](api/common) | Angular 开发组提供的常用服务、管道和指令。[`HttpClientModule`](api/common/http/HttpClientModule) 也位于这里的 [`@angular/common/http`](api/common/http) 子目录下。欲知详情，参见 [HttpClient](guide/http)。 **@angular/compiler** | Angular's template compiler. It understands templates and can convert them to code that makes the application run and render. Typically you don’t interact with the compiler directly; rather, you use it indirectly via `platform-browser-dynamic` when JIT compiling in the browser. For more information, see the [Ahead-of-time Compilation guide](guide/aot-compiler). -**@angular/core**](api/core) | Critical runtime parts of the framework that are needed by every application. Includes all metadata decorators, `Component`, `Directive`, dependency injection, and the component lifecycle hooks. +**@angular/compiler** | Angular的模板编译器。它能理解模板并把模板转换成代码，这些代码可以运行并渲染应用程序。通常，你不必直接与这个编译器打交道，而是当浏览器进行 JIT 编译时，通过 `platform-browser-dynamic` 间接使用它。欲知详情，参见 [AOT （预先）编译](guide/aot-compiler)。 +[**@angular/core**](api/core) | Critical runtime parts of the framework that are needed by every application. Includes all metadata decorators, `Component`, `Directive`, dependency injection, and the component lifecycle hooks. +[**@angular/core**](api/core) | 本框架最关键的运行时部件，每个应用都需要它们。包括全部元数据装饰器（比如 `Component`, `Directive`）、依赖注入和组件生命周期等。 [**@angular/forms**](api/forms) | Support for both [template-driven](guide/forms) and [reactive forms](guide/reactive-forms). For information about choosing the best forms approach for your app, see [Introduction to forms](guide/forms-overview). +[**@angular/forms**](api/forms) | 用于支持[模板驱动表单](guide/forms)和[响应式表单](guide/reactive-forms)。要想了解你的应用最好选择哪种方式，请参见[表单简介](guide/forms-overview)。 [**@angular/http**](api/http) | Angular's legacy HTTP client, which was deprecated in version 5.0 in favor of [@angular/common/http](api/common/http). +[**@angular/http**](api/http) | Angular 的 HTTP 客户端遗留代码，已经在 5.0 过期，建议改用 [@angular/common/http](api/common/http)。 [**@angular/
platform‑browser**](api/platform-browser) | Everything DOM and browser related, especially the pieces that help render into the DOM. This package also includes the `bootstrapModuleFactory()` method for bootstrapping applications for production builds that pre-compile with [AOT](guide/aot-compiler). +[**@angular/
platform‑browser**](api/platform-browser) | 与 DOM 和浏览器有关的一切，特别是那些帮助往 DOM 中渲染的部分。这个包中还包括 `bootstrapModuleFactory()` 方法，该方法可以使用 [AOT](guide/aot-compiler) 编译器构建的生产环境发布包来引导应用。 [**@angular/
platform‑browser‑dynamic**](api/platform-browser-dynamic) | Includes [providers](api/core/Provider) and methods to compile and run the app on the client using the [JIT compiler](guide/aot-compiler). +[**@angular/
platform‑browser‑dynamic**](api/platform-browser-dynamic) | 包含那些用来在 [JIT 编译器](guide/aot-compiler)的客户端上编译并运行应用的[提供商](api/core/Provider)和方法。 [**@angular/router**](api/router) | The router module navigates among your app pages when the browser URL changes. For more information, see [Routing and Navigation](guide/router). +[**@angular/router**](api/router) | 当浏览器的 URL 变化时，路由器模块可以在应用的页面之间进行导航。欲知详情，参见[路由与导航](guide/router)。 {@a support-packages} @@ -127,9 +139,12 @@ The following support packages are included as dependencies in the default `pack 新的 Angular 工作空间的 `package.json` 文件中默认包含下列支持包。 Package name | Description +包名 | 说明 ---------------------------------------- | -------------------------------------------------- [**rxjs**](https://github.com/ReactiveX/rxjs) | Many Angular APIs return [_observables_](guide/glossary#observable). RxJS is an implementation of the proposed [Observables specification](https://github.com/tc39/proposal-observable) currently before the [TC39](https://www.ecma-international.org/memento/tc39-m.htm) committee, which determines standards for the JavaScript language. +[**rxjs**](https://github.com/ReactiveX/rxjs) | 很多 Angular API 都会返回[*可观察对象*](guide/glossary#observable)。RxJS 是对计划中的 [Observable 规范的实现](https://github.com/tc39/proposal-observable) currently before the [TC39](https://www.ecma-international.org/memento/tc39-m.htm) committee, which determines standards for the JavaScript language. [**zone.js**](https://github.com/angular/zone.js) | Angular relies on zone.js to run Angular's change detection processes when native JavaScript operations raise events. Zone.js is an implementation of a [specification](https://gist.github.com/mhevery/63fdcdf7c65886051d55) currently before the [TC39](http://www.ecma-international.org/memento/TC39.htm) committee that determines standards for the JavaScript language. +[**zone.js**](https://github.com/angular/zone.js) | 当原生 JavaScript 操作发生事件时，Angular 要依靠 zone.js 来运行 Angular 的变更检测过程。 Zone.js 是对一个[规范](https://gist.github.com/mhevery/63fdcdf7c65886051d55)的实现，它正在等待 [TC39](http://www.ecma-international.org/memento/TC39.htm) 委员会来决定是否将其纳入语言规范. {@a polyfills} ### Polyfill packages @@ -180,17 +195,29 @@ Package name | Description ---------------------------------------- | ----------------------------------- 包名 | 说明 [**@angular‑devkit/
build‑angular**](https://github.com/angular/angular-cli/) | The Angular build tools. +[**@angular‑devkit/
build‑angular**](https://github.com/angular/angular-cli/) | Angular 构建工具。 [**@angular/cli**](https://github.com/angular/angular-cli/) | The Angular CLI tools. +[**@angular/cli**](https://github.com/angular/angular-cli/) | Angular CLI 工具。 **@angular/
compiler‑cli** | The Angular compiler, which is invoked by the Angular CLI's `ng build` and `ng serve` commands. +**@angular/
compiler‑cli** | Angular 编译器，Angular CLI 的 `ng build` 和 `ng serve` 命令会调用它。 **@angular/
language‑service** | The [Angular language service](guide/language-service) analyzes component templates and provides type and error information that TypeScript-aware editors can use to improve the developer's experience. For example, see the [Angular language service extension for VS Code](https://marketplace.visualstudio.com/items?itemName=Angular.ng-template). +**@angular/
language‑service** | [Angular 语言服务](guide/language-service)会分析组件模板并给出类型信息和错误信息，支持 TypeScript 的编辑器可以使用它来提升开发体验。具体的例子可参见 [VS Code 的 Angular 语言服务扩展](https://marketplace.visualstudio.com/items?itemName=Angular.ng-template)。 **@types/... ** | TypeScript definition files for 3rd party libraries such as Jasmine and Node.js. +**@types/... ** | 第三方库（如 Jasmine、Node.js）的 TypeScript 类型定义文件。 [**codelyzer**](https://www.npmjs.com/package/codelyzer) | A linter for Angular apps whose rules conform to the Angular [style guide](guide/styleguide). +[**codelyzer**](https://www.npmjs.com/package/codelyzer) | Angular 应用的风格检查器（linter），它可以为满足 Angular [风格指南](guide/styleguide)中的规则提供保障。 **jasmine/... ** | Packages to support the [Jasmine](https://jasmine.github.io/) test library. +**jasmine/... ** | 用于支持 [Jasmine](https://jasmine.github.io/) 测试库的包。 **karma/... ** | Packages to support the [karma](https://www.npmjs.com/package/karma) test runner. +**karma/... ** | 用于支持 [karma](https://www.npmjs.com/package/karma) 测试运行器的包。 [**protractor**](https://www.npmjs.com/package/protractor) | An end-to-end (e2e) framework for Angular apps. Built on top of [WebDriverJS](https://github.com/SeleniumHQ/selenium/wiki/WebDriverJs). +[**protractor**](https://www.npmjs.com/package/protractor) | 一个针对 Angular 应用的端到端 (e2e) 测试框架。基于 [WebDriverJS](https://github.com/SeleniumHQ/selenium/wiki/WebDriverJs) 构建。 [**ts-node**](https://www.npmjs.com/package/ts-node) | TypeScript execution environment and REPL for Node.js. +[**ts-node**](https://www.npmjs.com/package/ts-node) | 供 Node.js 使用的 TypeScript 运行环境和 REPL。 [**tslint**](https://www.npmjs.com/package/tslint) | A static analysis tool that checks TypeScript code for readability, maintainability, and functionality errors. +[**tslint**](https://www.npmjs.com/package/tslint) | 一个静态分析工具，它可以检查 TypeScript 代码的可读性、可维护性和功能性方面的错误。 [**typescript**](https://www.npmjs.com/package/typescript) | The TypeScript language server, including the *tsc* TypeScript compiler. +[**typescript**](https://www.npmjs.com/package/typescript) | TypeScript 语言的服务提供者，包括 TypeScript 编译器 *tsc*。 ## Related information diff --git a/aio/content/guide/reactive-forms.md b/aio/content/guide/reactive-forms.md index 82b30ae018..f7bfa7d4b5 100644 --- a/aio/content/guide/reactive-forms.md +++ b/aio/content/guide/reactive-forms.md @@ -191,7 +191,7 @@ Update the template with a button to simulate a name update. When you click the The form model is the source of truth for the control, so when you click the button, the value of the input is changed within the component class, overriding its current value. -由于表单模型中才是该控件真正的源头，因此当你单击该按钮时，组件中该输入框的值也变化了，覆盖掉它的当前值。 +由于表单模型是该控件的权威数据源，因此当你单击该按钮时，组件中该输入框的值也变化了，覆盖掉它的当前值。
Name Editor Update @@ -263,7 +263,7 @@ A form group tracks the status and changes for each of its controls, so if one o Note that just as a form group contains a group of controls, the *profile form* `FormGroup` is bound to the `form` element with the `FormGroup` directive, creating a communication layer between the model and the form containing the inputs. The `formControlName` input provided by the `FormControlName` directive binds each individual input to the form control defined in `FormGroup`. The form controls communicate with their respective elements. They also communicate changes to the form group instance, which provides the source of truth for the model value. 注意，就像 `FormGroup` 所包含的那控件一样，*profileForm* 这个 `FormGroup` 也通过 `FormGroup` 指令绑定到了 `form` 元素，在该模型和表单中的输入框之间创建了一个通讯层。 -由 `FormControlName` 指令提供的 `formControlName` 属性把每个输入框和 `FormGroup` 中定义的表单控件绑定起来。这些表单控件会和相应的元素通讯，它们还把更改传递给 `FormGroup`，这个 `FormGroup` 是模型值的真正源头。 +由 `FormControlName` 指令提供的 `formControlName` 属性把每个输入框和 `FormGroup` 中定义的表单控件绑定起来。这些表单控件会和相应的元素通讯，它们还把更改传递给 `FormGroup`，这个 `FormGroup` 是模型值的权威数据源。 ### Saving form data