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