Come costruire un’applicazione Angular?

Angular è un popolare framework open-source per la creazione di applicazioni web dinamiche, reattive e complesse. Angular è stato sviluppato da Google nel 2010 con il nome di “AngularJS”.

Angular consente di creare applicazioni dinamiche a pagina singola con una struttura di codice pulita e organizzata.

Angular utilizza TypeScript, un superset di JavaScript, che aggiunge al linguaggio caratteristiche come il controllo dei tipi, le interfacce e le classi. Ciò rende il codice di Angular più manutenibile e meno soggetto a errori.

Per semplificare lo sviluppo web con Angular, è utile utilizzare una soluzione Backend-as-a-Service (BaaS) come Back4app.

Back4app fornisce un’infrastruttura di backend precostituita con funzionalità quali l’autenticazione, l’archiviazione dei dati e la logica lato server.

Questo vi permette di concentrarvi sulla realizzazione del front-end delle vostre applicazioni senza preoccuparvi delle complessità dello sviluppo del back-end.

In questo articolo, esplorerete Angular e costruirete un’applicazione blog di base utilizzando Angular e Back4app.

Vantaggi di Angular

Angular ha guadagnato popolarità tra gli sviluppatori grazie ai suoi numerosi vantaggi. Ecco alcuni dei principali vantaggi di Angular:

Legame dei dati a due vie

Il binding bidirezionale dei dati è una funzione che fa risparmiare tempo e aumenta la produttività, migliorando la qualità delle applicazioni Angular. Il binding bidirezionale dei dati consente alle modifiche apportate al modello (dati) di riflettersi automaticamente nella vista (UI).

Qualsiasi modifica al modello si riflette immediatamente nella vista. Questo rende lo sviluppo di applicazioni complesse e dinamiche più semplice e veloce, eliminando la necessità di scrivere codice boilerplate per sincronizzare il modello e la vista.

Iniezione di dipendenza

L’iniezione di dipendenze è una caratteristica fondamentale di Angular che semplifica la gestione delle dipendenze tra componenti e servizi. La dependency injection è una funzione potente che migliora l’affidabilità, la manutenibilità e la testabilità delle applicazioni Angular.

L’iniezione di dipendenze in Angular consente ai componenti e ai servizi di dichiarare le dipendenze da altri componenti e servizi. Il sistema di dependency injection si occupa quindi di creare e fornire queste dipendenze in modo automatico. Ciò elimina la necessità di creare e gestire manualmente le dipendenze, riducendo il rischio di errori.

Il sistema di dependency injection di Angular semplifica la gestione delle dipendenze e riduce la quantità di codice da scrivere.

Architettura basata su componenti

L’architettura a componenti di Angular semplifica la costruzione di interfacce utente complesse suddividendole in componenti più piccoli e riutilizzabili.

I componenti possono essere facilmente riutilizzati in diverse parti dell’applicazione. I componenti possono essere sviluppati in modo indipendente, facilitando la gestione di applicazioni complesse con molte parti in movimento. Questa architettura facilita anche il test e il debug del codice, in quanto i componenti possono essere isolati e testati separatamente.

TypeScript

TypeScript è un superset di JavaScript che aggiunge al linguaggio il controllo statico dei tipi, le interfacce, le classi e altre caratteristiche. È un linguaggio open-source gestito da Microsoft ed è una scelta popolare per lo sviluppo di applicazioni web su larga scala.

Angular è scritto in TypeScript. Questo fornisce strumenti migliori e un’esperienza di sviluppo più solida. La tipizzazione statica di TypeScript consente agli sviluppatori di individuare gli errori in fase di compilazione piuttosto che in fase di esecuzione, rendendo più semplice la manutenzione e il refactoring del codice.

Grande comunità

Angular ha una comunità di sviluppatori ampia e attiva, che può essere incredibilmente preziosa per diversi motivi.

Una grande comunità offre molte risorse, come tutorial, documentazione e forum. Queste risorse possono essere incredibilmente utili per gli sviluppatori alle prime armi con Angular o alla ricerca di soluzioni a problemi specifici.

Una grande comunità significa che molti sviluppatori lavorano attivamente per migliorare il framework, creando e condividendo plugin ed estensioni di terze parti per Angular. Questo può farvi risparmiare tempo e fatica, in quanto potete sfruttare il codice esistente per aggiungere nuove funzionalità ai vostri progetti.

Limitazioni di Angular

Sebbene Angular sia un framework potente e popolare per la creazione di applicazioni web, presenta alcune limitazioni di cui è bene essere consapevoli. Alcune delle limitazioni di Angular sono le seguenti:

Curva di apprendimento ripida

Angular può essere difficile da imparare per alcuni sviluppatori, perché introduce molti nuovi concetti e approcci allo sviluppo web. Potrebbe essere necessario dedicare molto tempo all’apprendimento di moduli, componenti, servizi, dependency injection e programmazione reattiva.

Dimensione grande

Angular è un framework relativamente grande rispetto ad altri framework front-end. Le grandi dimensioni di Angular sono dovute principalmente al suo ampio set di funzionalità, che comprende molte funzioni integrate, come la gestione dei moduli, il routing e la gestione dei dati.

Le grandi dimensioni di Angular possono causare tempi di caricamento più lenti per le applicazioni web, con un impatto negativo sull’esperienza dell’utente. Questo è particolarmente vero per gli utenti con connessioni Internet lente.

Le grandi dimensioni di Angular possono rendere più impegnativo lo sviluppo e la manutenzione di progetti complessi.

SEO limitato

Le limitate capacità SEO di Angular sono dovute principalmente al fatto che si tratta di un framework per applicazioni a pagina singola (SPA). Le SPA sono progettate per essere eseguite interamente nel browser, il che significa che il codice HTML viene generato dinamicamente utilizzando JavaScript. Ciò rende difficile per i crawler dei motori di ricerca indicizzare accuratamente il contenuto di un sito web alimentato da Angular.

Creare l’applicazione del blog

Creare un’applicazione Angular e chiamarla “blog-application”. Per creare l’applicazione Angular, eseguire il seguente comando nella cartella del progetto sul terminale:

ng new blog-application

Dopo aver creato l’applicazione Angular, si creeranno due componenti. I due componenti saranno i componenti home e post. Dopo aver creato i componenti, si procederà al loro instradamento.

Per generare i componenti, eseguire i seguenti comandi:

cd blog-application
ng generate component home-component
ng generate component post-component

Una volta generati i componenti, configurare il loro instradamento nel file app-routing.module.ts.

Così:

//app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponentComponent } from './home-component/home-component.component';
import { PostComponentComponent } from './post-component/post-component.component';

const routes: Routes = [
  {path: '', component: HomeComponentComponent},
  {path: 'post', component: PostComponentComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

export class AppRoutingModule { }

Il blocco di codice precedente definisce due rotte nell’array delle rotte. La rotta per il componente HomeComponentComponent ha un percorso vuoto. Il percorso vuoto indica che il componente HomeComponentComponent verrà visualizzato non appena si esegue il rendering dell’applicazione.

La rotta PostComponentComponent è definita con un percorso di ‘post’, il che significa che quando si naviga in questa rotta, il PostComponentComponent sarà reso e visualizzato nella vista.

Per navigare nei percorsi specificati, si aggiungerà un’intestazione all’applicazione. L’intestazione sarà creata nel file app-component.html. L’intestazione conterrà gli elementi di navigazione verso le diverse rotte.

Ad esempio:

<!--app.component.html-->
<div>

  <div class="header">
    <a routerLink=""><h2>Blog</h2></a>
  
    <a routerLink="post"><button>write</button></a>
  </div>

  <router-outlet></router-outlet>

</div>

Il div dell’intestazione contiene due elementi di ancoraggio figli. Gli elementi di ancoraggio avvolgono un elemento h2 e un elemento button. Facendo clic sull’elemento h2 si accede al percorso predefinito, mentre facendo clic sull’elemento button si accede al percorso post. Il router-outlet visualizza i componenti instradati sotto il div di intestazione.

Dopo aver creato l’intestazione, la si stilizza nel file app-compnent.scss:

/* app.component.scss*/
.header{
    display: flex;
    justify-content: space-between;
    padding: 1rem 0;
}

Integrazione di Back4App

Per iniziare a creare un’applicazione con Back4app, è necessario innanzitutto assicurarsi di avere un account. Se non si possiede un account Back4app, seguire le istruzioni fornite:

1. Andate al sito web di Back4app.
2. Trovate il pulsante Iscriviti nella sezione in alto a destra della homepage e cliccatelo.
3. Completare il modulo di registrazione e inviarlo.

Una volta effettuata la registrazione, accedete al vostro account Back4app e procedete come segue:

1. Individuare il pulsante NUOVA APP nell’angolo in alto a destra e fare clic su di esso.
2. Verrete indirizzati a un modulo in cui dovrete inserire il nome dell’applicazione desiderata.
3. Inserire il nome dell’applicazione e selezionare il pulsante CREA per avviare il processo di creazione dell’applicazione.

Dopo aver fatto clic sul pulsante “CREA”, la domanda verrà generata e si verrà indirizzati al cruscotto della domanda.

Collegamento dell’applicazione a Back4app

Per collegare l’applicazione Angular all’applicazione Back4app creata, è necessario installare l’SDK Parse JavaScript.

Installate l’SDK eseguendo uno dei comandi seguenti, a seconda del vostro gestore di pacchetti:

#using npm
npm install parse
		or 
#using yarn
yarn add parse

Dopo aver installato l’SDK Parse JavaScript, è necessario ottenere l’Application ID e la JavaScript Key. Sono necessari per collegare l’applicazione Angular all’applicazione Back4app.

Per recuperare l’ID dell'applicazione e la chiave JavaScript da Back4app, navigare nella sezione Sicurezza e chiavi selezionando Impostazioni app nella dashboard. Da qui è possibile accedere facilmente alle chiavi necessarie per collegare l’applicazione Angular a Back4app.

Dopo aver recuperato l’ID applicazione e la chiave JavaScript, conservarli in modo sicuro nella propria applicazione.

Nel file app.component.ts, importare la versione minificata di Parse da parse. Richiamare quindi il metodo initialize di Parse. Il metodo initialize accetta come argomenti l’ID dell'applicazione e la chiave JavaScript. Infine, impostare il serverURL di Parse su‘https://parseapi.back4app.com/’.

Dopo aver fatto questo, il file app.component.ts dovrebbe avere questo aspetto:

//app.component.ts
import { Component } from '@angular/core';
import * as  Parse from 'parse';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {

}

Parse.initialize(PARSE_APPLICATION_ID, PARSE_JAVASCRIPT_KEY);
(Parse as any).serverURL = "<https://parseapi.back4app.com/>";

Aggiunta di dati all’applicazione Back4app

Per aggiungere dati all’applicazione Back4App, si costruisce un modulo per ricevere dati da un utente. Quando si invia il modulo, si esegue una funzione handleSubmit. La funzione handleSubmit conterrà la logica per aggiungere un nuovo post dall’applicazione blog all’applicazione Back4app.

Così:

// post-component.component.ts
import { Component } from '@angular/core';
import * as  Parse from 'parse';

@Component({
  selector: 'app-post-component',
  templateUrl: './post-component.component.html',
  styleUrls: ['./post-component.component.scss']
})
export class PostComponentComponent {

  data: postData = {
    title: '',
    body: '',
  }

  handleSubmit(){
    try {
      const Post = new Parse.Object("Post");
  
      Post.set("title", this.data.title);
      Post.set("body", this.data.body);
  
      Post.save().then(() => {
        console.log("New Post added successfully");
      });
    } catch (error) {
      console.log(error);
    }
  }

}

interface postData {
  title: string,
  body: string
}

Il blocco di codice qui sopra è il file post-component.component.ts**.** La funzione handleSubmit crea un nuovo oggetto Parse Post e imposta la sua proprietà title sul valore della proprietà data.title e la proprietà body sulla proprietà data.body. Infine, salva le proprietà dell’oggetto Post sul server Parse utilizzando Post.save().

Le proprietà dei dati riceveranno i loro valori da un utente attraverso un modulo. A tale scopo, si creerà un modulo nel file post-component.component.html.

Così:

<!-- post-component.component.html -->
<form class="post" (ngSubmit)="handleSubmit()">
    <input type="text" placeholder="Title..." name="title" [(ngModel)]="data.title" >

    <textarea name="body" placeholder="Body..."  cols="30" rows="10" [(ngModel)]="data.body"></textarea>

    <button type="submit">Post</button>
</form>

La classe ngModel lega i valori dei campi di input title e body alle proprietà dei dati. ngSubmit gestisce l’invio del modulo richiamando la funzione handleSubmit dichiarata nel file post-component.ts.

Successivamente, si procederà allo stile del componente. Nel file SCSS del componente post, inserire il seguente codice:

/* post-component.component.scss */
.post{
    margin-block-start: 4rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
		
		input{
	    border: none;
			inline-size: 100%;
	    padding: 1rem;
	    border-radius: 7px;

			&::placeholder{
			  color: #e2e2e2;
			}

		textarea{
	    border: none;
	    inline-size: 100%;
	    padding: 1rem;

			&::placeholder{
		    color: #e2e2e2;
			}
		}
}

Recuperare i dati da Back4app

Per recuperare i dati dall’applicazione Back4app, creare una query Parse per la classe da cui si desidera recuperare i dati. La query verrà eseguita nell’hook del ciclo di vita ngOnInit.

Ad esempio:

// home-component.component.ts
import { Component } from '@angular/core';
import * as  Parse from 'parse';

@Component({
  selector: 'app-home-component',
  templateUrl: './home-component.component.html',
  styleUrls: ['./home-component.component.scss']
})
export class HomeComponentComponent {

  data: postData[] = [];

  async ngOnInit() {

    try {
      const query = new Parse.Query("Post");

      const post = await query.find();

      this.data = post;

    } catch (error) {
      console.log(error);
    }
    
  }
  
}

interface postData {
  id: string,
  get: any,
} 

Il blocco di codice precedente cerca un oggetto “Post” nel database dell’applicazione Back4app utilizzando il metodo Parse.Query(). Quindi restituisce un array contenente i risultati della ricerca, richiamando il metodo find dell’SDK Parse sul risultato della chiamata Parse.Query(). Infine, assegna l’array restituito alla variabile data.

Utilizzando l’array di dati, si renderà il modello HTML:

<!-- home-component.component.html -->
<div class="home">  
    
    <div class="post" *ngFor="let post of data">
        <h3>{{ post.get('title') }}</h3>
        <p>{{ post.get('body') }}</p>
        <button>Delete</button>
    </div>

</div>

La direttiva ngFor esegue il loop dell’array e genera gli elementi HTML avvolti nel suo div. Il metodo post.get() recupera i valori delle proprietà title e body degli attributi nel database di Back4App.

A questo punto, è possibile creare lo stile del componente aggiungendo il seguente codice nel file SCSS del componente:

/* home-component.component.scss */
.home{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-block-start: 4rem;

    .post{
        border-radius: 12px;
        padding: 1rem;

        &:hover{
            box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
            background-color: #e2e2e2;
        }

        h3{
            text-transform: uppercase;
            margin-block-end: 0.4rem;
        }

        button{
            margin-block-start: 1rem;
        }
    }
}

Eliminazione dei dati dall’applicazione Back4app

Per eliminare i dati dall’applicazione Back4App, si utilizza il metodo destroy per rimuovere i record corrispondenti dal database. Si creerà una funzione deletePost nel file home-component.component.ts. La funzione deletePost conterrà la logica per eliminare i post dal database dell’applicazione Back4app in base a un determinato ID.

Così:

// home-component.component.ts
async deletePost(id: string) {
    try {
      const Post = Parse.Object.extend("Post");
      const todo = new Post();
      todo.id = id;
      await todo.destroy();
      const newData = this.data.filter( (item: postData) => item.id !== id )
      this.data = newData;
    } catch (error) {
      console.log(error);
    }
  }

Il blocco di codice precedente crea un nuovo oggetto Post utilizzando il metodo Parse.Object.extend. Quindi imposta la proprietà id dell’oggetto Post al parametro id passato alla funzione.

Quindi, chiama il metodo destroy dell’oggetto Post per eliminare dal database di Back4app il post con l’ID indicato. Quindi filtra l’array di dati e restituisce un nuovo array newData, con tutti i post tranne quello cancellato. L’array newData viene quindi assegnato alla variabile data.

Una volta definita la funzione deletePost nel file home-component.component.ts, si legherà la funzione al pulsante di cancellazione nel file HTML del componente, utilizzando l’evento click.

Il file home-component.component.html dovrebbe avere questo aspetto:

<!-- home-component.component.html -->
<div class="home">  
    
    <div class="post" *ngFor="let post of data">
        <h3>{{ post.get('title') }}</h3>
        <p>{{ post.get('body') }}</p>
        <button (click)="deletePost(post.id)">Delete</button>
    </div>

</div>

Infine, aggiungere alcuni stili globali all’applicazione, aggiungendo il blocco di codice sottostante al file styles.scss:

/* styles.scss */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    inline-size: 50%;
    margin: 0 auto;
    background-color: #f2f2f2;
}

a{
    text-decoration: none;
    color: inherit;
}

button{
    border: 1px #333333 solid;
    padding: 0.3rem 0.5rem;
    border-radius: 0.4rem;
    background-color: inherit;
    inline-size: min-content;

		&:hover{
	    background-color: #333333;
	    color: #FFFFFF;
		}
}

Test dell’applicazione

Per testare l’applicazione, aprite il terminale del progetto ed eseguite il comando seguente:

ng serve

Il comando precedente compila l’applicazione e la ospita su un server locale all’indirizzo http://localhost:4200 per impostazione predefinita.

All’avvio dell’applicazione, si dovrebbe vedere l’interfaccia utente mostrata nell’immagine seguente:

Facendo clic sul pulsante di scrittura si accede al componente post. Il componente post contiene un modulo con campi di input e un pulsante.

Il componente post-componente avrebbe il seguente aspetto:

Dopo aver compilato i campi di input, facendo clic sul pulsante di pubblicazione si aggiungono i valori immessi al database di Back4app. Per confermarlo, è possibile controllare la dashboard dell’applicazione Back4app o semplicemente tornare alla homepage dell’applicazione.

Facendo clic sul pulsante di cancellazione si cancella un post. Ad esempio, è possibile eliminare il post “Che cos’è un leone?” facendo clic sul pulsante di cancellazione:

Conclusione

Angular è un potente framework per la costruzione di applicazioni web scalabili e robuste. È dotato di un’architettura modulare, di un potente data binding e di numerosi componenti precostituiti. I suoi vantaggi includono una maggiore produttività degli sviluppatori, un processo di sviluppo semplificato e la possibilità di creare interfacce utente dinamiche, reattive e performanti.

La creazione di un’applicazione Angular con Back4app come soluzione Backend-as-a-Service può semplificare e accelerare notevolmente lo sviluppo. Con l’infrastruttura pre-costruita di Back4app, potete concentrarvi sulla creazione del front-end della vostra applicazione senza preoccuparvi delle complessità dello sviluppo del back-end, come l’autenticazione e l’archiviazione dei dati.