Il file AppModule e main.ts: i motori di un'applicazione Angular

Vediamo di analizzare i due principali file che costituiscono un'applicazione base angular, al fine di poterla avviare all'interno del browser.

Ultimo aggiornamento: 7 giorni fa

Se nel mondo dello sviluppo di siti web in HTML le pagine html sono il fulcro del progetto e la pagina home quella associata ad un nome di dominio, nel mondo dello sviluppo di applicativi Angular, la pagina index.html è l'equivalente della homepage, ma al fine di includere una serie di funzionalità necessarie a far interpretare correttamente al browser tutta una serie di elementi tipici di un'applicazione Angular, come i componenti, le direttive, i servizi, dovremo predisporre una "cabina di regia", che includa queste informazioni.

Questa cabina di regia è una semplice classe, "adornata" con il decoratore ngModule (vedremo cos'è un decoratore nel tutorial: "I decoratori in Angular". Viene chiamata in gergo tecnico Modulo, ed essendo il modulo principale dell'applicazione, viene chiamato modulo radice, dandogli per convenzione il nome di app.module.ts e salvandolo all'interno della cartella app dell'applicazione.

Nel tutorial precedente avevamo detto che il modulo radice AppModule, lo potevamo paragonare al motore di un razzo, che inizialmente è spento, ma che, grazie alla miccia costituita da un altro file, chiamato per convenzione  main.ts, sarà in grado di accendersi e recuperare quelle risorse necessarie al funzionamento dell'app.

Sintassi del file AppModule

Essendo una classe, la tipica rappresentazione del modulo radice, sarà di questo tipo:

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

import { MiaAppComponent } from './app.component';
import { MenuComponent } from './menu/menu.module';
import { BodyComponent } from './body/body.module';

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

• Il modulo root viene chiamato per convenzione "AppModule", ed è ...

Ohps... scusami la fastidiosa interruzione, ma per questioni gestionali, tutti i tutorial completi gli ho spostati a questo link: WEBSU. Risulterà più semplice anche per te seguirli e chiedermi dei consigli. Ti aspetto, dai... bastano 5 secondi. Non buttare tutto lo sforzo fatto per arrivare qui.

Hai tempo per leggere? Angular

Non farti scappare il mio libro appena aggiornato: "Angular 100% Operativo". Un corso completo su Angular per imparare rapidamente le tecniche per creare WebAPP e non solo. Prenotalo cliccando l'immagine qui sotto

Categoria: Angular