Angular 2 — Модули

Дата публикации: 2017-11-09

Angular 2 — Модули

От автора: в Angular 2 модули используются для разделения приложении на логические разделы. Вместо того, чтобы писать код всего приложения в одном месте, вы можете создавать отдельные модули для разделения функционала приложения. Давайте рассмотрим код, который добавляется в демонстрационное приложение.

Через Visual Studio code перейдите в папку app.module.ts в папке приложения. Это называется классом корневого модуля.

Angular 2 — Модули

В файле app.module.ts будет содержаться следующий код.

Практический курс по созданию веб-приложения на Angular4

Скачайте БЕСПЛАТНЫЙ мини-курс и изучите базовые возможности JavaScript-фреймворка Angular 4 за ближайшие 3 дня

Узнать подробнее

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent }  from './app.component'; 

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

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

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

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

@NgModule ({

imports: [ BrowserModule ],

declarations: [ AppComponent ],

bootstrap: [ AppComponent ]

})

export class AppModule { }

Давайте подробно рассмотрим каждую строку кода.

Оператор import используется для импорта функций из существующих модулей. Таким образом, первые 3 оператора используются для импорта в данный модуль модулей NgModule, BrowserModule и AppComponent.

Декодер NgModule используется для того, чтобы позже определить импорт, декларации и параметры начальной загрузки.

Для любого веб-приложения Angular по умолчанию требуется BrowserModule.

Параметр bootstrap указывает Angular, какой Компонент загружать в приложение.

Модуль состоит из следующих частей:

Массив Bootstrap. Используется, чтобы указать Angular JS, какие Компоненты необходимо загрузить, чтобы их функционал был доступен в приложении. После включения компонента в массив bootstrap вам необходимо объявить их, чтобы их можно было использовать для других компонентов приложения Angular JS.

Массив Export. Используется для экспорта компонентов, директив и каналов, которые затем могут использоваться в других модулях.

Массив Import. Подобно массиву Export, массив Import может использоваться для импорта функций из других модулей Angular JS.

Источник: https://www.tutorialspoint.com/

Редакция: Команда webformyself.

Практический курс по созданию веб-приложения на Angular4

Скачайте БЕСПЛАТНЫЙ мини-курс и изучите базовые возможности JavaScript-фреймворка Angular 4 за ближайшие 3 дня

Узнать подробнее