Corso Angular, Javascript ES6 & Typescript

ANGULAR8 & TYPESCRIPT
CORE CONCEPTS

Un corso sulle principali funzionalità di Javascript ES6, Typescript e un’introduzione sull’ultima release di Angular per acquisire una solida base sul framework

INTRODUZIONE

Una panoramica sulle principali funzionalità di Javascript ES6 e Typescript che ogni sviluppatore web dovrebbe conoscere e un’introduzione sull’ultima release di Angular per acquisire una solida base sul framework: styling, directives, template driven forms, servizi e dependency injection, server-side communication, router e una veloce introduzione alla creazione di componenti e all’organizzazione di progetti

DURATA

Il corso ha una durata variabile tra le 16 e le 24 ore, quindi 2 o 3 giornate:

• 16 ore: il corso sarà intensivo, con un ritmo molto veloce e ci concentreremo sui contenuti
• 24 ore: ritmo più lento, argomenti affrontati in modo più approfondito, gli studenti potrano eseguire alcune esercitazioni e configurare l'ambiente di lavoro

Durata: 16 / 24 ore

Livello: Principiante

Versione Angular: 8.x

Versione Typescript: 3.x

Tipologia: Corso in aula

OBIETTIVO DEL CORSO

acquisire una solida base sul framework: creare applicazioni multi-view con angular router, comunicare con il server attraverso REST API, creare form e gestire la validazione, utilizzare direttive e servizi forniti dal framework Angular, sfruttare le potenzialità introdotte da ES6 e Typescript e creare i primi componenti custom

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 sicuramente ti saranno di grande aiuto

PROGRAMMA

JAVASCRIPT ES2015 (aka ES6)

Javascript ES2015

Compiler, Transpiler e tool: Babel, Typescript e Webpack

var vs let vs const: function scope vs block scope

Template Literals

Arrow syntax

Destructuring

Object.assign() e Object concise syntax

Rest e Spread operator

Immutabilità

Array methods: find, map, filter, reduce, …

ES6 modules

Promises e operazioni asincrone

Classi e ereditarietà in ES6

TYPESCRIPT

Typescript vs ES6

Introduzione ai decoratori

Custom Types

Interfacce

Typescript in Angular

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

SERVER SIDE COMMUNICATION

Installazione e configurazione di un REST mock server per i test

Utilizzo del servizio HttpClient per la comunicazione con il server

Comunicazione con REST API

Creazione di applicazioni CRUD: Creare, Read, Update, Delete

Immutable vs Mutable data

Environment & Tools

NodeJS, NPM and multiple Node environments with NVM

Install a Terminal on Mac and Windows

Install and use 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

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

MULTIVIEW APPLICATIONS

Il modulo @angular/router

Single Page Application Multiview

Router Navigation

Feature Route components

Condividere dati tra le routes

IL CORSO INCLUDE

SINGOLI ESEMPI

Decine di esempi pratici e casi d’uso sulle principali funzionalità del framework, le API più popolari e le best practices più utili per la creazione di codice riutilizzabile e scalabile.

REAL APPS

Video lezioni dedicate alla teoria in cui saranno descritti i concetti tramite l’utilizzo di slide, diagrammi animati e materiale esclusivo.

TEORIA

Sessioni di live coding in cui saranno sviluppate Single Page Application che comunicano via API RESTful o RealTime Application che utilizzano Google Firebase per la sincronizzazione tra diversi client.

ISTRUTTORE:
FABIO BIONDI

Fabio is both a community leader and a frequent contributor in many Italian front-end usergroups (Angular, React, Javascript, ...). He's a Google Developer Expert in Web Technologies and Angular with more than 15 years of experience in developing enterprise level applications, interactive experiences and UI components in several languages and web technologies.

Currently, he holds meetups, events and training courses all over Italy and he's speaker in a lot of conferences such as CodeMotion, WebAppConf, Angular Day and more...

His particular specialism is front-end applications and related aspects, both visuals and architectural. He daily uses cutting-edge libraries and frameworks offering training, development, code review and consulting on Angular, React, Typescript/ES6, Redux, NGRX, RxJS, Firebase, D3.js, CreateJS and several other web technologies.