Angular Single Page Application (SPA) Development (NGBASICS)

 

Im Seminar "Angular Single Page Application Development" lernen Sie Angular gemeinsam mit Node.js / .NET Core einzusetzen und damit "Single Page Applications" (SPA's) zu erstellen. Beginnend mit Projektkonfiguration & Angular Basics vertiefen wir unsere Kenntnisse, um schließlich alle Teile des Angular Eco-Systems, inklusive Responsive UI Design, Security, Testing & Hosting zu behandeln.

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. Wir empfehlen Visual Studio Code als Cross Platform Editor.

Zielgruppe

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

Voraussetzungen

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

Kursziele

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

  • Environment & Tools Setup and Introduction
  • TypeScript Fundamentals
  • Angular Projektkonfiguration & CLI
  • Understanding Fundamentals & Completing Basic Tasks
  • Nesting Components
  • Routing & Modularity
  • Implementing a Responsive User Interface
  • Form Design & Validation
  • Implementing & Consuming Data Models and REST APIs
  • Einführung in Observables & Reaktive Programmierung mit Signals und RxJS
  • Managing State & Broadcasting Events
  • Angular Unit Testing
  • Securing & Publishing the Application

Weiterführende Kurse

Kursinhalt

Angular Introduction & Setup
  • What is a Single Page Application? – SPA
  • Tooling: Node.js, npm and Workspace requirements
  • Angular Introduction
  • Angular Technology Stack
  • Angular Essentials & CLI
  • Debugging Angular
  • Understanding Agular’s Bootstrapping process and Configuration
  • Updating Angular Projects
  • Introduction to the Demo App
TypeScript Fundamentals
  • ECMA Script Standards
  • TypeScript Overview, 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
  • Imperative vs Reactive Programming Styles
  • Components, Modules & Dependency Injection
  • Expressions, Templates & Directives
  • String Interpolation, Property- & Event-Binding, Two-Way Binding
  • Databinding Observables
  • Custom Pipes & Localization
  • Custom Directives & Pipes
  • Modules, Services & Dependency Injection
Nesting Components
  • Splitting the UI to Nested Components
  • Databinding & Events with Nested Components using @Input & @Output
  • Container vs Presentational Components
  • Understanding & Using Component Lifecycle Events
  • Reusable Components using Local References & Content Projection
  • View Child, View Children
Routing & Modularity
  • Routing Basics
  • Working with Parameterized Routes
  • Using Router State
  • Organizing Angular Applications using Modules
  • Modules Types (Root, Feature, Shared, ...)
  • Module Lazy Loading
  • Standalone Components
  • Component Less Routing
  • Route Guards & Data Preloading
Designing the User Interface
  • Implementing a CSS Reset
  • Global & Component Styles
  • Using Sass (Synthetically Awesome Stylesheets)
  • Layout using Flexbox, CSS Grid and Areas
  • Responsive Web Design using Media Queries
  • Angular Material Overview
  • Using Material Component schematics
  • Material Theming Colours
  • Using Material Tables, Dialogs & Form Controls
  • Using Angular CDK & 3rd Party Components (Charting, File Upload, Drag & Drop)
Consuming RESTful Services
  • RESTful APIs Overview
  • Implementing the Client-Side Data Models
  • Implementing CRUD Operations on RESTful APIs
  • Using JSON Server as API for Prototyping
  • Observe Response and Setting Custom Http Headers
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
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
  • Unit Tests vs Integration Tests
  • Karma & Jasmine Basics
  • Test Setup & Mocking Data
  • Testing Classes, Directives and Pipes
  • Using Mocks & Spies
  • Intro to Component DOM Testing: Testbed and Testing Module
  • Testing Component Interaction (Read, Write, Emit, Inputs)
  • 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
  • Using Interceptors to Automate Authentication Tokens
  • Securing Angular Routes using Route Guards
  • Hosting Option Overview (Docker, Firebase, Azure Static Web App, …)
  • Publishing Angular Apps

Preise & Trainingsmethoden

Online Training

Dauer
5 Tage

Preis (exkl. MwSt.)
  • 3.190,– €
Classroom Training

Dauer
5 Tage

Preis (exkl. MwSt.)
  • Deutschland: 3.190,– €
  • Schweiz: CHF 3.830,–

Kurstermine

Instructor-led Online Training:   Kursdurchführung online im virtuellen Klassenraum.
FLEX Classroom Training (Hybrid-Kurs):   Kursteilnahme wahlweise vor Ort im Klassenraum oder online vom Arbeitsplatz oder von zu Hause aus.

Deutsch

Zeitzone: Mitteleuropäische Sommerzeit (MESZ)   ±1 Stunde

Online Training Zeitzone: Mitteleuropäische Sommerzeit (MESZ)
Online Training Zeitzone: Mitteleuropäische Sommerzeit (MESZ)
Online Training
Klassenraum-Option: Berlin
Zeitzone: Mitteleuropäische Zeit (MEZ)
FLEX Classroom Training (Hybrid-Kurs):   Kursteilnahme wahlweise vor Ort im Klassenraum oder online vom Arbeitsplatz oder von zu Hause aus.

Deutschland

Berlin

Ist der für Sie passende Termin oder Ort nicht dabei? Wir bieten Ihnen noch weitere FLEX Trainingstermine an!