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

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

Модуль - это многократно используемый фрагмент кода, который инкапсулирует детали реализации и предоставляет общедоступный API, поэтому его можно легко загружать и использовать другим кодом.

Зачем нам нужны модули?

Технически мы можем написать код без модулей.

Модули - это шаблон, который разработчики использовали во многих различных формах и языках программирования с 60-х и 70-х годов.

В JavaScript модули в идеале должны позволять нам:

• абстрактный код: делегировать функциональность специализированным библиотекам, чтобы нам не приходилось понимать сложность их фактической реализации
• инкапсулировать код: скрыть код внутри модуля, если мы не хотим, чтобы код был изменен
• повторное использование кода: чтобы не писать один и тот же код снова и снова
• управлять зависимостями: легко изменять зависимости без переписывания нашего кода

Формат модуля ES6

До ES2015 (ES6) не было модульной системы в стандарте языка ECMAScript. Вместо этого мы имели (и все еще имеем) различные модели реализации для «моделирования» модульной системы: есть простые IIFE (выражение для немедленного вызова функции), UMD (определение универсального модуля), AMD (определение асинхронного модуля) и CommonJS

Начиная с ES6, JavaScript также поддерживает собственный формат модулей.

Он использует токен экспорта для экспорта открытого API модуля:

// Export the function
export function sayHello(){  
  console.log('Hello');
}
// Do not export the function
function somePrivateFunction(){  
  // ...
}

Angular в качестве фреймворка JavaScript также использует модули для организации кодов, но ванильный JavaScript и Angular организовывают код по-разному.

Модули JavaScript

В JavaScript модули представляют собой отдельные файлы с кодом JavaScript в них. Чтобы сделать их доступными, вы пишете оператор экспорта, обычно после соответствующего кода, например:

export class AppComponent { ... }

Затем, когда вам нужен код этого файла в другом файле, вы импортируете его так:

import { AppComponent } from './app.component';

Модули JavaScript помогают нам пространства имен, предотвращая случайные глобальные переменные.

NgModules

NgModules - это классы, украшенные @NgModule. Массив import декоратора @NgModule сообщает Angular, какие другие NgModules нужны текущему модулю. Модули в массиве import отличаются от модулей JavaScript, поскольку они являются модулями NgModules, а не обычными модулями JavaScript. Классы с декоратором @NgModule по традиции хранятся в своих собственных файлах, но то, что делает их NgModule, не находится в их собственном файле, как модули JavaScript; это наличие @NgModule и его метаданных.

Модуль AppModule, сгенерированный из Angular CLI, демонстрирует оба вида модулей в действии:

Ниже приведен URL-адрес кода для сгенерированного AppModule.

Код TypeScript:

/* These are JavaScript import statements. Angular doesn't know anything about these. */
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
/* The @NgModule decorator lets Angular know that this is an NgModule. */
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [     /* These are NgModule imports. */
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Демонстрация в реальном времени:

См. Pen ngModulevsJsModule_app.module.ts от w3resource ( @ w3resource ) в CodePen .

Классы NgModule отличаются от модуля JavaScript следующими основными способами:

• NgModule ограничивает только декларируемые классы. Объявление - это единственные классы, которые имеют значение для компилятора Angular.
• Вместо того, чтобы определять все классы-члены в одном гигантском файле, как в модуле JavaScript, вы перечисляете классы модуля в списке @ NgModule.declarations.
• NgModule может экспортировать только те декларативные классы, которыми он владеет или импортирует из других модулей. Он не объявляет и не экспортирует другие виды классов.
• В отличие от модулей JavaScript, NgModule может расширять все приложение службами, добавляя поставщиков в список @ NgModule.providers.

Предыдущий: NgModules
Далее: часто используемые модули