Angular Single Page Application Development

5,0 2 Bewertungen 
Wissensgarantie:
12 Monate
Trainings-ID:
ngDEV

Inhalt des Trainings

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*innen Kenntnisse zu folgenden Themen:
  • Umgebung und Tools - Setup und Einführung
  • TypeScript-Grundlagen
  • Angular Projektkonfiguration & CLI
  • Grundlagen verstehen & grundlegende Aufgaben erledigen
  • Komponenten verschachteln
  • Routing & Modularität
  • Implementierung einer responsiven Benutzeroberfläche
  • Formularentwurf & Validierung
  • Implementierung und Nutzung von Datenmodellen und REST-APIs
  • Einführung in Observables & Reaktive Programmierung mit Signals und RxJS
  • Verwaltung von Zuständen und Übertragung von Ereignissen
  • Angular Unit-Tests
  • Testen & Sichern der Anwendung


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.

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

Trainings zur Vorbereitung

Downloads

Jetzt online buchen

  • 27.11.-01.12.2023 27.11.2023 5 Tage 5T online Online
  • 12.02.-16.02.2024 12.02.2024 5 Tage 5T Wien Online
  • 22.04.-26.04.2024 22.04.2024 5 Tage 5T online Online
  • 14.10.-18.10.2024 14.10.2024 5 Tage 5T Wien Online
  • 16.12.-20.12.2024 16.12.2024 5 Tage 5T online Online

Preise exkl. MwSt.

Sie haben Fragen?

Ihr ETC Support

Kontaktieren Sie uns!

+43 1 533 1777-99
E-Mail

Wir rufen Sie gerne an.
Datenschutz*
Hidden
Hidden
Hidden
5,0

2 Bewertungen

  • 20.09.2019

    Umfangreich und informativ. Hat meine Erwartungen übertroffen.

    — Aleksandar N.
  • 02.02.2018

    Ist sehr informativ und ein toller Trainer

    — Martin K.

Unsere Empfehlungen für Sie

Introduction to Git

05.10.2023+3
€ 1.395,-

Programming C#

Training zum/zur C# Programmierer*in

16.10.2023+7
€ 2.495,-

Programming HTML5, JavaScript and CSS3

Webentwicklung-Basics lernen mit dem Training von ETC

25.09.2023+6
€ 2.495,-

smart Implementing Reactive Web Apps using React and Redux

22.01.2024+3
€ 2.720,-

Programming Web Applications with ASP.NET MVC Core C#

11.12.2023+3
€ 2.875,-
Logo Microsoft Sharepoint

SharePoint 2019: Server Side Solution Development

18.12.2023
€ 1.650,-

Advanced Web Technologies

18.12.2023+2
€ 2.875,-