Angular Single Page Application (SPA) Development (NGBASICS)

 

Im Training “Angular Single Page Application Development” vermitteln wir die grundlegenden Fähigkeiten, um “Single Page Applications” (SPAs) mit Angular implementieren zu können. Dabei legen wir großen Wert darauf, in den Demos und Labs aktuelle Coding-Styles und Patterns zu verwenden. Wir starten mit der Projektkonfiguration und den essenziellen Grundlagen von Angular, wie beispielsweise Angular CLI und Databinding. Anschließend vertiefen wir unser Wissen in diesen Grundlagen und widmen uns schließlich allen Aspekten des Angular-Ökosystems. Dazu gehören Routing, responsives UI-Design, reaktive Programmierung, Testing, Authentifizierung und Veröffentlichung.

Who should attend

Dieses Seminar richtet sich an Web Entwickler welche Angular Anwendungen entwickeln möchten.

Prerequisites

  • JavaScript und HTML Basics (Kurs: Programming HTML5, JavaScript and CSS3)
  • Erfahrung mit Web Development
  • Kenntnis von Objektorientierten Sparchen
  • Kenntnis von modernen Web Technologien (Node, Webpack, TypeScript, Flexbox, CSS Grid, ...) hilfreich. Diese werden im Kurs Advanced Web Technologies (webADV) vermittelt.

Course Objectives

Nach Abschluss dieses Trainings haben die Teilnehmer Kenntnisse zu folgenden Themen:

  • Verständnis des Angular Technologie Stacks und Anwendung der Angular CLI.
  • Anwendung von TypeScript und Umgang mit asynchronen Operationen, Observables und Signals.
  • Durchführung von Databinding und grundlegenden Aufgaben.
  • Implementierung verschachtelter Komponenten.
  • Verwendung von Routing und Dependency Injection.
  • Erstellung einer responsiven Benutzeroberfläche.
  • Anwendung von Reactive Forms und Validierung.
  • Einführung in reaktive Programmierung mit Signals und RxJS.
  • State Management und Event-Sharing.
  • Grundlagen des Testens: Unit Tests, Component Tests, E2E Tests.
  • Authentifizierung und Veröffentlichung von Angular Apps.

Follow On Courses

Course Content

Angular Introduction
  • Angular Introduction & Technology Stack
  • Angular CLI Essentials
  • Debugging Angular
  • Bootstrapping & Configuration
  • Maintaining & Updating projects
TypeScript in the Angular Ecosystem
  • TypeScript Overview, ECMA Script Standards
  • Types, Variables, Literal Types, Functions
  • Objects, Classes, Interfaces
  • Immutability, Cloning & Object Composition
  • Async Operations, Observables & Signals
  • Calculated Signals & Effects
Databinding & Completing Basic Tasks
  • Components & Dependency Injection
  • Services & Data Request
  • Expressions, Templates & Directives
  • String Interpolation, Attribute- & Event-Binding, Two-Way Binding
  • Built-in Control Flow & Deferrable Views
  • Data binding Observables & Signals
  • Built in and Custom Pipes & Directives
Implementing Nested Components
  • Benefits of Nested Components
  • Container vs Presentational Components
  • Data binding & Events using @Input & @Output
  • Nesting using Signal inputs & model outputs
  • View Child, View Children & Signal Queries
Routing & Dependency Injection
  • Register Providers & Dependency Injection
  • Routing & Navigation Basics
  • Working with Parameterized Routes
  • Component Input Bindings
  • Modules vs Standalone Components
  • Modules Use Cases & Lazy Loading
  • Route Guards & Data Preloading
Designing a responsive User Interface
  • Implementing a CSS Reset
  • Global & Component Styles
  • Responsive Web Design using Media Queries
  • Layout using Flexbox, CSS Grid and Areas
  • Angular Material Overview
  • Common controls: Tables, Dialogs & Form Controls ...
  • Angular CDK & 3rd Party Components (Virtual Lists, Drag & Drop, Markdown, ...)
Reactive Forms Design & Validation
  • Forms Introduction
  • Template Driven Forms vs Reactive (Model Based) Forms
  • FormBuilder & Typed Forms (Nullability, Nested Objects, Arrays)
  • FormControl, FormGroups & FormArrays
  • Form Validation Basics (Synchronous / Asynchronous)
  • Custom- & Code-Based Validators
  • Signals & FormControls
Reactive Programming using Signals & RxJS
  • What is Reactive Programming / Benefits
  • Imperative vs Reactive Programming Styles
  • Observable, Observer, Async pipe & Unsubscribing
  • Common RxJS Operators
  • Creating Observables & Casting to Observables
  • Capturing Mouse & DOM Events as Observables
  • Observable & Signal Interoperability
Managing client State & Sharing Events
  • What is State Management
  • State Management Options: Signals vs Observables
  • Stateful Services using Signals
  • Sharing Events between Components
Testing Angular Applications
  • Angular Testing Options
  • Testing Classes, Directives and Pipes
  • Component Injections, Mocks & Spies
  • Component DOM testing & test ids
  • Testing Component Interaction (Read, Write, Inputs, Events)
  • Material Testing using Component Harnesses
  • In Short: End to End Testing using Cypress
Securing & Publishing Angular
  • Authentication / Authorization Basics in Spa’s
  • Token based Auth: Understanding Jwt, OAuth 2.0 & OpenID Connect
  • Observe http-response and setting custom http headers
  • Using Interceptors to Automate Authentication Tokens
  • Angular Routes & functional Route Guards
  • Hosting Options Overview (Docker, Firebase, Azure Static Web App, …)
  • Publishing Angular Apps

Prices & Delivery methods

Online Training

Duration
5 days

Price
  • 3,190.— €
Classroom Training

Duration
5 days

Price
  • Germany: 3,190.— €
  • Switzerland: CHF 3,830.—

Schedule

Instructor-led Online Training:   Course conducted online in a virtual classroom.
FLEX Classroom Training (hybrid course):   Course participation either on-site in the classroom or online from the workplace or from home.

German

Time zone: Central European Time (CET)   ±1 hour

Online Training
Classroom option: Munich
Time zone: Central European Summer Time (CEST) Course language: German
Online Training Time zone: Central European Summer Time (CEST) Course language: German
Online Training
Classroom option: Frankfurt
Time zone: Central European Summer Time (CEST) Course language: German
Online Training Time zone: Central European Summer Time (CEST) Course language: German
Online Training
Classroom option: Hamburg
Time zone: Central European Time (CET) Course language: German
FLEX Classroom Training (hybrid course):   Course participation either on-site in the classroom or online from the workplace or from home.

Germany

Munich Course language: German
Frankfurt Course language: German
Hamburg Course language: German

If you can't find a suitable date, don't forget to check our world-wide FLEX training schedule.