header_angular_tutorials

ANGULAR MASTER CLASS (4gg)

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 4 giornate su
Typescript e Angular 4 per apprendere tutti i segreti del framework.

4 GIORNATE (32 ore)

  • Teoria, pratica ed esercitazioni con il supporto di un esperto
  • 500+ slides con soluzioni tecniche, best practices e decine di casi d’uso
  • 5 repository Git con snippet e codice riutilizzabile

ARGOMENTI

  • Fundamentals: binding, styling, forms, comunicare con il server, pipes, dependency injection
  • Sviluppo Single Page Applications con un approccio totalmente component-based
  • Applicazioni multi-view con angular router, autenticazione JWT e gestione sicurezza
  • Padroneggiare la creazione di direttive e componenti
  • Organizzare progetti, applicare metodologie e best practices
  • Codice scalabile, modulare e integrazione Unit Test

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: come alternativa post-diploma / laurea

 

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 (preferibilmente Javascript)

LOCATION

  • Presso la sede della Vostra azienda / scuola
  • Presso le sedi convenzionate e i nostri partner a Milano, Roma, Roncade (TV), Pordenone e Verona.

Per domande, tariffe o per organizzare un meeting

COMPILA IL FORM

IL PROGRAMMA

Ogni modulo ha la durata di 8 ore e include sessioni di didattica ed esercitazione.

DAY 1: ANGULAR e TYPESCRIPT

ES2015 e TYPESCRIPT

  • Introduzione a Javascript ES2015 e Typescript
  • Creazione e utilizzo dei moduli
  • Array, oggetti e stringhe: le novità introdotte
  • Fat arrow function, Template string, Destructuring
  • Classi e Decorators
  • Types e interfaces in Typescript
  • Utilizzo di angular-cli per la creazione di progetti Angular

DYNAMIC STYLING

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

ANGULAR FUNDAMENTALS

  • Creazione progetti con angular-cli
  • Approccio Component-Based
  • Il decorator @Component
  • Binding and templates
  • Structural Directives: *ngIf, *ngSwitch, *ngFor
  • Creazione componenti data-driven

CUSTOM COMPONENTS

  • Creazione componenti riutilizzabili
  • Input properties
  • Transclusion
  • Components communication and Output emitter
  • Reusable components

 

DAY 2: FORM & SERVICES

SERVICES e DEPENDENCY INJECTION

  • Dependency Injection in Angular
  • Separazione delle competenze
  • Classi e custom types in Typescript
  • SingleTon e data model
  • @Injectable e provider
  • Organizzare servizi RESTful

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
  • Gestione data Model

FORMS

  • Angular 2 Forms: 1-way and 2-way binding
  • Local Properties
  • ngModel, ngForm e ngSubmit
  • Form validators
  • Gestione messaggi di errori, dirty e touch state

WORKING WITH DOM

  • @ViewChild e accesso agli elementi del DOM
  • DOM Native Elements
  • RxJS Observable and nativeElement

@Pipes

  • Utilizzo dei filtri / pipes su date, numeri e stringhe
  • Creazione Custom pipes

 

DAY 3: MASTERING ANGULAR

MASTERING @Components

  • 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
  • Gestione errori ed eccezioni
  • ViewChildren vs ContentChildren
  • Integrazione 3rd party libraries / types

MASTERING DEPENDENCY INJECTION

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

UNIT TEST

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

MASTERING @Directives

  • Structural direttives vs attribute directives
  • @HostBinding
  • @HostListener
  • Setter e Getter
  • Structural directives: < template > tag e asterisco *
  • Utilizzo di ElementRef, TemplateRef
  • Creazione componenti a runtime con ComponentFactoryResolver e ViewContainerRef
  • Integrazione 3rd party API (GSAP Tweenmax)

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

 

DAY 4: REAL WORLD APPS

ADVANCED FORMS

  • Forms: custom validators @Directive
  • Forms: creazione form multi-step
  • Introduzione ai Reactive Forms

NAVIGAZIONE e ROUTING

  • MultiView Single page application in Angular
  • Utilizzo di @angular/router
  • Gestione stati e routes
  • Passaggio parametri
  • Route Navigation components
  • Template injection
  • protezione view (by token) con AuthGuard e canActivate
  • Router Events

GESTIONE MODULI

  • Applicazioni modulari in Angular con ngModule
  • Organizzazione progetto
  • Best practices

AUTH e SECURITY

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

HANDS-ON:

    I partecipanti vengono coinvolti nello sviluppo dell’applicazione banking per il monitoraggio del conto corrente, la creazione di bonifici (bookmarks), lista movimenti, saldo, profilo e molto altro.
    Sarà quindi creata un’applicazione multi-view utilizzando Angular Route che include:

  • menu di navigazione
  • modulo di login con autenticazione JWT
  • Utilizzo di servizi REST protetti da Token
  • Gestione router con protezione view
  • E molto altro

DOCENTE

FABIO BIONDI

JS DEV / TRAINER

  • Docente CodeMotion Angular / React
  • H-Farm Web Dev Scientific Director
  • Docente Angular in LinksMT Academy
  • Angular e React italian community admin
  • Adobe Flex/Flash/AIR Certified Instructor
TECHS
  • JAVASCRIPT / HTML5 / CSS / SVG / HTML Canvas
  • Angular 1.x / 2.x / React / Firebase / D3.js / CreateJS / TweenMax



PER INFORMAZIONI:

Il tuo nome (richiesto)

La tua email (richiesto)

Oggetto

Il tuo messaggio