5 lines
12 KiB
JSON
5 lines
12 KiB
JSON
|
{
|
||
|
|
"id": "guide/ngmodule-api",
|
||
|
|
"title": "NgModule API",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/ngmodule-api.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=\"ngmodule-api\">NgModule API<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ngmodule-api#ngmodule-api\"><i class=\"material-icons\">link</i></a></h1>\n<p>At a high level, NgModules are a way to organize Angular apps\nand they accomplish this through the metadata in the <code>@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code>\ndecorator.\nThe metadata falls into three categories:</p>\n<ul>\n<li><strong>Static:</strong> Compiler configuration which tells the compiler about directive selectors and where in templates the directives should be applied through selector matching. This is configured via the <code>declarations</code> array.</li>\n<li><strong>Runtime:</strong> Injector configuration via the <code>providers</code> array.</li>\n<li><strong>Composability/Grouping:</strong> Bringing NgModules together and making them available via the <code>imports</code> and <code>exports</code> arrays.</li>\n</ul>\n<code-example language=\"typescript\">\n@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a>({\n // Static, that is compiler configuration\n declarations: [], // Configure the selectors\n entryComponents: [], // Generate the host factory\n\n // Runtime, or injector configuration\n providers: [], // Runtime injector configuration\n\n // Composability / Grouping\n imports: [], // composing NgModules together\n exports: [] // making NgModules available to other parts of the app\n})\n</code-example>\n<h2 id=\"ngmodule-metadata\"><code>@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code> metadata<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ngmodule-api#ngmodule-metadata\"><i class=\"material-icons\">link</i></a></h2>\n<p>The following table summarizes the <code>@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code> metadata properties.</p>\n<table>\n <tbody><tr>\n <th>\n Property\n </th>\n <th>\n Description\n </th>\n </tr>\n <tr>\n <td style=\"vertical-align: top\">\n <code>declarations</code>\n </td>\n <td>\n<p> A list of <a href=\"guide/ngmodule-faq#q-declarable\">declarable</a> classes,\n(<em>components</em>, <em>directives</em>, and <em>pipes</em>) that <em>belong to this module</em>.</p>\n <ol>\n <li>When compiling a template, you need to determine a set of selectors which should be used for triggering their corresponding directives.</li>\n <li>\n The template is compiled within the context of an NgModule—the NgModule within which the template's component is declared—which determines the set of selectors using the following rules:\n <ul>\n <li>All selectors of directives listed in `declarations`.</li>\n <li>All selectors of directives exported from imported NgModules.</li>\n </ul>\n </li>\n </ol>\n<p> Components, directives, and pipes must belong to <em>exactly</em> one module.\nThe compiler emits an error if you try to declare the same class in more than one module. Be careful not to re-declare a class that is imported\ndirectly or indirectly from another module.</p>\n </td>\n </tr>\n <tr>\n <td style=\"vertical-align: top\">\n <code>providers</code>\n </td>\n <td>\n<p> A list of dependency-injection providers.</p>\n<p> Angular registers these providers with the NgModule's injector.\nIf it is the NgModule used for bootstrapping then it is the root injector.</p>\n<p> These services become available for injection into any component, directive, pipe or service which is a child of this injector.</p>\n<p> A lazy-loaded module
|
||
|
|
}
|