Advanced Angular Development

5,0 1 Bewertung

Wissensgarantie:: 12 Monate
Trainings-ID:: ngADV

Inhalt des Trainings

Im Seminar "Advanced Angular Development" bringen wir Ihre Angular Kenntnisse auf den Experten Level. Großes Augenmerk legen wir dabei auf Reactive Programming & State Management mit NgRX, Advanced Routing, Testing & Security, Optimierung und vor allem auch die Darstellung des Angular Developments Prozesses in Bezug auf DevOps, Cloud & Container

Nach Abschluss des Kurses haben die Teilnehmer*innen Kenntnisse zu folgenden Themen:

Theming Angular Apps
Components & Forms Deep Dive
Mastering Reactive Programming
Advanced State Management using NgRx
Advanced Routing and App Initialization
Securing Angular using NgRx and using Cloud Identities
Advanced Testing including Jest & Cypress
Supporting Reusability with Libraries and Packages
Optimizing Applications
Implementing Real Time connected Microfrontends
Publishing Angular App using Containers and Config Injection

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.

Zielgruppen

Angular Entwickler*innen welche ihre Kenntnisse vertiefen wollen.

Vorkenntnisse

Environment & Tools Setup and Introduction
TypeScript Fundamentals
Angular Projektkonfiguration & CLI
Understanding Fundamentals & Completing Basic Tasks
Routing & Modularity
Basics of Building a Responsive User Interface using Material
Form Design & Validation
Data Access
Observables Basic Understanding
Basic Unit Testing

Diese werden im Seminar "Angular Single Page Application Development" vermittelt.

Außerdem Kenntnisse im Umgang mit Git.

Detail-Inhalte

Theming Angular Apps

Migrating to MDC-based Angular Material Components using Angular 15+
Styling Angular Components Deep Dive
Comparing Angular Material & Bootstrap
Upgrading to Material MDC
Modern and clean CSS - replacing @angular/flex-layout
Bootstrap Resets, Layout Helper & Utilities
Best of Both: Combining Bootstrap & Angular Material
Building a Reusable Theme
Theming Custom Components

Components & Forms Deep Dive

Standalone Components: Creation, Lazy Loading, Bootstrapping
Using Angular Directives Composition Api
Templates TemplateRef, *ngTemplateOutlet
Comparison: ng-template vs ng-content - pro / cons
ViewChild, -Children, ContentChild, -Children
HostBinding & HostListener
Recap Reactive Forms Revisited (FormGroup, Form Builder, FormControl, FormArray)
Untyped Forms vs Typed Forms
Typed Forms Nullability, NonNullableFormBuilder, GetRawValue
Partial Values, Optional Controls, Dynamic Groups and FormRecord
Cascading Form Controls
Implementing Custom Controls using ControlValueAccessor
Typed Forms Validation & Custom Validators
Handling FormErrors & ErrorStateMatcher
Dynamic Form Generation

Mastering Reactive Programming

Recap: Observables, Operators & Subjects
Data- vs Action-Streams
Unsubscribing: When & Patterns
Understanding Marble Diagrams & Debugging Observables
Imperative vs Reified Reactive Programming
Base Operators: Mapping, Filtering, Merging, Scanning, ...
Implementing Side Effects using tap
Marble-testing RxJs
Higher Order Mapping Operators
Data Composition - Joining Observable Streams
Data Caching & Invalidation
Retry & Error Handling Strategies
Implementing & Testing Custom Observable Operators

Advanced State Management using NgRx

Overview State Management Patterns
Statefull Services with Behaviour Subject
Intra Component Communication using Event Bus Pattern
Introduction to the Redux Pattern & NgRx
Using Store, Selectors, Actions, createActionGroup and Reducers
Debugging NgRx using Redux Dev Tools
Feature State and ActionReducerMap
Effects, Facades, @ngrx/enitity adapters
Simplifying Data Access with @ngrx/data
NgRx Data Optimistic & Pessimistic Update and Delete
NgRx Container Presenter Best Practices
Understanding, Profiling & Optimizing Angular Change Detection
Optimize Change Detection using ngrxPush, ChangeDetectioRef
@ngrx/component-store vs Store
Using @ngrx/component-store

Advanced Routing and App Initialization

Dependency Injection in Depth: Resolution modifiers and Dependency providers
APP_INITIALIZER, Injection & forwardRef
Introduction to @ngrx/router-store
Implementing Global Error Handling and Retry-Patterns
Integrating Route Guards & Interceptors with State
Chaining Route Guards & Interceptors
Optimizing Modules using Code Splitting & Preloading
Auxilary Routes: Common use cases
Preloading Component Data from NgRx using Resolvers
Introduction to Visual Feedback (Loading-, Saving-, ...-Indicator)
Implementing Page Transitions using Animations

Securing Angular using NgRx and using Cloud Identities

Recap Jwt, OAuth 2.0 & OpenID Connect
Token based Authentication in Angular with NgRx
Impelmenting an AuthModule using a Facade Service, Components, Guards & Interceptors
Optimizing Application Flow for Authetication
Authentication using Microsoft Identity, Azure AD and @azure/msal-angular

Advanced Testing including Jest & Cypress

Using Testbed & Spies
Testing Components & Components interaction
Complex Forms Testing
Async Component Testing (done, fakeAsync, waitForAsync)
Testing Observables & BehaviourSubjects
Mock Data & Http Testing
Interacting with Components in Tests
Material Testing using Component Harnesses
Testing NgRx: Mock Store, Mock Selectors, Reducers, ...
Using Jest for Unit Testing (Setup, Changes in spec, Snapshot Tests)
End-2-End Testing using Cypress
Introduction to Test driven development (TDD)

Supporting Reusability with Libraries and Packages

Angular Building Blocks: Workspace, Apps, Libraries
Reusable Artifacts using Angular Libraries
Implementing, Publishing and Consuming Libraries to / from GitHub Packages
Understanding Monorepos: Pro / Cons
Introduction to Nx Workspaces, Apps & Libs
Introduction to Angular Schematics
Implementing Web Components using Angular Elements

Optimizing Applications

Using Linting and Autoformat with Prettier
Using Chrome Dev Tools & Lighthouse for Performance Optimization
Understanding & Using Page Traces
Optimizing Images using NgOptimizedImage
Analysing and Optimizing Bundles & Modules
Introduction to Server Side Rendering (SSR) using Angular Universal
Why Server Side Rendering
Configure Server Side Rendering & prerender static pages

Implementing Real Time connected Microfrontends

Introduction to Microfrontends and Event Driven Architecture (EDA)
Implementing a Real Time connected Microfrontend listening to Cloud Events
Using `@ngrx/component-store`
Introduction to Progressive Web Apps
Understanding and Configuring Service Workers & Manifests
Installing & Updating Progressive Web Apps

Publishing Angular App using Containers and Config Injection

Deployment Overview & Cloud Hosting Options
Configuration Management and Config Injection Options
Creating an Angular Multi-Stage Docker Image using environment variables
Publishing to a Cloud Container Host and executing standalone Cypress E2E Tests

Downloads

Download Folder (PDF)

Jetzt online buchen

Online

26.06.-30.06.2023 26.06.2023 5 Tage 5T Wien
- Präsenz € 2.940,- Anzahl
  Vor-Ort im Trainingszentrum
  - Ihr ILT Training (Instructor Led Training)
  - Trainingsunterlagen, Teamwork, Labs
  - Verpflegung vor Ort
  - Training-Services
02.10.-06.10.2023 02.10.2023 5 Tage 5T online Online
- Online € 2.940,- Anzahl
  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

5,0

1 Bewertung

11.10.2019
Super Kurs. Sehr spannende Themen. Top Trainer
— Martin K.

Services

Kategorie wählen

Services

Zertifizierung wählen

Services

Unternehmen

Advanced Angular Development

Inhalt des Trainings

Zielgruppen

Vorkenntnisse

Detail-Inhalte

Downloads

Jetzt online buchen

Sie haben Fragen?

Ihr ETC Support

1 Bewertung

Unsere Empfehlungen für Sie

Introduction to Git

smart Implementing Reactive Web Apps using React and Redux

Programming Web Applications with ASP.NET MVC Core C#

Programming C#

Programming HTML5, JavaScript and CSS3

SharePoint 2019: Server Side Solution Development

Advanced Web Technologies