creareapp angularLa struttura di una app in Angular 4 e 2

In questa guida introduttiva ad Angular v4, vedremo gli elementi base che costituiscono la struttura di una web app

Ultimo aggiornamento: 3 giorni fa

Per creare un'APP in Angular v4 e v2 è necessario avere un pò di dimestichezza con JavaScript e i concetti della programmazione ad oggetti, quindi è consigliabile aver seguito un corso che tratta di JavaScript e/o jQuery.

Questo perchè? Perchè il linguaggio da preferire per lo sviluppo, è TypeScript, che è una estensione di JavaScript creata da Microsoft.

Infatti il cuore di ogni app Angular, è costituito da quelli che vengono chiamati "componenti", ossia un insieme di tag, estensione del codice HTML, con cui riesco a realizzare ogni pagina della mia applicazione. I componenti se vogliamo, sono un'evoluzione dell'HTML e stanno diventando sempre più importanti in molti framework (vedi Polymer), in quanto ora la maggior parte dei browser è in grado di supportarli.

Per maggiori dettagli, visita la pagina dedicata: WebComponents.org

Se ad esempio, prendessi in esame l'interfaccia che vediamo qui sotto, potrei dire che è costituita da un certo numero di componenti: dal menu, alla lista articoli, e dal singolo articolo.
struttura app angular 2

E ognuno di questi può essere progettato sfruttando 3 concetti fondamentali:

  1. il nome del componente (selettore)
  2. la sua rappresentazione grafica (template)
  3. le funzionalità che deve avere (classe)

Un'app in Angular quindi, la si può pensare come all'astronave Apollo 13, che come si vede nell'omonimo film, era costituita da più moduli, tra cui il lem, quello che gli astronauti usarono per ritornare a terra e salvarsi.

La rappresentazione grafica è sicuramente la parte meno complessa, in quanto basta che tu conosca la sintassi del codice html, o tu sappia già usare framework responsive come spiegato nel corso Corso Siti web responsive con Bootstrap e il gioco è fatto.

L'unica cosa da approfondire, è capire come sia possibile iniettare dei valori (vedi guida Template in Angular), dal corpo del componente o classe, al template e viceversa, ossia recuperare valori inseriti dall'utente in campi del template, o intercettare azioni fatte dall'utente per eseguire detterminati compiti. 

STRUTTURA della "homepage" di un'app in ANGULAR

La struttura della pagina principale vista in precedenza,  quindi potrebbe essere scritta, come una classica pagina html:

<!DOCTYPE html>
<head>
// spazio per aggiungere l'importazione di una serie di librerie angular
</head>
<body>
<h1>Articoli Angular</h1>
<listaarticoli></listaarticoli>
<miomenu></miomenu>
</body>
</html>

dove i tag html <listaarticoli> e <miomenu>, sono i nomi che sceglierò per progettare i componenti dell'applicazione. Come dovranno essere progettati questi ultimi?

Prima di tutto è necessario conoscere la sintassi per creare una classe in TypeScript e poi è necessario conoscere la sintassi con cui si creano i componenti in Angular. Questo però non è sufficiente, in quanto devi anche importare una serie di librerie necessarie al corretto funzionamento, altrimenti il browser non sarà mai in grado di capire cosa sostituire al posto di <miomenu> o di <listaarticoli>.

File indice con Librerie ANGULAR caricate da SystemJS

Al fine di poter elaborare i nuovi tag html inseriti e capire come eseguire eventuali azioni "nascoste" nella logica di ciascun componente, è necessario aggiungere all'interno della cartella principale del progetto, una serie di file di configurazione, che fortunatamente sono aggiunti in automatico non appena creiamo un nuovo progetto ex-novo con i comandi in linea installati nel tutorial precedente.

Fino alla versione beta.10 di angular-cli, il sistema usato per caricare una serie di "pezzi" necessari al funzionamento dell'applicazione, si basavano sulla libreria SystemJS. Quest'ultima è una libreria che ha lo scopo di caricare dei moduli, ossia dei file che conterranno all'interno altri pezzi dell'applicazione oltre che una serie di altri file collegati.

Era tipico quindi avere dei file indice come quelli qui sotto:

<!DOCTYPE html>  
<head>  
  <title>Angular App</title>  
  <meta charset="UTF-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1">  
  <!-- spazio per aggiungere l'importazione di una serie di librerie angular -->  
  <!-- Polyfill(s) for older browsers -->  
  <script src="node_modules/core-js/client/shim.min.js"></script>  
  <script src="node_modules/zone.js/dist/zone.js"></script>  
  <script src="node_modules/systemjs/dist/system.src.js"></script>  
  <!--Librerie per caricare il primo Modulo dell'app-->  
  <script src="systemjs.config.js"></script>  
  <script>  
      System.import('app').catch(function(err){ console.error(err); });  
  </script>  
</head>  
<body>  
<h1>Articoli Angular</h1>  
<listaarticoli></listaarticoli>  
<miomenu></miomenu>  
</body>  
</html> 

File indice con Librerie ANGULAR caricate da WebPack

Sebbene tu possa continuare a usare vecchie versioni di angular-cli, ti consiglio vivamente di optare per le nuove versioni, che sfruttano le libreria WebPack, un sistema di caricamento dei moduli dell'applicazione Angular, decisamente più snello e agevole da usare rispetto a SistemJS.

Il primo beneficio, lo osserviamo subito guardando il codice sottostante, in cui ci si accorge al volo, che sono completamente sparite diverse righe interne a meta tag <head>.

<!DOCTYPE html>
<head>
  <title>Angular App</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Articoli Angular</h1>
<listaarticoli></listaarticoli>
<miomenu></miomenu>
</body>
</html>

Un passo avanti sicuramente verso una semplificazione rispetto al vecchio sistema. Per poter testare l'applicazione, vedremo in uno dei prossimi tutorial, sarà necessario apportare delle modifiche al codice, o usare delle tecniche di ottimizzazione che prendono il nome di "Ahead-of-Time (AOT) Compilation"

Come sviluppare il file Indice dell'app

Nella pratica, vedremo che una delle caratteristiche di Angular, è la capacità di tenere separati i diversi pezzi dell'applicazione, per rendere la fase di sviluppo e di test semplificata. Pertanto non avremo mai una situazione come quella rappresentata nel codice sopra, ma si partirà sempre dal codice, come quello qui sotto, in cui si intravade un unico componente, identificato dal tag <miaprimaapp>, detto componente radice, il quale a sua volta conterrà altri elementi html o altri componenti, con una struttura tipica ad albero.

Non ti spaventare per ora, se ancora non capisce dove e come si definirà questo nuovo elemento. Parleremo di come si creano i componenti, in uno dei prossimi tutorial.

Tipicamente tutte le applicazioni Angular che progettarai, saranno caratterizzata dall'avere un solo componente nel file indice principale. Nel nostro caso, abbiamo detto che questo è rappresentato dal tag <ca-miaprimaapp>, il cui nome può essere scelto a piacere, anche se per convenzione si preferisce anteporre una sigla per distinguere i propri componenti da quelli sviluppati da altri. Nel nostro caso abbiamo inserito ca- che sono le due lettere iniziali del nostro nome di dominio creareapp.com

Peranto un codice verosimile di un'ipotetica app Angular o web app, potrebbe avere questo aspetto:

<!DOCTYPE html>
<head>
  <title>Angular App</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- il mio primo componente Angular -->
<ca-miaprimaapp></ca-miaprimaapp>
</body>
</html>

Come vedi sono stati inseriti tanti tag <script>, tra cui quelli che permettono di aggiungere il file di configurazione SistemJS. Quest'ultima è una libreria che ha lo scopo di caricare dei moduli, ossia dei file che conterranno all'interno altri pezzi dell'applicazione oltre che una serie di altri file necessari. Capiremo a fondo il concetto di modulo, in uno dei prossimi tutorial quando parleremo di decoratori in Angular.

Il mio primo modulo: AppModule

Il modulo che impareremo a progettare per primo, è quello che prende il nome di Modulo Radice. Per convenzione lo si chiama "AppModule" e vedremo sarà una semplice file (classe con nome AppModule) con estensione .ts. E' proprio questo che verrà caricato tipicamente da un file con il nome main.ts, anch'esso da progettare e che viene richiamato da alcuni file di configurazione presenti nella radice dell'app.

Per ora non ci soffermeremo su come devono essere sviluppati questi pezzi dell'app, ma ci basterà solo sapere, che è proprio qui dentro che andremo a specificare chi dovrà dare una rappresentazione, a livello di layout e di funzionalità, al tag <miaprimaapp> inserito in precedenza.

Puoi pensare al modulo radice AppModule, come al motore di un razzo, che inizialmente è spento, ma che, grazie alla miccia costituita dal file main.ts, sarà in grado di accendersi e recuperare quelle risorse necessarie al funzionamento dell'app.

Dove viene salvato il primo modulo e con che estensione?

Generalmente il file viene salvato all'interno di una sottocartella dal nome facile da ricordare: app (scritta in minuscolo). Qui dentro, vedremo, salveremo molti altri file, sempre con una struttura a sottocartelle. L'estensione che dovrà avere sarà .ts, che è l'estensione di ogni file typescript che andremo a scrivere. Il tipico nome usato per questo primo file modulo, come dicevamo prima è: app.module.ts

NB: Nota la presenza del punto di separazione tra la parola app e la parola module. Questa convenzione, sarà usata anche per altri file (es. i componenti), quindi abituati fino ad ora ad usarla.

La scelta di sfruttare questo meccanismo centralizzato per il caricamento delle risorse necessarie all'applicazione, è forse uno dei punti di forza di Angular.

Nel prossimo tutorial, faremo un break nello sviluppo della nostra prima applicazione Angular, perchè introdurremo un altro concetto fondamentale, ossia il concetto di componente.

Non fermarti allora, e accedi subito al prossimo tutorial - I componenti in Angular

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 87 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.