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 Kenntnisse zu folgenden Themen:
- Theming & Visual Feedbacks (Animations)
- Advanced Observables & Reactive Programming
- State Management using NgRx
- Optimizing & Building Applications
- Understanding Ivy and what it means for future Angular Releases
- Reactive Forms Deep Dive
- Advanced Routing Concepts
- Securing Angular using oAuth, OpenID Connect & NgRx
- Advanced Testing including Jest & Cypress
- Scaffolding & Automation using Angular Schematics
- Reusability using Angular Libraries
- Introduction to Maintaining Monorepos using nrwl nx
- Web Components using Angular Elements
- Implementing Installable & Offline Ready Apps using Progressive Web Apps
- Server Side Rendering using Angular Universal
- Advanced Hosting using Docker & Kubernetes
- Introduction to Angular DevOps using GitHub Action
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.
Alle Details einblenden
Zielgruppe
Dieses Seminar richtet sich an:
- Angular Entwickler welche ihre Kenntnisse vertiefen wollen.
Vorkenntnisse
Für dieses Seminar werden folgende Kenntnisse empfohlen:
- 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.
Schwerpunkte
Theming & & Visual Feedback (Animations)
- Styling Angular Components Deep Dive
- Comparing Angular Material & Bootstrap
- Bootstrap Resets, Layout Helper & Utiliies
- Best of Both: Combining Bootstrap & Angular Material
- Theming Overview
- Building a Reusable Theme
- Define Alternative Themes
- Use Fore- and Back-Color
- Use Theme Mixins
- Theming Custom Components
- Introduction to Visual Feedback
- In-Page Feedback (Saved, Loading Spinners, ...)
- Implementing Page Transitions
Advanced Observables & Reactive Programming
- Java Script Language: Functional Programming, Immutability, Destructuring
- Recap: Observables, Operators & Subjects
- Base Operators: Mapping, Filtering, Merging, Scanning, ...
- Understanding & Implementing Marble Diagrams
- Debugging & Visualizing Observables
- Using Declarative Approach - Async Pipe
- Implementing Error Handling
- Data- vs Action-Streams
- Higher Order Mapping Operators
- Data Composition - Joining Observable Streams
- Data Caching & Invalidation
- Implementing Custom Observable Operators
Advanced State Management using NgRx
- Overview State Management Patterns
- Observable Data Services & Event Bus
- Introduction to the Redux Pattern
- Understanding NgRx and know when to use it
- Using Store, Actions and Reducers
- Debugging NgRx using Redux Dev Tools
- Implementin & Using Selectors
- Using Effects, Facades & Action Creators
- Scaffolding using NgRx Schematics
- NgRx Entity Adapters
- Using NgRX Data for larger Datasets
Building & Optimizing Applications
- Using Linting and Autoformat with Prettier
- Using Chrome Dev Tools & Lighthouse for Performance Optimization
- Understanding & Using Page Traces
- Understanding Ivy and what it means for future Angular Releases
- Advanced Angular Debugging using @angular/core/global
- Analyzing and Optimizing Bundles & Modules
- Code-Splitting and Module Pre-Loading
- Understaning & Optimizing Angular Change Detection
- Optimize Change Detection using @ngrx/component & ngrxPush
Reactive Forms Deep Dive
- Recap Reactive Forms Revisited (FormGroup, Form Builder, FormControl, Forms Array)
- Form Validation
- Implementing Custom Validators
- Cascading Form Controls
- Dynamic Form Generation & Validation (Manual & ngx-formly)
- Declarative Binding in Reactive Forms using RxJS
Routing & Securing Angular using NgRx
- Angular Location Service
- Using multible Route Guards & Interceptors
- Introduction to @ngrx/router-store
- Implementing Global Error Handling
- AppShell & App Initialization
- Router State & Custom Serialization
- Route Guards & Interceptors with NgRx
- Routing & App Initialization
- Dynamic Component Loading
- Recap Jwt, OAuth 2.0 & OpenID Connect
- Cloud based Logins: Azure AD
- Using Social & Cloud Logins: MSAL, Google, Facebook ...
- Authentication in Angular with NgRx
- Security Analysis in DevOps Pipelines
Advanced Testing including Jest & Cypress
- Recap: Unit Testing
- Using Testbed & Spies
- Shallow / Deep Integration Tests
- Async Testing
- Using Jest for Unit Testing
- Testing NgRx: Mock Store, Mock Selectors, Reducers, ...
- End-2-End Testing using Cypress
- Integrate Angular Testing in DevOps Pipelines
Scaffolding & Automation using Angular Schematics
- What is Angular Schematics
- Using build-in Schematics
- Understanding Abstract Syntax Tree (AST)
- Adding & Modifying Files
- Using a Sandbox for Schematics Development & Testing
Reusability using Angular Libraries
- Angular Building Blocks: Workspace, Apps, Libraries
- Sharing Code between Projects using Angular Libraries
- Implementing, Using & Publishing Libraries
- Understanding & using Monorepos
- Developing in Monorepos with nrwl NX
Web Components using Angular Elements
- Why Web Components
- Understanding Shadow DOM, Templates & Custom Elements
- Creating reusable Web Components using Angular Elements
- Addressing Browser Compatibility Issues
Server Side Rendering (SSR) using Angular Universal
- Why Server Side Rendering
- Angular Universal Architecture
- Node Express Introduction
- Configure Server Side Rendering
- Prerender static pages
- Using App Shell
Progressive Web Apps (PWA)
- What are Progressive Web Apps
- Understanding and Configuring Service Workers & Manifests
- Installing & Updating Progressive Web Apps
- Supporting Offline Availability
- Implementing Push Notifications
- Using App Shell
Advanced Hosting using Docker & Angular DevOps
- Deployment Overview & Hosting Options
- Blob Storages & URL Rewriting
- Publishing using ngDeploy
- Injecting Configuration to enable Multi Stage DevOps
- Docker & Kubernetes Introduction
- Building an Angular Multi-Stage Docker Image
- Implementing a 3-Tier Application
- Implementing Configuration Management for Containers
- Implementing a Helm Chart for Kubernetes
- Introduction to Angular DevOps using GitHub Actions
Alle Details ausblenden
