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>.</p>\n<p>You must declare every component in exactly one <code><a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code> class.\nIf you use a component without declaring it, Angular returns an\nerror message.</p>\n<p>The <code>declarations</code> array only takes declarables. Declarables\nare components, <a href=\"guide/attribute-directives\">directives</a> and <a href=\"guide/pipes\">pipes</a>.\nAll of a module's declarables must be in the <code>declarations</code> array.\nDeclarables must belong to exactly one module. The compiler emits\nan error if you try to declare the same class in more than one module.</p>\n<p>These declared classes are visible within the module but invisible\nto components in a different module unless they are exported from\nthis module and the other module imports this one.</p>\n<p>An example of what goes into a declarations array follows:</p>\n<code-example language=\"typescript\">\n declarations: [\n YourComponent,\n YourPipe,\n YourDirective\n ],\n</code-example>\n<p>A declarable can only belong to one module, so only declare it in\none <code>@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code>. When you need it elsewhere,\nimport the module that has the declarable you need in it.</p>\n<h3 id=\"using-directives-with-ngmodule\">Using directives with <code>@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code><a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/bootstrapping#using-directives-with-ngmodule\"><i class=\"material-icons\">link</i></a></h3>\n<p>Use the <code>declarations</code> array for directives.\nTo use a directive, component, or pipe in a module, you must do a few things:</p>\n<ol>\n<li>Export it from the file where you wrote it.</li>\n<li>Import it into the appropriate module.</li>\n<li>Declare it in the <code>@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code> <code>declarations</code> array.</li>\n</ol>\n<p>Those three steps look like the following. In the file where you create your directive, export it.\nThe following example, named <code>ItemDirective</code> is the default directive structure that the CLI generates in its own file, <code>item.directive.ts</code>:</p>\n<code-example path=\"bootstrapping/src/app/item.directive.ts\" region=\"directive\" header=\"src/app/item.directive.ts\">\n\n\nimport { <a href=\"api/core/Directive\" class=\"code-anchor\">Directive</a> } from '@angular/core';\n\n@<a href=\"api/core/Directive\" class=\"code-anchor\">Directive</a>({\n selector: '[appItem]'\n})\nexport class ItemDirective {\n// code goes here\n constructor() { }\n\n}\n\n</code-example>\n<p>The key point here is that you have to export it so you can import it elsewhere. Next, import it\ninto the <code><a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code>, in this example <code>app.module.ts</code>, with a JavaScript import statement:</p>\n<code-example path=\"bootstrapping/src/app/app.module.ts\" region=\"directive-import\" header=\"src/app/app.module.ts\">\nimport { ItemDirective } from './item.directive';\n\n</code-example>\n<p>And in the same file, add it to the <code>@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code> <code>declarations</code> array:</p>\n<code-example path=\"bootstrapping/src/app/app.module.ts\" region=\"declarations\" header=\"src/app/app.module.ts\">\ndeclarations: [\n AppComponent,\n ItemDirective\n],\n\n</code-example>\n<p>Now you could use your <code>ItemDirective</code> in a component. This example uses <code>AppModule</code>, but you'd do it the same way for a feature module. For more about directives, see <a href=\"guide/attribute-directives\">Attribute Directives</a> and <a href=\"guide/structural-directives\">Structural Directives</a>. You'd also use the same technique for <a href=\"guide/pipes\">pipes</a> and components.</p>\n<p>Remember, components, directives, and pipes belong to one module only. You only need to declare them once in your app because you share them by importing the necessary modules. This saves you time and helps keep your app lean.</p>\n<a id=\"imports\"></a>\n<h2 id=\"the-imports-array\">The <code>imports</code> array<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/bootstrapping#the-imports-array\"><i class=\"material-icons\">link</i></a></h2>\n<p>The module's <code>imports</code> array appears exclusively in the <code>@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code> metadata object.\nIt tells Angular about other NgModules that this particular module needs to function properly.</p>\n<code-example path=\"bootstrapping/src/app/app.module.ts\" region=\"imports\" header=\"src/app/app.module.ts (excerpt)\">\nimports: [\n <a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a>,\n <a href=\"api/forms/FormsModule\" class=\"code-anchor\">FormsModule</a>,\n <a href=\"api/common/http/HttpClientModule\" class=\"code-anchor\">HttpClientModule</a>\n],\n\n</code-example>\n<p>This list of modules are those that export components, directives, or pipes\nthat component templates in this module reference. In this case, the component is\n<code>AppComponent</code>, which references components, directives, or pipes in <code><a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a></code>,\n<code><a href=\"api/forms/FormsModule\" class=\"code-anchor\">FormsModule</a></code>, or <code><a href=\"api/common/http/HttpClientModule\" class=\"code-anchor\">HttpClientModule</a></code>.\nA component template can reference another component, directive,\nor pipe when the referenced class is declared in this module or\nthe class was imported from another module.</p>\n<a id=\"bootstrap-array\"></a>\n<h2 id=\"the-providers-array\">The <code>providers</code> array<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/bootstrapping#the-providers-array\"><i class=\"material-icons\">link</i></a></h2>\n<p>The providers array is where you list the services the app needs. When\nyou list services here, they are available app-wide. You can scope\nthem when using feature modules and lazy loading. For more information, see\n<a href=\"guide/providers\">Providers</a>.</p>\n<h2 id=\"the-bootstrap-array\">The <code>bootstrap</code> array<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/bootstrapping#the-bootstrap-array\"><i class=\"material-icons\">link</i></a></h2>\n<p>The application launches by bootstrapping the root <code>AppModule</code>, which is\nalso referred to as an <code>entryComponent</code>.\nAmong other things, the bootstrapping process creates the component(s) listed in the <code>bootstrap</code> array\nand inserts each one into the browser DOM.</p>\n<p>Each bootstrapped component is the base of its own tree of components.\nInserting a bootstrapped component usually triggers a cascade of\ncomponent creations that fill out that tree.</p>\n<p>While you can put more than one component tree on a host web page,\nmost applications have only one component tree and bootstrap a single root component.</p>\n<p>This one root component is usually called <code>AppComponent</code> and is in the\nroot module's <code>bootstrap</code> array.</p>\n<h2 id=\"more-about-angular-modules\">More about Angular Modules<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/bootstrapping#more-about-angular-modules\"><i class=\"material-icons\">link</i></a></h2>\n<p>For more on NgModules you're likely to see frequently in apps,\nsee <a href=\"guide/frequent-ngmodules\">Frequently Used Modules</a>.</p>\n\n \n</div>\n\n<!-- links to this doc:\n - api/core/DoBootstrap\n - guide/architecture-modules\n - guide/dynamic-form\n - guide/example-apps-list\n - guide/frequent-ngmodules\n - guide/glossary\n - guide/module-types\n - guide/ngmodule-faq\n - guide/ngmodule-vs-jsmodule\n - guide/ngmodules\n - guide/upgrade-setup\n-->\n<!-- links from this doc:\n - api/common/http/HttpClientModule\n - api/core/Directive\n - api/core/NgModule\n - api/forms/FormsModule\n - api/platform-browser/BrowserModule\n - cli\n - guide/attribute-directives\n - guide/bootstrapping#launching-your-app-with-a-root-module\n - guide/bootstrapping#more-about-angular-modules\n - guide/bootstrapping#prerequisites\n - guide/bootstrapping#the-bootstrap-array\n - guide/bootstrapping#the-declarations-array\n - guide/bootstrapping#the-imports-array\n - guide/bootstrapping#the-providers-array\n - guide/bootstrapping#using-directives-with-ngmodule\n - guide/frequent-ngmodules\n - guide/glossary#decorator\n - guide/ngmodule-vs-jsmodule\n - guide/pipes\n - guide/providers\n - guide/structural-directives\n - https://github.com/angular/angular/edit/master/aio/content/guide/bootstrapping.md?message=docs%3A%20describe%20your%20change...\n-->"
|
|
} |