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\" t
|
|||
|
|
}
|