honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs(aio): change Angular Module to NgModule (#16964)

This commit is contained in:
Kapunahele Wong 2017-07-11 18:05:20 -04:00 committed by Igor Minar
parent 20127c1456
commit e110a80caf
17 changed files with 89 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
aio/content/examples/ngmodule/src/app/title.component.ts
View File

@ -12,7 +12,7 @@ import { UserService } from './user.service';
})
export class TitleComponent {
@Input() subtitle = '';
title = 'Angular Modules';
title = 'NgModules';
// #enddocregion v1
user = '';

2
aio/content/examples/reactive-forms/src/app/app.module.ts
View File

@ -16,7 +16,7 @@ import { HeroService } from './hero.service'; // <-- #1 import service
@NgModule({
imports: [
BrowserModule,
ReactiveFormsModule // <-- #2 add to Angular module imports
ReactiveFormsModule // <-- #2 add to @NgModule imports
],
declarations: [
AppComponent,

8
aio/content/guide/ajs-quick-reference.md
View File

@ -1000,7 +1000,7 @@ For more information on pipes, see [Pipes](guide/pipes).
## Modules/controllers/components
In both AngularJS and Angular, Angular modules help you organize your application into cohesive blocks of functionality.
In both AngularJS and Angular, modules help you organize your application into cohesive blocks of functionality.
In AngularJS, you write the code that provides the model and the methods for the view in a **controller**.
In Angular, you build a **component**.
@ -1080,18 +1080,18 @@ The Angular code is shown using TypeScript.
<td>
### Angular modules
### NgModules
<code-example hideCopy path="ajs-quick-reference/src/app/app.module.1.ts" linenums="false">
</code-example>
Angular modules, defined with the `NgModule` decorator, serve the same purpose:
NgModules, defined with the `NgModule` decorator, serve the same purpose:
* `imports`: specifies the list of other modules that this module depends upon
* `declaration`: keeps track of your components, pipes, and directives.
For more information on modules, see [Angular Modules (NgModule)](guide/ngmodule).
For more information on modules, see [NgModules](guide/ngmodule).
</td>
</tr>

2
aio/content/guide/aot-compiler.md
View File

@ -568,7 +568,7 @@ Run the following command to generate the map.
</code-example>
The `source-map-explorer` analyzes the source map generated with the bundle and draws a map of all dependencies,
showing exactly which application and Angular modules and classes are included in the bundle.
showing exactly which application and NgModules and classes are included in the bundle.
Here's the map for _Tour of Heroes_.

20
aio/content/guide/architecture.md
View File

@ -31,21 +31,21 @@ You'll learn the details in the pages that follow. For now, focus on the big pic
<img src="generated/images/guide/architecture/module.png" alt="Component" class="left">
Angular apps are modular and Angular has its own modularity system called _Angular modules_ or _NgModules_.
Angular apps are modular and Angular has its own modularity system called _NgModules_.
_Angular modules_ are a big deal.
This page introduces modules; the [Angular modules](guide/ngmodule) page covers them in depth.
NgModules are a big deal.
This page introduces modules; the [NgModules](guide/ngmodule) page covers them in depth.
<br class="clear">
Every Angular app has at least one Angular module class, [the _root module_](guide/bootstrapping "AppModule: the root module"),
Every Angular app has at least one NgModule class, [the _root module_](guide/bootstrapping "Bootstrapping"),
conventionally named `AppModule`.
While the _root module_ may be the only module in a small application, most apps have many more
_feature modules_, each a cohesive block of code dedicated to an application domain,
a workflow, or a closely related set of capabilities.
An Angular module, whether a _root_ or _feature_, is a class with an `@NgModule` decorator.
An NgModule, whether a _root_ or _feature_, is a class with an `@NgModule` decorator.
<div class="l-sub-section">
@ -87,12 +87,12 @@ During development you're likely to bootstrap the `AppModule` in a `main.ts` fil
<code-example path="architecture/src/main.ts" title="src/main.ts" linenums="false"></code-example>
### Angular modules vs. JavaScript modules
### NgModules vs. JavaScript modules
The Angular module &mdash; a class decorated with `@NgModule` &mdash; is a fundamental feature of Angular.
The NgModule &mdash; a class decorated with `@NgModule` &mdash; is a fundamental feature of Angular.
JavaScript also has its own module system for managing collections of JavaScript objects.
It's completely different and unrelated to the Angular module system.
It's completely different and unrelated to the NgModule system.
In JavaScript each _file_ is a module and all objects defined in the file belong to that module.
The module declares some objects to be public by marking them with the `export` key word.
@ -124,7 +124,7 @@ For example, import Angular's `Component` decorator from the `@angular/core` lib
<code-example path="architecture/src/app/app.component.ts" region="import" linenums="false"></code-example>
You also import Angular _modules_ from Angular _libraries_ using JavaScript import statements:
You also import NgModules_ from Angular _libraries_ using JavaScript import statements:
<code-example path="architecture/src/app/mini-app.ts" region="import-browser-module" linenums="false"></code-example>
@ -139,7 +139,7 @@ Hang in there. The confusion yields to clarity with time and experience.
<div class="l-sub-section">
Learn more from the [Angular modules](guide/ngmodule) page.
Learn more from the [NgModules](guide/ngmodule) page.
</div>

26
aio/content/guide/bootstrapping.md
View File

@ -1,8 +1,8 @@
# Bootstrapping
An Angular module class describes how the application parts fit together.
Every application has at least one Angular module, the _root_ module
that you [bootstrap](guide/bootstrapping#main) to launch the application.
An NgModule class describes how the application parts fit together.
Every application has at least one NgModule, the _root_ module
that you [bootstrap](guide/appmodule#main) to launch the application.
You can call it anything you want. The conventional name is `AppModule`.
The [setup](guide/setup) instructions produce a new project with the following minimal `AppModule`.
@ -17,15 +17,15 @@ You'll evolve this module as your application grows.
After the `import` statements, you come to a class adorned with the
**`@NgModule`** [_decorator_](guide/glossary#decorator '"Decorator" explained').
The `@NgModule` decorator identifies `AppModule` as an Angular module class (also called an `NgModule` class).
The `@NgModule` decorator identifies `AppModule` as an `NgModule` class.
`@NgModule` takes a _metadata_ object that tells Angular how to compile and launch the application.
* **_imports_** &mdash; the `BrowserModule` that this and every application needs to run in a browser.
* **_declarations_** &mdash; the application's lone component, which is also ...
* **_bootstrap_** &mdash; the _root_ component that Angular creates and inserts into the `index.html` host web page.
The [Angular Modules (NgModule)](guide/ngmodule) guide dives deeply into the details of Angular modules.
All you need to know at the moment is a few basics about these three properties.
The [NgModules](guide/ngmodule) guide dives deeply into the details of NgModules.
All you need to know at the moment is a few basics about these three properties.
{@a imports}
@ -33,8 +33,8 @@ All you need to know at the moment is a few basics about these three properties.
### The _imports_ array
Angular modules are a way to consolidate features that belong together into discrete units.
Many features of Angular itself are organized as Angular modules.
NgModules are a way to consolidate features that belong together into discrete units.
Many features of Angular itself are organized as NgModules.
HTTP services are in the `HttpModule`. The router is in the `RouterModule`.
Eventually you may create a feature module.
@ -61,7 +61,7 @@ Other guide and cookbook pages will tell you when you need to add additional mod
The `import` statements at the top of the file and the Angular module's `imports` array
The `import` statements at the top of the file and the NgModule's `imports` array
are unrelated and have completely different jobs.
The _JavaScript_ `import` statements give you access to symbols _exported_ by other files
@ -70,8 +70,8 @@ You add `import` statements to almost every application file.
They have nothing to do with Angular and Angular knows nothing about them.
The _module's_ `imports` array appears _exclusively_ in the `@NgModule` metadata object.
It tells Angular about specific _other_ Angular modules &mdash; all of them classes decorated with `@NgModule` &mdash;
that the application needs to function properly.
It tells Angular about specific _other_ NgModules&mdash;all of them classes decorated
with `@NgModule`&mdash;that the application needs to function properly.
</div>
@ -178,11 +178,11 @@ This file is very stable. Once you've set it up, you may never change it again.
## More about Angular Modules
## More about NgModules
Your initial app has only a single module, the _root_ module.
As your app grows, you'll consider subdividing it into multiple "feature" modules,
some of which can be loaded later ("lazy loaded") if and when the user chooses
to visit those features.
When you're ready to explore these possibilities, visit the [Angular Modules (NgModule)](guide/ngmodule) guide.
When you're ready to explore these possibilities, visit the [NgModules](guide/ngmodule) guide.

2
aio/content/guide/change-log.md
View File

@ -199,7 +199,7 @@ The new "angular-in-memory-web-api" has new features.
## "Style Guide" with _NgModules_ (2016-09-27)
[StyleGuide](guide/styleguide) explains recommended conventions for Angular modules (NgModule).
[StyleGuide](guide/styleguide) explains recommended conventions for NgModules.
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.

4
aio/content/guide/forms.md
View File

@ -214,10 +214,10 @@ There are three changes:
1. You import `FormsModule` and the new `HeroFormComponent`.
1. You add the `FormsModule` to the list of `imports` defined in the `ngModule` decorator. This gives the application
1. You add the `FormsModule` to the list of `imports` defined in the `@NgModule` decorator. This gives the application
access to all of the template-driven forms features, including `ngModel`.
1. You add the `HeroFormComponent` to the list of `declarations` defined in the `ngModule` decorator. This makes
1. You add the `HeroFormComponent` to the list of `declarations` defined in the `@NgModule` decorator. This makes
the `HeroFormComponent` component visible throughout this module.

49
aio/content/guide/glossary.md
View File

@ -25,15 +25,8 @@ to a module factory, meaning you don't need to include the Angular compiler in y
Ahead-of-time compiled applications also benefit from decreased load time and increased performance.
## Angular module
Helps you organize an application into cohesive blocks of functionality.
An Angular module identifies the components, directives, and pipes that the application uses along with the list of external Angular modules that the application needs, such as `FormsModule`.
Every Angular application has an application root-module class. By convention, the class is
called `AppModule` and resides in a file named `app.module.ts`.
For details and examples, see the [Angular Modules (NgModule)](guide/ngmodule) page.
</div>
## Annotation
@ -115,7 +108,7 @@ The Angular [scoped packages](guide/glossary#scoped-package) each have a barrel
You can often achieve the same result using [Angular modules](guide/glossary#angular-module) instead.
You can often achieve the same result using [NgModules](guide/glossary#ngmodule) instead.
</div>
@ -132,7 +125,11 @@ between a "token"&mdash;also referred to as a "key"&mdash;and a dependency [prov
## Bootstrap
You launch an Angular application by "bootstrapping" it using the application root Angular module (`AppModule`).
<div class="l-sub-section">
You launch an Angular application by "bootstrapping" it using the application root NgModule (`AppModule`).
Bootstrapping identifies an application's top level "root" [component](guide/glossary#component),
which is the first component that is loaded for the application.
For more information, see the [Setup](guide/setup) page.
@ -475,8 +472,8 @@ Read more in the [Lifecycle Hooks](guide/lifecycle-hooks) page.
Angular has the following types of modules:
* [Angular modules](guide/glossary#angular-module).
For details and examples, see the [Angular Modules](guide/ngmodule) page.
* [NgModules](guide/glossary#ngmodule).
For details and examples, see the [NgModules](guide/ngmodule) page.
* ES2015 modules, as described in this section.
@ -493,7 +490,7 @@ In general, you assemble an application from many modules, both the ones you wri
A module *exports* something of value in that code, typically one thing such as a class;
a module that needs that class *imports* it.
The structure of Angular modules and the import/export syntax
The structure of NgModules and the import/export syntax
is based on the [ES2015 module standard](http://www.2ality.com/2014/09/es6-modules-final.html).
An application that adheres to this standard requires a module loader to
@ -511,6 +508,24 @@ You rarely access Angular feature modules directly. You usually import them from
{@a N}
## NgModule
<div class="l-sub-section">
Helps you organize an application into cohesive blocks of functionality.
An NgModule identifies the components, directives, and pipes that the application uses along with the list of external NgModules that the application needs, such as `FormsModule`.
Every Angular application has an application root-module class. By convention, the class is
called `AppModule` and resides in a file named `app.module.ts`.
For details and examples, see [NgModules](guide/ngmodule).
</div>
{@a O}
## Observable
@ -614,7 +629,9 @@ For more information, see the [Routing & Navigation](guide/router) page.
## Router module
A separate [Angular module](guide/glossary#angular-module) that provides the necessary service providers and directives for navigating through application views.
<div class="l-sub-section">
A separate [NgModule](guide/glossary#ngmodule) that provides the necessary service providers and directives for navigating through application views.
For more information, see the [Routing & Navigation](guide/router) page.
@ -633,7 +650,7 @@ For more information, see the [Routing & Navigation](guide/router) page.
A way to group related *npm* packages.
Read more at the [npm-scope](https://docs.npmjs.com/misc/scope) page.
Angular modules are delivered within *scoped packages* such as `@angular/core`,
NgModules are delivered within *scoped packages* such as `@angular/core`,
`@angular/common`, `@angular/platform-browser-dynamic`, `@angular/http`, and `@angular/router`.
Import a scoped package the same way that you import a normal package.
@ -795,4 +812,4 @@ asynchronous events by checking for data changes and updating
the information it displays via [data bindings](guide/glossary#data-binding).
Learn more about zones in this
[Brian Ford video](https://www.youtube.com/watch?v=3IqtmUscE_U).
[Brian Ford video](https://www.youtube.com/watch?v=3IqtmUscE_U).

2
aio/content/guide/ngmodule-faq.md
View File

@ -1327,7 +1327,7 @@ Here's an _NgModule_ class with imports, exports, and declarations.
Of course you use _JavaScript_ modules to write _Angular_ modules as seen in the complete `contact.module.ts` file:
Of course you use _JavaScript_ modules to write NgModules as seen in the complete `contact.module.ts` file:
<code-example path="ngmodule/src/app/contact/contact.module.2.ts" title="src/app/contact/contact.module.ts" linenums="false">

4
aio/content/guide/router.md
View File

@ -347,7 +347,7 @@ Here are the key `Router` terms and their meanings:
</td>
<td>
A separate Angular module that provides the necessary service providers
A separate NgModule that provides the necessary service providers
and directives for navigating through application views.
</td>
@ -3794,7 +3794,7 @@ Take the final step and detach the admin feature set from the main application.
The root `AppModule` must neither load nor reference the `AdminModule` or its files.
In `app.module.ts`, remove the `AdminModule` import statement from the top of the file
and remove the `AdminModule` from the Angular module's `imports` array.
and remove the `AdminModule` from the NgModule's `imports` array.
{@a can-load-guard}

16
aio/content/guide/styleguide.md
View File

@ -2129,12 +2129,12 @@ discourage the `I` prefix.
<a href="#toc">Back to top</a>
## Application structure and Angular modules
## Application structure and NgModules
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.
All of the app's code goes in a folder named `src`.
All feature areas are in their own folder, with their own Angular module.
All feature areas are in their own folder, with their own 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.
@ -2779,7 +2779,7 @@ and more difficult in a flat structure.
**Do** create an Angular module for each feature area.
**Do** create an NgModule for each feature area.
</div>
@ -2790,7 +2790,7 @@ and more difficult in a flat structure.
**Why?** Angular modules make it easy to lazy load routable features.
**Why?** NgModules make it easy to lazy load routable features.
</div>
@ -2801,7 +2801,7 @@ and more difficult in a flat structure.
**Why?** Angular modules make it easier to isolate, test, and re-use features.
**Why?** NgModules make it easier to isolate, test, and re-use features.
</div>
@ -2827,7 +2827,7 @@ and more difficult in a flat structure.
**Do** create an Angular module in the app's root folder,
**Do** create an NgModule in the app's root folder,
for example, in `/src/app`.
@ -2839,7 +2839,7 @@ for example, in `/src/app`.
**Why?** Every app requires at least one root Angular module.
**Why?** Every app requires at least one root NgModule.
</div>
@ -2888,7 +2888,7 @@ for example, in `/src/app`.
**Do** create an Angular module for all distinct features in an application;
**Do** create an NgModule for all distinct features in an application;
for example, a `Heroes` feature.

4
aio/content/guide/template-syntax.md
View File

@ -1155,7 +1155,7 @@ other HTML elements, attributes, properties, and components.
They are usually applied to elements as if they were HTML attributes, hence the name.
Many details are covered in the [_Attribute Directives_](guide/attribute-directives) guide.
Many Angular modules such as the [`RouterModule`](guide/router "Routing and Navigation")
Many NgMdules such as the [`RouterModule`](guide/router "Routing and Navigation")
and the [`FormsModule`](guide/forms "Forms") define their own attribute directives.
This section is an introduction to the most commonly used attribute directives:
@ -1260,7 +1260,7 @@ Two-way data binding with the `NgModel` directive makes that easy. Here's an exa
#### _FormsModule_ is required to use _ngModel_
Before using the `ngModel` directive in a two-way data binding,
you must import the `FormsModule` and add it to the Angular module's `imports` list.
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.

2
aio/content/guide/testing.md
View File

@ -427,7 +427,7 @@ and re-attach it to a dynamically-constructed Angular test module
tailored specifically for this battery of tests.
The `configureTestingModule` method takes an `@NgModule`-like metadata object.
The metadata object can have most of the properties of a normal [Angular module](guide/ngmodule).
The metadata object can have most of the properties of a normal [NgModule](guide/ngmodule).
_This metadata object_ simply declares the component to test, `BannerComponent`.
The metadata lack `imports` because (a) the default testing module configuration already has what `BannerComponent` needs

8
aio/content/guide/upgrade.md
View File

@ -62,7 +62,7 @@ There are a few rules in particular that will make it much easier to do
* The [Folders-by-Feature Structure](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#folders-by-feature-structure)
and [Modularity](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#modularity)
rules define similar principles on a higher level of abstraction: Different parts of the
application should reside in different directories and Angular modules.
application should reside in different directories and NgModules.
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
@ -382,12 +382,12 @@ that describes Angular assets in metadata. The differences blossom from there.
In a hybrid application you run both versions of Angular at the same time.
That means that you need at least one module each from both AngularJS and Angular.
You will import `UpgradeModule` inside the Angular module, and then use it for
You will import `UpgradeModule` inside the NgModule, and then use it for
bootstrapping the AngularJS module.
<div class="l-sub-section">
Learn more about Angular modules at the [NgModule guide](guide/ngmodule).
Read more about [NgModules](guide/ngmodule).
</div>
@ -485,7 +485,7 @@ Because `HeroDetailComponent` is an Angular component, you must also add it to t
And because this component is being used from the AngularJS module, and is an entry point into
the Angular application, you must add it to the `entryComponents` for the
Angular module.
NgModule.
<code-example path="upgrade-module/src/app/downgrade-static/app.module.ts" region="ngmodule" title="app.module.ts">
</code-example>

8
aio/content/tutorial/toh-pt3.md
View File

@ -249,7 +249,7 @@ Here's the complete `HeroDetailComponent`.
## Declare _HeroDetailComponent_ in the _AppModule_
Every component must be declared in one&mdash;and only one&mdash;Angular module.
Every component must be declared in one&mdash;and only one&mdash;NgModule.
Open `app.module.ts` in your editor and import the `HeroDetailComponent` so you can refer to it.
@ -276,7 +276,7 @@ This module declares only the two application components, `AppComponent` and `He
Read more about Angular modules in the [NgModules](guide/ngmodule "Angular Modules") guide.
Read more about NgModules in the [NgModules](guide/ngmodule "NgModules") guide.
</div>
@ -449,8 +449,8 @@ Here's what you achieved in this page:
* You created a reusable component.
* You learned how to make a component accept input.
* You learned to declare the required application directives in an Angular module. You
listed the directives in the `NgModule` decorator's `declarations` array.
* You learned to declare the required application directives in an NgModule. You
listed the directives in the `@NgModule` decorator's `declarations` array.
* You learned to bind a parent component to a child component.
Your app should look like this <live-example></live-example>.

2
aio/content/tutorial/toh-pt6.md
View File

@ -30,7 +30,7 @@ You can keep building the Tour of Heroes without pausing to recompile or refresh
## Providing HTTP Services
The `HttpModule` is not a core Angular module.
The `HttpModule` is not a core NgModule.
`HttpModule` is Angular's optional approach to web access. It exists as a separate add-on module called `@angular/http`
and is shipped in a separate script file as part of the Angular npm package.