creareapp angularIl 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: 3 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 è salvato con il nome app.module.ts all'interno della cartella app
  • All'interno della lista proprietà del decoratore (metadata), non devi usare la proprietà "exports", che invece puoi usare in altri moduli
  • Ci deve essere sempre un solo modulo radice "root module" per applicazione
  • Il modulo radice, deve sempre importare il modulo "BrowserModule", che conterrà una serie di elementi importanti (direttive) come *ngIf, *ngFor. Vedremo che esistono altri moduli importanti come FormsModule e HttpModule
  • All'interno della proprietà "declarations", inserirai un array con tutti i componenti usati nell'applicazione
  • All'interno della proprietà "bootstrap", inserirai il nome del componente che dovrà essere caricato per primo

Il codice sopra, presenta nelle prime righe una serie di istruzioni import, che come dice lo stesso nome, permette di incorporare i diversi file richiesta dall'app, suddivisi tra librerie di sistema e file creati ad hoc per quella applicazione.

Nel caso dell'esempio sopra, l'applicazione sarà costituita da tre componenti, e il primo che verrà richiamato, sarà quello indicato all'interno della proprietà bootstrap.

Sintassi del file main.ts

Nell'analogia con il razzo vista in precedenza, per poter far partire l'applicazione Angular, abbiamo bisogno di una miccia, rappresentata dal file main.ts, inserito nella cartella principale del progetto, esattamente dove risiederà il file index.html.

La tipica struttura del file sarà di quuesto tipo:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

L'unica cosa da osservare è la presenza della riga che richiama il metodo bootstrapModule() che come avrai capito, ha il compito di richiamare il modulo creato in precedenza.

Conclusioni

Uno dei vantaggi di Angular, è avere una struttura centralizzata di configurazione dei diversi elementi che andranno a costituire l'intera applicazione. I due file visti app.module.ts e main.ts, rappresentano il punto di partenza per la costruzione di una qualsiasi applicazione.

Novità

Non farti scappare il nuovo libro: "Angular 100% Operativo", in offerta su Amazon. Più di 200 pagine, con tutto il percorso per creare una WebAPP e imparare Angular in un quarto del tempo. Prenotalo cliccando l'immagine qui sotto:

Corso Angular 4 100% Operativo

Ti è servito il breve tutorial? Condividilo ADESSO sui social! Grazie :-)

Categoria: Configurazione

Voto 4.5/5 basato su 77 Recensioni
© 2013-2017 CreareAPP.com - Tutti i diritti riservati. Tutorial e WebCAMP per creare app in Android e iOS
NB: Tutti i marchi citati sono di proprietà dei rispettivi proprietari. Android is a trademark of Google Inc.