diff --git a/aio/content/examples/ngmodules/src/app/app.module.1.ts b/aio/content/examples/ngmodules/src/app/app.module.1.ts new file mode 100644 index 0000000000..f7c3597eea --- /dev/null +++ b/aio/content/examples/ngmodules/src/app/app.module.1.ts @@ -0,0 +1,14 @@ +// imports +import { BrowserModule } from '@angular/platform-browser'; +import { NgModule } from '@angular/core'; + +import { AppComponent } from './app.component'; + +// @NgModule decorator with its metadata +@NgModule({ + declarations: [AppComponent], + imports: [BrowserModule], + providers: [], + bootstrap: [AppComponent] +}) +export class AppModule {} diff --git a/aio/content/guide/ngmodules.md b/aio/content/guide/ngmodules.md index 2ac5651e04..80e04946ff 100644 --- a/aio/content/guide/ngmodules.md +++ b/aio/content/guide/ngmodules.md @@ -1,13 +1,5 @@ # NgModules -#### Prerequisites - -A basic understanding of the following concepts: -* [Bootstrapping](guide/bootstrapping). -* [JavaScript Modules vs. NgModules](guide/ngmodule-vs-jsmodule). - -
- **NgModules** configure the injector and the compiler and help organize related things together. An NgModule is a class marked by the `@NgModule` decorator. @@ -20,7 +12,6 @@ For an example app showcasing all the techniques that NgModules related pages cover, see the . For explanations on the individual techniques, visit the relevant NgModule pages under the NgModules section. - ## Angular modularity Modules are a great way to organize an application and extend it with capabilities from external libraries. @@ -57,12 +48,13 @@ You then import these modules into the root module. ## The basic NgModule -The [Angular CLI](cli) generates the following basic app module when creating a new app. +The [Angular CLI](cli) generates the following basic `AppModule` when creating a new app. - + + // @NgModule decorator with its metadata -At the top are the import statements. The next section is where you configure the `@NgModule` by stating what components and directives belong to it (`declarations`) as well as which other modules it uses (`imports`). This page builds on [Bootstrapping](guide/bootstrapping), which covers the structure of an NgModule in detail. If you need more information on the structure of an `@NgModule`, be sure to read [Bootstrapping](guide/bootstrapping). +At the top are the import statements. The next section is where you configure the `@NgModule` by stating what components and directives belong to it (`declarations`) as well as which other modules it uses (`imports`). For more information on the structure of an `@NgModule`, be sure to read [Bootstrapping](guide/bootstrapping).