Angular Fundamentals

Angular
Fundamentals

Video Corso

Scopri le principali funzionalità del noto framework sviluppato da Google.

Moltissimi esempi e casi d’uso tramite i quali non solo potrete apprendere i concetti fondamentali per la creazione di Single Page Application ma applicare, fin da subito, pattern, metodologie e best practice tramite sessioni di teoria, pratica e live-coding.

Un corso adatto sia ai principianti, che ai developer più esperti che già utilizzano il framework.

Angular Fundamentals
150 video
su Angular
40 video
su JavaScript ES6 e TypeScript
20 ore
di materiale

Il corso include:

1
Video corso Angular Fundamentals
Più di 150 video di teoria e pratica con moltissime sessioni di live-coding dalle basi alle best practice: sviluppo applicazioni e decine di casi d’uso ed esempi pratici
2
Mini corso JavaScript & TypeScript
Include un mini-corso di 3 ore su Javascript ES6 e TypeScript, propedeutico all'apprendimento del framework
3
Aggiornamenti
Il corso è stato realizzato in Angular 7 ma il codice sorgente, disponibile sotto ogni video, è stato aggiornato alle versioni 14/15.

A chi è rivolto

Un corso adatto sia ai principianti che agli sviluppatori Angular che desiderano consolidare la propria conoscenza sul framework, apprendere nuove tecniche e best practice

Beginners

Beginners

Per tutti coloro che desiderano utilizzare Angular e creare Single Page Application tramite un percorso di studio graduale, ben strutturato, che permetta ai neofiti di partire da zero e raggiungere un buon livello in brevissimo tempo. L’unico requisito è la conoscenza di almeno un linguaggio di programmazione
Experts

Experts

Per gli sviluppatori che già utilizzano Angular ma non ritengono di farlo nel modo corretto e/o desiderano migliorare la qualità del loro codice applicando best practices, pattern, metodologie e ottimizzando il codice allo scopo di renderlo più performante, leggibile e manutenibile

Punti di forza

Moltissimi esempi, casi d'uso reali, pattern e best practices

Tutto ciò di cui bisogno per iniziare.

Tutto ciò di cui bisogno per iniziare.

Tutto ciò che devi conoscere su Angular per essere produttivo nel minor tempo possibile: forms, styling, comunicazione REST API, dependency injection, custom components, moduli, router, animations e molto altro
Sviluppo applicazioni Demo

Sviluppo applicazioni Demo

Oltre a fornire moltissimi esempi per comprendere i concetti alla base del framework, svilupperemo diverse applicazioni demo in Angular e Google Firebase per mettere in pratica i concetti appresi durante il corso
Applica Best<br /> Practices

Applica Best
Practices

Dalle fondamenta del framework all'utilizzo di pattern, best practice e metodologie consolidate per la creazione di codice di qualità, scalabile e manutenibile
Organizzazione Progetti

Organizzazione Progetti

Codice dichiarativo, approccio component-based, organizzazione dell’applicazione in moduli, immutabilità, ottimizzazione performance sono solo alcune delle tematiche trattate durante il corso
Argomenti trattati nel corso
Angular Fundamentals
Panoramica su Angular
• Introduzione al corso (4:44)
• Gli argomenti del corso in dettaglio (5:03)
• Single Page Applications e approccio component-based (14:37)
• Angular Framework: le funzionalità principali (17:17)
• Gruppo Facebook, supporto e Link
Installazione e configurazione
• Installazione e utilizzo di NodeJS e NVM (4:16)
• Installare Angular CLI e creare un progetto Angular (2:34)
• Introduzione al boilerplate (2:05)
• AppComponent e AppModule: parte 1 - intro (3:50)
• AppComponent e AppModule: parte 2 - code (3:44)
• ng new: parametri (1:59)
• UPDATE ANGULAR 10: leggere per evitare warning (1:33)
Fundamentals
• Interpolation {{value}} (1:10)
• Native events: mouse e tastiera (5:48)
• Directives (5:19)
• Attributi e parentesi quadre (brackets) (6:29)
• Components (5:07)
• Pipes (5:17)
• Custom Types (5:46)
• Introduzione ai service e alla dependency injection (3:52)
• Comunicazione con server, REST API e HttpClient (5:03)
Angular Structural Directives
• La direttiva ngIf e l'opzione ngIf...else (6:02)
• La direttiva ngFor: introduzione e tipizzare collezioni (6:59)
• La direttiva ngFor: proprietà index, last, odd (3:30)
• La direttiva ngFor: manipolazione dati (5:58)
• La direttiva ngSwitch (4:53)
Styling
• Styles and Components (4:06)
• Inline CSS class (2:08)
• La direttiva ngClass (3:15)
• Inline Styling (3:27)
• La direttiva ngStyle (1:50)
• Librerie CSS 3rd party e angular.json (6:12)
Template-driven Form
• Input, "template reference variables", keyboard events (7:25)
• La direttiva ngModel: 1way vs 2 way binding (5:49)
• ngForm, ngModel e gestione data model (13:50)
• Form Validation (8:19)
• Form, validazione e gestione errori (4:09)
Custom components
• Hello Components (5:52)
• Input Properties (2:32)
• Content Projection (7:35)
• Componenti "stateful" e Input default value (2:32)
• @Output event emitter: realizzare un TabBar component riutilizzabile (24:10)
• Lifecycle hook: ngOnInit (9:23)
• Lifecycle Hook: onChange (5:20)
• ChangeDetectionStrategy, ChangeDetectorRef e stato immutabile: ottimizzazione performance e controllo del rendering (14:45)
BrowserAnimationModule: animazioni in Angular
• Animated Collapsable Panel: trigger, style, state e animate (11:37)
• Animated TabBar: animations e ciclo di vita dei componenti (15:58)
• Animated Text: gestire gli eventi delle animation (14:02)
Multi-view applications con Angular Router
• Introduzione ad angular router (2:03)
• Utilizzo di Angular Router e creazione componenti con Angular CLI (6:15)
• Navigation Bar (5:33)
• AngularCLI ei il modulo AppRoutingModule (5:13)
• Passaggio parametri e ActivatedRoute (8:30)
• ActivatedRoute e Router API (6:23)
• Eventi del router & RxJS operators (4:50)
Comunicazione con il server
• Configurare un mock server: json-server (5:13)
• GET: Caricamento dati da REST API e custom types (9:30)
• DELETE: Cancellazione elementi e gestione errori XHR (8:39)
• Dynamic styles e migliorare il look & feel (7:45)
• POST: Aggiungere elementi alla collezione tramite form (9:55)
• PUT e PATCH: aggiornare un elemento (13:34)
Dependency Injection
• Dependency Injection, injector e providers (6:01)
• Condividere dati utilizzando i "Service" (8:43)
• Service, REST API e decoratore @injectable (10:57)
• Gestire lo stato applicativo (5:49)
Applicazioni modulari, approfondimento router e lazy loading
• Moduli: introduzione (8:23)
• Applicazioni Modulari (5:38)
• es6 modules vs ngModules (2:21)
• Feature Modules (10:12)
• Shared Modules (11:25)
• Core Module (3:56)
• UPDATE Angular 9: nuova sintassi per gli import lazy dei moduli
• Router & Lazy Loading (11:56)
• Moduli e route di secondo livello (5:54)
• Router children e router-outlet secondario (5:34)
• UPDATE ANGULAR 8/9: lazy loading & dynamic imports (3:41)
Build & Deploy
• Creare la build del progetto e installare un webserver locale (3:09)
• Ottimizzazione build, production e tree shaking (2:41)
• Deploy delle applicazioni su Surge.sh (2:37)
• Pubblicare un'applicazione Angular su Surge.sh (0:54)
• environment variables: production vs development (5:44)
Live Coding / SPA: Hotel-Booking App
• Video demo dell'applicazione (0:20)
• PARTE 1: SVILUPPO APPLICAZIONE
• Layout statico HTML con CSS Grid (+ source code) (8:37)
• Creazione progetto, gestione router e impaginazione layout (11:36)
• Server REST, comunicazione server, model, gestione form e visualizzazione risultati (23:21)
• Card component e pipe: image gallery, forms, maps, rate, ... (34:35)
• Gestione del carrello (19:26)
• Autenticazione, "sicurezza" router utilizzando le guardie e protezione DOM (25:59)
• PARTE 2: APPROCCIO COMPONENT-BASED
• Approccio component-based - PART 1: hotel-form, hotel-list e shared components (16:42)
• Approccio component-based - PART 2: i componenti rimanenti (16:57)
• Approccio component-based - PART 3: card component flessibile e riutilizzabile (HostBinding) (17:02)
• Gestire il caso in cui il risultato della ricerca non produca risultati (4:08)
• PARTE 3: MODULI e LAZY LOADING
• Shared Module (5:57)
• Core Module (5:34)
• Features Modules (6:19)
• UPDATE Angular 9: leggere
• Router & Lazy Loading (21:06)
• NOTE FINALI
• Download Source Code
Live Coding / Crud APP: approccio component-based, gestione stato & Best Practices
• Demo dell'applicazione (0:11)
• Creazione progetto, TSLint, installazione dipendenze e Mock Server (9:46)
• Creare "features components" da Angular-CLI e gestione router (4:04)
• GET e DELETE: visualizzazione e cancellazione dati dal server (7:40)
• PUT, PATCH e POST: modifica e inserimento dati (17:34)
• Download Source Code
• Organizzare il layout in componenti: CatalogList (8:05)
• Organizzare il layout in componenti: CatalogForm (14:20)
• Metodo onChanges del ciclo di vita dei componenti e decoratore @ViewChild (9:17)
• Download Source Code
• Organizzazione dell'applicazione in services (5:36)
• Gestire lo stato applicativo (8:18)
• Download Source Code
• Nested Components: componenti dentro componenti (5:12)
• Shared components: componenti riutilizzabili (9:35)
• Core Components: Navigation bar e router (4:17)
• Download Source Code
Live Coding / REALTIME APP con Firebase : creare un remote controller per controllare un viewer di slides
• Demo dell'applicazione "remote controller" (0:18)
• Creazione progetto con router (3:24)
• ADMIN: Creazione layout statico - HTML + CSS (16:21)
• VIEWER: Creazione layout statico - HTML + CSS (1:48)
• Introduzione a Firebase (3:22)
• AngularFire: installazione e configurazione (4:09)
• CONTROLLER: Creazione della galleria immagini realtime in Firebase (19:31)
• CONTROLLER: controllare le slide (7:24)
• VIEWER: visualizzazione delle immagini realtime (3:05)
• VIEWER: bug fix (9:29)
• VIEWER: aggiungere le animazioni (8:44)
• VIEWER: animation bug fix
• Testare l'applicazione da un dispositivo mobile tramite rete locale durante lo sviluppo: ng serve --host (1:19)
Extra
• StackBlitz: editor online per condividere snippet (3:34)
• Introduzione ai Reactive Forms - Video di test del talk @ Codemotion 2019 (40:53)
• Panoramica su Typescript 3.7 & Utility Types (14:06)
• IVY & Angular 9: dynamic Imports and lazy loading per componenti e moduli (21:29)
• Tip per configurare VisualStudio Code & migliorare gli Auto Import (5:02)
Argomenti trattati nel corso
JavaScript / TypeScript
JavaScript ES6 Fundamentals
• Introduzione ad ES6/TS, Babel e Webpack (8:48)
• Javascript ES6 - Cheatsheet
• var vs let - Block Scope vs Function Scope (4:06)
• Le costanti: const - Mutabilità vs Immutabilità (6:23)
• Template literals: stringhe multiline con espressioni (3:58)
• Short Object syntax (2:26)
• Destructuring Array (3:38)
• Destructuring Object - part 1 (5:47)
• Destructuring Object - part 2: nested props (3:27)
• Destructuring Object - part 3: rename & short object syntax (2:13)
Manipolazione dati e immutabilità
• Array Spread operator: clone, merge e modifica array (3:15)
• Object Spread operator vs Object.assign (4:55)
• Arrow function (4:32)
• Array: map (4:10)
• Array: filter (2:41)
• Array: find & findIndex (3:29)
• Immutabilità in ES6, React, Angular, Redux (13:30)
• Classes, Ereditarietà e lexical this (6:41)
imports and modules
• Creazione progetto ES6 con webserver e npm (3:01)
• Hello ES6: il tag "script" (1:38)
• Import modules e type="module" (5:34)
• Import as (1:56)
• Import default (5:23)
Video by Andrea Simone Costa
• Promises (8:39)
• Fetch: comunicazione con il server (2:53)
• Async Await (2:31)
TypeScript: fundamentals
• Introduzione a TypeScript (1:29)
• Utilizzare il mio playground TypeScript (3:45)
• Utilizzare on-line playground: StackBlitz (3:19)
• Inferenza in TypeScript (2:36)
• Primitives Types (4:17)
• Tipizzare oggetti usando interface e gestione proprietà opzionali (5:55)
• Tipizzare oggetti complessi (4:14)
• Tipizzare array (3:15)
• Utilizzo di class e type per la tipizzazione (6:15)
• Classi: private vs public (1:41)
• Classi: getter & setter (3:42)
• Tipizzare funzioni (5:02)
• Type, literals e introduzione a Union types (1:56)

Estratto dal corso

I contenuti del corso
Il corso include tutto ciò di cui hai bisogno per iniziare ad essere produttivo con Angular nel minor tempo possibile: dalle basi alle best practices
Esempio Lezione
  • Utilizzo di Angular CLI da terminale
  • Creazione componenti sfruttando i "generator"
  • Approccio component based
  • Progetti modulari
  • Acquista il corso

    Accedi al materiale dove e quando vuoi... per sempre!

    5 studenti

    87 /utente
    • Prezzo scontato per 5 o più utenti

    • Report / Progress per singolo utente

    Il più venduto!

    Singolo utente

    147 + iva
    • Corso Angular Fundamentals

    • Corso JavaScript ES6 / TypeScript

    • 190 video

    • 20 ore di lezione

    • CheatSheet PDF su Angular e JavaScript ES6

    • 30 gg soddisfatto o rimborsato

    10 studenti

    57 /utente
    • Prezzo scontato per 10 o più utenti

    • Report / Progress per singolo utente

    FAQ

    Ho qualche dubbio che il corso faccia al caso mio. Posso contattarti?
    Certo, puoi scrivermi tramite il Form di Contatto
    È possibile fruire il corso simultaneamente su device?
    Gli accessi simultanei alla piattaforma da diversi IP verranno bloccati. Nel caso fossi interessato all’acquisto di più di una licenza d’uso sono previsti degli sconti.
    Contattami per ulteriori info.
    È previsto un rimborso nel caso non fossi soddisfatto?
    Sono sicuro che apprezzerai i contenuti del corso ma se non fossi soddisfatto potrai comunque essere rimborsato totalmente entro 30 giorni dall'acquisto
    Posso ricevere la fattura?
    In fase di acquisto, è necessario inserire la partita iva (utilizzando IT come prefisso, ad es. IT1234567890) cliccando sul pulsante "+ ADD BUSINESS DETAILS" e inserire i dati per la fatturazione. Teachable, la piattaforma americana utilizzata per erogare i corsi, si occupa di tutto il processo di pagamento e di mettere le ricevute di acquisto. Essendo un sistema di pagamento extra EU, nel caso di acquisto con partita iva, l'iva non sarà applicata e quindi sarà tolto il 22% dal totale. Prima di effettuare l'ordine guarda un esempio di fattura che riceverai.
    L'iva viene applicata? La fattura è inviata da un'azienda americana
    Il mio corso è fruibile tramite la piattaforma Teachable, azienda con sede negli Stati Uniti. Per questo motivo: se richiedi la fattura e inserisci la partita iva in fase di acquisto NON verrà applicata l'iva. Al contrario, il costo per i privati sarà comprensivo di IVA
    La possibilità di visionare il corso è limitata nel tempo?
    No! La licenza d’uso non ha nessuna scadenza. Una volta acquistato il corso potrai fruire dei contenuti del corso ed eventuali aggiornamenti senza limiti di tempo.
    Dubbi e Domande?
    Scrivimi in privato su LinkedIn o utilizza l'apposito form di contatto
    Dove posso seguirti per ulteriori aggiornamenti?
    Sono presente su tutti i principali social network. Trovi i link nel footer.
    Per tutti gli aggiornamenti puoi seguirmi su Telegram e non dimenticare di iscriverti alla newsletter
    ☠️ PIRATERIA : hai visto il mio corso replicato su qualche piattaforma oppure la tua azienda condivide l'account tra più studenti?
    Per favore inviami una segnalazione compilando il Form di contattto

    LET'S KEEP IN TOUCH

    Keep updated about latest content
    videos, articles, tips and news
    BETA