header_angular_tutorials

ANGULAR MASTER CLASS (8gg)

NUOVO SITO WEB

Articoli, tutorial, informazioni aggiornate su corsi ed eventi sono disponibili sul nuovo sito web:

training.fabiobiondi.io

Questo contenuto è quindi obsoleto!!

Angular Master Class è un corso di formazione di 8 giornate su
Typescript, Angular 4+, Redux e RxJS

ARGOMENTI

  • Javascript ES2015 e Typescript fundamentals
  • Sviluppo Single Page Applications in Angular e Typescript
  • Angular features: binding, styling, forms, server communication, pipes, dependency injection
  • Approccio component-based
  • Applicazioni multi-view con angular router, autenticazione JWT e gestione sicurezza
  • Tecniche, metodologie e best practices per la creazione di direttive e custom components
  • Data Architectures in Redux e RxJS (fundamentals)
  • Code Quality: Test, Linting, Documentation, Coverage e molto altro
  • Build & Distribution con Webpack

A CHI E’ RIVOLTO?

È rivolto principalmente ad aziende e scuole che desiderano formare:

  • TEAM e DEVELOPERS: riduce tempi e costi di migrazione da un precedente stack
  • STAGISTI e STUDENTI

INFORMAZIONI SUL CORSO

  • 8 giornate di formazione (64 ore)
  • Moduli di 2 giornate che includono sessioni di teoria, pratica ed esercitazioni
  • 800+ slides con soluzioni, snippets, best practices e decine di casi d’uso
  • 5+ repository con snippet e codice riutilizzabile
  • Video tutorial e materiale extra pre e post-corso incluso
  • Su richiesta: registrazioni video delle attività didattiche
  • E’ possibile partecipare ad un modulo intermedio/avanzato senza aver frequentato uno dei moduli precedenti

 

LEARN

La mattina e una parte del pomeriggio sono dedicati alla teoria, costantemente supportata da slides, esempi pratici e diversi casi d’uso illustrati dal docente.

LIVE CODE

Il docente scriverà codice “dal vivo” applicando buona parte degli argomenti trattati, coinvolgendo attivamente i partecipanti e rispondendo alle loro domande.

HANDS-ON

Nel pomeriggio gli studenti metteranno in pratica le nozioni acquisite durante la giornata realizzando diversi esercizi con il costante supporto del docente.

PRE-REQUISITI

Per partecipare ai corsi è sufficiente possedere una certa familiarità con l’uso di HTML, CSS e con almeno un linguaggio di programmazione (ad es. Javascript, Java o C#)

LOCATION

  • Headquarter: Consorzio universitario di Pordenone (PN)
  • Sedi convenzionate: Roma, Milano, Verona, Palermo, Lecce
  • Presso la Vostra sede.
  • On-Line: tramite piattaforma e-learning (audio-video-screen/sharing) le cui sessioni saranno registrate e condivise con i partecipanti

Hai qualche domanda?

COMPILA IL FORM

 

IL PROGRAMMA

8 giornate di formazione suddivise in moduli di 2 giornate (16 ore)

Ogni modulo include sessioni di teoria, live-code e hands-on.

DAY 1 e DAY 2:
ANGULAR & TYPESCRIPT QUICK START

Livello: principiante
Obiettivo: acquisire una solida base su Javasccript ES6, Typescript e sulle funzionalità principali del framework Angular

JAVASCRIPT ES2015 (aka ES6)

  • Javascript ES2015
  • Compiler, Transpiler e tools: Babel, Typescript e Webpack
  • Array, Oggetti e Stringhe in ES6
  • Arrow syntax
  • Rest e Spread operator
  • Destructuring
  • ES6 modules
  • Classi e OOP in ES6

ANGULAR FUNDAMENTALS

  • Creazione progetti con angular-cli
  • Integrazione Bootstrap e FontAwesome
  • 1-way e 2-way Binding
  • Il decorator @Component
  • Dynamic HTML templates
  • Dynamic DOM: *ngIf, *ngSwitch, *ngFor
  • Working with data

SERVER-SIDE COMMUNICATION

  • Installazione e configurazione di un JSON mock server
  • Utilizzo di REST API e il modulo @angular/http di Angular
  • Utilizzo del servizio http per la comunicazione con il server
  • Scenari e casi d’uso con form e operazioni CRUD
  • Data Model e custom types
  • Creazione servizi / provider riutilizzabili
  • @Injectable decorator

TYPESCRIPT

  • Typescript vs ES6
  • Decorators
  • Types
  • Interfaces
  • Typescript / Angular relationship

DYNAMIC STYLING in ANGULAR

  • inline style e css “unit” suffix
  • ngClass, ngStyle, styleUrls
  • Animazioni con CSS Transition
  • Style encapsulation
  • ViewEncapsulation e Shadow DOM

ANGULAR FORMS

  • Template driven forms
  • Local Properties
  • ngModel, ngForm e ngSubmit
  • 1-way vs 2-way binding
  • Form built-in validators
  • Gestione messaggi di errori
  • form state: dirty, invalid, touch, …
  • Angular Forms e RxJS operators: debouce, filters, …
  • CRUD operations e comunicazione con il server

EXTRA

  • Introduzione alla creazione di componenti custom
  • Approccio component-based
  • Input / Output decorators


 

DAY 3 e DAY 4:
REAL WORLD APPS

Livello: principiante
Obiettivo: creare Single Page Applications multiview in Angular: organizzazione progetto, gestione routes, autenticazione con JWT, gestione form complessi, approccio totalmente component-based, utilizzo della dependency injection e creazione componenti riutilizzabili

CUSTOM COMPONENTS

  • Approccio component-based
  • Input properties
  • Output Event emitters
  • Transclusion
  • Sibling Components communication
  • Nested Components communication

COMPONENT-BASED APPROACH

  • Organizzare Single Page Applications in components
  • Creazione componenti riutilizzabili
  • Stateful vs Stateless components
  • Split Form in components
  • Component providers e dependency injection

WORKING WITH DOM

  • DOM e local template variables
  • @ViewChild and DOM references
  • DOM nativeElement
  • ViewChildren vs ContentChildren

@Pipes

  • Formattare numeri, stringhe e date
  • Custom Pipes: formatters
  • ngFor e custom pipes: filtrare collezioni

SERVICES e DEPENDENCY INJECTION

  • Dependency Injection in Angular
  • Reusable services
  • SingleTon services
  • Condividere dati tra componenti e views
  • @Injectable e provider
  • REST API e RxJS

MULTIVIEW APPLICATIONS

  • Navigazione e routing con @angular/router
  • Gestione stati e routes
  • Passaggio parametri
  • Route Navigation components
  • Template injection
  • Guards: protezione routes by token validation
  • Router Events
  • Lazy Loading: moduli, organizzazione codice e best practices

EXTRA

  • Angular Bootstrap
  • PrimeNG components
  • Tips’n'tricks e best practices

AUTH e SECURITY

  • Autenticazione e procedure di login
  • JWT: login and token
  • Utilizzo REST API protette da token
  • Creare Http “interceptors” in Angular
  • Gestione errori
  • CORS, preflight e OPTIONS

COMPLEX FORMS

  • Complex forms
  • custom validators @Directive
  • Reactive Forms
  • async validators
  • multi-step forms


 

DAY 5 e DAY 6:
MASTERING ANGULAR

Livello: intermedio
Obiettivo: tecniche, metodologie e trucchi per sfruttare i principali strumenti forniti dal framework: components, directive e dependency injection

MASTERING @Component

  • Organizzare applicazioni, componenti e servizi in moduli
  • 1-way data flow architectures e stateless components
  • Ciclo di vita del componente
  • Change Detection Strategies
  • Nested component e differenti tecniche di comunicazione
  • Angular animations: states, triggers, animate
  • Gestione errori ed eccezioni
  • ViewChildren vs ContentChildren
  • Integrazione 3rd party libraries / types

REUSABLE COMPONENTS

Si esplorano differenti tecniche, casi d’uso e approcci per la creazione di decine di componenti e direttive, per ognuno dei quali saranno integrati e descritti i relativi Unit Test:

  • Maps: integrazione Google Map API e Leaflet
  • Grid e layout components
  • Integrazione HighChart
  • Animate components with GSAP Tweenmax
  • Typography, List, TabBar, Card
  • Collapsable, Side Panel, Divider e molto altro

DEPENDENCY INJECTION e MODULES

  • forRoot() services
  • @Injectable e provider
  • @Inject and useValue
  • OpaqueToken
  • Configurare provider con useFactory
  • Organizzazione progetti in custom modules

MASTERING @Directive

  • Creare direttive per la manipolazione del DOM
  • @HostBinding
  • @HostListener
  • Input Setter e Getter
  • Structural direttives vs attribute directives

STRUCTURAL DIRECTIVES

  • Utilizzare il tag < template >
  • Asterisk * nelle direttive
  • Utilizzo di ElementRef, TemplateRef
  • Creazione componenti a runtime in JS
  • ComponentFactoryResolver e ViewContainerRef
  • Integrazione 3rd party API (GSAP Tweenmax)

INTRODUZIONE AI TEST

  • Unit Test vs E2E
  • Introduzione a Jasmine
  • Introduzione e configurazione Karma
  • Introduzione a Protractor
  • Utilizzare TestBed
  • Testare DOM e templates
  • Mocking dependencies
  • Spies

EXTRA

  • Gestione “Locale”
  • Applicazioni multilingua con Angular Translate
  • Tips’n'tricks e best practices


 

DAY 7 e DAY 8:
DATA ARCHITECTURES in REDUX e RxJS

Livello: avanzato
Obiettivo: un’introduzione alla creazione di architetture solide e scalabili in Angular utilizzando Redux, per la gestione dello stato applicativo, e sfruttando le potenzialità di RxJS e della programmazione reattiva

INTRODUZIONE a RxJS

  • Introduzione alla Reactive Programming
  • RxJS e Observable
  • Operatori RxJS più utilizzati
  • Subjects e BehaviorSubject
  • Async operations

RxJS e ANGULAR

  • RxJS e Http provider
  • subscribe vs async pipe
  • Richieste XHR parallele e sequenziali
  • Dom Native Events e RxJS
  • Gestire Form Controls in RxJS
  • Angular Reactive forms
  • Angular Data Architectures e RxJS

INTRODUZIONE a REDUX

  • Principi fondamentali
  • Immutable State
  • Pure vs Inpure functions
  • Reducers
  • Store
  • Actions
  • Containers vs Presentational components
  • Real world examples

DATA ARCHITECTURES in ANGULAR REDUX

  • Angular Redux
  • Data architectures in Angular e Redux
  • Redux, RxJS e dependency injection in Angular projects
  • Store, Action, Reducer
  • Autenticazione JWT in Angular Redux
  • Esempio applicazione CRUD in Redux
  • Redux Middleware
  • Redux Enhancers
  • Sincronizzazione stato con LocalStorage
  • Debugging e Redux Chrome Dev tools


DOCENTE

FABIO BIONDI

JAVASCRIPT DEVELOPER and TRAINER

  • Developer / Freelance since 2004 – North East Italy
  • Docente Codemotion, Vecomp, H-Farm, Links Academy
  • Angular e Javascript Developer Italiani Community founder
  • ex Adobe Flex/Flash/AIR Certified Instructor
MAIN SKILLS
  • Angular / React / D3.js / CreateJS / TweenMax
  • Interactive UI, Custom Components, Data-driven infographics



PER INFORMAZIONI:

Il tuo nome (richiesto)

La tua email (richiesto)

Oggetto

Il tuo messaggio (richiesto)