diff --git a/aio/content/examples/ngmodule/src/app/title.component.ts b/aio/content/examples/ngmodule/src/app/title.component.ts index 9a2ef1c4b8..05bbb64aae 100644 --- a/aio/content/examples/ngmodule/src/app/title.component.ts +++ b/aio/content/examples/ngmodule/src/app/title.component.ts @@ -12,7 +12,7 @@ import { UserService } from './user.service'; }) export class TitleComponent { @Input() subtitle = ''; - title = 'Angular Modules'; + title = 'NgModules'; // #enddocregion v1 user = ''; diff --git a/aio/content/examples/reactive-forms/src/app/app.module.ts b/aio/content/examples/reactive-forms/src/app/app.module.ts index b9f2ea8f99..a965cece94 100644 --- a/aio/content/examples/reactive-forms/src/app/app.module.ts +++ b/aio/content/examples/reactive-forms/src/app/app.module.ts @@ -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, diff --git a/aio/content/guide/ajs-quick-reference.md b/aio/content/guide/ajs-quick-reference.md index cadf85d190..83d0644c7b 100644 --- a/aio/content/guide/ajs-quick-reference.md +++ b/aio/content/guide/ajs-quick-reference.md @@ -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. - ### Angular modules + ### NgModules - 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). diff --git a/aio/content/guide/aot-compiler.md b/aio/content/guide/aot-compiler.md index b05ee568e9..b48baf59b6 100644 --- a/aio/content/guide/aot-compiler.md +++ b/aio/content/guide/aot-compiler.md @@ -568,7 +568,7 @@ Run the following command to generate the map. 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_. diff --git a/aio/content/guide/architecture.md b/aio/content/guide/architecture.md index 81a3bc1df9..5220661eb5 100644 --- a/aio/content/guide/architecture.md +++ b/aio/content/guide/architecture.md @@ -31,21 +31,21 @@ You'll learn the details in the pages that follow. For now, focus on the big pic Component -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.
-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.
@@ -87,12 +87,12 @@ During development you're likely to bootstrap the `AppModule` in a `main.ts` fil -### Angular modules vs. JavaScript modules +### NgModules vs. JavaScript modules -The Angular module — a class decorated with `@NgModule` — is a fundamental feature of Angular. +The NgModule — a class decorated with `@NgModule` — 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 -You also import Angular _modules_ from Angular _libraries_ using JavaScript import statements: +You also import NgModules_ from Angular _libraries_ using JavaScript import statements: @@ -139,7 +139,7 @@ Hang in there. The confusion yields to clarity with time and experience.
- Learn more from the [Angular modules](guide/ngmodule) page. + Learn more from the [NgModules](guide/ngmodule) page.
diff --git a/aio/content/guide/bootstrapping.md b/aio/content/guide/bootstrapping.md index 9769cba8b1..edcf5a2770 100644 --- a/aio/content/guide/bootstrapping.md +++ b/aio/content/guide/bootstrapping.md @@ -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_** — the `BrowserModule` that this and every application needs to run in a browser. * **_declarations_** — the application's lone component, which is also ... * **_bootstrap_** — 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 — all of them classes decorated with `@NgModule` — -that the application needs to function properly. +It tells Angular about specific _other_ NgModules—all of them classes decorated +with `@NgModule`—that the application needs to function properly.
@@ -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. diff --git a/aio/content/guide/change-log.md b/aio/content/guide/change-log.md index 9b0fe605f6..260abc67c8 100644 --- a/aio/content/guide/change-log.md +++ b/aio/content/guide/change-log.md @@ -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. diff --git a/aio/content/guide/forms.md b/aio/content/guide/forms.md index ea35f5ff44..81db1c1294 100644 --- a/aio/content/guide/forms.md +++ b/aio/content/guide/forms.md @@ -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. diff --git a/aio/content/guide/glossary.md b/aio/content/guide/glossary.md index a079dcdc87..c71c2c3237 100644 --- a/aio/content/guide/glossary.md +++ b/aio/content/guide/glossary.md @@ -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. + ## 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. @@ -132,7 +125,11 @@ between a "token"—also referred to as a "key"—and a dependency [prov ## Bootstrap -You launch an Angular application by "bootstrapping" it using the application root Angular module (`AppModule`). + +
+ +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 + +
+ + + +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). + + +
+ {@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. +
+ +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). \ No newline at end of file +[Brian Ford video](https://www.youtube.com/watch?v=3IqtmUscE_U). diff --git a/aio/content/guide/ngmodule-faq.md b/aio/content/guide/ngmodule-faq.md index c1d939071b..b77081c591 100644 --- a/aio/content/guide/ngmodule-faq.md +++ b/aio/content/guide/ngmodule-faq.md @@ -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: diff --git a/aio/content/guide/router.md b/aio/content/guide/router.md index 6e8e71d2a5..fa124bfb5e 100644 --- a/aio/content/guide/router.md +++ b/aio/content/guide/router.md @@ -347,7 +347,7 @@ Here are the key `Router` terms and their meanings: - 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. @@ -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} diff --git a/aio/content/guide/styleguide.md b/aio/content/guide/styleguide.md index a605e2db76..7c99853016 100644 --- a/aio/content/guide/styleguide.md +++ b/aio/content/guide/styleguide.md @@ -2129,12 +2129,12 @@ discourage the `I` prefix. Back to top -## 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.
@@ -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.
@@ -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. @@ -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. @@ -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. diff --git a/aio/content/guide/template-syntax.md b/aio/content/guide/template-syntax.md index 4d0c118838..c0c3933ec2 100644 --- a/aio/content/guide/template-syntax.md +++ b/aio/content/guide/template-syntax.md @@ -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. diff --git a/aio/content/guide/testing.md b/aio/content/guide/testing.md index c4379332c5..d72163e719 100644 --- a/aio/content/guide/testing.md +++ b/aio/content/guide/testing.md @@ -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 diff --git a/aio/content/guide/upgrade.md b/aio/content/guide/upgrade.md index 66a26ad864..433e1f13b4 100644 --- a/aio/content/guide/upgrade.md +++ b/aio/content/guide/upgrade.md @@ -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.
-Learn more about Angular modules at the [NgModule guide](guide/ngmodule). +Read more about [NgModules](guide/ngmodule).
@@ -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. diff --git a/aio/content/tutorial/toh-pt3.md b/aio/content/tutorial/toh-pt3.md index 24d3b3cb44..de278a8508 100644 --- a/aio/content/tutorial/toh-pt3.md +++ b/aio/content/tutorial/toh-pt3.md @@ -249,7 +249,7 @@ Here's the complete `HeroDetailComponent`. ## Declare _HeroDetailComponent_ in the _AppModule_ -Every component must be declared in one—and only one—Angular module. +Every component must be declared in one—and only one—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. @@ -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 . diff --git a/aio/content/tutorial/toh-pt6.md b/aio/content/tutorial/toh-pt6.md index 3cf1b20bb0..8ef749d32f 100644 --- a/aio/content/tutorial/toh-pt6.md +++ b/aio/content/tutorial/toh-pt6.md @@ -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.