Угловой модуль против JsModule

Что такое модуль?

Модуль — это многократно используемый фрагмент кода, который инкапсулирует детали реализации и предоставляет общедоступный 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.
Оцените статью
nanomode.ru
Добавить комментарий