Hello Angular

Hello Angular

Lo scaffolding

La realizzazione di applicazioni Angular si basa sulla tecnica dello Scaffolding, letteralmente “impalcatura”. Lo sviluppatore non deve scrivere da zero ciascuno dei file che costituiranno il progetto, ma può aiutarsi con dei comandi dati da CLI (Interfaccia a Linea di Comando, ovvero Shell Linux oppure Command Windows) che generano automaticamente diversi files contemporaneamente, “collegandoli” nel progetto dove serve e opportunamente fra di loro.

Da Shell, digitando il seguente comando, verifichiamo che Angular sia installato correttamente.

ng –version 

(con due trattini “-“)

Sempre da Shell, posizioniamoci nella root dei nostri progetti (nel mio caso “C:\tutorial\”) e per creare la nuova applicazione agenda-eventi, digitiamo il seguente comando:

ng new agenda-eventi

Ci verranno poste delle semplici domande per configurare il tipo di applicazione che ci interessa. Nel nostro caso risponderemo

  • Y alla creazione automatica del modulo di routing
  • CSS come gestione degli aspetti di stile grafico

Anche se non avete ancora scritto una riga di codice, il vostro progetto è stato creato!

Possiamo notare che è stata creata una directory col nome del nostro progetto e al suo interno molti altri file.

Ci posizioniamo nella directory del progetto, con

cd agenda-eventi

e per lanciarne l’esecuzione,  inviamo il seguente comando:

ng serve

Dopo che il server sarà partito, mettendosi in ascolto sulla porta 4200, con un Browser potremo vedere la nostra applicazione girare all’indirizzo …

localhost:4200

Il punto di partenza di un’applicazione Angular sono i file app.component.* e app.module.ts. 

Una volta che abbiamo verificato sia con la shell che col browser che la nostra applicazione funziona, possiamo intervenire con le prime facili modifiche e controllare che il progetto cambi di conseguenza.
Sostituiamo il contenuto del file app.component.html col seguente:

<div class=”external“>
 
  <header>
    <h2>Agenda Web App
    </h2>
  </header>

 

  <br />
  <router-outlet></router-outlet>
  <br />

 

  <footer>
    <p>ra.bbonidavi.de/tutorial</p>
  </footer>

 

</div>

Ogni volta che salviamo una modifica ai file che compongono il progetto, il server Angular, rigenera i file javascript e rilancia l’applicazione. Col refresh del browser si nota di conseguenza che la visualizzazione della nostra app all’indirizzo localhost:4200 è cambiata.

Il file deputato a contenere gli stili grafici relativi ad app.component.html sarebbe il file app.component.css. Tuttavia gli stili che vogliamo definire ora non sono peculiari solo di questo componente, bensì riguardano l’intero progetto. In questo caso va modificato il file styles.css (posizionato nella root del progetto). Inseriamovi il seguente contenuto:

html, body { height: 100%; }

 

body { margin: 0; font-family: Roboto, “Helvetica Neue”, sans-serif; }

 

div.external {
  position: relative;
  width: 100%;
  border: 3px solid #73AD21;
}

 

header {
  background-color: #005588;
  padding-top: 30px;
  padding-bottom: 30px;
  text-align: center;
  font-size: 35px;
  width: 100%;
  color: white;
}

 

footer {
  background-color: #005588;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  color: white;
  width: 100%;
}
No Comments

Sorry, the comment form is closed at this time.