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>
|
||
|
|
}
|