In questa guida introduttiva tratteremo alcuni dei concetti base per poter iniziare a sviluppare un'applicazione in Angular. A tal proposito cercheremo di illustrare le diverse funzionalità del framework attraverso degli esempi pratici che poi analizzeremo per capire come sfruttare al meglio le potenzialità di Angular al fine di creare delle applicazioni efficienti. Negli esempi, che realizzeremo, useremo Angular 7...
Iniziamo a vedere come creare un'applicazione in Angular e per farlo utilizziamo il tool Angular CLI che consente di inizializzare l'applicazione stessa, creare e configurare moduli, servizi, direttive, pipe e molto altro ancora. Si tratta di uno strumento estremamente interessante e ricco di funzionalità che adopereremo nel corso di tutta la guida. In teoria potremmo tranquillamente creare un'applicazione da...
Abbiamo concluso la precedente lezione mostrando il funzionamento del comando ng serve che mostra un'anteprima dell'applicazione con la funzionalità di live reloading che può tornare molto utile in fase di sviluppo. Ripartiamo allora dalla nostra applicazione generata con Angular CLI e cerchiamo di capire come viene caricata e avviata un'applicazione Angular nel browser.
Riportiamo di seguito il contenuto della cartella...
Nelle precedenti lezioni abbiamo già accennato che un'applicazione Angular può essere vista come un insieme di componenti i quali occupano visivamente una porzione dell'intera applicazione, mostrano delle informazioni sullo schermo e permettono all'utente di interagire con l'applicazione stessa. Ciascun componente rappresenta un'entità configurabile e personalizzabile e può essere inserito in altri componenti. Un componente può quindi avere dei componenti...
Nelle precedenti lezioni abbiamo visto come definire un componente che, ricordiamo, è una semplice classe a cui viene applicato il decoratore @Component. Angular considera un componente come un caso particolare di direttiva (parleremo delle direttive nelle prossime lezioni), ovvero una direttiva avente un template. In effetti per definire completamente un componente utilizziamo una classe all'interno di un file TypeScript...
Nelle precedenti lezioni abbiamo detto che un'applicazione può essere suddivisa in più componenti che possono essere organizzati in modo da formare una struttura gerarchica avente un componente base che chiamiamo root component. Un componente può avere a sua volta uno o più componenti discendenti. Il primo e più usato modo per annidare dei componenti all'interno di un componente genitore,...
Nelle precedenti lezioni abbiamo cominciato a vedere quale strumenti vengono messi a disposizione da Angular per lavorare con i template dei componenti. Abbiamo iniziato a creare delle strutture statiche di componenti annidati per poi illustrare in che modo un componente può comunicare con i propri discendenti e viceversa attraverso i meccanismi del binding delle proprietà e degli eventi.
Quello dei...
In questa lezione continuiamo ad illustrare altri strumenti che Angular fornisce per lavorare con i template e in particolare ci soffermiamo ad analizzare alcune delle direttive predefinite più utili.
Tipi di direttive
In Angular esistono tre tipi di direttive:
i Componenti rappresentano una particolare direttiva caratterizzata dalla presenza di un template;
le direttive dette Attribute directives, il cui nome deriva dal fatto che...
Proseguiamo anche in questa lezione ad esplorare ulteriori funzionalità presenti in Angular per lavorare con i template. In particolare andiamo ad approfondire un argomento con cui abbiamo iniziato a prendere familiarità in alcuni degli esempi visti finora. Parleremo infatti delle Pipe e vedremo cosa sono, come utilizzare quelle già presenti in Angular e come crearne delle nuove.
Cosa sono le...
In questa lezione illustreremo quali sono le diverse fasi del ciclo di vita che attraversa un componente dal momento in cui viene creato fino a quando viene distrutto. Angular dà la possibilità di intercettare queste fasi per avere un controllo maggiore su ciascun componente. Per far ciò basterà aggiungere ai singoli componenti alcuni metodi particolari che prendono il nome...
Dopo una leggera deviazione che ci ha permesso di illustrare qual è il ciclo di vita di un componente, torniamo a rivolgere nuovamente la nostra attenzione ai template dei componenti ed esploriamo una nuova funzionalità che risulta molto spesso utile. Stiamo parlando delle cosiddette Template reference variables che inizieremo a scoprire in questa lezione attraverso dei semplici esempi.
Una Template...
In questa lezione illustreremo attraverso degli esempi in che modo creare delle direttive personalizzate. Anche in questo caso, sebbene sia possibile procedere manualmente alla creazione e modifica dei singoli file, ci affideremo ancora una volta ad Angular CLI.
Come abbiamo già affermato nelle precedendi lezioni, in Angular esistono tre tipi di direttive:
i Componenti che sono delle direttive particolari dotate di...
In questa lezione inizieremo a parlare dei due diversi approcci forniti da Angular per lavorare con i form e vedremo in che modo è possibile acquisire delle informazioni immesse da un utente, validare ciascun campo di input o l'intero form e presentare dei messaggi in caso di errore.
Esistono due diversi modi per creare e gestire dei form in Angular...
Dopo aver visto come creare dei form in Angular utilizzando il metodo Template-driven, vediamo ora un approccio alternativo. In questa lezione illustreremo cosa sono e come creare i cosiddetti Reactive form (o Model-driven Form). In questo caso svolgeremo gran parte del nostro lavoro nella classe che definisce un componente invece di procedere alla configurazione del form all'interno del template.
Come...
A partire dalla versione 2 del framework, il team Angular ha introdotto numerose novità e, in diversi casi, ha utilizzato un approccio completamente differente rispetto alla versione precedente per la risoluzione degli stessi problemi. In tale contesto rientra l'uso della libreria RxJS (Reactive Extensions for JavaScript) che fornisce un'implementazione del tipo di dato Observable il quale viene spesso impiegato...
Analizziamo ora il funzionamento di alcuni degli operatori più utili e comuni degli Observable. La lista degli operatori disponibili è piuttosto lunga e articolata. Per questo motivo risulta impossibile trattarli tutti in un'unica lezione. Per maggiori dettagli e approfondimenti può quindi essere utile consultare la documentazione ufficiale.
Cosa sono gli operatori
Gli operatori sono delle funzioni pure che ricevono in ingresso...
In questa lezione affronteremo un altro argomento cruciale per lo sviluppo di un'applicazione Angular. Parleremo infatti dei Servizi e illustreremo superficialmente il meccanismo di Dependency Injection del framework.
Cosa sono i Servizi in Angular
I Servizi rappresentano un altro tassello fondamentale per la realizzazione di un'applicazione in Angular. Finora abbiamo infatti rivolto la nostra attenzione principalmente ai componenti che hanno il...
In questa lezione vedremo come creare una semplice applicazione che consente di convertire una certa somma di denaro da una valuta all'altra. Per semplicità la valuta di partenza può essere solo una delle tre principali valute, ovvero Euro, Dollaro e Sterlina inglese.
Nell'immagine mostrata in alto riportiamo il mockup dell'applicazione che vogliamo realizzare. Abbiamo opportunamente evidenziato i diversi componenti che...
In questa punultima lezione mostreremo come creare dei nuovi moduli per meglio organizzare la nostra applicazione. Prima però ricapitoliamo cosa sono i moduli in Angular e quali sono le differenze rispetto ai moduli disponibili a partire da ES2015 e in TypeScript.
Cos'è un modulo in Angular
In Angular, un modulo è una classe a cui applichiamo il particolare decoratore @NgModule e...
In quest'ultima lezione vedremo come utilizzare Angular Router per creare delle applicazioni con più view e permettere all'utente di navigare fra le diverse sezioni senza dover ricaricare le pagine attraverso il browser. In questo modo riusciremo a creare una SPA (Single Page Application) che carica all'avvio una pagina iniziale e consente di muoversi fra diverse view in maniera dinamica....
Abbiamo a cuore la tua privacy
Noi e i nostri partner archiviamo e/o accediamo a informazioni su un dispositivo. Cookie, identificatori del dispositivo o analoghi identificatori online (ad es. identificatori basati sull’accesso, identificatori assegnati casualmente, identificatori basati sulla rete) insieme ad altre informazioni (ad es. tipo di browser e informazioni sul browser, lingua, dimensioni dello schermo, tecnologie supportate, ecc.) possono essere archiviati sul o letti dal dispositivo dell’utente per riconoscerlo ogni volta che l’utente si connette a un’app o a un sito web, per una o più finalità qui presentate.
Con il tuo consenso, i tuoi dati possono essere utilizzati per quanto segue: Pubblicità e contenuti personalizzati, misurazione delle prestazioni dei contenuti e degli annunci, ricerche sul pubblico, sviluppo di servizi; Dati di geolocalizzazione precisi e identificazione attraverso la scansione del dispositivo.
I tuoi dati personali verranno trattati e le informazioni dal tuo dispositivo (cookie, identificatori univoci e altri dati del dispositivo) possono essere memorizzate, consultate e condivise con 181 partner, o utilizzate specificamente da questo sito o questa app. Alcuni fornitori potrebbero trattare i tuoi dati personali sulla base dell'interesse legittimo, al quale puoi opporti gestendo le tue opzioni qui sotto. Puoi revocare il tuo consenso in qualsiasi momento facendo clic sul link delle impostazioni sulla privacy situato in fondo alla pagina.
Puoi scegliere come utilizzare i tuoi dati personali. Noi e i nostri partner desideriamo il vostro permesso per fare quanto segue.
Alcuni partner non chiedono il tuo consenso al trattamento dei tuoi dati, ma fanno affidamento sul loro legittimo interesse commerciale. Guarda il nostro elenco di partner per conoscere gli scopi per cui credono di avere un interesse legittimo e come puoi opporti.
Questi sono i nostri partner pubblicitari che partecipano al Framework di trasparenza e consenso dello IAB, creato per garantire un uso trasparente e corretto dei dati.
Questi fornitori sono registrati su Google, ma non nel Transparency & Consent Framework di IAB Europe.
{"b_dec":{"def":"Rifiuta e chiudi","res":"Rifiuta e chiudi"},"priclt":"\u003Cdiv class=\u0022cl-consent-settings cl-consent-settings--is-hidden\u0022\u003E\u003Cstyle\u003E.cl-consent-settings{position:fixed;left:16px;bottom:calc(28px + var(--__lxG___css_var_privacy_icon_auto, 0px));z-index:100;transition:all 0.15s ease-in-out;transform:translateY(0)}.cl-consent-settings--is-hidden{transform:translateY(70px);opacity:0}.cl-consent-settings__hint{border-radius:4px;background:#282A3C;box-shadow:0 4px 24px 0 rgba(0,0,0,.15);color:#FFFCF2;position:absolute;right:-195px;top:0;bottom:0;margin:auto;height:40px;width:175px;display:flex;align-items:center;justify-content:center;padding:4px 12px;font-size:12px;font-weight:400;line-height:16px;cursor:default;user-select:none;transition:transform 0.3s ease,opacity 0.3s ease;transform:translateX(-22px);opacity:0;pointer-events:none;z-index:-1}.cl-consent-settings__hint::after{content:\u0022\u0022;position:absolute;left:-16px;top:0;bottom:0;margin:auto;width:0;height:0;border:0 solid transparent;border-top-width:12px;border-bottom-width:12px;border-right:16px solid #282A3C}.cl-consent-settings__btn{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0;border:none;background-color:#4b81e8!important;background-position:center center;background-size:30px 30px;background-repeat:no-repeat;box-shadow:0 0 20px 0 rgba(0,0,0,.35);z-index:70;position:relative;text-decoration:none;cursor:pointer}.cl-consent-settings__btn::before{content:\u0022\u0022;-webkit-mask-image:url(\u0022data:image\/svg+xml,%3Csvg xmlns=\u0027http:\/\/www.w3.org\/2000\/svg\u0027 width=\u002730\u0027 height=\u002730\u0027 viewBox=\u00270 0 30 30\u0027 fill=\u0027none\u0027%3E%3Cpath fill=\u0027%23fff\u0027 d=\u0027M15 2.813C8.28 2.813 2.812 8.28 2.812 15S8.28 27.188 15 27.188c6.72 0 12.188-5.468 12.188-12.188C27.188 8.28 21.72 2.812 15 2.812Zm0 1.874c5.686 0 10.313 4.627 10.313 10.313 0 5.686-4.627 10.313-10.313 10.313-5.686 0-10.313-4.627-10.313-10.313C4.688 9.314 9.314 4.687 15 4.687Zm-1.875 3.75a.937.937 0 1 0 0 1.875.937.937 0 0 0 0-1.874Zm5.156.938a1.406 1.406 0 1 0 0 2.812 1.406 1.406 0 0 0 0-2.812Zm-7.968 2.813a1.875 1.875 0 1 0 0 3.749 1.875 1.875 0 0 0 0-3.75Zm5.624 1.874a.938.938 0 1 0 0 1.876.938.938 0 0 0 0-1.876Zm4.688.938a.938.938 0 1 0 0 1.875.938.938 0 0 0 0-1.875Zm-8.906 2.813a1.406 1.406 0 1 0 0 2.812 1.406 1.406 0 0 0 0-2.813Zm6.562.937a1.406 1.406 0 1 0 0 2.813 1.406 1.406 0 0 0 0-2.813Z\u0027\/%3E%3C\/svg%3E\u0022);mask-image:url(\u0022data:image\/svg+xml,%3Csvg xmlns=\u0027http:\/\/www.w3.org\/2000\/svg\u0027 width=\u002730\u0027 height=\u002730\u0027 viewBox=\u00270 0 30 30\u0027 fill=\u0027none\u0027%3E%3Cpath fill=\u0027%23fff\u0027 d=\u0027M15 2.813C8.28 2.813 2.812 8.28 2.812 15S8.28 27.188 15 27.188c6.72 0 12.188-5.468 12.188-12.188C27.188 8.28 21.72 2.812 15 2.812Zm0 1.874c5.686 0 10.313 4.627 10.313 10.313 0 5.686-4.627 10.313-10.313 10.313-5.686 0-10.313-4.627-10.313-10.313C4.688 9.314 9.314 4.687 15 4.687Zm-1.875 3.75a.937.937 0 1 0 0 1.875.937.937 0 0 0 0-1.874Zm5.156.938a1.406 1.406 0 1 0 0 2.812 1.406 1.406 0 0 0 0-2.812Zm-7.968 2.813a1.875 1.875 0 1 0 0 3.749 1.875 1.875 0 0 0 0-3.75Zm5.624 1.874a.938.938 0 1 0 0 1.876.938.938 0 0 0 0-1.876Zm4.688.938a.938.938 0 1 0 0 1.875.938.938 0 0 0 0-1.875Zm-8.906 2.813a1.406 1.406 0 1 0 0 2.812 1.406 1.406 0 0 0 0-2.813Zm6.562.937a1.406 1.406 0 1 0 0 2.813 1.406 1.406 0 0 0 0-2.813Z\u0027\/%3E%3C\/svg%3E\u0022);background-color:#ffffff!important;mask-repeat:no-repeat;width:30px;height:30px}.cl-consent-settings__btn:hover+.cl-consent-settings__hint{transform:translateX(0);pointer-events:all;opacity:1}.cl-consent-settings__user{width:18px;height:18px;border-radius:50%;padding:0;border:1px solid #fff;background-color:#00AD98;background-image:url(\u0022data:image\/svg+xml,%3Csvg xmlns=\u0027http:\/\/www.w3.org\/2000\/svg\u0027 viewBox=\u00270 0 10 11\u0027 width=\u002710\u0027 height=\u002711\u0027 fill=\u0027none\u0027%3E%3Cpath fill=\u0027%23fff\u0027 stroke=\u0027%23fff\u0027 stroke-width=\u0027.1\u0027 d=\u0027M6.858 6.262A3.3 3.3 0 0 0 8.2 3.597C8.2 1.796 6.764.325 5 .325s-3.2 1.47-3.2 3.272c0 1.094.53 2.07 1.342 2.665A4.67 4.67 0 0 0 .45 10.5v.05h1v-.05c0-2.012 1.585-3.632 3.55-3.632s3.55 1.62 3.55 3.632v.05h1v-.05a4.67 4.67 0 0 0-2.692-4.238ZM5 1.345c1.22 0 2.2 1.002 2.2 2.252s-.98 2.25-2.2 2.25-2.2-1-2.2-2.25.98-2.252 2.2-2.252Z\u0027\/%3E%3C\/svg%3E\u0022);background-position:center center;background-size:9px 10px;background-repeat:no-repeat;z-index:75;position:absolute;top:-2px;right:-8px;text-decoration:none;visibility:hidden}\u003C\/style\u003E\u003Cbutton type=\u0022button\u0022 class=\u0022cl-consent-settings__btn\u0022\u003E\u003Cspan class=\u0022cl-consent-settings__user\u0022\u003E\u003C\/span\u003E\u003C\/button\u003E\u003Cdiv class=\u0022cl-consent-settings__hint\u0022\u003EImpostazioni sulla privacy e sui cookie\u003C\/div\u003E\u003C\/div\u003E","pricds":"show_in_the_footer","pricaa":1,"vcnt":181,"_t":{"titles":"Purposes|Purposes (Legitimate Interest)|Features|Special Features|Special Purposes|Scopi|Scopi (Interesse Legittimo)|Caratteristiche|Caratteristiche Speciali|Scopi Speciali","sp3_ret":"Le scelte che fai riguardo agli scopi e alle entità elencati in questo avviso sono salvate per un massimo di $sp3_retention$ nei seguenti cookie e variabili di archiviazione locale","ill_pp_ttl":"Esempi di Utilizzo","vndr_dtls_con":"Trattamento dei dati basato sul tuo consenso","vndr_dtls_li":"Trattamento dei dati basato sul legittimo interesse","vndr_dtls_fi":"Trattamento dei dati basato sul tuo consenso o interesse legittimo","cks_strg_dur":"dura $DURATION$","cks_strg_ses":"per la sessione attuale","cks_strg_not_used":"non utilizzato","cks_strg_dur_s":"sec","cks_strg_dur_i":"min","cks_strg_dur_h":"ora(e)","cks_strg_dur_d":"giorno(i)","cks_strg_dur_m":"mese(i)","cks_strg_dur_y":"anno(i)","vr_dts_purl":"URL della politica sulla privacy","vr_dts_dsurl":"URL di divulgazione dell\u0027archiviazione del dispositivo","vr_dts_dsurl_h":"Informazioni aggiuntive su archiviazione e operazioni","vr_dts_clmurl":"URL della richiesta di interessi legittimi","vr_dts_datac":"Categorie di dati","vr_dts_datac_h":"Categorie di dati raccolti in relazione agli scopi","vr_dts_stdret":"Conservazione dei dati standard (giorni)","vr_dts_stdret_h":"Il periodo standard è utilizzato a meno che non sia dichiarato un altro periodo per scopi specifici.","vr_dts_ret":"Conservazione dei dati (giorni)","vr_dts_usecks":"Usa i cookie","vr_dts_usecks_h":"Indica se il fornitore utilizza l\u0027archiviazione dei cookie (sessione o altro). SÌ indica che l\u0027archiviazione dei cookie è utilizzata. NO - l\u0027archiviazione dei cookie non è utilizzata.","vr_dts_usecksy":"Sì","vr_dts_usecksn":"No","vr_dts_cksage":"Età massima del cookie","vr_dts_cksage_h":"Il numero di secondi che rappresenta la durata potenziale più lunga per l\u0027archiviazione dei cookie su un dispositivo. Se un fornitore utilizza più cookie con durate diverse, rappresenta il cookie con la durata più lunga. Un numero negativo o 0 indica l\u0027archiviazione della sessione simile alla specifica Set-Cookie.","vr_dts_cksref":"Aggiornamento cookie","vr_dts_cksref_h":"Indica se i cookie vengono aggiornati dopo essere stati inizialmente impostati. SÌ - indica che il fornitore può aggiornare i cookie. NO - indica che il fornitore non aggiorna i cookie ogni volta che il browser viene ricaricato.","vr_dts_noncks":"Utilizza l\u0027accesso senza cookie","vr_dts_noncks_h":"Indica l\u0027uso da parte del fornitore di archiviazione non-cookie e accesso alle informazioni già memorizzate sul dispositivo di un utente. SÌ - indica che l\u0027accesso senza cookie è utilizzato. NO - indica che l\u0027archiviazione e l\u0027accesso senza cookie alle informazioni già memorizzate sul dispositivo di un utente non vengono utilizzati.","vr_dts_hgetl":"Limite della lunghezza della richiesta HTTP GET (Kbyte)","vr_dts_hgetl_h":"Dimensione massima della richiesta GET in kilobyte per aiutare a diagnosticare i problemi con il passaggio della stringa TC e limitare le stringhe di dimensioni eccessive.","vr_dts_addtnl":"Dati aggiuntivi","vr_dts_legaddr":"Indirizzo completo dell\u0027entità legale","vr_dts_b2bcont":"Dettagli di contatto B2B","vr_dts_terscp":"Ambito territoriale","vr_dts_terscp_h":"Indica le giurisdizioni UE\/SEE\/UK in cui il fornitore opera con TCF. Nota che questo è diverso dalla sede del fornitore.","vr_dts_env":"Ambiente","vr_dts_env_h":"Indica gli ambienti in cui il venditore opera","vr_dts_tserv":"Tipo di servizi","vr_dts_tserv_h":"Indica il tipo di servizi offerti dal venditore","vr_dts_trnsfout":"Trasferimenti internazionali fuori dall\u0027UE\/SEE","vr_dts_trnsfout_h":"Indica le giurisdizioni UE\/SEE\/UK in cui il fornitore opera con TCF. Nota che questo è diverso dalla sede del fornitore.","vr_dts_trnsfmch":"Meccanismi di trasferimento internazionale"}}