Angular Single Page Application (SPA) Development

Kursbeschreibung

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.

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

Module

• Environment & Tools Setup and Introduction
• TypeScript Fundamentals
• Angular Projektkonfiguration & CLI
• Understanding Fundamentals & Completing Basic Tasks
• Routing & Modularity
• Implementing a Responsive User Interface
• Form Design & Validation
• Implementing & Consuming Data Models and REST APIs
• Introduction to Observables & Reactive Programming
• Nesting Components
• Managing State & Broadcasting Events
• Testing & Securing the Application

Zielgruppe

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

Vortragsart

Neue Themengebiete werden anhand von Folien und Demos erarbeitet. Am Ende der Module werden die erlernten Inhalte in eine durchgängige Anwendung integriert. Der Kurs wird mit Visual Studio Code gehalten.

Voraussetzungen

• JavaScript und HTML Basics (Kurs: Programming HTML5, JavaScript and CSS3)
• Erfahrung mit Web Development
• Kenntnis von Objektorientierten Sparchen
• Kenntnis von modernen CSS Technologien (Flexbox, CSS Grid, ..) hilfreich

Dauer

5 Tage

---

Module

Environment & Tools Setup and Introduction

• Understanding Environment Setup
• Visual Studio Code Essentials
• Understanding Node.js, NPM, WebPack

TypeScript Fundamentals

• TypeScript Overview, Configuration, Debugging
• 3rd Party Libraries & Type Definitions
• Types, Arrays & Functions
• ECMA Script 6+ Essentials
• Objects, Classes, Interfaces
• Understanding Modules & Module Loading

Angular Introduction & Setup

• What is a SPA?
• Overview and Version Comparison
• Angular Command Line Interface – Angular CLI
• Bootstrapping Angular / Project Konfiguration
• Debugging Angular using Augury

Understanding Fundamentals & Completing Basic Tasks

• Components, Expressions, Templates & Directives
• String Interpolation, Property- & Event-Binding, Two-Way Binding
• Understanding Component Lifecycle
• Pipes & Localization
• Custom Directives & Pipes
• Reusable Components using Local References & Content Projection
• View Child, View Children

Routing & Modularity

• Routing Basics
• Working with Parameterized Routes
• Child- & Secondary (Auxiliary) Routes
• Using Route Guards
• Preloading Component Data
• Organizing Angular Applications using Modules
• Module Lazy Loading
• Preloading Feature Modules

Implementing a Responsive User Interface

• Global & Component Styles
• Using Sass (Synthetically Awesome Stylesheets)
• Responssive Web Design Basics
• Using Flexbox & CSS Grid
• Responsive Layout using Angular Flex Layout
• Angular Material Overview
• Using Material Tables, Dialogs & Form Controls
• Using Bootstrap JumpStart
• Using 3rd Party Components (Charting, File Upload, Drag & Drop)

Forms Design & Validation

• Forms Introduction
• Template Driven Forms
• Reactive (Model Based) Forms
• Validating Forms
• Custom & Code Based Validation

Designing & Accessing Data Models

• Introduction Into .NET Core
• Implementing Data Models using .NET Core and Entity Framework 2.0
• Angular Project Configuration for Integration with .NET Core
• Implementing the Client-Side Data Model
• Comparison Http vs HttpClient
• Consuming .NET Core RESTful APIs
• Using Interceptors

Introduction to Observables & Reactive Programming

• Consuming REST Services: Observables vs. Promises
• Observable, Observer & Subject
• What are Reactive Extensions
• Use Cases for Reactive Programming
• Using Built-in Observables
• Creating Observables from Scratch
• Using Operators & Pipes
• Capturing Mouse & DOM Events as Observables
• Subscribing to Routes & Params, Flex Layout API

Nesting Components

• Why Nesting
• Databinding & Events with Nested Components
• Container vs Presentational Components
• Introduction to Angular Change Detection

Managing State & Sharing Events

• What is State Management
• State Management Options
• Stateless & Stateful Services
• Sharing Data between deeply Nested Components
• Sharing Events between deeply Nested Components
• Going beyond: Overview of the Redux Pattern

Testing Basics

• Unit Tests vs Integration Tests
• Karma & Jasmine Basics
• Test Setup & Mocking
• Testing Angular Components, Services and Forms
• In Short: End to End Testing

Securing the Application using Token Based Auth

• Authentication / Authorization Basics in SPAs
• Token based Auth: Understanding Jwt, OAuth 2.0 & OpenID Connect
• Securing Angular Routes using Route Guards
• Securing the Web Api

Publishing Angular Apps

• Publishing Option Overview (Webserver, Docker, …)
• Preperations for Deployment
• Creating a Production Build
• Hosting Angular Applications