02. I contenuti del corso

Download Codice Sorgente

01. Creare un progetto Angular Standalone (v.17)

Creare un progetto Angular Standalone (v.19)

CheatSheet PDF: Standalone Projects

02. Interpolation - Template Tags

03. Events

04. Class Methods

05. Property Binding e Dynamic Attributes

06. CSS Esterni

07. CSS Styles nello stesso file

08. Dynamic class names con [class.Name]

09. Dynamic Attributes and Class Methods

10. La direttiva ngClass

11. ngclass - obj, array, stringhe

12. inline-style

13. style suffix operator

14. ngStyle

15. Bootstrap CSS via CDN

16. Bootstrap CSS via npm

APPROFONDIMENTO: il file angular.json

17. Tailwind CSS

18. Tailwind Global css

19. Daisy UI and Tailwind

20. MouseEvent, event$ e types - creare una tooltip

21. Keyboard events and event target

QUIZ: Angular Fundamentals - Pt. 1

22. TemplateReference Variable

23. ViewChild and Template Reference Variables

24. Component LIfecycle - AfterViewInit and strict null check

25. Pipes

26. CommonModule

27. Image and Local Assets

28. ngIf

29. ngFor, contextual props e typed array

30. ngSwitch, union type e strict mode

31. ngSwitch, ngFor, Literal Types e Union

32. Esempio - Mini Slide Gallery

33. Esempio - TodoList

34. Esempio - ToDoList With Immutability

34B - Validazioni

35. Angular Dev Tools - Profiler - Analisi Change Detection

36. Angular Dev Tools - Components

QUIZ: Angular Fundamentals - Pt. 2

02. Signal: set e update

03. Signals: Effects

04. Change Detection e Performance

05. Computed Property e Signal Derivati

06. Inner Computed Signals - Ottimizzare ulteriormente le prestazioni

CheatSheet PDF: Signals

QUIZ: Signals

07. Linked Signals (Angular v.19)

01. ngIf e Signals

02. ngFor e Signals

03. @if block

ATTENZIONE: BUG @if block

04. @switch block - wizard multi step

05. @for e @empty blocks

06. @for e computed Signals

07. Contextual Variables, @if inside @for

08. Multiple Signals - create a tabbar navigation

09. Todo List with signals

QUIZ: Control Flow

01. Creare un componente Phone riutilizzabile

02. Input Properties

03. Input required

04. Input Transform

05. Input Transform booleanAttribute

06. Input Transform numberAttribute

07. Transform and TypeScript: literal types e union

08. Input Alias

09. External Templates

10. Angular Dev Tools

11. Component LifeCycle - ngOnInit e ngOnDestroy

12. Component LifeCycle - ngOnChanges

APPROFONDIMENTO LIFECYCLE / DIAGRAMMA

13. Input Setters

14. Ottimizzazione performance con ChangeDetection onPush e Immutability

CheatSheet PDF: Standalone Components

QUIZ: standalone components - Pt. 1

01. TimeLine Component

02. Accordion Component

03. Alert Component - Output Event Emitter

04. Alert - ngContent

05. Alert - inputs

06.Alert - Variants

07. Alert - Icons - ngSwitch

08. Alert - Customize Buttons

09. Alert - Icon - Children Components

10. Alert - Dynamic SVG Path con [attr.prop] - property vs attribute

11. DropDown Component

12. DropDown - posizionamento e apertura al click o al rollover

13. Dropdown - Emettere eventi con parametri

14. Dropdown- trick per forzare la chiusura

15. Raggruppare componenti in uno Shared Module è una bad practice!

16. Signal Inputs (v.17.1)

QUIZ: standalone components - Pt. 2

01. Creazione Componenti

02. Router Outlet

03. Navigation Bar e direttive router

04. Lazy Loading, Bundle & Chunks

05. Export Routes as Default

06. Router Event, RxJS e Inject

APPROFONDIMENTI RxJS

07. ActivateRoute Service, RxJS e Router Data Property

08. Router Params e RxJS

09. withComponentInputBinding - data e params - the NEW WAY

10. Nested Routes - creare lo showcase dello UIKIT

11. Functional Router Guard

12. View Transition API

QUIZ: router

01. DI, provideHttpClient e HttpClient

02. HttpClient and Types

03. Http Client e @for

04. HttpClient, RxJS e Async

05. HttpClient and Signals

06. HttpClient, RxJS e ToSignal

07. ToDo List - p1 - Panoramica

08. ToDo List - p2 - HttpClient e JSON-Server

09. Todo List - gestione errori

10. Functional Http Interceptor

11. Interceptor - Gestione errori

CheatSheet

Quiz: HttpClient e RxJS

12. Resource API - Fetch Data (Angular v.19)

13. Resource API with async await

14. Resource API - Reload data

15. Resource API e la proprietà request - Invocare il loader sulla base di un Signal

16. Resource API - Abort Signal

17. Resource API e RxJS con rxResource

18. rxResource e forkJoin - multiple http requests

Refactoring - Introduzione

01. Creazione Component Shared - Http Error

02. Todo List - suddivisione in componenti

03. Summary Component

04. Todo Form Component

05. Todo List Component

06. Stateful vs Stateless components

07. Dependency Injection - API Service

08. Dependency Injection - State e API

09. Performance e Change Detection Strategy onPush

10. DI e Component Providers

01. Creazione Nuovo Progetto

02. La pagina Shop

03. Share State con Service e Signal- global cart

04. Service e Computed properties

05. Cart Page: template syntax blocks and signals

06. Share Service tra componenti: Settings Service

07. Setting Service: update Signals

08. Editor Component

09. Preview Component

10. Ottimizzazione - Ridurre i render con le Computed Properties

11. Ottimizzazione TypeScript - astrazione

12. Ottimizzazione TypeScript - type safed keys con TypeScript keyof

13. Ottimizzazione TypeScript - generics e type safe value

14. cleancode e minor fixes

15. Ottimizzazione - ChangeDetection onPush e performance

16. Providers e Gerarchia Injector

QUIZ: Dependency Injection

01. Versionamento di un progetto Angular 17 su GitHub

02. Deploy su Vercel

03. Deploy su GitHub Pages

01. Creazione Progetto

02. Creare "Utility components": Box e VSpace

03. Deferrable Views con @defer e "when"

04. @defer: on interaction e @placeholder

05. @defer - on viewport

06. @defer - on ViewPort Trigger

07. @defer - on Timer

08. @defer - @loading and @error

QUIZ: Deferrable Views

Introduzione ad Auth0

01. Creare il progetto Angular Standalone

02. Configurare Auth0 dalla dashboard

03. Installare e Configurare Auth0 SDK for Angular

04. Login con Auth0 - Google Provider

05. Login e Logout con Auth0 e RxJS

06. Login e LogOut con Signals

07. Get User Profile

08. User Profile con Signals e Computed Signals

09. CORS e Auto-Login

10. Auth0 e Router Guards

11. Auth0 Interceptor

12. Social Connection - Facebook Provider

13. LocalStorage e Problemi con Silent Authentication

14. Refresh Token

Angular - 01. creazione progetto

Angular - 02 - Creare il componente Panel

Angular - 03 - Scrivere il test per il Componente

Introduzione: differenze tra CSR, SSR e SSG

IMPORTANTE - Breaking Changes

01. Creare un progetto con supporto SSR-SSG

02. Gestione Router

03. SSG - Build Static Apps

04. HttpClient, withFetch e SSG

05. isPlatformBrowser

06. afterNextRender in Components

07. afterNextRender in custom directives

08. DOM, Signal e Injection

09. DOM, Multiple Service e Server Config

10. Mixed Mode - SSR e SSG nella stessa applicazione

Signal Inputs - Weather Component (v.17.1)

Utilizzare una CDN (ImageEngine) con direttiva NgOptimizedImage