Datum
16/12/2024 - 20/12/2024
Ganztägig
Kalender-Import: iCal
Veranstaltungsort
Virtual-Training (VILT)
Virtual, - Online
- JavaScript und HTML Basics (Besuch des Seminars: SD-HTML5 Programming HTML5, JavaScript and CSS3)
- Erfahrung mit Web Development
- Kenntnis von Objektorientierten Sprachen
- Kenntnis von modernen Web Technologien (Node, Webpack, TypeScript, Flexbox, CSS Grid, ..) hilfreich. Diese werden im Kurs Advanced Web Technologies vermittelt.
Im Training „Angular Single Page Application Development“ vermittel wir die grundlegenden Skills um „Single Page Applications“ (SPA’s) mit Angular implementieren zu können“. Großes Augenmerk legen wir darauf, in den Demos & Labs aktuelle Coding-Styles & Patterns zu verwenden.
Beginnend mit Projektkonfiguration & Angular Basics vertiefen wir unsere Kenntnisse, um schließlich alle Teile des Angular Eco-Systems, inklusive Grundlagen, Routing, Responsive UI Design, Reactive Programming, Testing, Authentication & Publishing zu behandeln.
Nach Abschluss dieses Trainings haben die Teilnehmer Kenntnisse zu folgenden Themen:
ehen des Angular Technologie Stacks und Verwendung der Angular CLI
cript nutzen und Umgang mit Async Operationen
lagen verstehen & grundlegende Aufgaben erledigen
nents verschachteln und Daten austauschen
ng, Modularity & Standalone Components
mentierung einer responsiven Benutzeroberfläche
larentwurf & Validierung
hrung in die Reaktive Programmierung mit Signals und RxJS
Management & Event Sharing
ng Basics: Unit Tests, Component Tests, E2E Tests
ntifizierung & Publizierung von Angular Apps
Neue Themengebiete werden anhand von Folien und Demos erarbeitet. Am Ende der Module werden die erlernten Inhalte in eine durchgängige Anwendung integriert, welches am Ende in die Cloud publiziert werden kann. Die Labs liegen sowohl in Module- als auch Standalone-Pattern vor.
- Web Entwickler*innen welche Angular Anwendungen entwickeln möchten.
Angular Introduction & Setup
- What is a Single Page Application? – SPA
- Tooling: Node.js, npm and Workspace requirements
- Angular Technology Stack
- Angular Essentials & CLI
- Debugging Angular
- Understanding Angular’s Bootstrapping process and Configuration
- Updating Angular Projects
- Introduction to the Demo App
TypeScript & Async Fundamentals
- TypeScript Overview, ECMA Script Standards
- Configuration, Debugging, ES Lint
- Types, Variables, Literal Types, Functions
- Objects, Classes, Interfaces
- ECMA Script 6+ Essentials Util Functions
- 3rd Party Libraries & Type Definitions
- Async Operations, Promises & Observables
Fundamentals & Completing Basic Tasks
- Services & Data Request
- Components & Dependency Injection
- Understanding & Using Component Lifecycle Events
- Imperative vs Reactive Programming Styles
- Expressions, Templates & Directives
- String Interpolation, Property- & Event-Binding, Two-Way Binding
- Data Binding Observables and Signals
- Using the Built-In Control Flow
- Using Pipes and Directives
- Custom Directives & Pipes
Nesting Components using @Input & @Output
- Container vs Presentational Components
- Data Binding & Events with Nested Components using @Input & @Output
- Required Inputs und Input Transformation
- Reusable Components using Local References & Content Projection
- View Child, View Children
Routing, Modularity & Standalone Components
- Routing Basics
- Working with Parameterized Routes
- Component Input Binding
- Using Router State
- Data Preloading
- Organizing Angular Applications using Modules
- Modules Types (Root, Feature, Shared, …)
- Module Lazy Loading
- Introduction to Standalone Components
- Bootstrapping Standalone Components
- Register providers and routes in standalone components
Designing the User Interface
- Global & Component Styles
- Using Sass (Synthetically Awesome Stylesheets)
- Layout using Flexbox, CSS Grid and CSS Grid Areas
- Responsive Web Design using Media Queries
- Angular Material Overview
- Using Material Tables, Dialogs & Form Controls
- Using common Material Components
- Material Theming Colors
- Using Angular CDK & 3rd Party Components (Charting, File Upload, Drag & Drop)
Forms Design & Validation
- Forms Introduction
- Template Driven Forms vs Reactive (Model Based) Forms
- Using Forms Builder
- Typed Forms (Nullability, Nested Objects, Arrays)
- FormControl, FormGroups & FormArrays
- Form Validation Basics (Synchronous / Asynchronous)
- Cross Field / Multi Field Validation
- Custom- & Code-Based Validators
Introduction to Reactive Programming using Signals & RxJS
- What is Reactive Programming / Benefits
- Observable, Observer & Subject
- Creating Observables & Casting to Observables
- Using the async pipe
- Capturing Mouse & DOM Events as Observables
- Subscribing to Routes & Params as Observables
- Using Common RxJS Operators
- Introduction to Signals
- Using Signal based components
- Signal based Inputs
Managing State & Sharing Events
- What is State Management
- State Management Options: Signals vs Observables
- Stateless & Stateful Services
- Sharing Data between deeply Nested Components
- Service Bus & Sharing Events between deeply Nested Components
- Visual Feedback: Implementing a Loading Indicator
Testing Basics
- Overview Testing Frameworks and Testing Types
- Introduction to Unit Tests
- Test Setup, Mocks & Spies
- Testing Classes, Directives and Pipes
- Intro to Component DOM Testing: Testbed and Testing Module
- Testing Component Interaction (Read, Write, Emit, Inputs)
- Material Testing using Component Harnesses
- Cypress End to End Testing
- Cypress Component Testing
Authentication & Publishing
- Authentication / Authorization Basics in Spa’s
- Token based Auth: Understanding Jwt, OAuth 2.0 & OpenID Connect
- Observe Response and Setting Custom Http Headers
- Using Interceptors to Automate Authentication Tokens
- Securing Angular Routes using Route Guards
- Hosting Option Overview (Docker, Firebase, Azure Static Web App, …)
- Publishing Angular Apps
https://www.etc.at/seminare/ngDEV
Kategorien