5 lines
8.2 KiB
JSON
5 lines
8.2 KiB
JSON
{
|
||
"id": "guide/frequent-ngmodules",
|
||
"title": "Frequently-used modules",
|
||
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/frequent-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=\"frequently-used-modules\">Frequently-used modules<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/frequent-ngmodules#frequently-used-modules\"><i class=\"material-icons\">link</i></a></h1>\n<p>An Angular app needs at least one module that serves as the root module.\nAs you add features to your app, you can add them in modules.\nThe following are frequently used Angular modules with examples\nof some of the things they contain:</p>\n<table>\n <tbody><tr>\n <th style=\"vertical-align: top\">\n NgModule\n </th>\n <th style=\"vertical-align: top\">\n Import it from\n </th>\n <th style=\"vertical-align: top\">\n Why you use it\n </th>\n </tr>\n <tr>\n <td><code><a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a></code></td>\n <td><code>@angular/platform-browser</code></td>\n <td>When you want to run your app in a browser</td>\n </tr>\n <tr>\n <td><code><a href=\"api/common/CommonModule\" class=\"code-anchor\">CommonModule</a></code></td>\n <td><code>@angular/common</code></td>\n <td>When you want to use <code><a href=\"api/common/NgIf\" class=\"code-anchor\">NgIf</a></code>, <code>NgFor</code></td>\n </tr>\n <tr>\n <td><code><a href=\"api/forms/FormsModule\" class=\"code-anchor\">FormsModule</a></code></td>\n <td><code>@angular/forms</code></td>\n <td>When you want to build template driven forms (includes <code><a href=\"api/forms/NgModel\" class=\"code-anchor\">NgModel</a></code>)</td>\n </tr>\n <tr>\n <td><code><a href=\"api/forms/ReactiveFormsModule\" class=\"code-anchor\">ReactiveFormsModule</a></code></td>\n <td><code>@angular/forms</code></td>\n <td>When you want to build reactive forms</td>\n </tr>\n <tr>\n <td><code><a href=\"api/router/RouterModule\" class=\"code-anchor\">RouterModule</a></code></td>\n <td><code>@angular/router</code></td>\n <td>When you want to use <code><a href=\"api/router/RouterLink\" class=\"code-anchor\">RouterLink</a></code>, <code>.forRoot()</code>, and <code>.forChild()</code></td>\n </tr>\n <tr>\n <td><code><a href=\"api/common/http/HttpClientModule\" class=\"code-anchor\">HttpClientModule</a></code></td>\n <td><code>@angular/common/<a href=\"api/common/http\" class=\"code-anchor\">http</a></code></td>\n <td>When you want to talk to a server</td>\n </tr>\n</tbody></table>\n<h2 id=\"importing-modules\">Importing modules<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/frequent-ngmodules#importing-modules\"><i class=\"material-icons\">link</i></a></h2>\n<p>When you use these Angular modules, import them in <code>AppModule</code>,\nor your feature module as appropriate, and list them in the <code>@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code>\n<code>imports</code> array. For example, in the basic app generated by the <a href=\"cli\">Angular CLI</a>,\n<code><a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a></code> is the first import at the top of the <code>AppModule</code>,\n<code>app.module.ts</code>.</p>\n<code-example language=\"typescript\">\n/* import modules so that AppModule can access them */\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>({\n declarations: [\n AppComponent\n ],\n imports: [ /* add modules here so Angular knows to use them */\n <a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a>,\n ],\n providers: [],\n bootstrap: [AppComponent]\n})\nexport class AppModule { }\n</code-example>\n<p>The imports at the top of the array are JavaScript import statements\nwhile the <code>imports</code> array within <code>@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code> is Angular specific.\nFor more information on the difference, see <a href=\"guide/ngmodule-vs-jsmodule\">JavaScript Modules vs. NgModules</a>.</p>\n<h2 id=\"browsermodule-and-commonmodule\"><code><a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a></code> and <code><a href=\"api/common/CommonModule\" class=\"code-anchor\">CommonModule</a></code><a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/frequent-ngmodules#browsermodule-and-commonmodule\"><i class=\"material-icons\">link</i></a></h2>\n<p><code><a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a></code> imports <code><a href=\"api/common/CommonModule\" class=\"code-anchor\">CommonModule</a></code>, which contributes many common\ndirectives 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>. Additionally, <code><a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a></code>\nre-exports <code><a href=\"api/common/CommonModule\" class=\"code-anchor\">CommonModule</a></code> making all of its directives available\nto any module that imports <code><a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a></code>.</p>\n<p>For apps that run in the browser, import <code><a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a></code> in the\nroot <code>AppModule</code> because it provides services that are essential\nto launch and run a browser app. <code><a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a></code>’s providers\nare for the whole app so it should only be in the root module,\nnot in feature modules. Feature modules only need the common\ndirectives in <code><a href=\"api/common/CommonModule\" class=\"code-anchor\">CommonModule</a></code>; they don’t need to re-install app-wide providers.</p>\n<p>If you do import <code><a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a></code> into a lazy loaded feature module,\nAngular returns an error telling you to use <code><a href=\"api/common/CommonModule\" class=\"code-anchor\">CommonModule</a></code> instead.</p>\n<div class=\"lightbox\">\n <img src=\"generated/images/guide/frequent-ngmodules/browser-module-error.gif\" width=\"750\" alt=\"BrowserModule error\">\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/frequent-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/bootstrapping\">Bootstrapping</a>.</li>\n<li><a href=\"guide/ngmodules\">NgModules</a>.</li>\n<li><a href=\"guide/ngmodule-vs-jsmodule\">JavaScript Modules vs. NgModules</a>.</li>\n</ul>\n\n \n</div>\n\n<!-- links to this doc:\n - guide/bootstrapping\n - guide/module-types\n - guide/ngmodule-vs-jsmodule\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/forms/NgModel\n - api/forms/ReactiveFormsModule\n - api/platform-browser/BrowserModule\n - api/router/RouterLink\n - api/router/RouterModule\n - cli\n - guide/bootstrapping\n - guide/frequent-ngmodules#browsermodule-and-commonmodule\n - guide/frequent-ngmodules#frequently-used-modules\n - guide/frequent-ngmodules#importing-modules\n - guide/frequent-ngmodules#more-on-ngmodules\n - guide/ngmodule-vs-jsmodule\n - guide/ngmodules\n - https://github.com/angular/angular/edit/master/aio/content/guide/frequent-ngmodules.md?message=docs%3A%20describe%20your%20change...\n-->"
|
||
} |