Cosa è Angular? Caratteristiche e vantaggi

In questo articolo vedrai cosa è Angular e perché abbia una grande diffusione, soprattutto nello sviluppo di applicazioni web di grandi dimensioni.

Angular è una piattaforma di sviluppo per applicazioni web scritta in TypeScript.

E’ mantenuta da Google ed è utilizzata da grandi aziende.

Tra le altre, possiamo nominare PayPal, Deutsche Bank e Microsoft.

Indice

Cosa è Angular

Angular è un framework per lo sviluppo di Single Page Applications.

Queste, spesso chiamate semplicemente SPAs, consentono l’utilizzo di un’applicazione web senza mai dover ricaricare la pagina.

In un sito ‘tradizionale’ il cambiamento di indirizzo comporta il ricaricamento completo della pagina.

Invece, in una Single Page Application, le informazioni richieste vengono ottenute tramite chiamate AJAX, senza quindi dover caricare un documento html completo.

Ciò che si ottiene è quindi un’esperienza di navigazione più fluida.

Inoltre, questa piattaforma di sviluppo permette di scrivere codice facilmente riutilizzabile (componenti / servizi) e facilmente testabile, grazie agli strumenti messi a disposizione del framework.

Buona parte delle funzionalità del framework sono implementate grazie all’utilizzo della libreria RxJS.

Se volessi avere più informazioni in merito, puoi consultare l’articolo RxJS cosa è e dove viene utilizzata.

Angular: caratteristiche

In questa sezione presenterò le principali caratteristiche del framework di sviluppo per applicazioni web.

Componenti di Angular

Angular permette la definizione componenti riutilizzabili.

Il seguente estratto di codice definisce il componente <utente></utente>.

import { Component } from '@angular/core';
@Component({
  selector: 'utente',
  template: `
    <h2>Utente</h2>
    <p>Questo è un utente!</p>
  `
})
export class UtenteComponent {
  // codice che implementa la logica per disegnare un utente
}

Nel resto dell’applicazione potrai utilizzare il componente utente quante volte vorrai, semplicemente utilizzando i tags <utente></utente>.

Ogni componente supporta degli Input e degli Output.

Nell’articolo Angular EventEmitter: cosa è e come si usa approfondisco l’utilizzo degli Output nei componenti della piattaforma di sviluppo.

Servizi di Angular

I servizi definibili nel framework sono degli oggetti che solitamente gestiscono la logica di business dell’applicazione.

Vengono utilizzati solitamente per la comunicazione tra servizi, componenti o per l’invio / ricezione di informazioni dal server.

Nel seguente estratto di codice definiamo il servizio PersonProviderService.

@Injectable({
  providedIn: 'root',
})
export class PersonProviderService {
   // codice che implementa la logica del servizio
}

Quindi, nel codice che implementa AziendaComponent, otteniamo un’istanza del servizio PersonProviderService, grazie alla dependency injection.

import { Component } from '@angular/core';
@Component({
  selector: 'azienda',
  template: `
    <h2>Azienda</h2>
    <p>Questo è un'azienda!</p>
  `
})
export class AziendaComponent {
  // usiamo la dependency injection per avere 
  // un'istanza di PersonProviderService
  constructor(private service: PersonProviderService) { }
  // codice che implementa la logica per disegnare un'azienda
}

Angular: vantaggi

I principali vantaggi che il framework offre sono:

Fluidità di navigazione per l’utente finale
Codice facilmente riutilizzabile
Codice facilmente testabile
Supporto multibrowser garantito
Minificazione codice built-in
Prevenzione Cross-Site Scripting (XSS)
Consistenza del codice prodotto grazie a TypeScript

Approfondimenti Angular

In questo sito puoi trovare numerosi articoli dedicati ad Angular.

Eccone alcuni:

Conclusioni

In questo articolo hai letto cosa sia Angular, il framework per lo sviluppo di applicazioni web supportato da Google.

Se volessi leggere di più in merito a questo progetto, ti invito a leggere la pagine del sito ufficiale.

Seguimi su