Le basi di Angular

Creiamo il nostro primo componente ed inseriamolo nell' HTML del componente che abbiamo già.

Link Utili:

Definizione del constructor di una classe: https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Classes/costruttore

Parliamo di questo misterioso TypeScript e vediamo come applicarlo nel nostro progetto creando la nostra prima Interface.

Vediamo cosa sono le pipe, come funzionano e proviamo ad utilizzarne una nel nostro progetto.

Link Utili:

Le pipe di Angular: https://www.mrwebmaster.it/javascript/pipe-angular_12753.html

Vediamo più' da vicino un modulo, come e' formato e cosa dobbiamo modificare di esso. Impariamo ad importare un modulo come ngModel che ci servirà a collegare in entrambi sensi il nostro file TypeScript con il nostro HTML.

Creiamo un file contenente un array di eroi e visualizziamo nel nostro componente eroi. Utilizziamo la nostra prima direttiva per fare questo: *ngFor.

Modifichiamo il componente eroi in modo da visualizzare i dettagli dell'eroe che selezioniamo dalla lista.

Il nostro componente eroi si occupa di mostrare la lista degli eroi e di visualizzare i dettagli dell'eroe selezionato, Angular ci consente di dividere la nostra logica il più possibile in modo da facilitare la manutenzione della nostra applicazione.

In questa lezione sposteremo la logica e l'HTML relativo ai dettagli dell'eroe selezionato in un nuovo componente e capiremo come passare valori da un componente padre ad uno figlio.

Utilizziamo ancora una volta la nostra Angular CLI per generare il nostro primo servizio che utilizzeremo per fornire i nostri eroi ovunque l'app ne necessiti.

Introduciamo il concetto di programmazione reattiva di Angular utilizzando la libreria RXjs.

Link Utili:

Guida in dettaglio di RXjs: https://www.mrwebmaster.it/javascript/introduzione-rxjs-applicazioni-angular_12759.html

Aggiungiamo una nuova funzionalità al nostro tour degli eroi: le notifiche!

Un aspetto importante delle applicazioni Web e' la capacita' di gestire la navigazione senza dover fare richieste ad alcuna API, rendendo di fatti la navigazione per gli utenti veloce e fluida.

Aggiungiamo una dashboard per visualizzare i migliori eroi, inseriamo un nuovo componente nel nostro modulo Routing.

Qui come risorsa trovi lo stile (privato) della Dashboard.. il titolo del file e la parola "privato" dovrebbe aiutarti nel giusto collocamento di questo CSS.

Nota bene: non mi sono reso conto di un errore che abbiamo nell'html del componente notifiche dove nella condizione dell' *ngIf utilizziamo in modo improprio la proprietà "length", infatti dovrebbe essere:

<div *ngIf="notifiche.notifiche.length > 0"> e non <div *ngIf="notifiche.notifiche.length() > 0">

Scopriamo come reindirizzare gli utenti dalla homepage alla nostra dashboard.

inoltre esploriamo un po' di più' il concetto di routing e capiamo come passare parametri nell'URL