Il primo Learning Friday è stato tenuto dal nostro Simone Pesce che ci ha spiegato le funzionalità di Angular.

Simone Pesce ci ha parlato di cinque funzionalità di Angular:

• Lazy Loading;
• Preloading Strategy;
• Route Guards;
• Route Resolvers;
• Http Interceptors.

Nell’articolo precedente ci siamo fermati alla spiegazione della Preloading Strategy ora riprendiamo il discorso con le Route Guards.

Route Guards:here’s some boundaries!

Le Route Guards sono interfacce presenti nella libreria Angular che definiscono le regole sulle routes. In questo modo ogni route avrà determinati comportamenti in base alle implementazioni che vengono stabilite attraverso tali “guardie”.

Come si applica una Route Guard all’interno di una route?

Semplice. Si definisce un’altra proprietà nella definizione della route associando il relativo Route Guard. Ne esistono di cinque tipologie:

1. CanActivate: definisce se tale route può essere caricata o meno;
2. CanActivateChild: definisce se la route “figlia” di quella navigata può essere caricata o meno;
3. CanDeactivate: definisce se una determinata route può essere abbandonata, ossia se l’utente può abbandonare una certa pagina;
4. CanLoad: definisce se un intero modulo può essere caricato o meno (va quindi di pari passo con Lazy Loading);
5. Route Resolvers: è una Route Guard particolare, che approfondiremo nel dettaglio in seguito.

Ecco un esempio pratico: CanActivate fa sì che una certa sezione di un sito possa essere navigata solo se autenticati: se l’utente non è autenticato e ha comunque raggiunto quella sezione, la pagina non verrà caricata grazie alla “guardia”

Route Resolvers: un Guard particolare

I Route Resolvers sono dei Route Guards che non agiscono sulla route per permetterci o meno di navigarla. Essi agiscono sulla route per pre-caricare i dati del componente che si sta per andare a navigare.

Come funziona?

Si implementa la classe Resolver di Angular Route e il relativo metodo Resolver. Si definisce la relativa proprietà ossia “Resolver” e quindi si identifica un oggetto in cui è presente una chiave a cui è associato un servizio Angular che implementa l’interfaccia Resolver.

In sintesi:

definendo un Resolver, i dati di tali pagine verranno pre-caricati e le informazioni appariranno gradualmente. È un Guard particolare perché non definisce solamente se si possa o no entrare in un certo componente, ma permette di pre-caricare i dati di quel componente che verranno messi all’interno della route.

In questo modo, ad esempio, lo stile e la grafica di una pagina internet saranno già pre-caricati in anticipo.

Http Interceptors: client e server, richieste e risposte

Interceptors è l’unica funzionalità che dipende dalla versione di Angular: è infatti disponibile solo dalla quarta in poi. Gli Interceptors si frappongono tra il client e il server e anticipano tutte le richieste effettuate con il servizio Angular HttpClient. Non solo:essi, infatti, si trovano anche tra server e client, in risposta. Vengono utilizzati dunque per modificare richiesta e risposta e intervengono unicamente sulle richieste http, non sull’applicazione in sé.

In concreto:

quando si vanno a impostare gli Interceptors, è importante l’ordine: se si hanno due interceptors infatti in fase di richiesta verrà valutato per primo quello impostato per primo, mentre in fase di risposta avverrà l’opposto. È in base all’ordine dunque che verranno valutati.

Sei uno sviluppatore Angular? Contattaci a jobs@key2.it: siamo sempre alla ricerca di nuovi talenti!