fix: 精修翻译
恢复一些过度省略的 "Angular" Angular 模块恢复为 NgModule
This commit is contained in:
Zhicheng WANG
parent
b6e28828a7
commit
421fc1a846
@ -73,7 +73,7 @@ To get started with adding Angular animations to your project, import the animat
|
||||
|
||||
Import `BrowserAnimationsModule`, which introduces the animation capabilities into your Angular root application module.
|
||||
|
||||
导入 `BrowserAnimationsModule`，它能把动画能力引入应用的根模块中。
|
||||
导入 `BrowserAnimationsModule`，它能把动画能力引入 Angular 应用的根模块中。
|
||||
|
||||
<code-example path="animations/src/app/app.module.1.ts" header="src/app/app.module.ts" language="typescript" linenums="false">
|
||||
</code-example>
|
||||
@ -237,7 +237,7 @@ The third argument, `easing`, controls how the animation [accelerates and decele
|
||||
|
||||
**Note:** See the Angular Material Design website's topic on [Natural easing curves](https://material.io/design/motion/speed.html#easing) for general information on easing curves.
|
||||
|
||||
**注意：**要了解缓动曲线的更多信息，请参阅 Material Design 网站下的[自然缓动曲线](https://material.io/design/motion/speed.html#easing)主题。
|
||||
**注意：**要了解缓动曲线的更多信息，请参阅 Angular Material Design 网站下的[自然缓动曲线](https://material.io/design/motion/speed.html#easing)主题。
|
||||
|
||||
</div>
|
||||
|
||||
@ -327,7 +327,7 @@ region="component" linenums="false">
|
||||
|
||||
When you've defined an animation trigger for a component, you can attach it to an element in that component's template by wrapping the trigger name in brackets and preceding it with an `@` symbol. Then, you can bind the trigger to a template expression using standard Angular property binding syntax as shown below, where `triggerName` is the name of the trigger, and `expression` evaluates to a defined animation state.
|
||||
|
||||
为组件定义好这些动画触发器之后，你可以给触发器名称加上 `@` 前缀并包在方括号里，来把它附加到组件模板中的元素上。然后，你可以使用如下所示的标准属性绑定语法，来把这个触发器绑定到模板表达式上。这里的 `triggerName` 就是触发器的名称，而 `expression` 的求值结果是前面定义过的动画状态之一。
|
||||
为组件定义好这些动画触发器之后，你可以给触发器名称加上 `@` 前缀并包在方括号里，来把它附加到组件模板中的元素上。然后，你可以使用 Angular 的标准属性绑定语法（如下所示），来把这个触发器绑定到模板表达式上。这里的 `triggerName` 就是触发器的名称，而 `expression` 的求值结果是前面定义过的动画状态之一。
|
||||
|
||||
```
|
||||
<div [@triggerName]="expression">...</div>;
|
||||
@ -398,7 +398,7 @@ You learned to add animation to a simple transition between two states, using `s
|
||||
|
||||
You can learn about more advanced features in Angular animations under the Animation section, beginning with advanced techniques in [transition and triggers](guide/transition-and-triggers).
|
||||
|
||||
你还可以到 "动画" 组下学习更多高级特性，不妨先从[转场与触发器](guide/transition-and-triggers)中讲述的高级技巧开始。
|
||||
你还可以到 "动画" 组下学习 Angular 动画的高级特性，不妨先从[转场与触发器](guide/transition-and-triggers)中讲述的高级技巧开始。
|
||||
|
||||
{@a animation-api-summary}
|
||||
## Animations API summary
|
||||
|
||||
@ -69,7 +69,7 @@ The `ng build` command with the `--prod` meta-flag (`ng build --prod`) compiles
|
||||
|
||||
See the [CLI command reference](cli) and [Building and serving Angular apps](guide/build) for more information.
|
||||
|
||||
要了解更多，请参见[CLI 文档](cli)，和 [构建与运行](guide/build)。
|
||||
要了解更多，请参见[CLI 文档](cli)，和 [构建与运行 Angular 应用](guide/build)。
|
||||
|
||||
</div>
|
||||
|
||||
@ -135,7 +135,7 @@ AOT 方式会在发给客户端之前就把 HTML 模板和组件编译成 JavaSc
|
||||
|
||||
When you use the Angular AOT compiler, you can control your app compilation in two ways:
|
||||
|
||||
当使用 AOT 编译器时，你可以通过两种方式来控制应用的编译方式：
|
||||
当使用 Angular 的 AOT 编译器时，你可以通过两种方式来控制应用的编译方式：
|
||||
|
||||
* By providing template compiler options in the `tsconfig.json` file.
|
||||
|
||||
@ -545,7 +545,7 @@ piece of metadata to generate the application code.
|
||||
|
||||
Angular libraries have this option to ensure that all Angular `.metadata.json` files are clean and it is a best practice to do the same when building your own libraries.
|
||||
|
||||
Angular 库通过这个选项来确保所有的 `.metadata.json` 文件都是干净的。当你要构建自己的代码库时，这也同样是一项最佳实践。
|
||||
Angular 库通过这个选项来确保所有的 Angular `.metadata.json` 文件都是干净的。当你要构建自己的代码库时，这也同样是一项最佳实践。
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@ -152,7 +152,7 @@ Angular 会作为一组 JavaScript 模块进行加载，你可以把它们看成
|
||||
|
||||
For example, import Angular's `Component` decorator from the `@angular/core` library like this.
|
||||
|
||||
例如，像下面这样，从 `@angular/core` 库中导入 `Component` 装饰器：
|
||||
例如，像下面这样，从 `@angular/core` 库中导入 Angular 的 `Component` 装饰器：
|
||||
|
||||
<code-example path="architecture/src/app/app.component.ts" region="import" linenums="false"></code-example>
|
||||
|
||||
|
||||
@ -6,7 +6,7 @@ After you understand the basic Angular building blocks, you can begin to learn m
|
||||
about the features and tools that are available to help you develop and deliver Angular applications.
|
||||
Here are some key features.
|
||||
|
||||
理解了这些基本构造块之后，就可以开始学习更多能帮你开发和交付 Angular 应用的特性和工具了。
|
||||
理解了这些 Angular 的基本构造块之后，就可以开始学习更多能帮你开发和交付 Angular 应用的特性和工具了。
|
||||
这里会讲一些关键特性。
|
||||
|
||||
## Responsive programming
|
||||
@ -87,7 +87,7 @@ without deep knowledge of animation techniques or CSS.
|
||||
|
||||
* [npm Packages](guide/npm-packages): The Angular Framework, Angular CLI, and components used by Angular applications are packaged as [npm](https://docs.npmjs.com/) packages and distributed via the npm registry. The Angular CLI creates a default `package.json` file, which specifies a starter set of packages that work well together and jointly support many common application scenarios.
|
||||
|
||||
[npm 包](guide/npm-packages)：Angular 框架、CLI 和应用中使用的组件都是用 [npm](https://docs.npmjs.com/) 打包的，并通过 npm 注册服务器进行发布。Angular CLI 会创建一个默认的 `package.json` 文件，它会指定一组初始的包，它们可以一起使用，共同支持很多常见的应用场景。
|
||||
[npm 包](guide/npm-packages)：Angular 框架、Angular CLI 和 Angular 应用中用到的组件都是用 [npm](https://docs.npmjs.com/) 打包的，并通过 npm 注册服务器进行发布。Angular CLI 会创建一个默认的 `package.json` 文件，它会指定一组初始的包，它们可以一起使用，共同支持很多常见的应用场景。
|
||||
|
||||
* [TypeScript configuration](guide/typescript-configuration): TypeScript is the primary language for Angular application development.
|
||||
|
||||
@ -103,4 +103,4 @@ without deep knowledge of animation techniques or CSS.
|
||||
|
||||
* [Deployment](guide/deployment): Learn techniques for deploying your Angular application to a remote server.
|
||||
|
||||
[部署](guide/deployment)：学习把你的应用发布到远端服务器的技巧。
|
||||
[部署](guide/deployment)：学习把你的 Angular 应用发布到远端服务器的技巧。
|
||||
|
||||
@ -37,7 +37,7 @@ Angular doesn't *enforce* these principles. Angular does help you *follow* these
|
||||
by making it easy to factor your application logic into services and make those services
|
||||
available to components through *dependency injection*.
|
||||
|
||||
Angular 不会*强制*你遵循这些原则。它只会通过*依赖注入*让你能更容易地将应用逻辑分解为服务，并让这些服务可用于各个组件中。
|
||||
Angular 不会*强迫*你遵循这些原则。Angular 只会通过*依赖注入*来帮你更容易地将应用逻辑分解为服务，并让这些服务可用于各个组件中。
|
||||
|
||||
## Service examples
|
||||
|
||||
@ -75,7 +75,7 @@ Similarly, use the `@Injectable()` decorator to indicate that a component or oth
|
||||
|
||||
* The *injector* is the main mechanism. Angular creates an application-wide injector for you during the bootstrap process, and additional injectors as needed. You don't have to create injectors.
|
||||
|
||||
*注入器*是主要的机制。你不用自己创建 Angular 注入器。Angular 会在启动过程中为你创建全应用级注入器以及所需的其它注入器。你不用自己创建注入器。
|
||||
*注入器*是主要的机制。Angular 会在启动过程中为你创建全应用级注入器以及所需的其它注入器。你不用自己创建注入器。
|
||||
|
||||
* An injector creates dependencies, and maintains a *container* of dependency instances that it reuses if possible.
|
||||
|
||||
|
||||
@ -31,7 +31,7 @@ Both components and services are simply classes, with *decorators* that mark the
|
||||
* The metadata for a component class associates it with a *template* that defines a view. A template combines ordinary HTML with Angular *directives* and *binding markup* that allow Angular to modify the HTML before rendering it for display.
|
||||
|
||||
组件类的元数据将组件类和一个用来定义视图的*模板*关联起来。
|
||||
模板把普通的 HTML 和*指令*与*绑定标记（markup）*组合起来，这样 Angular 就可以在呈现 HTML 之前先修改这些 HTML。
|
||||
模板把普通的 HTML 和 Angular *指令*与*绑定标记（markup）*组合起来，这样 Angular 就可以在呈现 HTML 之前先修改这些 HTML。
|
||||
|
||||
* The metadata for a service class provides the information Angular needs to make it available to components through *dependency injection (DI)*.
|
||||
|
||||
@ -292,5 +292,5 @@ Each of these subjects is introduced in more detail in the following pages.
|
||||
When you're familiar with these fundamental building blocks, you can explore them in more detail in the documentation. To learn about more tools and techniques that are available to help you build and deploy Angular applications, see [Next steps: tools and techniques](guide/architecture-next-steps).
|
||||
|
||||
当你熟悉了这些基础构造块之后，就可以在本文档中进一步查看它们的详情了。
|
||||
要学习能帮你构建和发布应用的更多工具和技巧，参见[后续步骤：工具与技巧](guide/architecture-next-steps)。
|
||||
要学习能帮你构建和发布 Angular 应用的更多工具和技巧，参见[后续步骤：工具与技巧](guide/architecture-next-steps)。
|
||||
</div>
|
||||
|
||||
@ -590,7 +590,7 @@ Only then can it be bound by some other component or directive.
|
||||
|
||||
但组件或指令不应该盲目的信任其它组件或指令。
|
||||
因此组件或指令的属性默认是不能被绑定的。
|
||||
从 Angular 绑定机制的角度来看，它们是*私有*的，而当添加了 `@Input` 时，它们变成了*公共*的
|
||||
从 Angular 绑定机制的角度来看，它们是*私有*的，而当添加了 `@Input` 时，Angular 绑定机制才会把它们当成*公共*的。
|
||||
只有这样，它们才能被其它组件或属性绑定。
|
||||
|
||||
You can tell if `@Input` is needed by the position of the property name in a binding.
|
||||
|
||||
@ -87,7 +87,7 @@ into the `index.html` host web page.
|
||||
The default application created by the Angular CLI only has one component, `AppComponent`, so it
|
||||
is in both the `declarations` and the `bootstrap` arrays.
|
||||
|
||||
CLI 创建的默认应用只有一个组件 `AppComponent`，所以它会同时出现在 `declarations` 和 `bootstrap` 数组中。
|
||||
Angular CLI 创建的默认应用只有一个组件 `AppComponent`，所以它会同时出现在 `declarations` 和 `bootstrap` 数组中。
|
||||
|
||||
{@a declarations}
|
||||
|
||||
|
||||
@ -278,7 +278,7 @@ Non-CLI users should follow the instructions [below](#non-cli).
|
||||
|
||||
These are the polyfills required to run an Angular application on each supported browser:
|
||||
|
||||
下表中的腻子脚本是每个浏览器都要用到的：
|
||||
下表中的腻子脚本是每个浏览器中运行 Angular 应用时要用到哪些：
|
||||
|
||||
<table>
|
||||
|
||||
@ -365,7 +365,8 @@ Some features of Angular may require additional polyfills.
|
||||
For example, the animations library relies on the standard web animation API, which is only available in Chrome and Firefox today.
|
||||
(note that the dependency of web-animations-js in Angular is only necessary if `AnimationBuilder` is used.)
|
||||
|
||||
例如，动画库依赖于标准的 web 动画 API，目前它只在 Chrome 和 Firefox 上可用。你可能需要一个腻子脚本来在其它浏览器上使用动画功能。
|
||||
例如，动画库依赖于标准的 web 动画 API，目前它只能用在 Chrome 和 Firefox 上。
|
||||
（注意，在 Angular 中，只有当用到了 `AnimationBuilder` 时，对 web-animations-js 的依赖才是必要的。）
|
||||
|
||||
Here are the features which may require additional polyfills:
|
||||
|
||||
|
||||
@ -365,7 +365,7 @@ All guided samples with routing use the _Routing Module_ and prose content has b
|
||||
most conspicuously in the
|
||||
[NgModule](guide/ngmodules) guide and [NgModule FAQ](guide/ngmodule-faq) guide.
|
||||
|
||||
所有使用路由的例子都使用**路由模块**，相关内容也被更新。更新最多的是[Angular 模块（NgModule）](guide/ngmodules)章和[Angular 模块常见问题](guide/ngmodule-faq)指南。
|
||||
所有使用路由的例子都使用**路由模块**，相关内容也被更新。更新最多的是 [NgModule](guide/ngmodules)章和 [NgModule 常见问题](guide/ngmodule-faq)指南。
|
||||
|
||||
## New "Internationalization" guide (2016-09-30)
|
||||
|
||||
@ -403,7 +403,7 @@ Barrels now are far less useful and have been removed from the style guide;
|
||||
they remain valuable but are not a matter of Angular style.
|
||||
Also relaxed the rule that discouraged use of the `@Component.host` property.
|
||||
|
||||
[StyleGuide](guide/styleguide)解释了 Angular 模块（NgModule）推荐的约定。
|
||||
[StyleGuide](guide/styleguide)解释了 NgModule 推荐的约定。
|
||||
现在，封装桶不再那么重要，风格指南已经移除了它们。
|
||||
它们仍然很有价值，但是它们与 Angular 风格无关。
|
||||
同时，**不推荐使用 `@Component.host` 属性**的规则也有所放宽。
|
||||
|
||||
@ -243,7 +243,7 @@ payload `$event` and updates a counter.
|
||||
The framework passes the event argument—represented by `$event`—to the handler method,
|
||||
and the method processes it:
|
||||
|
||||
框架(Angular)把事件参数(用 `$event` 表示)传给事件处理方法，这个方法会处理：
|
||||
本框架把事件参数(用 `$event` 表示)传给事件处理方法，这个方法会处理：
|
||||
|
||||
<figure>
|
||||
<img src="generated/images/guide/component-interaction/child-to-parent.gif" alt="Child-to-parent">
|
||||
|
||||
@ -263,7 +263,7 @@ They are _not inherited_ by any components nested within the template nor by any
|
||||
|
||||
The Angular CLI command [`ng generate component`](cli/generate) defines an empty `styles` array when you create the component with the `--inline-style` flag.
|
||||
|
||||
当使用 `--inline-styles` 标识创建组件时，CLI 就会定义一个空的 `styles` 数组
|
||||
当使用 `--inline-styles` 标识创建组件时，Angular CLI 的 [`ng generate component`](cli/generate) 命令就会定义一个空的 `styles` 数组
|
||||
|
||||
<code-example language="sh" class="code-shell">
|
||||
ng generate component hero-app --inline-style
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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 注入器配置了一个服务提供商。
|
||||
|
||||
<code-example path="dependency-injection/src/app/tree-shaking/service-and-module.ts" header="src/app/tree-shaking/service-and-modules.ts" linenums="false"> </code-example>
|
||||
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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)。
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
@ -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)。
|
||||
|
||||
@ -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).
|
||||
|
||||
<hr />
|
||||
|
||||
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 的 自定义构造函数。
|
||||
|
||||
<code-example path="ngmodule-faq/src/app/core/core.module.ts" region="ctor" header="src/app/core/core.module.ts (Constructor)" linenums="false">
|
||||
</code-example>
|
||||
@ -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).
|
||||
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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，用于提供所需的服务提供商，以及用来在应用视图之间进行导航的指令。
|
||||
|
||||
</td>
|
||||
|
||||
@ -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}
|
||||
|
||||
|
||||
@ -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。
|
||||
|
||||
</div>
|
||||
|
||||
@ -2746,7 +2746,7 @@ and more difficult in a flat structure.
|
||||
|
||||
**Why?** NgModules make it easy to lazy load routable features.
|
||||
|
||||
**为何？** Angular 模块使惰性加载可路由的特性变得更容易。
|
||||
**为何？** NgModule 使惰性加载可路由的特性变得更容易。
|
||||
|
||||
</div>
|
||||
|
||||
@ -2754,7 +2754,7 @@ and more difficult in a flat structure.
|
||||
|
||||
**Why?** NgModules make it easier to isolate, test, and reuse features.
|
||||
|
||||
**为何？**Angular 模块隔离、测试和复用特性更容易。
|
||||
**为何？** NgModule 隔离、测试和复用特性更容易。
|
||||
|
||||
</div>
|
||||
|
||||
@ -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`）。
|
||||
|
||||
</div>
|
||||
|
||||
@ -2793,7 +2793,7 @@ for example, in `/src/app`.
|
||||
|
||||
**Why?** Every app requires at least one root NgModule.
|
||||
|
||||
**为何？**每个应用都至少需要一个根 Angular 模块。
|
||||
**为何？**每个应用都至少需要一个根 NgModule。
|
||||
|
||||
</div>
|
||||
|
||||
@ -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。
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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:
|
||||
|
||||
|
||||
@ -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` 列表中。
|
||||
|
||||
<code-example path="upgrade-module/src/app/downgrade-static/app.module.ts" region="ngmodule" header="app.module.ts">
|
||||
</code-example>
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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.
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user