5 lines
12 KiB
JSON
5 lines
12 KiB
JSON
{
|
||
"id": "guide/feature-modules",
|
||
"title": "Feature modules",
|
||
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/feature-modules.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n</div>\n\n\n<div class=\"content\">\n <h1 id=\"feature-modules\">Feature modules<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/feature-modules#feature-modules\"><i class=\"material-icons\">link</i></a></h1>\n<p>Feature modules are NgModules for the purpose of organizing code.</p>\n<p>For the final sample app with a feature module that this page describes,\nsee the <live-example></live-example>.</p>\n<hr>\n<p>As your app grows, you can organize code relevant for a specific feature.\nThis helps apply clear boundaries for features. With feature modules,\nyou can keep code related to a specific functionality or feature\nseparate from other code. Delineating areas of your\napp helps with collaboration between developers and teams, separating\ndirectives, and managing the size of the root module.</p>\n<h2 id=\"feature-modules-vs-root-modules\">Feature modules vs. root modules<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/feature-modules#feature-modules-vs-root-modules\"><i class=\"material-icons\">link</i></a></h2>\n<p>A feature module is an organizational best practice, as opposed to a concept of the core Angular API. A feature module delivers a cohesive set of functionality focused on a\nspecific application need such as a user workflow, routing, or forms.\nWhile you can do everything within the root module, feature modules\nhelp you partition the app into focused areas. A feature module\ncollaborates with the root module and with other modules through\nthe services it provides and the components, directives, and\npipes that it shares.</p>\n<h2 id=\"how-to-make-a-feature-module\">How to make a feature module<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/feature-modules#how-to-make-a-feature-module\"><i class=\"material-icons\">link</i></a></h2>\n<p>Assuming you already have an app that you created with the <a href=\"cli\">Angular CLI</a>, create a feature\nmodule using the CLI by entering the following command in the\nroot project directory. Replace <code>CustomerDashboard</code> with the\nname of your module. You can omit the \"Module\" suffix from the name because the CLI appends it:</p>\n<code-example language=\"sh\">\nng generate module CustomerDashboard\n</code-example>\n<p>This causes the CLI to create a folder called <code>customer-dashboard</code> with a file inside called <code>customer-dashboard.module.ts</code> with the following contents:</p>\n<code-example language=\"typescript\">\nimport { <a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a> } from '@angular/core';\nimport { <a href=\"api/common/CommonModule\" class=\"code-anchor\">CommonModule</a> } from '@angular/common';\n\n@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a>({\n imports: [\n <a href=\"api/common/CommonModule\" class=\"code-anchor\">CommonModule</a>\n ],\n declarations: []\n})\nexport class CustomerDashboardModule { }\n</code-example>\n<p>The structure of an NgModule is the same whether it is a root module or a feature module. In the CLI generated feature module, there are two JavaScript import statements at the top of the file: the first imports <code><a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code>, which, like the root module, lets you use the <code>@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code> decorator; the second imports <code><a href=\"api/common/CommonModule\" class=\"code-anchor\">CommonModule</a></code>, which contributes many common directives such as <code><a href=\"api/common/NgIf\" class=\"code-anchor\">ngIf</a></code> and <code><a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a></code>. Feature modules import <code><a href=\"api/common/CommonModule\" class=\"code-anchor\">CommonModule</a></code> instead of <code><a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a></code>, which is only imported once in the root module. <code><a href=\"api/common/CommonModule\" class=\"code-anchor\">CommonModule</a></code> only contains information for common directives such as <code><a href=\"api/common/NgIf\" class=\"code-anchor\">ngIf</a></code> and <code><a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a></code> which are needed in most templates, whereas <code><a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a></code> configures the Angular app for the browser which needs to be done only once.</p>\n<p>The <code>declarations</code> array is available for you to add declarables, which\nare components, directives, and pipes that belong exclusively to this particular module. To add a component, enter the following command at the command line where <code>customer-dashboard</code> is the directory where the CLI generated the feature module and <code>CustomerDashboard</code> is the name of the component:</p>\n<code-example language=\"sh\">\nng generate component customer-dashboard/CustomerDashboard\n</code-example>\n<p>This generates a folder for the new component within the customer-dashboard folder and updates the feature module with the <code>CustomerDashboardComponent</code> info:</p>\n<code-example path=\"feature-modules/src/app/customer-dashboard/customer-dashboard.module.ts\" region=\"customer-dashboard-component\" header=\"src/app/customer-dashboard/customer-dashboard.module.ts\">\n// import the new component\nimport { CustomerDashboardComponent } from './customer-dashboard/customer-dashboard.component';\n\n@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a>({\n imports: [\n <a href=\"api/common/CommonModule\" class=\"code-anchor\">CommonModule</a>\n ],\n declarations: [\n CustomerDashboardComponent\n ],\n})\n\n\n</code-example>\n<p>The <code>CustomerDashboardComponent</code> is now in the JavaScript import list at the top and added to the <code>declarations</code> array, which lets Angular know to associate this new component with this feature module.</p>\n<h2 id=\"importing-a-feature-module\">Importing a feature module<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/feature-modules#importing-a-feature-module\"><i class=\"material-icons\">link</i></a></h2>\n<p>To incorporate the feature module into your app, you have to let the root module, <code>app.module.ts</code>, know about it. Notice the <code>CustomerDashboardModule</code> export at the bottom of <code>customer-dashboard.module.ts</code>. This exposes it so that other modules can get to it. To import it into the <code>AppModule</code>, add it to the imports in <code>app.module.ts</code> and to the <code>imports</code> array:</p>\n<code-example path=\"feature-modules/src/app/app.module.ts\" region=\"app-module\" header=\"src/app/app.module.ts\">\nimport { <a href=\"api/common/http/HttpClientModule\" class=\"code-anchor\">HttpClientModule</a> } from '@angular/common/<a href=\"api/common/http\" class=\"code-anchor\">http</a>';\nimport { <a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a> } from '@angular/core';\nimport { <a href=\"api/forms/FormsModule\" class=\"code-anchor\">FormsModule</a> } from '@angular/forms';\nimport { <a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a> } from '@angular/platform-browser';\n\nimport { AppComponent } from './app.component';\n// import the feature module here so you can add it to the imports array below\nimport { CustomerDashboardModule } from './customer-dashboard/customer-dashboard.module';\n\n@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a>({\n declarations: [\n AppComponent\n ],\n imports: [\n <a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a>,\n <a href=\"api/forms/FormsModule\" class=\"code-anchor\">FormsModule</a>,\n <a href=\"api/common/http/HttpClientModule\" class=\"code-anchor\">HttpClientModule</a>,\n CustomerDashboardModule // add the feature module here\n ],\n providers: [],\n bootstrap: [AppComponent]\n})\nexport class AppModule { }\n\n</code-example>\n<p>Now the <code>AppModule</code> knows about the feature module. If you were to add any service providers to the feature module, <code>AppModule</code> would know about those too, as would any other feature modules. However, NgModules don’t expose their components by default.</p>\n<h2 id=\"rendering-a-feature-modules-component-template\">Rendering a feature module’s component template<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/feature-modules#rendering-a-feature-modules-component-template\"><i class=\"material-icons\">link</i></a></h2>\n<p>When the CLI generated the <code>CustomerDashboardComponent</code> for the feature module, it included a template, <code>customer-dashboard.component.html</code>, with the following markup:</p>\n<code-example path=\"feature-modules/src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.html\" region=\"feature-template\" header=\"src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.html\">\n<p>\n customer-dashboard works!\n</p>\n\n</code-example>\n<p>To see this HTML in the <code>AppComponent</code>, you first have to export the <code>CustomerDashboardComponent</code> in the <code>CustomerDashboardModule</code>. In <code>customer-dashboard.module.ts</code>, just beneath the <code>declarations</code> array, add an <code>exports</code> array containing <code>CustomerDashboardComponent</code>:</p>\n<code-example path=\"feature-modules/src/app/customer-dashboard/customer-dashboard.module.ts\" region=\"component-exports\" header=\"src/app/customer-dashboard/customer-dashboard.module.ts\">\nexports: [\n CustomerDashboardComponent\n]\n\n</code-example>\n<p>Next, in the <code>AppComponent</code>, <code>app.component.html</code>, add the tag <code><app-customer-dashboard></code>:</p>\n<code-example path=\"feature-modules/src/app/app.component.html\" region=\"app-component-template\" header=\"src/app/app.component.html\">\n<h1>\n {{title}}\n</h1>\n\n<!-- add the selector from the CustomerDashboardComponent -->\n<app-customer-dashboard></app-customer-dashboard>\n\n</code-example>\n<p>Now, in addition to the title that renders by default, the <code>CustomerDashboardComponent</code> template renders too:</p>\n<div class=\"lightbox\">\n <img src=\"generated/images/guide/feature-modules/feature-module.png\" alt=\"feature module component\" width=\"594\" height=\"408\">\n</div>\n<h2 id=\"more-on-ngmodules\">More on NgModules<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/feature-modules#more-on-ngmodules\"><i class=\"material-icons\">link</i></a></h2>\n<p>You may also be interested in the following:</p>\n<ul>\n<li><a href=\"guide/lazy-loading-ngmodules\">Lazy Loading Modules with the Angular Router</a>.</li>\n<li><a href=\"guide/providers\">Providers</a>.</li>\n<li><a href=\"guide/module-types\">Types of Feature Modules</a>.</li>\n</ul>\n\n \n</div>\n\n<!-- links to this doc:\n - guide/example-apps-list\n - guide/ngmodule-api\n - guide/ngmodule-faq\n - guide/ngmodules\n - guide/testing-components-scenarios\n-->\n<!-- links from this doc:\n - api/common/CommonModule\n - api/common/NgForOf\n - api/common/NgIf\n - api/common/http\n - api/common/http/HttpClientModule\n - api/core/NgModule\n - api/forms/FormsModule\n - api/platform-browser/BrowserModule\n - cli\n - guide/feature-modules#feature-modules\n - guide/feature-modules#feature-modules-vs-root-modules\n - guide/feature-modules#how-to-make-a-feature-module\n - guide/feature-modules#importing-a-feature-module\n - guide/feature-modules#more-on-ngmodules\n - guide/feature-modules#rendering-a-feature-modules-component-template\n - guide/lazy-loading-ngmodules\n - guide/module-types\n - guide/providers\n - https://github.com/angular/angular/edit/master/aio/content/guide/feature-modules.md?message=docs%3A%20describe%20your%20change...\n-->"
|
||
} |