Advanced Angular Development

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

Jetzt online buchen

  • 26.06.-30.06.2023 26.06.2023 5 Tage 5T Wien
    • Präsenz  2.940,-

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

      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

Hidden
Hidden
Hidden
5,0

1 Bewertung

  • 11.10.2019

    Super Kurs. Sehr spannende Themen. Top Trainer

    — Martin K.

Unsere Empfehlungen für Sie

Logo Microsoft
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,-
24.07.2023+1
 2.875,-