Blog | Contattami | Elenco corsi

ANGULAR MASTERING UI

Approfondimento sul framework: componenti, dependency injection, custom pipes, attribute & structural directives

angular-ui



INTRODUZIONE
Due giornate di formazione in cui si analizzano metodologie, scenari e strumenti inclusi nel framework Angular, spesso poco noti, per padroneggiare la creazione di componenti custom, sfruttare al massimo il motore di dependency injection, creare custom pipes e direttive.
OBIETTIVO DEL CORSO
Approfondire diversi costrutti e API del framework, solitamente poco utilizzati, allo scopo di sfruttarne tutto il potenziale, creando codice riutilizzabile, testabile ed efficiente.
REQUISITI
Conoscere le fondamenta del framework e/o aver partecipato ai corsi Angular Core Concepts e Mastering Angular. E’ preferibile aver già creato in precedenza progetti Angular per trarre il massimo beneficio dal corso e apprezzarne i contenuti.

Durata: 16 ore
Livello: Avanzato
Versione Angular: 14.x
Versione Typescript: 4.x+
Tipologia: in aula o da remoto


TRASCRIZIONE DEL VIDEO
Ciao, mi chiamo Fabio Biondi, sono Google Developer Expert in web technologies e Angular.

In questo corso analizzeremo tecniche, metodologie e API del framework Angular, spesso poco documentate, per lo sviluppo di componenti, direttive, pipes e un'utilizzo avanzato del motore di dependency injection.

Per questo motivo, questo corso è infatti apprezzato soprattutto da coloro che già utilizzano Angular da un po' di tempo ma desiderano un approfondimento su 4 dei pilastri fondamentli del framework:

• il primo è la creazione di componenti custom: descriverò infatti in dettaglio ogni fase del ciclo di vita, useremo le QueryList tramite decoratori ViewChildren e ContentChildren, creremo istanze di componenti a runtime, vi mostrerò come sfruttare strategie di change detection per ottimizzare le performance, animations, integrazione librerie terze parti e altro ancora creando componenti come accordion, chart, google map, componenti di layout come griglie, collapsable panels e organizzandoli in moduli custom.

• creeremo direttive custom, sia attribute che structural (ovvero direttive che hanno l'asterisco come prefisso), per la manipolazione del DOM, la gestione della sicurezza, applicare styling, automatizzare processi e gestire eventi. Ho notato che la direttiva custom è uno degli strumenti meno utilizzati e sottovalutati dagli sviluppatori Angular ma se ci pensate, la maggior parte delle funzionalità del framework per la gestione della UI sono basate su questo costrutto, basti pensare a ngIf, ngFor, ngClass, routerLink e così via.

• custom pipes: formattare dati, filtrare elenchi con ngFor, creare pipe sincrone, asincrone, pure e impure.

• ampio spazio sarà dato anche al motore di dependency injection, un altro argomento spesso sottovalutato e la cui padronanza vi permetterà, non solo di evitare diversi bug o comportamenti anomali generati soprattutto quando si utilizzano moduli custom e lazy loading, ma anche di sfruttare il motore di injection per creare codice più scalabile e spesso più conciso. E' quindi fondamentale comprendere come funziona la gerarchia degli injector, comprendere l'utilizzo di InjectionToken, useClass, useExisting, useFactory, l'utilizzo di forRoot() (usatissimo in quasi tutte le librerie Angular di terze parti che già integrate nella vostra app).

Creeremo e pubblicheremo inoltre una libreria di componenti e servizi su npm, allo scopo di creare uno uikit di funzionalità riutilizzabili su più progetti, scriveremo alcuni unit test, organizzeremo le funzionalità in moduli e molto altro.

Gli argomenti sono tantissimi e vi consiglio di dare un'occhiata al programma dettagliato.
PROGRAMMA
Custom Components
@Input, @Output e Content (multiple) Projection
Component-based approchat e 1-way data flow architectures
stateless vs stateful components
Ciclo di vita dei componenti
Componenti riutilizzabili
Componenti compositi
Comunicazione tra componenti
Components Techniques
Local CSS e ViewEncapsulation
Gestione errori e messaggi eccezioni personalizzati
"@ViewChildren" vs "@ContentChildren" decorator
Creare istanze di componenti a runtime, invece che dai template
"ViewContainerRef" e "ComponentFactoryResolver"
Utilizzo dell’immutabilità
Ottimizzazione performance e strategie di ChangeDetection
Component providers e approfondimento dependency injection
Dependency Injection, configurazione provider nei componenti
Componenti riutilizzabili per UIKit
Grid e layout components
Typography, List, TabBar, Cards
Collapsable, Side Panel, Divider e molto altro
Accordion e componenti “compositi”
Integrazione 3rd party libraries / types
Mappe: integrazione Google Map API
Chart riutilizzabili: integrazione ChartJS
Creare custom modules per l'organizzazione dei componenti
Mastering Dependency Injection
Creare servizi e routine riutilizzabili
Condividere dati tra componenti e views
@Injectable e providedIn
Gerarchia degli injectors
@Inject and useValue
InjectionToken
useClass vs useFactory vs useExisting
Gestione providers in moduli e componenti
utilizzo di forRoot() per i moduli “shared”
environments & dependency injection: development e production
Custom Pipes
Built-in formatter: "date", "number", "json"
Cicli su oggetti con "ngFor" e "keyvalue" pipe
"ngIf...as" & "async" pipe
Creazione custom pipes
Pure vs Impure Pipes
Pipe di conversione di formato
Creare Pipe per filtrare elenchi di dati tramite "ngFor"
Pipe asincrone e richieste HTTP
Custom pipes per generare immagini
Custom pipes e 3rd party REST API
Attribute Custom Directives
Creare direttive per la manipolazione del DOM
Manipolazione DOM con "@HostBinding" decorator
Gestione eventi con "@HostListener" decorator
Utilizzare l’"@Input" decorator come setter e getter
Structural directives VS attribute directives
Il ciclo di vita di una direttiva
Creare direttive “non visuali”
Gestione layout responsive con le direttive
Integrazione 3rd party API
Animazioni CSS
Creare custom Form validator per i template-driven forms
Structural Custom Directives
Direttive strutturali: utilizzo del simbolo “asterisk” *
Utilizzo delle direttive per gestione sicurezza e ruoli utenti
DOM: ElementRef vs TemplateRef
Usare le direttive per creare istanze a runtime di components
"ViewContainerRef", "ComponentResolveFactory", "createEmbeddedView"
Creare custom *repeater (alternativa a *ngFor)
Sfruttare le direttive per gestire autenticazione e ruolo utenti
Utilizzare RxJS e Observable all’interno di direttive
MODALITÀ LEZIONI
TEORIA
angular-ui-mode1
Approfondimento su API, tecniche e funzionalità del framework. Decine di slide, diagrammi e materiale esclusivo incluso nel corso
LIVE CODING
angular-ui-mode2
La maggior parte degli argomenti sono esposti tramite sessioni di live coding, affrontando scenari reali e creando codice riutilizzabile
SOURCE CODE
angular-ui-mode3
Al termine del corso avrete a disposizione decine di componenti, direttive, pipes, moduli e tecniche da riutilizzare in applicazioni reali



ESEMPIO LEZIONE
In questo video la creazione di un custom pipe:

Formattare dati con i pipe forniti dal framework
Creazione di un custom pipe
Utilizzare il decoratore @Pipe e l'interfaccia PipeTrasform
ISTRUTTORE:
FABIO BIONDI

codemotion-2019-circle



TRAINER, SPEAKER, DEVELOPER
Mi chiamo Fabio Biondi, sono Microsoft MVP e Google Developer Expert in Angular e Web Technologies, e ho più di 15 anni di esperienza nella creazione di applicazioni web enterprise.

Sviluppatore, Istruttore e Speaker in numerosi eventi. Ho fondato e gestisco diverse community italiane che si occupano di Javascript, Angular, React e Opportunità per gli sviluppatori (più di 30000 membri).

Attualmente mi occupo di formazione e mentoring su Javascript / Typescript, Angular, React, Redux, NGRX, RxJS, Next e, recentemente, Lit e Web Components.
Mi occupo, inoltre, di creazione contenuti tecnici su YouTube (in italiano e in inglese) e sono partner su Twitch in cui mi trovate spesso in streaming (con ospiti, sessioni di formazione, live coding e studio di nuove tecnologie).
CERTIFICATIONI & AWARDS

  • Dal 2019: Microsoft MVP
  • Dal 2018: Google Developer Expert in Web Technologies e Angular
  • 2004-2011: Adobe Certified Expert & Instructor (Flex, AIR, Flash).

  • Awards Google & Microsoft
    RECENSIONIUTENTI

    COSA INCLUDE IL CORSO
    Corso di formazione on-site
    16 ore
    Centinaia di slides
    Accesso Area Riservata
    Esercitazioni post-corso
    Accesso Area Riservata
    Codice Sorgente
    Incluso
    Attestato di partecipazione
    PDF formato A4


    FAQ
    A chi è rivolto?
    Principalmente a team e società che intendono organizzare corsi di formazione per un ristretto gruppo di partecipanti (da 3 a 30 persone).
    Tuttavia, organizzo spesso corsi ed eventi aperti al pubblico in cui chiunque può partecipare (freelance, appassionati, dipendenti). Ti invito a seguirmi sui vari canali social o di iscriverti alla newsletter per rimanere aggiornato sulle iniziative
    Non sono sicuro che questo corso sia adatto al mio team. Puoi aiutarmi ad orientarmi?
    Assolutamente sì. Utilizza il form di contatto per organizzare una riunione Skype / telefono
    Posso modificare il programma e creare un corso personalizzato ?
    Sì. Puoi scegliere gli argomenti che preferisci da questo e altri corsi e possiamo stilare insieme un programma personalizzato sulla base dei vostri obiettivi e del background dei partecipanti. Per i corsi più avanzati, solitamente, organizzo una skype call con i partecipanti in modo da valutare il grado di preparazione attraverso un'intervista e/o una sessione di code review (gratuita, della durata di 30/60 minuti)
    Dove può essere erogato il corso?
    • In Friuli, Ronchi dei Legionari (Gorizia) - Max 14 posti con seduta e tavolo oppure 80 posti solo seduta.
    • On-Site, presso la vostra sede, in tutta Italia
    Quanto costa?
    Richiedi le mie tariffe attraverso il form di contatto specificando indirizzo in cui erogare il corso, il periodo e la durata
    C'è un quantitativo minimo di giornate da acquistare?
    Almeno 2 giornate se la durata del viaggio (da Trieste, la provincia in cui risiedo) è inferiore alle 4 ore.
    Tre giornate, invece, nel caso di una durata superiore.
    Il corso prevede esercitazioni per gli studenti?
    La scelta è vostra. È possibile effettuare 1 o 2 ore di esercitazioni al giorno oppure lasciare spazio agli argomenti del corso ed approfondimenti
    Devo portare il mio laptop?
    Lo consiglio ma non è indispensabile. È necessario solo se intendete configurare l'ambiente di lavoro o effettuare esercitazioni. Un blocco appunti e una penna sono più che sufficienti dato che, dopo il corso, avrete comunque accesso al materiale tramite un'area riservata (slide, esercitazioni, source code)