Angular 2 - Moduły

Moduły są używane w Angular JS do wyznaczania logicznych granic w twojej aplikacji. Dlatego zamiast kodować wszystko w jednej aplikacji, możesz zamiast tego wbudować wszystko w oddzielne moduły, aby oddzielić funkcjonalność aplikacji. Przyjrzyjmy się kodowi, który zostanie dodany do aplikacji demonstracyjnej.

W kodzie programu Visual Studio przejdź do folderu app.module.ts w folderze aplikacji. Jest to znane jako klasa modułu głównego.

Poniższy kod będzie obecny w app.module.ts plik.

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 { }

Przyjrzyjmy się szczegółowo każdej linii kodu.

  • Instrukcja import służy do importowania funkcjonalności z istniejących modułów. Dlatego pierwsze 3 instrukcje służą do importowania modułów NgModule, BrowserModule i AppComponent do tego modułu.

  • Dekorator NgModule służy do późniejszego definiowania opcji importu, deklaracji i ładowania początkowego.

  • BrowserModule jest domyślnie wymagany dla każdej internetowej aplikacji kątowej.

  • Opcja bootstrap mówi Angularowi, który komponent ma załadować w aplikacji.

Moduł składa się z następujących części -

  • Bootstrap array- Służy do informowania Angular JS, które komponenty muszą zostać załadowane, aby można było uzyskać dostęp do jego funkcjonalności w aplikacji. Po dołączeniu komponentu do tablicy bootstrap należy je zadeklarować, aby można było ich używać w innych komponentach w aplikacji Angular JS.

  • Export array - Służy do eksportowania komponentów, dyrektyw i rur, które mogą być następnie używane w innych modułach.

  • Import array - Podobnie jak tablica eksportu, tablica importu może służyć do importowania funkcji z innych modułów Angular JS.