5 lines
7.1 KiB
JSON
5 lines
7.1 KiB
JSON
{
|
|
"id": "guide/ngmodules",
|
|
"title": "NgModules",
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/ngmodules.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=\"ngmodules\">NgModules<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ngmodules#ngmodules\"><i class=\"material-icons\">link</i></a></h1>\n<p><strong>NgModules</strong> configure the injector and the compiler and help organize related things together.</p>\n<p>An NgModule is a class marked by the <code>@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code> decorator.\n<code>@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code> takes a metadata object that describes how to compile a component's template and how to create an injector at runtime.\nIt identifies the module's own components, directives, and pipes,\nmaking some of them public, through the <code>exports</code> property, so that external components can use them.\n<code>@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code> can also add service providers to the application dependency injectors.</p>\n<p>For an example app showcasing all the techniques that NgModules related pages\ncover, see the <live-example></live-example>. For explanations on the individual techniques, visit the relevant NgModule pages under the NgModules\nsection.</p>\n<h2 id=\"angular-modularity\">Angular modularity<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ngmodules#angular-modularity\"><i class=\"material-icons\">link</i></a></h2>\n<p>Modules are a great way to organize an application and extend it with capabilities from external libraries.</p>\n<p>Angular libraries are NgModules, such as <code><a href=\"api/forms/FormsModule\" class=\"code-anchor\">FormsModule</a></code>, <code><a href=\"api/common/http/HttpClientModule\" class=\"code-anchor\">HttpClientModule</a></code>, and <code><a href=\"api/router/RouterModule\" class=\"code-anchor\">RouterModule</a></code>.\nMany third-party libraries are available as NgModules such as\n<a href=\"https://material.angular.io/\">Material Design</a>,\n<a href=\"https://ionicframework.com/\">Ionic</a>, and\n<a href=\"https://github.com/angular/angularfire2\">AngularFire2</a>.</p>\n<p>NgModules consolidate components, directives, and pipes into\ncohesive blocks of functionality, each focused on a\nfeature area, application business domain, workflow, or common collection of utilities.</p>\n<p>Modules can also add services to the application.\nSuch services might be internally developed, like something you'd develop yourself or come from outside sources, such as the Angular router and HTTP client.</p>\n<p>Modules can be loaded eagerly when the application starts or lazy loaded asynchronously by the router.</p>\n<p>NgModule metadata does the following:</p>\n<ul>\n<li>Declares which components, directives, and pipes belong to the module.</li>\n<li>Makes some of those components, directives, and pipes public so that other module's component templates can use them.</li>\n<li>Imports other modules with the components, directives, and pipes that components in the current module need.</li>\n<li>Provides services that other application components can use.</li>\n</ul>\n<p>Every Angular app has at least one module, the root module.\nYou <a href=\"guide/bootstrapping\">bootstrap</a> that module to launch the application.</p>\n<p>The root module is all you need in a simple application with a few components.\nAs the app grows, you refactor the root module into <a href=\"guide/feature-modules\">feature modules</a>\nthat represent collections of related functionality.\nYou then import these modules into the root module.</p>\n<h2 id=\"the-basic-ngmodule\">The basic NgModule<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ngmodules#the-basic-ngmodule\"><i class=\"material-icons\">link</i></a></h2>\n<p>The <a href=\"cli\">Angular CLI</a> generates the following basic <code>AppModule</code> when creating a new app.</p>\n<code-example path=\"ngmodules/src/app/app.module.1.ts\" header=\"src/app/app.module.ts (default AppModule)\">\n// imports\nimport { <a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a> } from '@angular/platform-browser';\nimport { <a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a> } from '@angular/core';\n\nimport { AppComponent } from './app.component';\n\n// @<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a> decorator with its metadata\n@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a>({\n declarations: [AppComponent],\n imports: [<a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a>],\n providers: [],\n bootstrap: [AppComponent]\n})\nexport class AppModule {}\n\n\n</code-example>\n<p>At the top are the import statements. The next section is where you configure the <code>@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code> by stating what components and directives belong to it (<code>declarations</code>) as well as which other modules it uses (<code>imports</code>). For more information on the structure of an <code>@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code>, be sure to read <a href=\"guide/bootstrapping\">Bootstrapping</a>.</p>\n<h2 id=\"more-on-ngmodules\">More on NgModules<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ngmodules#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 NgModules</a>.</li>\n</ul>\n\n \n</div>\n\n<!-- links to this doc:\n - guide/ajs-quick-reference\n - guide/aot-compiler\n - guide/architecture-modules\n - guide/architecture-next-steps\n - guide/example-apps-list\n - guide/frequent-ngmodules\n - guide/glossary\n - guide/lazy-loading-ngmodules\n - guide/module-types\n - guide/ngmodule-vs-jsmodule\n - guide/pipes\n - guide/testing-services\n - guide/upgrade\n - tutorial/toh-pt1\n-->\n<!-- links from this doc:\n - api/common/http/HttpClientModule\n - api/core/NgModule\n - api/forms/FormsModule\n - api/platform-browser/BrowserModule\n - api/router/RouterModule\n - cli\n - guide/bootstrapping\n - guide/entry-components\n - guide/feature-modules\n - guide/module-types\n - guide/ngmodules#angular-modularity\n - guide/ngmodules#more-on-ngmodules\n - guide/ngmodules#ngmodules\n - guide/ngmodules#the-basic-ngmodule\n - guide/providers\n - https://github.com/angular/angular/edit/master/aio/content/guide/ngmodules.md?message=docs%3A%20describe%20your%20change...\n - https://github.com/angular/angularfire2\n - https://ionicframework.com/\n - https://material.angular.io/\n-->"
|
|
} |