5 lines
10 KiB
JSON
5 lines
10 KiB
JSON
{
|
||
"id": "guide/ngmodule-vs-jsmodule",
|
||
"title": "JavaScript modules vs. NgModules",
|
||
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/ngmodule-vs-jsmodule.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=\"javascript-modules-vs-ngmodules\">JavaScript modules vs. NgModules<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ngmodule-vs-jsmodule#javascript-modules-vs-ngmodules\"><i class=\"material-icons\">link</i></a></h1>\n<p>JavaScript modules and NgModules can help you modularize your code, but they are very different.\nAngular apps rely on both kinds of modules.</p>\n<h2 id=\"javascript-modules-files-containing-code\">JavaScript modules: Files containing code<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ngmodule-vs-jsmodule#javascript-modules-files-containing-code\"><i class=\"material-icons\">link</i></a></h2>\n<p>A <a href=\"https://javascript.info/modules\" title=\"JavaScript.Info - Modules\">JavaScript module</a> is an individual file with JavaScript code, usually containing a class or a library of functions for a specific purpose within your app.\nJavaScript modules let you spread your work across multiple files.</p>\n<div class=\"alert is-helpful\">\n<p>To learn more about JavaScript modules, see <a href=\"https://hacks.mozilla.org/2015/08/es6-in-depth-modules/\">ES6 In Depth: Modules</a>.\nFor the module specification, see the <a href=\"https://www.ecma-international.org/ecma-262/6.0/#sec-modules\">6th Edition of the ECMAScript standard</a>.</p>\n</div>\n<p>To make the code in a JavaScript module available to other modules, use an <code>export</code> statement at the end of the relevant code in the module, such as the following:</p>\n<code-example language=\"typescript\">\nexport class AppComponent { ... }\n</code-example>\n<p>When you need that module’s code in another module, use an <code>import</code> statement as follows:</p>\n<code-example language=\"typescript\">\nimport { AppComponent } from './app.component';\n</code-example>\n<p>Each module has its own top-level scope.\nIn other words, top-level variables and functions in a module are not seen in other scripts or modules.\nEach module provides a namespace for identifiers to prevent them from clashing with identifiers in other modules.\nWith multiple modules, you can prevent accidental global variables by creating a single global namespace and adding sub-modules to it.</p>\n<p>The Angular framework itself is loaded as a set of JavaScript modules.</p>\n<h2 id=\"ngmodules-classes-with-metadata-for-compiling\">NgModules: Classes with metadata for compiling<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ngmodule-vs-jsmodule#ngmodules-classes-with-metadata-for-compiling\"><i class=\"material-icons\">link</i></a></h2>\n<p>An <a href=\"guide/glossary#ngmodule\" title=\"Definition of NgModule\">NgModule</a> is a class marked by the <code>@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code> decorator with a metadata object that describes how that particular part of the app fits together with the other parts.\nNgModules are specific to Angular.\nWhile classes with an <code>@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code> decorator are by convention kept in their own files, they differ from JavaScript modules because they include this metadata.</p>\n<p>The <code>@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code> metadata plays an important role in guiding the Angular compilation process that converts the app code you write into highly performant JavaScript code.\nThe metadata describes how to compile a component's template and how to create an <a href=\"guide/glossary#injector\" title=\"Definition of injector\">injector</a> at runtime.\nIt identifies the NgModule's <a href=\"guide/glossary#component\" title=\"Definition of component\">components</a>, <a href=\"guide/glossary#directive\" title=\"Definition of directive\">directives</a>, and <a href=\"guide/glossary#pipe\" title=\"Definition of pipe)\">pipes</a>,\nand makes some of them public through the <code>exports</code> property so that external components can use them.\nYou can also use an NgModule to add <a href=\"guide/glossary#provider\" title=\"Definition of provider\">providers</a> for <a href=\"guide/glossary#service\" title=\"Definition of a service\">services</a>, so that the services are available elsewhere in your app.</p>\n<p>Rather than defining all member classes in one giant file as a JavaScript module, declare which components, directives, and pipes belong to the NgModule in the <code>@<a href=\"api/core/NgModule#declarations\" class=\"code-anchor\">NgModule.declarations</a></code> list.\nThese classes are called <a href=\"guide/glossary#declarable\" title=\"Definition of a declarable\">declarables</a>.\nAn NgModule can export only the declarable classes it owns or imports from other NgModules.\nIt doesn't declare or export any other kind of class.\nDeclarables are the only classes that matter to the Angular compilation process.</p>\n<p>For a complete description of the NgModule metadata properties, see <a href=\"guide/ngmodule-api\" title=\"Using the NgModule metadata\">Using the NgModule metadata</a>.</p>\n<h2 id=\"an-example-that-uses-both\">An example that uses both<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ngmodule-vs-jsmodule#an-example-that-uses-both\"><i class=\"material-icons\">link</i></a></h2>\n<p>The root NgModule <code>AppModule</code> generated by the <a href=\"cli\">Angular CLI</a> for a new app project demonstrates how you use both kinds of modules:</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>The root NgModule starts with <code>import</code> statements to import JavaScript modules.\nIt then configures the <code>@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code> with the following arrays:</p>\n<ul>\n<li>\n<p><code>declarations</code>: The components, directives, and pipes that belong to the NgModule.\nA new app project's root NgModule has only one component, called <code>AppComponent</code>.</p>\n</li>\n<li>\n<p><code>imports</code>: Other NgModules you are using, so that you can use their declarables.\nThe newly generated root NgModule imports <a href=\"api/platform-browser/BrowserModule\" title=\"BrowserModule NgModule\"><code>BrowserModule</code></a> in order to use browser-specific services such as <a href=\"https://www.w3.org/TR/DOM-Level-2-Core/introduction.html\" title=\"Definition of Document Object Model\">DOM</a> rendering, sanitization, and location.</p>\n</li>\n<li>\n<p><code>providers</code>: Providers of services that components in other NgModules can use.\nThere are no providers in a newly generated root NgModule.</p>\n</li>\n<li>\n<p><code>bootstrap</code>: The <a href=\"guide/entry-components\" title=\"Specifying an entry component\">entry component</a> that Angular creates and inserts into the <code>index.html</code> host web page, thereby bootstrapping the app.\nThis entry component, <code>AppComponent</code>, appears in both the <code>declarations</code> and the <code>bootstrap</code> arrays.</p>\n</li>\n</ul>\n<h2 id=\"next-steps\">Next steps<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ngmodule-vs-jsmodule#next-steps\"><i class=\"material-icons\">link</i></a></h2>\n<ul>\n<li>For more about NgModules, see <a href=\"guide/ngmodules\" title=\"Organizing your app with NgModules\">Organizing your app with NgModules</a>.</li>\n<li>To learn more about the root NgModule, see <a href=\"guide/bootstrapping\" title=\"Launching an app with a root NgModule\">Launching an app with a root NgModule</a>.</li>\n<li>To learn about frequently used Angular NgModules and how to import them into your app, see <a href=\"guide/frequent-ngmodules\" title=\"Frequently-used modules\">Frequently-used modules</a>.</li>\n</ul>\n\n \n</div>\n\n<!-- links to this doc:\n - guide/bootstrapping\n - guide/frequent-ngmodules\n - guide/ngmodule-faq\n-->\n<!-- links from this doc:\n - api/core/NgModule\n - api/core/NgModule#declarations\n - api/platform-browser/BrowserModule\n - cli\n - guide/bootstrapping\n - guide/entry-components\n - guide/frequent-ngmodules\n - guide/glossary#component\n - guide/glossary#declarable\n - guide/glossary#directive\n - guide/glossary#injector\n - guide/glossary#ngmodule\n - guide/glossary#pipe\n - guide/glossary#provider\n - guide/glossary#service\n - guide/ngmodule-api\n - guide/ngmodule-vs-jsmodule#an-example-that-uses-both\n - guide/ngmodule-vs-jsmodule#javascript-modules-files-containing-code\n - guide/ngmodule-vs-jsmodule#javascript-modules-vs-ngmodules\n - guide/ngmodule-vs-jsmodule#next-steps\n - guide/ngmodule-vs-jsmodule#ngmodules-classes-with-metadata-for-compiling\n - guide/ngmodules\n - https://github.com/angular/angular/edit/master/aio/content/guide/ngmodule-vs-jsmodule.md?message=docs%3A%20describe%20your%20change...\n - https://hacks.mozilla.org/2015/08/es6-in-depth-modules/\n - https://javascript.info/modules\n - https://www.ecma-international.org/ecma-262/6.0/#sec-modules\n - https://www.w3.org/TR/DOM-Level-2-Core/introduction.html\n-->"
|
||
} |