Creare una web application con Spring Boot, MongoDB, Angular 4 e TypeScript e deployarla in cloud come Microsoft Azure Webapp – Parte 3

Qui la parte precedente dell’articolo: Creare una web application con Spring Boot, MongoDB, Angular 4 e TypeScript e deployarla in cloud come Microsoft Azure Webapp – Parte 2

In questa terza parte affrontiamo il setup del progetto Angular 4 che utilizziamo come framework per lo sviluppo del front-end e con il quale creeremo la nostra Single Page Application.

Per prima cosa dobbiamo dotarci dell’ambiente necessario per la creazione di un progetto Angular 4 e quindi di:

  • NodeJS: è il run-time di JavaScript per l’esecuzione di codice lato server
  • NPM: è il package manager per i pacchetti JavaScript, utilizzato di default da NodeJS
  • Angular CLI: è la Command-Line Interface di Angular che ci mette a disposizione i comandi per creare, testare e eseguire i progetti
  • TypeScript: il linguaggio open source sviluppato da Microsoft come superset di JavaScript per offrire, principalmente, la definizione statica dei tipi e i paradigmi di prototipazione object-oriented allo sviluppo JavaScript stesso. Il codice TypeScript viene poi compilato o meglio transcompilato, come si usa definire una compilazione che da un sorgente produce un altro sorgente (source-to-source compiler), in codice JavaScript standard

Il modo più rapido per farlo è installare il plugin Angular IDE per Spring Tool Suite. Per farlo accediamo all’Eclipse Marketplace dal menù “Help”
14 - Spring Tool Suite Angular IDE pluginE digitiamo nel campo di ricerca la stringa “Angular IDE”. Il primo tra i risultati ritornati è quello che dobbiamo installare.
15 - Spring Tool Suite Angular IDE plugin MarketplaceAl termine dell’installazione Spring Tool Suite chiede di essere riavviato. Una volta effettuato il restart, possiamo vedere che nella toolbar dell’IDE è comparsa in fondo a destra una nuova perspective Angular.
16 - Spring Tool Suite Angular IDE perspectiveQualora non sia immediatamente disponibile l’icona della nuova perspective Angular, è comunque possibile attivare quest’ultima da menù, selezionando “Window” -> “Perspective” -> “Open Perspective” -> “Other” e poi selezionare “Angular”.

Oltre alla nuova perspective, possiamo anche notare che nell’interfaccia dell’IDE, nel panel “Servers” in basso a sinistra, è comparsa la voce “Angular CLI”. Vedremo tra poco, una volta creato il nostro primo progetto Angular 4, a cosa servirà.

Creazione di un progetto Angular 4

Una volta posizionati nella nuova perspective Angular di Spring Tool Suite possiamo creare un nuovo progetto Angular. Selezionando dal menù “File” -> “New” vediamo che ora appare tra le scelte disponibili anche “Angular Project” che ovviamente è la voce che scegliamo.
17 - Spring Tool Suite create new Angular 4 projectDiamo un nome al nostro progetto, ad esempio “springboot-example-angular4-frontend”, e scegliamo le versioni di NodeJS, NPM e della Angular CLI (Command Line Interface) da utilizzare.
18 - Spring Tool Suite create new Angular 4 projectUna volta fatto click su “Finish” partono l’installazione e la configurazione dell’ambiente con tutto il necessario.
19 - Spring Tool Suite new Angular 4 project installing required toolsA seguire viene effettuata la creazione del progetto, eseguendo l’opportuno comando della Command-Line Interface di Angular cioè: ng new

Come possiamo vedere dallo screenshot seguente ad un certo punto viene infatti eseguito il comando:

ng new springboot-example-angular4-frontend

19b - Spring Tool Suite new Angular 4 project installing required toolsAl termine della procedura otteniamo un messaggio che dice che il nostro progetto è stato correttamente creato e, di conseguenza, lo vediamo comparire nel panel “Project Explorer” di Spring Tool Suite e anche nel panel “Servers” in basso a sinistra, sotto la voce “Angular CLI”.
20 - Spring Tool Suite new Angular 4 project createdLa struttura del nuovo progetto Angular creato è quella illustrata nella figura seguente. Per il momento non entriamo nel dettaglio di tutte le cartelle e i file generati con la creazione del progetto. Per una descrizione dettagliata di ciascuno di essi si può consultare la pagina QuickStart della documentazione di Angular stesso.

Possiamo comunque vedere che al primo livello sono presenti 3 folder:

  • src: contiene tutto il contenuto della nostra applicazione quindi, componenti, stili css, risorse statiche, immagini, ecc..
  • e2e: contiene il necessario per l’esecuzione dei test e sta infatti per end-to-end
  • node_modules: è il folder creato da Node.js per la gestione dei moduli di terze parti utilizzati nella realizzazione del progetto.

Per il momento ci concentriamo solo sulla cartella “src” che, come detto, conterrà la nostra applicazione. Al suo interno troviamo:

  • Il file index.html: è la homepage del progetto, nel cui body è inserito il tag relativo al componente “app-root” che costituisce il root Component della pagina, all’interno del quale aggiungeremo i nostri altri Components. All’interno del file index.html troviamo infatti la definizione:
    
      	
    
    
  • La cartella app: contiene il Component root dell’applicazione, con la sua definizione TypeScript, il suo template html, il suo foglio di stile css. Questo componente è quello che verrà renderizzato come tag “app-root” all’interno della homepage.
    La cartella app, inoltre, contiene il file app.module.ts che rappresenta il cosiddetto modulo Root dell’applicazione
  • La cartella assets: è la cartella in cui dovremo inserire tutte le risorse statiche, come ad esempio le immagini o altri file da referenziare, che saranno inserite nell’applicazione.
  • La cartella environments: contiene i file di configurazione dei vari ambienti di riferimento, come sviluppo, test, produzione, ecc..

20 - Spring Tool Suite new Angular 4 project structure

Eseguire il progetto Angular

Per lanciare il progetto Angular dobbiamo eseguire dalla Command Line Interface integrata in Spring Tool Suite il comando:

ng serve


22 - Spring Tool Suite new Angular 4 project started ng serveUna volta completata la build del bundle, possiamo vedere nel panel “Servers” di Spring Tool Suite, che il nostro progetto “springboot-example-angular4-frontend” risulta in stato “Running” e che è in esecuzione in locale sulla porta 4200.
23 - Spring Tool Suite new Angular 4 project running on port 4200Apriamo quindi il browser puntando all’indirizzo localhost:4200 e possiamo vedere la welcome page di default del progetto Angular appena creato.
24 - Spring Tool Suite new Angular 4 project browser localhosto 4200Un momento. Sulla porta 4200? Ci stiamo quindi dicendo che abbiamo l’applicazione Spring Boot, con il nostro back-end, che gira sulla porta 8080 e il progetto Angular 4 eseguito in modo indipendente su un’altra porta?

Si, per ora si.

Nel proseguo dell’articolo vedremo come interfacciare tra loro le due parti quando siamo in fase di sviluppo e, soprattutto, come fare in modo di ottenere, in fase di build, un unico pacchetto da deployare in ambiente di produzione.

Quindi, torniamo per ora alla nostra applicazione Angular in esecuzione. Il contenuto che visualizziamo sul browser è quello del root Component “app” che contiene il tag

Welcome to {{title}}!!

Qui notiamo la sintassi tipica di Angular con la doppia parentesi graffa {{ }} che indica che “title” è in binding con il valore dell’omonima variabile definita all’interno del Component, cioè nel file app.component.ts, e che quindi il suo valore varierà al variare di quello della variabile stessa. Nel Component, infatti, troviamo la dichiarazione:

export class AppComponent {
  title = 'app';
}

Se proviamo ora a modificare il valore della variabile “title”, ad esempio sostituendo la stringa “app” con la stringa “davismol.net Tutorial”

export class AppComponent {
  title = 'davismol.net Tutorial';
}

Vediamo che, al salvataggio del file, l’applicazione Angular viene immediatamente ricompilata al volo e, se non ci sono errori, la pagina del browser viene automaticamente refreshata mostrando la versione aggiornata con le modifiche effettuate.
25 - Spring Tool Suite Angular 4 project browser refresh with modification
A questo punto abbiamo un’applicazione Angular 4 di base funzionante che si va ad aggiugnere al back-end Spring Boot che avevamo implementato nella prima parte dell’articolo.

Vai alla parte successiva dell’articolo: Creare una web application con Spring Boot, MongoDB, Angular 4 e TypeScript e deployarla in cloud come Microsoft Azure Webapp – Parte 4

This entry was posted in $1$s. Bookmark the permalink.

6 thoughts on “Creare una web application con Spring Boot, MongoDB, Angular 4 e TypeScript e deployarla in cloud come Microsoft Azure Webapp – Parte 3

  1. Pingback: Creare una web application con Spring Boot, MongoDB, AngularJS 4 e TypeScript e deployarla in cloud come Microsoft Azure Webapp – Parte 2 | Dede Blog

  2. Pingback: Creare una web application con Spring Boot, MongoDB, Angular 4 e TypeScript e deployarla in cloud come Microsoft Azure Webapp – Parte 4 | Dede Blog

    • Ciao,
      grazie mille per la lettura e per i complimenti. Certo, la serie di articoli continuerà: avevo già pubblicato la parte 4 del tutorial e sto lavorando alle parte seguenti. Ci sono ancora molte cose da affrontare per arrivare al deploy della soluzione finale sul cloud Microsoft Azure. Inoltre sto lavorando anche alla traduzione in inglese delle prime 4 parti già pubblicate in italiano.
      In sostanza si, il tutorial proseguirà. Serve solo un po’ di tempo a me e un po’ di pazienza a voi.. :)

      Grazie ancora,
      Davis

  3. One of the best tutorial i ever seen so thank you very much Mr. Davis Molinari , my request: can you help me or guide me to build a login page using your project setup.

Leave a Reply to Tullio Cancel reply

Your email address will not be published. Required fields are marked *