In questa pagina sono raggruppati tutti gli articoli riguardo a Angular & Ionic.

Non si tratta di un manuale o di documentazione ma di un elenco di esempi di codice o mini-guide home-made riguardo allo sviluppo di applicazioni web sviluppate con il framework Anguilar assieme alle librerie Ionic, Redux e NgRx. Si rimanda alla documentazione ufficiale per maggior in formazioni e i dettagli tecnici di ogni argomento.

L'obbiettivo di questi articoli è creare una applicazione web con questi componenti:

• Angular come framework come base per lo sviluppo di applicazioni web, l'uso di questo framework impone l'uso del linguaggio TypeScript al posto di JavaScript.
• Ionic come libreria grafica per lo sviluppo di Web-App ibride per dispositivi mobili, desktop e progressive basate su moderne tecnologie.
• Redux come libreria per la gestione e la centralizzazione dello stato dell'applicazione.
• NgRx come libreria per la gestione dei flussi applicativi e la gestione del workspace.
• Cordova & Capacitor come libreria per la creazione di app per smartphone.

in questo modo sarà possibile creare applicazioni ibride web e app per smartphone basate sulla stessa tecnologia con condivisione di componenti e librerie.

Per la lettura di questi articoli è necessario avere una base di HTML e Javascript, indispensabili per sviluppare siti web e applicazioni con queste tecnologie, si consiglia di aver sempre a portata di click il sito W3C-school per avere sempre disponibile la guida ufficiale. Il linguaggio Typescript è indispensabile per usare al meglio il framework Angular e sarà introdotto con semplici esempi, si rimanda sempre alla documentazione ufficiale per i dettagli tecnici e approfondimenti.

Per la creazione dei progetti e la gestione delle varie fasi di sviluppo fino alla compilazione dei progetti è indispensabile avere a disposizione NPM e NodeJS, rispettivamente gestore delle dipendente e runtime system. Fortunatamente sono facilmente installabili su sistemi Windows e anche su GNU Linux.

Lo sviluppo di stili e siti è possibile con qualsiasi editor di testo anche se è consigliato l'uso di ambiente di sviluppo (IDE) come Visual Studio Code di Microsoft mentre sarà necessario usare Android Studio per lo sviluppo e la creazione dell'app per smartphone, anche in questo caso si rimanda alla documentazione ufficiale.

TypeScript è un linguaggio di programmazione open source sviluppato inizialmente da Microsoft come estensione di JavaScript, che aggiunge tipi, classi, interfacce e moduli opzionali al linguaggio tradizionale. Si tratta di un linguaggio tipizzato, ovvero aggiunge le definizioni di tipo statico: i tipi consentono di descrivere la forma di un oggetto, consentendo al compilatore di verificare che il codice sia scritto correttamente evitando errori in fase di esecuzione. 

In questo  articolo sono presentati alcuni semplici esempi di codice per la manipolazione di liste, concetto molto importante e frequente nei progetti web che visualizzano e manipolano dati. Con TypeScript e il framework Angular, è indispensabile conoscere molto bene l'uso delle Arrow-Function e dell'operatore freccia, senza questa conoscenza risulterà impossibile leggere o scrivere codice. Si rimanda alla lettura e alla documentazione ufficiale di mozilla.org per maggiori dettagli.

La sintassi base per definire una variabile in Typescript:

showSpinner: Boolean = false;

Il nome della variabile viene seguito dal due-punti e dal tipo, successivamente è possibile assegnare un valore iniziale. Se si tratta di un tipo non primitivo ma se si tratta di un oggetto la sintassi è simile

export interface AnnotazioniEntity {
  id:string|number; // Primary ID
  nome:string|null;
}
element : AnnotazioniEntity = {id:1,nome:'Alberto'};

In questo semplice esempio l'inizializzazione avviene tramite la rappresentazione in formato Json, tale modalità è considerata uno standard universale.

Per la gestione delle liste la sintassi è molto simile, per esempio

lista : AnnotazioniEntity[] = [];

Inoltre è importante sapere, perché modalità molto usata, è possibile usare il tipo "any" come jolly per indicare che la variabile può accettare qualsiasi tipo di variabile, per esempio:

list$: Observable<any> = ...;

this.listaAlberto = this.lista.filter ( item => item.nome=='Alberto');

this.listaModificata = this.lista.map ( item => item.nome='Andrea' ); 

this.listaVisualizzata$.sort( (el1, el2) => el1.nome > el2.nome ? 1 : -1);

this.listaPrioritaria = this.listaPersone.slice(0,20);

[...new Set(this.listaPersone.map(e => e.cognome))]

this.listaNumeriPari= [...Array(10).keys()].filter(el=>el%2==0);
this.totale=this.listaNumeriPari.reduce((sum, element) =>sum+element, 0);

getGiovane = (lista) => {
  let l=[...listaPersone.map(e => Number(e.eta)+1)].concat([0]);
  return Math.max( l.reduce((a, b) => Math.max(a, b), 0) );
}

let date:  Date = new Date();
let date2: Date = new Date("2042-10-16");
let date3: Date = new Date(2018, 08, 31, 17, 23, 42, 11);

Tue Feb 05 2019 12:05:22 GMT+0530 (IST)

let dateUTC=new Date("2042-10-16"); // UTC
let dateITA= ""+dateUTC.toLocaleDateString("fr-BE") 
             + " " + dateUTC.toLocaleTimeString("fr-BE"); 

La creazione di un progetto Angular è facilitato dalla procedura guidata messa a disposizione dagli stessi sviluppatori del Framework. Per poter sviluppare è indispensabile avere a disposizione il tool NPM.

La libreria Angular è installabile in un ambiente di sviluppo con il comando:

npm install -g @angular/cli

Successivamente è possibile lanciare la procedura guidata per la creazione di un progetto con il comando:

ng new nomeProgetto

all'interno della procedura guidata vengono richieste le informazioni base del progetto:

• "add Angular routing": l'abilitazione al routing del framework Angular, di default non viene aggiunto ma conviene sempre aggiungerlo se si vuole creare applicazioni web complessi.
• "stylesheet format": il formato dei fogli di stile, è possibile scegliere tra Css, sCss, Sass e Less

il processo di creazione del progetto installerà automaticamente anche tutte le dipendenze necessarie per questo motivo il processo può necessitare anche diversi minuti. Al termine del processo è possibile vedere che è stata creata una cartella con nome del progetto e all'interno presenti i file e le cartelle:

• angular.json: file di configurazione del progetto angular
• node_modules: cartella creata da NPM con tutte le librerie necessarie
• package.json: file di configurazione di NPM con la lista di tutte le dipendenze e la lista dei comandi
• package-lock.json: file di configurazioned i NPM
• README.md: file README (leggimi) in formato md
• src: cartella dei sorgenti del progetto
• tsconfig.app.json: file di configurazione per il compilatore
• tsconfig.json: file di configurazione per il compilatore

In tutti i progetti Angular, la cartella sorgente "src" ha una struttura ben precisa:

• app: cartella che contiene i file TypeScript
• assets: cartella che contiene i file statici dell'applicazione web
• index.html: file HTML principale, con l'indicazione del header e il richiamo al tag
  app-root che è il tag base di Angular
• main.js: file javascript dove è possibile definire
• styles.css: foglio di stile principale dell'applicazione web

All'inteno della cartella "app" sono presenti tutti i file TypeScript, i file principali creati nel progetto base sono:

• app-routing.module.ts: file di configurazione del routing del modulo "app-root"
• app.component.css: file Css del componente "app-root"
• app.component.html: file HTML del componente "app-root"
• app.component.ts: file TypeScript del componente "app-root" richiamato dalla pagina index
• app.module.ts: file di definizione del modulo "app-root" del progetto

Maggiori dettagli su questi file sono descritto nell'articolo che parla dei componenti Angular.

Per avviare un qualsiasi progetto base si deve eseguire il comando:

ng serve

e dalla console si può notare come l'applicazione web viene avviata sulla porta 4200 del sistema, la porta e i vari comandi si possono modificare e personalizzare nei vari file di configurazione del progetto.

La compilazione di un progetto può essere avviata con il comando base:

ng build

che va a generare una cartella dist con all'interno i file del progetto, tra cui il file index.html e i file js (javascript) generati dalla compilazione e compressione del codice TypeScript.

Il framework Angular è studiato per funzionare come combinazione di elementi atomici chiamati "component", questi controllano una porzione di schermo denominata "view", ogni componente è formato da una classe TypeScript, un modello HTML, un foglio di stile CSS e, opzionalmente, da una classe spec di testing. Nel sito ufficiale è possibile trovare maggiori dettagli riguardo a questi elementi di un componente, argomento fondamentale da imparare per poter lavorare in progetti Angular. Per creare un nuovo componente all'interno di un progetto è necessario usare il comando:

ng generate component <nome-componente>

La procedura, senza specifici parametri, costruisce la struttura di default di un componente:

• una cartella chiamata con il nome del componente contenente i quattro file
• una classe TypeScript in un file con estensione ts con la annotation @Component
• un file html per il modello grafico del componente chiamato template
• un file css per gli stili del componente
• un file di test con estensione spec.ts per gli unit-test della classe Typescript

Il comando prevede alcuni parametri opzionali per modificare il comportamento di default, per esempio per evitare la creazione della cartella con il parametro "standalone", evitare la creazione di un unico file con  il parametro "inline-template" ed è possibile usare un parametro per evitare la creazione della classe specifica per i test "skip-test", un esempio completo di combinazione di questi parametri:

ng generate component <nome-componente-due> 
  --standalone --inline-template --skip-tests

In questo caso il componente è riassunto in unico file TypeScript dove la classe possiede una annotation che definisce il template HTML e gli stili

@Component({
  selector: 'app-component-overview',
  template: '<h1>Hello World!</h1>',
  styles: ['h1 { font-weight: normal; }']
})

questa tecnica è sconsigliata tranne nel caso di componenti di poche righe. La documentazione ufficiale descrive tutte le caratteristiche impostabili nella annotation component. La struttura standard di un componente senza il parametro inline è:

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-nome-componente',
  templateUrl: './nome-componente.component.html',
  styleUrls: ['./nome-componente.component.css']
})
export class NomeComponenteComponent implements OnInit {
  constructor() { }
  ngOnInit(): void { }
}

il componente presenta il nome selector da usare negli altri per invocare il componente. Quando creato, se non specificato diversamente, il componente viene importato anche nel file "app.modules.ts", in questo modo tutti i componenti del modulo potranno importare ed usare il componente-tag creato, senza questa importazione il componente non può essere usato. Se in un progetto sono presenti più moduli deve essere importare in tutti i moduli dove il componente deve essere importato, lo scopo di questa tecnica è creare la struttura ad albero dei componenti:

Projection è la tecnica per sviluppare componenti pensati per incastrarsi in maniera nidificata, esistono tre tipi di utilizzo: semplice, multipla o condizionata.

La tecnica Single-slot content projection prevede che un componente venga compreso in un altro in maniera diretta, usando i due componenti di esempio creati sopra il componente in-line può comprendere quello non in-line usando il tag <ng-content>:

@Component({
  selector: 'app-nome-componente-due',
  template: `<p>nome-componente-due works!</p>
    <p><ng-content></ng-content></p>`,
  styleUrls: ['./nome-componente-due.component.css']
})
export class NomeComponenteDueComponent implements OnInit {
  constructor() { }
  ngOnInit(): void { }
}

Per richiamare il secondo componente nel primo bisogna aggiungerlo nel template:

<p>nome-componente works!</p>
<app-nome-componente-due>
  contenuto del uno passato al componente due
</app-nome-componente-due>

La tecnica multipla e la tecnica condizionale sono ben descritti con esempi nel sito ufficiale, queste tecniche sono molto usate nei progetti proprio nella filosofia della struttura ad albero dei componenti, la gestione di dati e degli eventi vengono gestiti con le annotation Input/Output e gli eventEmitter descritti nei prossimi articoli.

In Angular, un template è un frammento di un'interfaccia grafica utente (UI), spesso in italiano viene confuso con il nome "modulo" ma conviene abituarsi ad usare il termine originale in inglese. I template sono scritti in HTML e all'interno è possibile utilizzare una sintassi speciale per sfruttare molte delle funzionalità di Angular che estende la sintassi HTML, questa tecnica permette di creare contenuti dinamici modificando le proprietà del documento (DOM). La sintassi HTML deve essere valida e il fratello non deve includere tag base come <html> e <body> visto che sono gestiti dal framework.

• La prima tecnica, chiamata Interpolation, prevede l'uso dei limitatori {{ e }} per visualizzare variabili o richiamare metodi della classe corrispondente al template, per esempio se in un template è presente una proprietà è possibile visualizzare la variabile nel template. Per esempio <div >Benvenuto {{name}}</div>
• La seconda tecnica, chiamata Template statements, permette di gestire eventi nei template richiamando metodi nella classe corrispondenti, a qualsiasi oggetto DOM è possibile associare un evento con le parentesi tonde e indicare il nome del metodo richiamato. Per esempio <button type="button" (click)="changeName()" 
• La terza tecnica, chiamata Property binding, permette di gestire proprietà e oggetti DOM da valori o metodi della classe richiamando il valore con le parentesi quadre. Per esempio <button type="button"[disabled]="isDisabled"
• La quarta tecnica, chiamata Event binding, permette di gestire eventi specifici come l'inserimento dei tasti tramite sottoeventi con metodi specifici. Per esempio e(keydown.shift.t)="onKeydown($event)"
• Altre tecniche come le direttive input-output e gli eventEmitter saranno introdotti in specifici articoli.

• ndClass: utlizzata per la gestione delle classi in maniera dinamica usando le operazioni ternarie o metodi della classe corrispondente. Per esempio <p [ngClass]="isDisabled ? 'textRed' : 'textGreen' ">
• *ngFor: utile per gestire cicli in maniera dinamica usando come base un elenco presente nella classe del componente. Per esempio <span *ngFor="let figlio of lista">{{figlio}} </span>
• *ngIf: utile per gestire la visibilita di oggetti DOM con una condizione, spesso viene usata una proprietà della classe del componente. Per esempio <div *ngIf="!isDisabled">...</div>

Tutte queste tecniche sono molto usate nei progetti e devono essere ben conosciute in quanto permettono di separare le logiche presenti nelle classi e la rappresentazione grafica del template. Un semplice esempio completo con queste tecniche in un template in-line:

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-nome-componente-due',
  template: `<div >
    Benvenuto {{name}}
    <button type="button" (click)="changeName()" [disabled]="isDisabled">
      Cambia nome</button>
    <div *ngIf="!isDisabled">Clicca il bottone per scoprire</div>
    <input (keydown.shift.t)="onKeydown($event)" />
    <div [ngSwitch]="name" [ngClass]="isDisabled ? 'textRed' : 'textGreen' ">
      <div *ngSwitchCase="'Alberto Nao'" >Fratello minore</div>
      <div *ngSwitchCase="'Andrea Nao'" >Fratello maggiore
        <br />figli: <span *ngFor="let figlio of lista">{{figlio}} </span>
      </div>
    </div>
    <div><ng-content></ng-content></div>
  </div>`,
  styleUrls: ['./nome-componente-due.component.css']
})
export class NomeComponenteDueComponent implements OnInit {
  constructor() { }
  name = 'Alberto Nao';
  isDisabled=false;
  lista=['Alice','Elena','Achille','Ettore'];
  ngOnInit(): void { }
  changeName(){
    this.name="Andrea Nao";
    this.isDisabled=true;
  }
  onKeydown(event:any){// console.log(event)
    console.log( "E' stato premuto la lettera "+event.key+" " );
  }
}

La documentazione ufficiale è ricca di esempi e descrive molto bene tutte le tecniche utilizzabili nei template Angular.

È online la nuova versione del sito con contenuti aggiornati. Nessun articolo e nessun contenuto di questo sito è stato creato con IA o generatori automatici di testi ma tutto è stato scritto con molta pazienza personalmente da Alberto Nao. Tutto il codice presente nel sito Tutti gli esempi di codice nel sito sono coperti da  free software!

I contenuti di AlNao.it potrebbero avere inesattezze o refusi. Non potrà in alcun caso e per qualsiasi motivo essere ritenuta responsabile di eventuali imprecisioni ed errori né di danni causati. Il sito web e tutte le informazioni ed i contenuti in esso pubblicati potranno essere modificati in qualsiasi momento e di volta in volta e senza preavviso. Poiché ogni materiale sarà scaricato o altrimenti ottenuto attraverso l’uso del servizio a scelta e a rischio dell’utente, ogni responsabilità per eventuali danni a sistemi di computer o perdite di dati risultanti dalle operazioni di scarico effettuato dall'utente, ricade sull'utente stesso e non potrà essere imputata ad AlNao.it che declina ogni responsabilità per eventuali danni derivanti dall'inaccessibilità ai servizi presenti sul sito o da eventuali danni causati da virus, file danneggiati, errori, omissioni, interruzioni del servizio, cancellazioni dei contenuti, problemi connessi alla rete, ai provider o a collegamenti telefonici e/o telematici, ad accessi non autorizzati, ad alterazioni di dati, al mancato e/o difettoso funzionamento delle apparecchiature elettroniche dell’utente stesso.

AlNao.it ha adottato ogni possibile accorgimento al fine di evitare che siano pubblicati, nel sito web, contenuti che descrivano o rappresentino scene o situazioni inappropriate o tali che, secondo la sensibilità degli utenti, possano essere ritenuti lesivi delle convinzioni civili, dei diritti umani e della dignità delle persone, in tutte le sue forme ed espressioni. In ogni caso non garantisce che i contenuti del sito web siano appropriati o leciti in altri Paesi, al di fuori dell’Italia. Tuttavia, qualora tali contenuti siano ritenuti non leciti o illegali in alcuni di questi Paesi, ti preghiamo di evitare di accedere al nostro sito e ove scegliessi, in ogni caso, di accedervi, ti informiamo che l’uso che deciderai di fare dei servizi forniti dal sito sarà di tua esclusiva e personale responsabilità. L’utente sarà esclusivo responsabile della valutazione delle informazioni e del contenuto ottenibile mediante il sito web. Il sito web e tutte le informazioni ed i contenuti in esso pubblicati potranno essere modificati in qualsiasi momento e di volta in volta e senza preavviso.

Le pagine di questo sito sono protette dal diritto d’autore (copyright), in particolare a norma della legge sul diritto d’autore e il contenuto del sito è protetto contro duplicazioni, traduzioni, inserimento o trasformazione dello stesso in altri media, incluso l’inserimento o la trasformazione con mezzi elettronici. La riproduzione e lo sfruttamento economico di tutto o di parte del contenuto di questo sito sono consentite solo a seguito del consenso scritto dell’avente diritto. Sia il contenuto che la struttura del sito sono protetti dal diritto d’autore. In particolare, la duplicazione di informazioni o dati, l’uso dei testi o di parte di essi o delle immagini contenute nel sito (eccetto per le foto ad uso stampa) è consentita solo previo consenso scritto dell’avente diritto. Anche le illustrazioni, a norma dell’art. 1 della legge 633/1941 – e successive modifiche e integrazioni – sono protette dal diritto d’autore. Il diritto di pubblicazione e riproduzione di questi disegni è di titolarità dell’avente diritto. Il diritto d’autore sui disegni rimane in vigore anche per i disegni automaticamente o manualmente aggiunti a un archivio. Nulla di quanto contenuto in questo sito vale come concessione a terzi dei diritti di proprietà industriale ed intellettuale indicati in questa sezione. Ci riserviamo tutti i diritti di proprietà intellettuale del sito web.

Marchi ed immagini riferibili a soggetti terzi utilizzati in questo sito non appartengono a AlNao.it e sono da ritenersi di proprietà esclusiva dei rispettivi titolari. Le denominazioni dei prodotti pubblicati su questo sito web o delle società menzionate, anche qualora non siano indicate con il simbolo identificativo della registrazione del marchio sono marchi di titolarità di terzi e sono protetti dalla legge sui marchi (D.lgs. 30/2005 e successive modifiche e integrazioni) e dalle norme in tema di concorrenza sleale. Qualsiasi riproduzione degli stessi è da ritenersi vietata ai sensi di legge. In particolare è espressamente vietato qualsiasi uso di questi marchi senza il preventivo consenso scritto del relativo titolare ed, in particolare, è vietato utilizzarli in modo da creare confusione tra i consumatori in merito all'origine dei prodotti o per finalità di sponsorizzazione, nonché in qualsiasi modo tale da svilire e discreditare il titolare del marchio. Tutti i diritti che non sono espressamente concessi sono riservati al titolare del marchio.

In aggiunta a quanto indicato, AlNao.it non potrà essere ritenuto in alcun caso responsabile di alcun danno derivante dall'utilizzo o dall'impossibilità di utilizzare il sito web, i contenuti, le informazioni o connessi alla qualità degli stessi.