From bc1e22922aea263109404042316d63ac53b6935c Mon Sep 17 00:00:00 2001 From: Trotyl Date: Sat, 13 Jan 2018 16:47:27 +0800 Subject: [PATCH] docs(aio): several fix for ngmodule guides (#21517) PR Close #21517 --- aio/content/guide/entry-components.md | 2 +- aio/content/guide/feature-modules.md | 2 +- aio/content/guide/ngmodule-vs-jsmodule.md | 4 ++-- aio/content/guide/ngmodules.md | 2 +- aio/content/guide/providers.md | 6 +++--- 5 files changed, 8 insertions(+), 8 deletions(-) diff --git a/aio/content/guide/entry-components.md b/aio/content/guide/entry-components.md index 050a349fee..d57654218d 100644 --- a/aio/content/guide/entry-components.md +++ b/aio/content/guide/entry-components.md @@ -97,7 +97,7 @@ In fact, many libraries declare and export components you'll never use. For example, a material design library will export all components because it doesn’t know which ones you will use. However, it is unlikely that you will use them all. For the ones you don't reference, the tree shaker drops these components from the final code package. -If a component isn't an _entry component_ or isn't found in a template, +If a component isn't an _entry component_ and isn't found in a template, the tree shaker will throw it away. So, it's best to add only the components that are truly entry components to help keep your app as trim as possible. diff --git a/aio/content/guide/feature-modules.md b/aio/content/guide/feature-modules.md index 97d4e7fa51..047a453de5 100644 --- a/aio/content/guide/feature-modules.md +++ b/aio/content/guide/feature-modules.md @@ -98,7 +98,7 @@ When the CLI generated the `CustomerDashboardComponent` for the feature module, -To see this HTML in the `AppComponent`, you first have to export the `CustomerDashboardComponent` in the `CustomerDashboardModule`. In `customer-dashboard.module.ts`, just beneath the declarations array, add an exports array containing `CustomerDashboardModule`: +To see this HTML in the `AppComponent`, you first have to export the `CustomerDashboardComponent` in the `CustomerDashboardModule`. In `customer-dashboard.module.ts`, just beneath the `declarations` array, add an `exports` array containing `CustomerDashboardModule`: diff --git a/aio/content/guide/ngmodule-vs-jsmodule.md b/aio/content/guide/ngmodule-vs-jsmodule.md index 0caafac5fb..601af85b59 100644 --- a/aio/content/guide/ngmodule-vs-jsmodule.md +++ b/aio/content/guide/ngmodule-vs-jsmodule.md @@ -27,7 +27,7 @@ JavaScript modules help you namespace, preventing accidental global variables. ## NgModules -NgModules are classes decorated with `@NgModule`. The `@NgModule` decorator’s `imports` array tells Angular what other NgModules the current module needs. The modules in the imports array are different than JavaScript modules because they are NgModules rather than regular JavaScript modules. Classes with an `@NgModule` decorator are by convention kept in their own files, but what makes them an `NgModule` isn’t being in their own file, like JavaScript modules; it’s the presence of `@NgModule` and its metadata. +NgModules are classes decorated with `@NgModule`. The `@NgModule` decorator’s `imports` array tells Angular what other NgModules the current module needs. The modules in the `imports` array are different than JavaScript modules because they are NgModules rather than regular JavaScript modules. Classes with an `@NgModule` decorator are by convention kept in their own files, but what makes them an `NgModule` isn’t being in their own file, like JavaScript modules; it’s the presence of `@NgModule` and its metadata. The `AppModule` generated from the Angular CLI demonstrates both kinds of modules in action: @@ -53,7 +53,7 @@ export class AppModule { } ``` -The NgModule classes differ from JavaScript module classes in the following key ways: +The NgModule classes differ from JavaScript module in the following key ways: * 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). diff --git a/aio/content/guide/ngmodules.md b/aio/content/guide/ngmodules.md index f68b685012..b3f136a340 100644 --- a/aio/content/guide/ngmodules.md +++ b/aio/content/guide/ngmodules.md @@ -45,7 +45,7 @@ NgModule metadata does the following: * Declares which components, directives, and pipes belong to the module. * Makes some of those components, directives, and pipes public so that other module's component templates can use them. * Imports other modules with the components, directives, and pipes that components in the current module need. -* Provides services at the other application components can use. +* Provides services that the other application components can use. Every Angular app has at least one module, the root module. You [bootstrap](guide/bootstrapping) that module to launch the application. diff --git a/aio/content/guide/providers.md b/aio/content/guide/providers.md index c06b2f90da..10ebcc7940 100644 --- a/aio/content/guide/providers.md +++ b/aio/content/guide/providers.md @@ -10,7 +10,7 @@ see the .
## Create a service -You can provide services to your app by using the providers array in an NgModule. +You can provide services to your app by using the `providers` array in an NgModule. Consider the default app generated by the CLI. In order to add a user service to it, you can generate one by entering the following command in the terminal window: @@ -20,7 +20,7 @@ ng generate service User This creates a service called `UserService`. You now need to make the service available in your app's injector. Update `app.module.ts` by importing it with your other import statements at the top -of the file and adding it to the providers array: +of the file and adding it to the `providers` array: @@ -28,7 +28,7 @@ of the file and adding it to the providers array: ## Provider scope -When you add a service provider to the providers array of the root module, it’s available throughout the app. Additionally, when you import a module that has providers, those providers are also available to all the classes in the app as long they have the lookup token. For example, if you import the `HttpClientModule` into your `AppModule`, its providers are then available to the entire app and you can make HTTP requests from anywhere in your app. +When you add a service provider to the `providers` array of the root module, it’s available throughout the app. Additionally, when you import a module that has providers, those providers are also available to all the classes in the app as long they have the lookup token. For example, if you import the `HttpClientModule` into your `AppModule`, its providers are then available to the entire app and you can make HTTP requests from anywhere in your app. ## Limiting provider scope by lazy loading modules