Я пытаюсь понять Angular (иногда называемый Angular2 +), потом я наткнулся на @ Module:

  1. Импорт

  2. Декларации

  3. Провайдеры

После Быстрый запуск Angular

Ramesh Papaganti

Ответов: 6

Ответы (6)

Угловые концепции

  • import делает экспортированные объявления других модулей доступными в текущем модуле
  • объявления должны сделать директивы (включая компоненты и каналы) из текущего модуля доступными для других директив в текущем модуле. Селекторы директив, компонентов или каналов сопоставляются с HTML только в том случае, если они объявлены или импортированы.
  • поставщики должны сделать услуги и значения известными для DI (внедрение зависимостей). Они добавляются в корневую область видимости и внедряются в другие службы или директивы, у которых они являются зависимостями.

Особый случай для провайдеров - это ленивые загружаемые модули, которые получают собственный дочерний инжектор.провайдеры модуля с отложенной загрузкой по умолчанию предоставляются только этому модулю с отложенной загрузкой (а не всему приложению, как с другими модулями).

Подробнее о модулях см. Также https://angular.io/docs/ts/latest/guide/ngmodule.html

  • exports делает компоненты, директивы и каналы доступными в модулях, которые добавляют этот модуль к import.exports также можно использовать для реэкспорта модулей, таких как CommonModule и FormsModule, что часто выполняется в общих модулях.

  • entryComponents регистрирует компоненты для автономной компиляции, чтобы их можно было использовать с ViewContainerRef.createComponent (). Компоненты, используемые в конфигурациях маршрутизатора, добавляются неявно.

TypeScript (ES2015) импортирует

import ... from 'foo / bar' (который может преобразоваться в index.ts) для импорта TypeScript. Они нужны вам всякий раз, когда вы используете идентификатор в файле машинописного текста, который объявлен в другом файле машинописного текста.

Angular @ NgModule () импорт и TypeScript import - это совершенно разные концепции.

См. Также jDriven - Синтаксис импорта TypeScript и ES6

Большинство из них на самом деле представляют собой простой синтаксис модуля ECMAScript 2015 (ES6), который также использует TypeScript.

импорт используется для импорта вспомогательных модулей, таких как FormsModule, RouterModule, CommonModule или любого другого настраиваемого функционального модуля.

объявления используются для объявления компонентов, директив, каналов, принадлежащих текущему модулю. Все внутри деклараций знают друг друга. Например, если у нас есть компонент, скажем, UsernameComponent, который отображает список имен пользователей, и у нас также есть канал, скажем toupperPipe, который преобразует строку в строку с прописными буквами. Теперь, если мы хотим отображать имена пользователей заглавными буквами в нашем UsernameComponent, мы можем использовать toupperPipe, который мы создали раньше, но вопрос в том, как UsernameComponent знает, что toupperPipe существует, и как он может получить к нему доступ и использовать. Вот объявления, мы можем объявить UsernameComponent и toupperPipe.

Провайдеры используются для внедрения сервисов, требуемых компонентами, директивами, каналами в модуле.

Angular @ NgModule конструкции:

  1. import {x} from 'y';: это стандартный синтаксис машинописного текста (ES2015 / ES6 синтаксис модуля) для импорта кода из других файлов.Это не относится к Angular. Также это технически не является частью модуля, просто необходимо получить необходимый код в рамках этого файла.
  2. импорт: [FormsModule]: вы импортируете сюда другие модули. Например, в примере ниже мы импортируем FormsModule. Теперь мы можем использовать функциональные возможности, которые FormsModule предлагает в этом модуле.
  3. объявления: [OnlineHeaderComponent, ReCaptcha2Directive]: Вы помещаете сюда свои компоненты, директивы и каналы. После того, как они были объявлены здесь, теперь вы можете использовать их во всем модуле. Например, теперь мы можем использовать OnlineHeaderComponent в представлении AppComponent (файл HTML). Angular знает, где найти этот OnlineHeaderComponent, потому что он объявлен в @NgModule.
  4. провайдеры: [RegisterService]: Здесь определяются наши услуги этого конкретного модуля. Вы можете использовать службы в своих компонентах, внедрив инъекцию зависимостей.

Пример модуля:

// Angular
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

// Components
import { AppComponent } from './app.component';
import { OfflineHeaderComponent } from './offline/offline-header/offline-header.component';
import { OnlineHeaderComponent } from './online/online-header/online-header.component';

// Services
import { RegisterService } from './services/register.service';

// Directives
import { ReCaptcha2Directive } from './directives/re-captcha2.directive';

@NgModule({
  declarations: [
    OfflineHeaderComponent,,
    OnlineHeaderComponent,
    ReCaptcha2Directive,
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
  ],
  providers: [
    RegisterService,
  ],
  entryComponents: [
    ChangePasswordComponent,
    TestamentComponent,
    FriendsListComponent,
    TravelConfirmComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Компоненты декларируются, Модули импортируются, Услуги предоставляются. Пример, с которым я работаю:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';
import {FormsModule} from '@angular/forms';
import { UserComponent } from './components/user/user.component';
import { StateService } from './services/state.service';    

@NgModule({
  declarations: [
    AppComponent,
    UserComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [ StateService ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }
  1. объявления: Это свойство рассказывает о компонентах, директивах. и трубы, принадлежащие этому модулю.
  2. экспорт: Подмножество объявлений, которые должны быть видны и может использоваться в шаблонах компонентов других модулей NgModules.
  3. импорт: Другие модули, экспортированные классы которых необходимы шаблоны компонентов, объявленные в этом модуле NgModule.
  4. провайдеры: Создатели сервисов, которым этот NgModule способствует глобальный набор услуг; они становятся доступными во всех части приложения. (Вы также можете указать провайдеров в компоненте уровень, который часто предпочтительнее.)
  5. бутстрап: Главное представление приложения, называемое корневым компонентом, на котором размещаются все остальные представления приложений. Только корневой NgModule должен установить свойство начальной загрузки.

Добавление быстрой шпаргалки, которая может помочь после долгого перерыва с Angular:


ЗАЯВЛЕНИЯ

Пример:

объявления: [AppComponent]

Что мы можем здесь ввести? Компоненты, трубы, директивы


ИМПОРТ

Пример:

импорт: [BrowserModule, AppRoutingModule]

Что тут можно влить? другие модули


ПОСТАВЩИКИ

Пример:

провайдеры: [UserService]

Что тут можно ввести? услуги


BOOTSTRAP

Пример:

начальная загрузка: [AppComponent]

Что мы можем здесь ввести? основной компонент, который будет сгенерирован этим модулем (верхний родительский узел для дерева компонентов)


ВХОДНЫЕ КОМПОНЕНТЫ

Пример:

entryComponents: [PopupComponent]

Что мы можем здесь вставить? динамически сгенерированные компоненты (например, с помощью ViewContainerRef.createComponent ())


ЭКСПОРТ

Пример:

экспорт: [TextDirective, PopupComponent, BrowserModule]

Что мы можем здесь внедрить? компонентов, директив, модулей или каналов, к которым мы хотели бы иметь доступ в другом модуле (после импорта этого модуля)

2022 WebDevInsider