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
  • 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 Angulars Bootstrapping process and Configuration
  • Updating Angular Projects
  • Introduction to the Demo App

TypeScript Fundamentals
  • ECMA Script Standards
  • TypeScript Overview, Configuration, Debugging, ES Lint
  • Types, Arrays & Functions
  • ECMA Script 6+ Essentials
  • Objects, Classes, Interfaces
  • 3rd Party Libraries & Type Definitions
  • Async Operations, Promises & Observables

Fundamentals & Completing Basic Tasks
  • Components, Modules & Dependency Injection
  • Expressions, Templates & Directives
  • String Interpolation, Property- & Event-Binding, Two-Way Binding
  • Pipes & Localization
  • Custom Directives & Pipes
  • Services & Dependency Injection

Nesting Components
  • Splitting the UI to Nested Components
  • Databinding & Events with Nested Components
  • Container vs Presentational Components
  • Understanding Component Lifecycle
  • Reusable Components using Local References & Content Projection
  • View Child, View Children

Routing & Modularity
  • Routing Basics
  • Working with Parameterized Routes
  • Using Router State
  • Child- & Secondary (Auxiliary) Routes
  • 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)
  • Responsive Layout using Flexbox, CSS Grid & Angular Flex Layout
  • Angular Material Overview
  • Using Material Component schematics
  • Material Theming Colors
  • 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
  • Typed Forms
  • Forms Builder
  • FormControl, FormGroups & FormArrays
  • Form Validation Basics (Snychronous / Asynchronous)
  • Cross Field / Multi Field Validation
  • Custom- & Code-Based Validators

Observables & Reactive Programming
  • 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, Flex Layout API
  • Using Common RxJS Operators

Managing State & Sharing Events
  • What is State Management
  • State Management Options
  • 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 Spies and Injections
  • Http-Testing and HttpTestingController
  • Intro to Component Testing: Testbed and Testing Module
  • Component DOM Testing
  • Interacting with Components in Tests
  • In Short: End to End Testing using Cypress

Securing & Publishing Angular
  • Authentication / Authorization Basics in SPAs
  • 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 CDN, …)
  • Publishing Angular Apps

Empfohlene Kenntnisse

Downloads

Jetzt online buchen

  • 22.05.-26.05.2023 22.05.2023 5 Tage 5T online Online
    • Online € 2.875,-

      Virtual Classroom

      • Online Training – aber live beim Training dabei
      • Keine Anfahrt ins Trainingszentrum notwendig
      • Online Support und Hotline
      • ETC-Services
  • 04.09.-08.09.2023 04.09.2023 5 Tage 5T Wien
    • Präsenz € 2.875,-

      Vor-Ort im Trainingszentrum

      • Ihr ILT Training (Instructor Led Training)
      • Trainingsunterlagen, Teamwork, Labs
      • Verpflegung vor Ort
      • Training-Services
  • 27.11.-01.12.2023 27.11.2023 5 Tage 5T online Online
    • Online € 2.875,-

      Virtual Classroom

      • Online Training – aber live beim Training dabei
      • Keine Anfahrt ins Trainingszentrum notwendig
      • Online Support und Hotline
      • ETC-Services

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

Logo Microsoft

Introduction to Git

15.05.2023+1
€ 1.395,-
Logo Microsoft

Programming C#

Training zum/zur C# Programmierer*in

03.04.2023+4
€ 2.495,-
Logo Microsoft

Programming HTML5, JavaScript and CSS3

Webentwicklung-Basics lernen mit dem Training von ETC

26.06.2023+2
€ 2.495,-

smart Implementing Reactive Web Apps using React and Redux

03.07.2023
€ 2.720,-
Logo Microsoft

Programming Web Applications with ASP.NET MVC Core C#

19.06.2023+2
€ 2.875,-
Logo Microsoft Sharepoint

SharePoint 2019: Server Side Solution Development

17.07.2023+1
€ 1.650,-

Advanced Web Technologies

24.07.2023+1
€ 2.875,-