parent
cf8d512e43
commit
bc1e22922a
|
@ -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 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.
|
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
|
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.
|
as trim as possible.
|
||||||
|
|
||||||
|
|
|
@ -98,7 +98,7 @@ When the CLI generated the `CustomerDashboardComponent` for the feature module,
|
||||||
</code-example>
|
</code-example>
|
||||||
|
|
||||||
|
|
||||||
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`:
|
||||||
|
|
||||||
<code-example path="feature-modules/src/app/customer-dashboard/customer-dashboard.module.ts" region="component-exports" title="src/app/customer-dashboard/customer-dashboard.module.ts" linenums="false">
|
<code-example path="feature-modules/src/app/customer-dashboard/customer-dashboard.module.ts" region="component-exports" title="src/app/customer-dashboard/customer-dashboard.module.ts" linenums="false">
|
||||||
</code-example>
|
</code-example>
|
||||||
|
|
|
@ -27,7 +27,7 @@ JavaScript modules help you namespace, preventing accidental global variables.
|
||||||
## NgModules
|
## NgModules
|
||||||
|
|
||||||
<!-- KW-- perMisko: let's discuss. This does not answer the question why it is different. Also, last sentence is confusing.-->
|
<!-- KW-- perMisko: let's discuss. This does not answer the question why it is different. Also, last sentence is confusing.-->
|
||||||
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:
|
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.
|
* 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).
|
Declarables are the only classes that matter to the [Angular compiler](guide/ngmodule-faq#q-angular-compiler).
|
||||||
|
|
|
@ -45,7 +45,7 @@ NgModule metadata does the following:
|
||||||
* Declares which components, directives, and pipes belong to the module.
|
* 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.
|
* 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.
|
* 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.
|
Every Angular app has at least one module, the root module.
|
||||||
You [bootstrap](guide/bootstrapping) that module to launch the application.
|
You [bootstrap](guide/bootstrapping) that module to launch the application.
|
||||||
|
|
|
@ -10,7 +10,7 @@ see the <live-example></live-example>.
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
## Create a service
|
## 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,
|
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:
|
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
|
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
|
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:
|
||||||
|
|
||||||
<code-example path="providers/src/app/app.module.ts" title="src/app/app.module.ts" linenums="false">
|
<code-example path="providers/src/app/app.module.ts" title="src/app/app.module.ts" linenums="false">
|
||||||
</code-example>
|
</code-example>
|
||||||
|
@ -28,7 +28,7 @@ of the file and adding it to the providers array:
|
||||||
|
|
||||||
## Provider scope
|
## 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
|
## Limiting provider scope by lazy loading modules
|
||||||
|
|
Loading…
Reference in New Issue