Учебники

Angular7 — Модули

Октябрь 17, 2018

Модуль в Angular относится к месту, где вы можете сгруппировать компоненты, директивы, каналы и сервисы, которые связаны с приложением.

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

Чтобы определить модуль, мы можем использовать NgModule. Когда вы создаете новый проект с помощью команды Angular –cli, ngmodule создается в файле app.module.ts по умолчанию и выглядит следующим образом: 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';

@NgModule({
   declarations: [
      AppComponent,
      NewCmpComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

NgModule необходимо импортировать следующим образом: 

import { NgModule } from '@angular/core';

Структура модуля ngmodule показана ниже: 

@NgModule({ 
   declarations: [
      AppComponent, 
      NewCmpComponent 
   ],
   imports: [ 
      BrowserModule, 
      AppRoutingModule 
   ], 
   providers: [], 
   bootstrap: [AppComponent] 
})

Он начинается с @NgModule и содержит объект, который имеет объявления, импорт, поставщиков и загрузчик.

декларация

Это массив созданных компонентов. Если какой-либо новый компонент будет создан, он будет импортирован первым, а ссылка будет включена в объявления, как показано ниже — 

declarations: [ 
   AppComponent,  
   NewCmpComponent 
]

Импортировать

Это массив модулей, которые необходимо использовать в приложении. Он также может использоваться компонентами в массиве объявлений. Например, прямо сейчас в @NgModule мы видим импортированный модуль браузера. Если вашему приложению нужны формы, вы можете включить модуль с приведенным ниже кодом — 

import { FormsModule } from '@angular/forms';

Импорт в @NgModule будет выглядеть следующим образом: 

imports: [ 
   BrowserModule, 
   FormsModule 
]

Провайдеры

Это будет включать созданные сервисы.

начальная загрузка

Это включает в себя основной компонент приложения для запуска выполнения.

43
Share: