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 has its own injector which\nis typically a child of the application root injector.</p>\n<p> Lazy-loaded services are scoped to the lazy module's injector.\nIf a lazy-loaded module also provides the <code>UserService</code>,\nany component created within that module's context (such as by router navigation)\ngets the local instance of the service, not the instance in the root application injector.</p>\n<p> Components in external modules continue to receive the instance provided by their injectors.</p>\n<p> For more information on injector hierarchy and scoping, see <a href=\"guide/providers\">Providers</a> and the <a href=\"guide/dependency-injection\">DI Guide</a>.</p>\n </td>\n </tr>\n <tr>\n <td style=\"vertical-align: top\">\n <code>imports</code>\n </td>\n <td>\n<p> A list of modules which should be folded into this module. Folded means it is\nas if all the imported NgModule's exported properties were declared here.</p>\n<p> Specifically, it is as if the list of modules whose exported components, directives, or pipes\nare referenced by the component templates were declared in this module.</p>\n<p> A component template can <a href=\"guide/ngmodule-faq#q-template-reference\">reference</a> another component, directive, or pipe\nwhen the reference is declared in this module or if the imported module has exported it.\nFor example, a component can use the <code><a href=\"api/common/NgIf\" class=\"code-anchor\">NgIf</a></code> and <code>NgFor</code> directives only if the\nmodule has imported the Angular <code><a href=\"api/common/CommonModule\" class=\"code-anchor\">CommonModule</a></code> (perhaps indirectly by importing <code><a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a></code>).</p>\n<p> You can import many standard directives from the <code><a href=\"api/common/CommonModule\" class=\"code-anchor\">CommonModule</a></code>\nbut some familiar directives belong to other modules.\nFor example, you can use <code>[(<a href=\"api/forms/NgModel\" class=\"code-anchor\">ngModel</a>)]</code> only\nafter importing the Angular <code><a href=\"api/forms/FormsModule\" class=\"code-anchor\">FormsModule</a></code>.</p>\n </td>\n </tr>\n <tr>\n <td style=\"vertical-align: top\">\n <code>exports</code>\n </td>\n <td>\n<p> A list of declarations—<em>component</em>, <em>directive</em>, and <em>pipe</em> classes—that\nan importing module can use.</p>\n<p> Exported declarations are the module's <em>public API</em>.\nA component in another module can <a href=\"guide/ngmodule-faq#q-template-reference\">use</a> <em>this</em>\nmodule's <code>UserComponent</code> if it imports this module and this module exports <code>UserComponent</code>.</p>\n<p> Declarations are private by default.\nIf this module does <em>not</em> export <code>UserComponent</code>, then only the components within <em>this</em>\nmodule can use <code>UserComponent</code>.</p>\n<p> Importing a module does <em>not</em> automatically re-export the imported module's imports.\nModule 'B' can't use <code><a href=\"api/common/NgIf\" class=\"code-anchor\">ngIf</a></code> just because it imported module 'A' which imported <code><a href=\"api/common/CommonModule\" class=\"code-anchor\">CommonModule</a></code>.\nModule 'B' must import <code><a href=\"api/common/CommonModule\" class=\"code-anchor\">CommonModule</a></code> itself.</p>\n<p> A module can list another module among its <code>exports</code>, in which case\nall of that module's public components, directives, and pipes are exported.</p>\n<p> <a href=\"guide/ngmodule-faq#q-reexport\">Re-export</a> makes module transitivity explicit.\nIf Module 'A' re-exports <code><a href=\"api/common/CommonModule\" class=\"code-anchor\">CommonModule</a></code> and Module 'B' imports Module 'A',\nModule 'B' components can use <code><a href=\"api/common/NgIf\" class=\"code-anchor\">ngIf</a></code> even though 'B' itself didn't import <code><a href=\"api/common/CommonModule\" class=\"code-anchor\">CommonModule</a></code>.</p>\n </td>\n </tr>\n <tr>\n <td style=\"vertical-align: top\">\n <code>bootstrap</code>\n </td>\n <td>\n<p> A list of components that are automatically bootstrapped.</p>\n<p> Usually there's only one component in this list, the <em>root component</em> of the application.</p>\n<p> Angular can launch with multiple bootstrap components,\neach with its own location in the host web page.</p>\n<p> A bootstrap component is automatically added to <code>entryComponents</code>.</p>\n </td>\n </tr>\n <tr>\n <td style=\"vertical-align: top\">\n <code>entryComponents</code>\n </td>\n <td>\n<p> A list of components that can be dynamically loaded into the view.</p>\n<p> By default, an Angular app always has at least one entry component, the root component, <code>AppComponent</code>. Its purpose is to serve as a point of entry into the app, that is, you bootstrap it to launch the app.</p>\n<p> Routed components are also <em>entry components</em> because they need to be loaded dynamically.\nThe router creates them and drops them into the DOM near a <code><<a href=\"api/router/RouterOutlet\" class=\"code-anchor\">router-outlet</a>></code>.</p>\n<p> While the bootstrapped and routed components are <em>entry components</em>,\nyou don't have to add them to a module's <code>entryComponents</code> list,\nas they are added implicitly.</p>\n<p> Angular automatically adds components in the module's <code>bootstrap</code> and route definitions into the <code>entryComponents</code> list.</p>\n<p> That leaves only components bootstrapped using one of the imperative techniques, such as <a href=\"api/core/ViewContainerRef#createComponent\"><code>ViewComponentRef.createComponent()</code></a> as undiscoverable.</p>\n<p> Dynamic component loading is not common in most apps beyond the router. If you need to dynamically load components, you must add these components to the <code>entryComponents</code> list yourself.</p>\n<p> For more information, see <a href=\"guide/entry-components\">Entry Components</a>.</p>\n </td>\n </tr>\n</tbody></table>\n<h2 id=\"more-on-ngmodules\">More on NgModules<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ngmodule-api#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/feature-modules\">Feature Modules</a>.</li>\n<li><a href=\"guide/entry-components\">Entry Components</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/module-types\n - guide/ngmodule-vs-jsmodule\n-->\n<!-- links from this doc:\n - api/common/CommonModule\n - api/common/NgIf\n - api/core/NgModule\n - api/core/ViewContainerRef#createComponent\n - api/forms/FormsModule\n - api/forms/NgModel\n - api/platform-browser/BrowserModule\n - api/router/RouterOutlet\n - guide/dependency-injection\n - guide/entry-components\n - guide/feature-modules\n - guide/module-types\n - guide/ngmodule-api#more-on-ngmodules\n - guide/ngmodule-api#ngmodule-api\n - guide/ngmodule-api#ngmodule-metadata\n - guide/ngmodule-faq#q-declarable\n - guide/ngmodule-faq#q-reexport\n - guide/ngmodule-faq#q-template-reference\n - guide/providers\n - https://github.com/angular/angular/edit/master/aio/content/guide/ngmodule-api.md?message=docs%3A%20describe%20your%20change...\n-->"
|
|
} |