Angular Single Page Application Development

12 Monate
Trainings-ID:
ngDEV

Inhalt des Trainings

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.
 
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 .
 
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.

Zielgruppen

  • Web Entwickler*innen welche Angular Anwendungen entwickeln möchten.

Vorkenntnisse

  • 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.

Detail-Inhalte

Angular Introduction
  • TypeScript in the Angular Ecosystem
  • Databinding & Completing Basic Tasks
  • Implementing Nested Components
  • Routing & Dependency Injection
  • Designing a responsive User Interface
  • Forms Design & Validation
  • Reactive Programming using Signals & RxJS
  • Managing client State & Sharing Events
  • Testing Angular Applications
  • Securing & Publishing Angular  
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 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

Trainings zur Vorbereitung

Downloads

Jetzt online buchen

  • 14.10.-18.10.2024 14.10.2024 5T 5 Tage Online
    Online only.
    von Ihrem Computer Uhrzeiten
    • Preis  3.190,-
      • Online
  • 16.12.-20.12.2024 16.12.2024 5T 5 Tage Online
    von Ihrem Computer Uhrzeiten
    • Preis  3.190,-
      • Online

Preise exkl. MwSt.

Sie haben Fragen?

Ihr ETC Support

Kontaktieren Sie uns!

+43 1 533 1777-99

Hidden
Hidden
Hidden
5,0

4 Bewertungen

  • 22.05.2024

    Im Kurs wird ein sehr guter Überblick über das Angular Framework vermittelt. Der Trainer war äußerst kompetent und ging auch auf die Fragen der einzelnen Teilnehmer ein.

    — Matthias W.

    Angular Single Page Application Development

    22.05.2024

    Im Kurs wird ein sehr guter Überblick über das Angular Framework vermittelt. Der Trainer war äußerst kompetent und ging auch auf die Fragen der einzelnen Teilnehmer ein.

    — Matthias W.
  • 29.04.2024

    Das Seminar war sehr interessant und gut

    — Jonas S.

    Angular Single Page Application Development

    29.04.2024

    Das Seminar war sehr interessant und gut

    — Jonas S.
  • 20.09.2019

    Umfangreich und informativ. Hat meine Erwartungen übertroffen.

    — Aleksandar N.

    Angular Single Page Application Development

    20.09.2019

    Umfangreich und informativ. Hat meine Erwartungen übertroffen.

    — Aleksandar N.
  • 02.02.2018

    Ist sehr informativ und ein toller Trainer

    — Martin K.

    Angular Single Page Application Development

    02.02.2018

    Ist sehr informativ und ein toller Trainer

    — Martin K.

Unsere Empfehlungen für Sie

07.10.2024
 1.465,-

Programming C#

Training zum/zur C# Programmierer*in

02.09.2024+2
 2.495,-

Programming HTML5, JavaScript and CSS3

Webentwicklung-Basics lernen mit dem Training von ETC

09.09.2024+1
 2.620,-

Lernformen im Überblick

Mehr darüber