ng generate component hero-app --inline-style
diff --git a/aio/content/guide/dependency-injection-in-action.md b/aio/content/guide/dependency-injection-in-action.md
index bbf545c430..497fdefc41 100644
--- a/aio/content/guide/dependency-injection-in-action.md
+++ b/aio/content/guide/dependency-injection-in-action.md
@@ -322,7 +322,7 @@ you get a reference to the cache service from the parent `HeroBioComponent`.
Angular throws an error if the parent lacks that service, even if a component higher
in the component tree includes it.
-`@Host()` 函数是构造函数属性 `heroCache` 的装饰器,确保从其父组件 `HeroBioComponent` 得到一个缓存服务。如果该父组件不存在这个服务,Angular 就会抛出错误,即使组件树里的再上级有某个组件拥有这个服务,Angular 也会抛出错误。
+`@Host()` 函数是构造函数属性 `heroCache` 的装饰器,确保从其父组件 `HeroBioComponent` 得到一个缓存服务。如果该父组件中没有该服务,Angular 就会抛出错误,即使组件树里的再上级有某个组件拥有这个服务,还是会抛出错误。
A second `@Host()` function decorates the `loggerService` constructor property.
The only `LoggerService` instance in the app is provided at the `AppComponent` level.
diff --git a/aio/content/guide/dependency-injection-providers.md b/aio/content/guide/dependency-injection-providers.md
index dec2eda6ee..0abcc94027 100644
--- a/aio/content/guide/dependency-injection-providers.md
+++ b/aio/content/guide/dependency-injection-providers.md
@@ -498,7 +498,7 @@ Thus, services provided at the NgModule or component level are not tree-shakable
The following example of non-tree-shakable providers in Angular configures a service provider for the injector of an NgModule.
-下面这个不可摇树优化提供商的例子为 NgModule 注入器配置了一个服务提供商。
+下面这个不可摇树优化的 Angular 提供商的例子为 NgModule 注入器配置了一个服务提供商。
diff --git a/aio/content/guide/dependency-injection.md b/aio/content/guide/dependency-injection.md
index 86ff02e98c..12836eb1ae 100644
--- a/aio/content/guide/dependency-injection.md
+++ b/aio/content/guide/dependency-injection.md
@@ -7,7 +7,7 @@ Angular has its own DI framework, which is typically
used in the design of Angular applications to increase their efficiency and modularity.
依赖注入(DI)是一种重要的应用设计模式。
-Angular 有自己的 DI 框架,在设计应用时通常会用到它,以提升它们的开发效率和模块化程度。
+Angular 有自己的 DI 框架,在设计应用时常会用到它,以提升它们的开发效率和模块化程度。
Dependencies are services or objects that a class needs to perform its function.
DI is a coding pattern in which a class asks for dependencies from external sources rather than creating them itself.
diff --git a/aio/content/guide/displaying-data.md b/aio/content/guide/displaying-data.md
index 8904e0834b..7962eff71b 100644
--- a/aio/content/guide/displaying-data.md
+++ b/aio/content/guide/displaying-data.md
@@ -4,7 +4,7 @@
You can display data by binding controls in an HTML template to properties of an Angular component.
-在 Angular 中最典型的数据显示方式,就是把 HTML 模板中的控件绑定到 Angular 组件的属性。
+你可以通过把 HTML 模板中的控件绑定到 Angular 组件的属性来显示数据。
In this page, you'll create a component with a list of heroes.
You'll display the list of hero names and
@@ -409,7 +409,8 @@ see the [template expressions](guide/template-syntax#template-expressions) secti
[Template Syntax](guide/template-syntax) page.
双引号中的模板表达式 `*ngIf="heros.length > 3"`,外观和行为很象 TypeScript 。
-当组件中的英雄列表有三个以上的条目时,Angular 把这个段落添加到 DOM 中,于是消息显示了出来。
+当组件中的英雄列表有三个以上的条目时,Angular 就会把这个段落添加到 DOM 中,于是消息显示了出来。
+如果有三个或更少的条目,则 Angular 会省略这些段落,所以不显示消息。
更多信息,见[模板语法](guide/template-syntax)中的[模板表达式](guide/template-syntax#template-expressions)。
diff --git a/aio/content/guide/frequent-ngmodules.md b/aio/content/guide/frequent-ngmodules.md
index e3938e5113..5fa804c999 100644
--- a/aio/content/guide/frequent-ngmodules.md
+++ b/aio/content/guide/frequent-ngmodules.md
@@ -231,7 +231,7 @@ re-exports `CommonModule` making all of its directives available
to any module that imports `BrowserModule`.
`BrowserModule` 导入了 `CommonModule`,它贡献了很多通用的指令,比如 `ngIf` 和 `ngFor`。
-另外,`BrowserModule` 重新导出了 `CommonModule`,以便它所有的指令在任何导入了 `BrowserModule` 的 Angular 模块中都可以使用。
+另外,`BrowserModule` 重新导出了 `CommonModule`,以便它所有的指令在任何导入了 `BrowserModule` 的模块中都可以使用。
For apps that run in the browser, import `BrowserModule` in the
root `AppModule` because it provides services that are essential
@@ -267,9 +267,6 @@ You may also be interested in the following:
[引导启动](guide/bootstrapping)。
* [NgModules](guide/ngmodules).
-
- [Angular 模块](guide/ngmodules).
-
* [JavaScript Modules vs. NgModules](guide/ngmodule-vs-jsmodule).
[JavaScript 模块与 NgModules](guide/ngmodule-vs-jsmodule)。
diff --git a/aio/content/guide/ngmodule-faq.md b/aio/content/guide/ngmodule-faq.md
index be44ed65d1..e5a1b4eb06 100644
--- a/aio/content/guide/ngmodule-faq.md
+++ b/aio/content/guide/ngmodule-faq.md
@@ -1,6 +1,6 @@
# NgModule FAQs
-# Angular 模块常见问题
+# NgModule 常见问题
#### Prerequisites:
@@ -12,8 +12,6 @@ A basic understanding of the following concepts:
* [NgModules](guide/ngmodules).
- [Angular 模块](guide/ngmodules).
-
NgModules help organize an application into cohesive blocks of functionality.
@@ -22,7 +20,7 @@ NgModules 可以帮你把应用组织成一些紧密相关的代码块。
This page answers the questions many developers ask about NgModule design and implementation.
-这里回答的是开发者常问起的关于 Angular 模块的设计与实现问题。
+这里回答的是开发者常问起的关于 NgModule 的设计与实现问题。
## What classes should I add to the `declarations` array?
@@ -411,7 +409,7 @@ Merging NgModule providers into the application injector
makes it easy for a module library to enrich the entire application with new services.
By adding the `HttpClientModule` once, every application component can make HTTP requests.
-通过模块导入来实现可扩展性是 Angular 模块系统的主要设计目标。
+通过模块导入来实现可扩展性是 NgModule 体系的主要设计目标。
把模块的提供商并入应用程序的注入器可以让库模块使用新的服务来强化应用程序变得更容易。
只要添加一次 `HttpClientModule`,那么应用中的每个组件就都可以发起 Http 请求了。
@@ -819,7 +817,8 @@ You can throw an error or take other remedial action.
Certain NgModules, such as `BrowserModule`, implement such a guard.
Here is a custom constructor for an NgModule called `CoreModule`.
-某些 Angular 模块(例如 `BrowserModule`)就实现了一个像 Angular 模块那一章的 `CoreModule` 构造函数那样的守卫。
+某些 NgModule(例如 `BrowserModule`)就实现了那样一个守卫。
+下面是一个名叫 `CoreModule` 的 NgModule 的 自定义构造函数。
@@ -1078,8 +1077,8 @@ Angular 的 `NgModule` 有自己的 `imports` 和 `exports` 来达到类似的
You _import_ other NgModules so you can use their exported classes in component templates.
You _export_ this NgModule's classes so they can be imported and used by components of _other_ NgModules.
-你可以*导入*其它 Angular 模块,以便在当前模块的组件模板中使用它们导出的类。
-你可以*导出*当前 Angular 模块中的类,以便其它模块可以导入它们,并用在自己的组件模板中。
+你可以*导入*其它 NgModules,以便在当前模块的组件模板中使用它们导出的类。
+你可以*导出*当前 NgModules 中的类,以便*其它* NgModules 可以导入它们,并用在自己的组件模板中。
For more information, see [JavaScript Modules vs. NgModules](guide/ngmodule-vs-jsmodule).
diff --git a/aio/content/guide/ngmodule-vs-jsmodule.md b/aio/content/guide/ngmodule-vs-jsmodule.md
index 4d9956c13a..698fd85187 100644
--- a/aio/content/guide/ngmodule-vs-jsmodule.md
+++ b/aio/content/guide/ngmodule-vs-jsmodule.md
@@ -89,7 +89,7 @@ NgModule 类与 JavaScript 模块有下列关键性的不同:
* An NgModule bounds [declarable classes](guide/ngmodule-faq#q-declarable) only.
Declarables are the only classes that matter to the [Angular compiler](guide/ngmodule-faq#q-angular-compiler).
- Angular 模块只绑定了[*可声明的类*](guide/ngmodule-faq#q-declarable),这些可声明的类只是供[Angular 编译器](guide/ngmodule-faq#q-angular-compiler)用的。
+ NgModule 只绑定了[*可声明的类*](guide/ngmodule-faq#q-declarable),这些可声明的类只是供[Angular 编译器](guide/ngmodule-faq#q-angular-compiler)用的。
* Instead of defining all member classes in one giant file as in a JavaScript module,
you list the module's classes in the `@NgModule.declarations` list.
@@ -99,7 +99,7 @@ you list the module's classes in the `@NgModule.declarations` list.
* An NgModule can only export the [declarable classes](guide/ngmodule-faq#q-declarable)
it owns or imports from other modules. It doesn't declare or export any other kind of class.
- Angular 模块只能导出[*可声明的类*](guide/ngmodule-faq#q-declarable)。这可能是它自己拥有的也可能是从其它模块中导入的。它不会声明或导出任何其它类型的类。
+ NgModule 只能导出[*可声明的类*](guide/ngmodule-faq#q-declarable)。这可能是它自己拥有的也可能是从其它模块中导入的。它不会声明或导出任何其它类型的类。
* Unlike JavaScript modules, an NgModule can extend the _entire_ application with services
by adding providers to the `@NgModule.providers` list.
diff --git a/aio/content/guide/ngmodules.md b/aio/content/guide/ngmodules.md
index 18b440b279..b26eca413e 100644
--- a/aio/content/guide/ngmodules.md
+++ b/aio/content/guide/ngmodules.md
@@ -1,7 +1,5 @@
# NgModules
-# Angular 模块 (NgModule)
-
#### Prerequisites
#### 前提条件
@@ -65,7 +63,7 @@ NgModules consolidate components, directives, and pipes into
cohesive blocks of functionality, each focused on a
feature area, application business domain, workflow, or common collection of utilities.
-Angular 模块把组件、指令和管道打包成内聚的功能块,每个模块聚焦于一个特性区域、业务领域、工作流或通用工具。
+NgModule 把组件、指令和管道打包成内聚的功能块,每个模块聚焦于一个特性区域、业务领域、工作流或通用工具。
Modules can also add services to the application.
Such services might be internally developed, like something you'd develop yourself or come from outside sources, such as the Angular router and HTTP client.
diff --git a/aio/content/guide/router.md b/aio/content/guide/router.md
index 8e963973f9..cf3fbfa950 100644
--- a/aio/content/guide/router.md
+++ b/aio/content/guide/router.md
@@ -892,7 +892,7 @@ Here are the key `Router` terms and their meanings:
A separate NgModule that provides the necessary service providers
and directives for navigating through application views.
- 一个独立的 Angular 模块,用于提供所需的服务提供商,以及用来在应用视图之间进行导航的指令。
+ 一个独立的 NgModule,用于提供所需的服务提供商,以及用来在应用视图之间进行导航的指令。
@@ -5423,7 +5423,7 @@ The root `AppModule` must neither load nor reference the `AdminModule` or its fi
In `app.module.ts`, remove the `AdminModule` import statement from the top of the file
and remove the `AdminModule` from the NgModule's `imports` array.
-在 `app.module.ts` 中,从顶部移除 `AdminModule` 的导入语句,并且从 Angular 模块的 `imports` 数组中移除 `AdminModule`。
+在 `app.module.ts` 中,从顶部移除 `AdminModule` 的导入语句,并且从 NgModule 的 `imports` 数组中移除 `AdminModule`。
{@a can-load-guard}
diff --git a/aio/content/guide/styleguide.md b/aio/content/guide/styleguide.md
index 5e06a9565d..f92e0ff276 100644
--- a/aio/content/guide/styleguide.md
+++ b/aio/content/guide/styleguide.md
@@ -2022,7 +2022,7 @@ discourage the `I` prefix.
## Application structure and NgModules
-## 应用程序结构与 Angular 模块
+## 应用程序结构与 NgModule
Have a near-term view of implementation and a long-term vision. Start small but keep in mind where the app is heading down the road.
@@ -2032,7 +2032,7 @@ All of the app's code goes in a folder named `src`.
All feature areas are in their own folder, with their own NgModule.
所有应用程序的源代码都放到名叫 `src` 的目录里。
-所有特性区都在自己的文件夹中,带有它们自己的 Angular 模块。
+所有特性区都在自己的文件夹中,带有它们自己的 NgModule。
All content is one asset per file. Each component, service, and pipe is in its own file.
All third party vendor scripts are stored in another folder and not in the `src` folder.
@@ -2738,7 +2738,7 @@ and more difficult in a flat structure.
**Do** create an NgModule for each feature area.
-**坚持**为每个特性区创建一个 Angular 模块。
+**坚持**为每个特性区创建一个 NgModule。
@@ -2746,7 +2746,7 @@ and more difficult in a flat structure.
**Why?** NgModules make it easy to lazy load routable features.
-**为何?** Angular 模块使惰性加载可路由的特性变得更容易。
+**为何?** NgModule 使惰性加载可路由的特性变得更容易。
@@ -2754,7 +2754,7 @@ and more difficult in a flat structure.
**Why?** NgModules make it easier to isolate, test, and reuse features.
-**为何?**Angular 模块隔离、测试和复用特性更容易。
+**为何?** NgModule 隔离、测试和复用特性更容易。
@@ -2785,7 +2785,7 @@ and more difficult in a flat structure.
**Do** create an NgModule in the app's root folder,
for example, in `/src/app`.
-**坚持**在应用的根目录创建一个 Angular 模块(例如 `/src/app`)。
+**坚持**在应用的根目录创建一个 NgModule(例如 `/src/app`)。
@@ -2793,7 +2793,7 @@ for example, in `/src/app`.
**Why?** Every app requires at least one root NgModule.
-**为何?**每个应用都至少需要一个根 Angular 模块。
+**为何?**每个应用都至少需要一个根 NgModule。
@@ -2836,7 +2836,7 @@ for example, in `/src/app`.
**Do** create an NgModule for all distinct features in an application;
for example, a `Heroes` feature.
-**坚持**为应用中每个明显的特性创建一个 Angular 模块。
+**坚持**为应用中每个明显的特性创建一个 NgModule。
diff --git a/aio/content/guide/template-syntax.md b/aio/content/guide/template-syntax.md
index c2bfec4b46..4c9e888404 100644
--- a/aio/content/guide/template-syntax.md
+++ b/aio/content/guide/template-syntax.md
@@ -1948,7 +1948,7 @@ and the [`FormsModule`](guide/forms "Forms") define their own attribute directiv
This section is an introduction to the most commonly used attribute directives:
更多的细节参见[*属性型指令*](guide/attribute-directives)一章。
-很多 Angular 模块,比如[`RouterModule`](guide/router "Routing and Navigation")和[`FormsModule`](guide/forms "Forms")都定义了自己的属性型指令。
+很多 NgModules,比如[`RouterModule`](guide/router "Routing and Navigation")和[`FormsModule`](guide/forms "Forms")都定义了自己的属性型指令。
本节将会介绍几个最常用的属性型指令:
* [`NgClass`](guide/template-syntax#ngClass) - add and remove a set of CSS classes
@@ -2098,7 +2098,7 @@ you must import the `FormsModule` and add it to the NgModule's `imports` list.
Learn more about the `FormsModule` and `ngModel` in the
[Forms](guide/forms#ngModel) guide.
-在使用 `ngModel` 指令进行双向数据绑定之前,你必须导入 `FormsModule` 并把它添加到 Angular 模块的 `imports` 列表中。
+在使用 `ngModel` 指令进行双向数据绑定之前,你必须导入 `FormsModule` 并把它添加到 NgModule 的 `imports` 列表中。
要了解 `FormsModule` 和 `ngModel` 的更多知识,参见[表单](guide/forms#ngModel)一章。
Here's how to import the `FormsModule` to make `[(ngModel)]` available.
diff --git a/aio/content/guide/upgrade-performance.md b/aio/content/guide/upgrade-performance.md
index 4f90fea62d..1fe82197e5 100644
--- a/aio/content/guide/upgrade-performance.md
+++ b/aio/content/guide/upgrade-performance.md
@@ -186,7 +186,7 @@ as a dependency in your main AngularJS module—that will bootstrap your mai
kick off the Angular part of the hybrid app. In a sense, it "downgrades" an Angular module to an
AngularJS module.
-依赖互联中最重要的部分之一是把两个主模块联结在一起。这就是 `downgradeModule()` 的用武之地。使用它来创建 AngularJS 模块(你可以在 AngularJS 主模块中把这个模块用作依赖项),该模块将引导你的 Angular 主模块,并启动混合式应用中的 Angular 部分。从某种意义上说,它把 Angular 模块将集成了 AngularJS 模块。
+依赖互联中最重要的部分之一是把两个主模块联结在一起。这就是 `downgradeModule()` 的用武之地。使用它来创建 AngularJS 模块(你可以在 AngularJS 主模块中把这个模块用作依赖项),该模块将引导你的 Angular 主模块,并启动混合式应用中的 Angular 部分。从某种意义上说,它把 NgModule "降级"成了 AngularJS 模块。
There are a few things to note, though:
diff --git a/aio/content/guide/upgrade.md b/aio/content/guide/upgrade.md
index 070bde7124..cefcba17f4 100644
--- a/aio/content/guide/upgrade.md
+++ b/aio/content/guide/upgrade.md
@@ -102,7 +102,7 @@ There are a few rules in particular that will make it much easier to do
rules define similar principles on a higher level of abstraction: Different parts of the
application should reside in different directories and NgModules.
- [按特性分目录的结构](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#folders-by-feature-structure)和[模块化](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#modularity)规则在较高的抽象层定义了一些相似的原则:应用程序中的不同部分应该被分到不同的目录和 Angular 模块中。
+ [按特性分目录的结构](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#folders-by-feature-structure)和[模块化](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#modularity)规则在较高的抽象层定义了一些相似的原则:应用程序中的不同部分应该被分到不同的目录和 NgModule 中。
When an application is laid out feature per feature in this way, it can also be
migrated one feature at a time. For applications that don't already look like
@@ -787,7 +787,7 @@ the Angular application, you must add it to the `entryComponents` for the
NgModule.
并且由于这个组件在 AngularJS 模块中使用,也是你 Angular 应用的一个入口点,你还需要
-将它加入到 Angular 模块的 `entryComponents` 列表中。
+将它加入到 NgModule 的 `entryComponents` 列表中。
diff --git a/aio/content/marketing/docs.md b/aio/content/marketing/docs.md
index 6513d8c607..da47ab07a2 100644
--- a/aio/content/marketing/docs.md
+++ b/aio/content/marketing/docs.md
@@ -51,7 +51,8 @@ and using [decorators](https://www.typescriptlang.org/docs/handbook/decorators.h
本文档假设你已经熟悉了 [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript "Learn JavaScript") 和来自 [最新标准](https://babeljs.io/learn-es2015/ "Latest JavaScript standards") 的一些知识,比如 [类](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes "ES2015 Classes") 和 [模块](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import "ES2015 Modules")。
-下列代码范例都是用最新版本的 [TypeScript](https://www.typescriptlang.org/ "TypeScript") 写的,利用 [类型](https://www.typescriptlang.org/docs/handbook/classes.html "TypeScript Types") 实现依赖注入,并使用[装饰器](https://www.typescriptlang.org/docs/handbook/decorators.html "Decorators")来提供元数据。
+下列代码范例都是用最新版本的 [TypeScript](https://www.typescriptlang.org/ "TypeScript") 写的。
+大多数 Angular 代码都只能用最新的 JavaScript 编写,它会用 [类型](https://www.typescriptlang.org/docs/handbook/classes.html "TypeScript Types") 实现依赖注入,还会用[装饰器](https://www.typescriptlang.org/docs/handbook/decorators.html "Decorators")来提供元数据。
## Feedback
diff --git a/aio/content/navigation.json b/aio/content/navigation.json
index 331718478c..18b46b385e 100644
--- a/aio/content/navigation.json
+++ b/aio/content/navigation.json
@@ -276,7 +276,7 @@
"tooltip": "在应用的根模块(AppModule)中告诉 Angular 如何构造并引导引用。"
},
{
- "title": "Angular 模块",
+ "title": "NgModule",
"tooltip": "Angular 中的模块",
"children": [
{
@@ -292,7 +292,7 @@
{
"url": "guide/frequent-ngmodules",
"title": "常用模块",
- "tooltip": "介绍最常用的 Angular 模块"
+ "tooltip": "介绍最常用的 NgModule"
},
{
"url": "guide/module-types",
@@ -312,7 +312,7 @@
{
"url": "guide/providers",
"title": "服务提供商",
- "tooltip": "服务提供商与 Angular 模块"
+ "tooltip": "服务提供商与 NgModule"
},
{
"url": "guide/singleton-services",
@@ -326,8 +326,8 @@
},
{
"url": "guide/sharing-ngmodules",
- "title": "共享 Angular 模块",
- "tooltip": "共享 Angular 模块让你的应用现代化。"
+ "title": "共享 NgModule",
+ "tooltip": "共享 NgModule 让你的应用现代化。"
},
{
"url": "guide/ngmodule-api",
diff --git a/aio/content/tutorial/index.md b/aio/content/tutorial/index.md
index 2b4c660671..f03d823fa6 100644
--- a/aio/content/tutorial/index.md
+++ b/aio/content/tutorial/index.md
@@ -19,7 +19,7 @@ By the end of the tutorial you will be able to do the following:
* Use built-in Angular directives to show and hide elements and display lists of hero data.
- 使用内置指令来显示 / 隐藏元素,并显示英雄数据的列表。
+ 使用Angular 的内置指令来显示 / 隐藏元素,并显示英雄数据的列表。
* Create Angular components to display hero details and show an array of heroes.