Angular Grundlagen und Vertiefung für Enterprise Anwendungen

In unserem Seminar Angular Grundlagen und Vertiefung für Enterprise Anwendungen lernst du, eine komplette performante Single Page Applikation mit Angular zu erstellen. Angular setzt dabei auf wiederverwendbare JavaScript Komponenten. Als Programmiersprache kommt TypeScript, eine Obermenge von ECMAScript 2015/2016/2017/2018/2019 (ES6, ES7, ES8, ES9, ES10) zum Einsatz. Dabei werden Schwerpunkte auf die Wiederverwendbarkeit und Modularisierung von Code-Teilen gelegt und auf Sicherheits- und Performance-Aspekte bei der Verwendung von Routes. Mit der Verwendung von NgRx implementiert Angular das Flux-Pattern und bietet damit ein starkes State-Management-System und einen neuen Ansatz für große Angular Architekturen. Damit ein Angular-Projekt wartbar bleibt, wird in diesem Seminar die testgetriebene Entwicklung mit Jasmine ihren Platz finden, so auch Frontend-Tests anhand von User Stories mit Protractor, bzw. Selenium. Nach dieser Schulung bauen Teilnehmende geschäftsrelevante Enterprise-Applikationen modern und zukunftssicher auf.

Du weißt nach der Schulung, wie man mit Angular und TypeScript Anwendungen entwickelt und welche Besonderheiten dabei zu beachten sind. Du lernst die Angular Grundkonzepte wie Component, Templating und Data Bindung kennen und anwenden. Mit Hilfe von Angular Dependency Injection entwickelst du Services und nutzen dabei REST-basierte Serverschnittstellen. Durch den Angular Router stellst du eine Navigation innerhalb deiner Anwendung zur Verfügung und nutzt Angular Formulare für die Eingabe von Daten. Durch Testing wird deine Angular-Anwendung robust. Nach der Schulung weißt du, wie du Angular-Enterprise-Anwendungen erfolgreich umsetzt. Du weißt, wie du mit Modularisierung wiederverwendbaren Code erreichst und setzt erweitertes Routing und Zustandsverwaltung mit NgRx gekonnt ein. Du weißt, wie du Unit- und E2E-Tests anwendest.

1. Tag: Auch separat buchbar als TypeScript Einführung und Grundlagen

Einstieg in TypeScript

• TypeScript Einführung und Überblick

• TypeScript Möglichkeiten und Eigenschaften

• TypeScript Syntax, Schlüsselworte und Code Hierarchie

• TypeScript Werkzeuge: TypeScript Playground, Visual Studio, Web Essentials, Atom, Sublime Text, Eclipse, NodeJS

• TypeScript Compiler

• Hello TypeScript

TypeScript Basics: Typen, Variablen, Funktionen

• TypeScript Grammatik, Deklarationen und Annotationen

• Typinferenz: Typableitung in TypeScript

• Statische und dynamische Typisierung in TypeScript

• Ambiente Deklarationen und Typ Definitions Files

• "Any" und primitive Datentypen

• Objekte in TypeScript

• Funktionen in TypeScript

• Arrow-Funktionen in TypeScript

• Generics in TypeScript

TypeScript Klassen und Schnittstellen

• Klassen definieren

• "Casting" - Typumwandlung

• Datentypen erweitern

• Schnittstellen verwenden

• Mixins nutzen

TypeScript Module

• JavaScript und Module

• Interne Module

  • Zugriffe auf interne Module und IIFE

  • Benannte Module

  • Interne Module erweitern

  • Interne Module organisieren

• Externe Module

  • CommonJS

  • AMD

  • UMD

  • SystemJS

2.-3. Tag: Auch separat buchbar als Angular mit TypeScript Einführung und Grundlagen

Angular - Einstieg

• Voraussetzungen für die Entwicklung von Angular Applikationen

• Werkzeuge, IDEs und Editoren

• JavaScript, TypeScript, ES2015, Node.js®

• Erstellen von Projekten mit dem Angular CLI

• Alternativer Projekt-Setup mit Nx

Angular - Components

• Aufbau einer Komponente

• Data Binding

• Styling von Komponenten

• Verschachtelte Components

• Component Lifecycle

Angular - Router, Navigation

• Components als Routing-Ziel

• Navigation aufbauen

• Programmatisches Navigieren

Angular - Templating

• Interpolation Directive

• Attribute Directives

• Custom Directives

• Styling mit ngStyle und ngClass

• Bedingte Anzeige und Schleifen

• Events auslösen

• 2-way Data Binding

• Components mit Parametern

• Build-In Pipes

• Custom Pipes

REST Client erstellen

• Test Datenquelle einrichten

• Dependency Injection

• Service erstellen

• Das HttpClientModule

• RxJs / Observables verstehen

• Error Handling

Angular - Forms

• Überblick Template-Driven Forms

• Reactive Forms erstellen

• Nutzen des FormBuilders

• Formular-Validierung

Code Qualität sichern

• TSLint und ESLint in Projekten verwenden

• Updates

• Documentation erstellen mit Compodoc

• Übersicht über Frontendtests mit Protractor und Cypress

• Übersicht Unit Tests mit Jasmine und Jest

4.-5. Tag: Auch separat buchbar als Angular Vertiefung für Enterprise Anwendungen

Wiederverwendbarer Code

• Feature Modules

• Lazy Loading Modules

• Shared Modules

• Angular Libraries erstellen

Routing Vertiefung

• Routing in Feature Modules

• Child Routes

• Routen schützen mit Guards

• Daten holen mit Resolver

State Management mit NgRx

• Konzept

• Installation und Schematics

• Debugging der DevTools Extension

• Begriffserklärung: Store, Actions, Reducers und Selectors

• Einführungsbeispiel

Konzepte für Unit Tests für Angular

• Überblick über Jasmine und Jest

• Typischer Testaufbau

• Mocken von Abhängigkeiten

End-2-end Tests mit Protractor und Cypress

• Überblick über die Werkzeuge

• Vorgehensweise

• Anbinden an eine Browser-Farm

SEO optimierte Applikationen

• Verwenden von Angular Universal

• Voraussetzungen auf der Server-Seite

Angular Applikationen als Progressive Web App (PWA)

• Hinzufügen von PWA-Funktionalität

• Kriterien für eine PWA

• Konfiguration des Service Workers

Unsere Schulung Angular Grundlagen und Vertiefung für Enterprise Anwendungen richtet sich an Web- und , Softwareentwickler:innen und Programmierer:innen

Für unsere Schulung Angular Grundlagen und Vertiefung für Enterprise Anwendungen empfehlen wir Erfahrung in HTML, CSS und JavaScript.