Что такое модуль?
Модуль — это многократно используемый фрагмент кода, который инкапсулирует детали реализации и предоставляет общедоступный API, поэтому его можно легко загружается и используется другим кодом.
Зачем нам нужны модули?
Технически мы можем писать код без модулей.
Модули — это шаблон, который разработчики использовали во многих различных формах и языках программирования с 60-х и 70-х годов.
В JavaScript модули в идеале должны позволять нам:
- абстрактный код: для делегирования функций специализированным библиотекам, чтобы нам не приходилось понимать сложность их фактической реализации.
- инкапсулировать код: чтобы скрыть код внутри модуля, если мы не хотим, чтобы код изменялся
- повторно использовать код: , чтобы не писать один и тот же код снова и снова.
- управлять зависимостями: чтобы легко изменять зависимости, не переписывая наши код
Формат модуля ES6
До ES2015 (ES6) не было модульной системы в стандарте язык ECMAScript. Вместо этого у нас были (и все еще есть) разные шаблоны реализации для «моделирования» модульной системы: есть простые IIFE (выражение немедленного вызова функции), UMD (определение универсального модуля), AMD (определение асинхронного модуля) и CommonJS
Начиная с ES6, JavaScript также поддерживает собственный формат модуля.
Он использует токен экспорта для экспорта общедоступного API модуля:
//Экспорт функции functionexport sayHello () {console.log ('Hello');}//Не экспортировать функцию function somePrivateFunction () {//...}
Angular как среда JavaScript также использует модули для организации кода, но ванильный JavaScript и Angular организуют код по-разному.
Модули JavaScript
В JavaScript модули — это отдельные файлы с кодом JavaScript в них. Чтобы сделать то, что в них доступно, вы пишете оператор экспорта, обычно после соответствующего кода, например:
export class AppComponent {...}
Затем, когда вам нужен код этого файла в другом файле, вы импортируете его следующим образом:
import {AppComponent} from './app.component ';
Модули JavaScript помогают нам в пространстве имен, предотвращая случайные глобальные переменные.
NgModules
NgModules — это классы, украшенные @NgModule. Массив импорта декоратора @NgModule сообщает Angular, какие другие модули NgModule нужны текущему модулю. Модули в массиве импорта отличаются от модулей JavaScript, потому что они являются NgModules, а не обычными модулями JavaScript.. Классы с декоратором @NgModule по соглашению хранятся в своих собственных файлах, но то, что делает их NgModule, не находится в их собственном файле, как модули JavaScript; это наличие @NgModule и его метаданных.
AppModule, созданный из Angular CLI, демонстрирует оба типа модулей в действии:
Ниже приведен URL-адрес кода для сгенерированный AppModule.
Код TypeScript:
/* Это операторы импорта JavaScript. Angular ничего об этом не знает. */import {BrowserModule} из '@ angular/platform-browser'; импортировать {NgModule} из '@ angular/core'; импортировать {AppComponent} из './app.component';/* Декоратор @NgModule сообщает Angular что это NgModule. */@ NgModule ({объявления: [AppComponent], импорт: [/* Это импорт NgModule. */BrowserModule], провайдеры: [], bootstrap: [AppComponent]}) класс экспорта AppModule {}
Живая демонстрация:
Это просто фрагмент кода, объясняющий конкретную концепцию и не имеющий вывода
См. Pen ngModulevsJsModule_app.module.ts от w3resource (@ w3resource) на CodePen.
Классы NgModule отличаются от модуля JavaScript следующими ключевыми аспектами:
- NgModule ограничивает только декларируемые классы. Объявленные классы — это единственные классы, которые имеют значение для компилятора Angular.
- Вместо того, чтобы определять все классы-члены в одном гигантском файле, как в модуле JavaScript, вы перечисляете классы модуля в списке @ NgModule.declarations.
- NgModule может экспортировать только те декларируемые классы, которыми он владеет, или импортировать из других модулей. Он не объявляет и не экспортирует какие-либо другие классы.
- В отличие от модулей JavaScript, NgModule может расширять все приложение службами, добавляя поставщиков в список @ NgModule.providers.
