5 lines
13 KiB
JSON
5 lines
13 KiB
JSON
|
{
|
||
|
|
"id": "guide/bootstrapping",
|
||
|
|
"title": "Launching your app with a root module",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/bootstrapping.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=\"launching-your-app-with-a-root-module\">Launching your app with a root module<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/bootstrapping#launching-your-app-with-a-root-module\"><i class=\"material-icons\">link</i></a></h1>\n<h4 id=\"prerequisites\">Prerequisites<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/bootstrapping#prerequisites\"><i class=\"material-icons\">link</i></a></h4>\n<p>A basic understanding of the following:</p>\n<ul>\n<li><a href=\"guide/ngmodule-vs-jsmodule\">JavaScript Modules vs. NgModules</a>.</li>\n</ul>\n<hr>\n<p>An NgModule describes how the application parts fit together.\nEvery application has at least one Angular module, the <em>root</em> module,\nwhich must be present for bootstrapping the application on launch.\nBy convention and by default, this NgModule is named <code>AppModule</code>.</p>\n<p>When you use the <a href=\"cli\">Angular CLI</a> command <code>ng new</code> to generate an app, the default <code>AppModule</code> looks like the following:</p>\n<code-example language=\"typescript\">\n/* JavaScript 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/* the AppModule class with the @<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a> decorator */\n@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a>({\n declarations: [\n AppComponent\n ],\n imports: [\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>After the import statements is a class with the\n<strong><code>@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code></strong> <a href=\"guide/glossary#decorator\" title=\""Decorator" explained\">decorator</a>.</p>\n<p>The <code>@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code> decorator identifies <code>AppModule</code> as an <code><a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code> class.\n<code>@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code> takes a metadata object that tells Angular how to compile and launch the application.</p>\n<ul>\n<li><strong><em>declarations</em></strong>—this application's lone component.</li>\n<li><strong><em>imports</em></strong>—import <code><a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a></code> to have browser specific services such as DOM rendering, sanitization, and location.</li>\n<li><strong><em>providers</em></strong>—the service providers.</li>\n<li><strong><em>bootstrap</em></strong>—the <em>root</em> component that Angular creates and inserts\ninto the <code>index.html</code> host web page.</li>\n</ul>\n<p>The default application created by the Angular CLI only has one component, <code>AppComponent</code>, so it\nis in both the <code>declarations</code> and the <code>bootstrap</code> arrays.</p>\n<a id=\"declarations\"></a>\n<h2 id=\"the-declarations-array\">The <code>declarations</code> array<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/bootstrapping#the-declarations-array\"><i class=\"material-icons\">link</i></a></h2>\n<p>The module's <code>declarations</code> array tells Angular which components belong to that module.\nAs you create more components, add them to <code>declarations</code>.</
|
||
|
|
}
|