ANGULAR
CORE CONCEPTS

Un corso sulle principali funzionalità di Angular per acquisire una solida base sul framework e sviluppare le prime Single Page Applications

INTRODUZIONE

Un corso sulle principali funzionalità di Angular per acquisire una solida base sul framework e iniziare a sviluppare le prime Single Page Applications: styling, directives, template driven forms, servizi e dependency injection, server-side communication, multi-view applications con Angular Router, una veloce introduzione alla creazione di componenti e all’organizzazione di progetti.

Durante il corso sono previste delle brevi esercitazioni e sarà configurato l'ambiente di lavoro sui laptop dei partecipanti.

OBIETTIVO DEL CORSO

Al termine del corso i partecipanti saranno in grado di creare semplici applicazioni multi-view con angular router, comunicare con il server attraverso REST API, creare template-driven form con validazioni e gestione errori, utilizzare le direttive del framework per manipolare il DOM e creare applicazioni CRUD, sfruttare il motore di dependency injection creando servizi e creare i primi componenti custom riutilizzabili.

Durata: 16 ore

Livello: Principiante

Versione Angular: 14.x

Versione Typescript: 4.x

Tipologia: in aula o da remoto

REQUISITI

Familiarità con almeno un linguaggio di programmazione e, possibilmente, conoscere i concetti fondamentali su cui si basa il paradigma della programmazione ad oggetti.
Aver già utilizzato HTML, CSS e Javascript ES6 sicuramente saranno di grande aiuto.
Se pensi di avere delle carenze su JavaScript e TypeScript, valuta il programma del corso Javascript ES6 & Typescript Intro

TRASCRIZIONE DEL VIDEO

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

Angular Core Concepts è un corso per sviluppatori che non hanno mai utilizzato Angular ma che desiderano in breve tempo acquisire il know-how necessario per realizzare Single Page Applications con uno dei framework front-end più utilizzati al mondo, soprattutto in ambito corporate ed enterprise.

Il corso contiene sessioni di teoria in cui descrivo le funzionalità del framework, ma la quasi totalità delle lezioni è basata su sessioni di live coding in cui descrivo scenari e casi d'uso con esempi reali per poi affrontare le classiche problematiche che si presentano nella realizzazione di una semplice applicazione CRUD multiview, simulando la creazione di un semplice CMS.

Durante il corso descriverò le principali funzionalità dell'ultima release di Angular affinché i partecipanti possano da subito raggiungere una certa autonomia nella gestione delle più comuni attività da integrare in una qualunque applicazione web: gestione template e manipolazione DOM, creazione di form con gestione di validazioni ed errori, comunicazione con REST API, styling, sfruttare il motore di dependency injection e creazione di applicazioni multiview con il router integrato nel framework

Vedremo brevemente anche come organizzazione i template HTML in diversi componenti, anche se questo argomento è tuttavia affrontato in modo più esaustivo nei gli altri corsi in catalogo.

I miei corsi sono sempre tarati sulle skill dei partecipanti e sugli obiettivi della società che lo richiede, perciò sarà possibile decidere di comune accordo se approfondire o meno alcune tematiche, se far svolgere ai partecipanti delle esercitazioni per mettere in pratica i concetti esposti e configurare ad esempio l'ambiente di lavoro sui propri PC (installando Node, NVM, AngularCli e creando i primi progetti Angular) oppure propendere per un corso più intensivo decidendo di approfondire, ad esempio, alcune tematiche fondamentali per il team o il progetto che si deve realizzare.

PROGRAMMA

Environment & Tools

NodeJS, NPM & gestire differenti versioni di NodeJS con NVM

Installare un Terminale su Mac e Windows

Installare e creare progetti con Angular CLI

ANGULAR FUNDAMENTALS

Creazione progetti con angular-cli

Integrazione framework e librerie CSS: Bootstrap, FontAwesome, …

Template Tags

Manipolazione DOM

1-way e 2-way Binding

Decorator @Component e metadata

Dynamic HTML templates

Direttive built-in: *ngIf, *ngSwitch, *ngFor

Gestire e manipolare collezioni dati

DYNAMIC STYLING in ANGULAR

From static to dynamic CSS

inline CSS

css “unit” suffix

ngClass

ngStyle

DEPENDENCY INJECTION

Creazione custom Service Providers

@Injectable decorator: quando e perché usarlo?

Utilizzare i servizi per condividere dati tra routes e componenti

Utilizzare i servizi per gestire lo stato dei componenti

ANGULAR FORMS

Keyboard Events

Template driven forms

Form & Input Template Reference Variables

ngModel directive: 1-way vs 2-ways binding

ngForm e submit

Form validators

Form Errors: custom messages in according with the error type

form state: dirty, invalid, touch, …

Validation with regular expressions

Custom validators with Directives

INTRODUZIONE AI CUSTOM COMPONENTS

Creare Angular Components

Template dinamici

Passare proprietà ai componenti

MULTIVIEW APPLICATIONS

Il modulo @angular/router

Single Page Application Multiview

Router Navigation

Feature Route components

Condividere dati tra le routes

MODALITÀ LEZIONI

TEORIA

Lezioni dedicate alla teoria per comprendere le basi del framework e i suoi costrutti. Decine di slide, diagrammi e materiale esclusivo incluso nel corso

LIVE CODING

La maggior parte del corso è svolto con sessioni di live coding: esempi pratici per la gestione di diversi scenari, casi d'uso tipici e utilizzo delle API più popolari

REAL APPS

Durante il corso sarà sviluppata una semplice Single Page Application per la gestione di operazioni CRUD tramite l'utilizzo di API RESTful allo scopo di mettere pratica i concetti acquisiti.

ESEMPIO LEZIONE

Un semplice esempio di codice Angular per il caricamento di dati acquisiti da servizi REST e la loro visualizzazione tramite alcuni degli strumenti inclusi dal framework:

Direttive del framework: ngIf e ngFor

HttpClient e comunicazione con REST API

Creazione custom types tramite l'utilizzo di interfaccce

ISTRUTTORE:
FABIO BIONDI

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).

RECENSIONIUTENTI

COSA INCLUDE IL CORSO

Corso di formazione on-site

16 ore

CheatSheet Angular Fundamentals

PDF formato A4

CheatSheet Javascript ES6

PDF formato A4

Centinaia di slides

Accesso Area Riservata

Decine di esercitazioni

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)

ANGULAR CORE CONCEPTS

Un corso sulle principali funzionalità di Angular per acquisire una solida base sul framework e sviluppare le prime Single Page Applications

ANGULAR
CORE CONCEPTS