Detaillierte Informationen zum Seminar
Inhalte:
Angular Introduction\n\n\n\n- Angular Introduction & Technology Stack\n- Angular CLI Essentials\n- Debugging Angular\n- Bootstrapping & Configuration\n- Maintaining & Updating projects\nTypeScript in the Angular Ecosystem\n\n\n\n- TypeScript Overview, ECMA Script Standards\n- Types, Variables, Literal Types, Functions\n- Objects, Classes, Interfaces\n- Immutability, Cloning & Object Composition\n- Async Operations, Observables & Signals\n- Calculated Signals & Effects\nDatabinding & Completing Basic Tasks\n\n\n\n- Components & Dependency Injection\n- Services & Data Request\n- Expressions, Templates & Directives\n- String Interpolation, Attribute- & Event-Binding, Two-Way Binding\n- Built-in Control Flow & Deferrable Views\n- Data binding Observables & Signals\n- Built in and Custom Pipes & Directives\nImplementing Nested Components\n\n\n\n- Benefits of Nested Components\n- Container vs Presentational Components\n- Data binding & Events using @Input & @Output\n- Nesting using Signal inputs & model outputs\n- View Child, View Children & Signal Queries\nRouting & Dependency Injection\n\n\n\n- Register Providers & Dependency Injection\n- Routing & Navigation Basics\n- Working with Parameterized Routes\n- Component Input Bindings\n- Modules vs Standalone Components\n- Modules Use Cases & Lazy Loading\n- Route Guards & Data Preloading\nDesigning a responsive User Interface\n\n\n\n- Implementing a CSS Reset\n- Global & Component Styles\n- Responsive Web Design using Media Queries\n- Layout using Flexbox, CSS Grid and Areas\n- Angular Material Overview\n- Common controls: Tables, Dialogs & Form Controls ...\n- Angular CDK & 3rd Party Components (Virtual Lists, Drag & Drop, Markdown, ...)\nReactive Forms Design & Validation\n\n\n\n- Forms Introduction\n- Template Driven Forms vs Reactive (Model Based) Forms\n- FormBuilder & Typed Forms (Nullability, Nested Objects, Arrays)\n- FormControl, FormGroups & FormArrays\n- Form Validation Basics (Synchronous / Asynchronous)\n- Custom- & Code-Based Validators\n- Signals & FormControls\nReactive Programming using Signals & RxJS\n\n\n\n- What is Reactive Programming / Benefits\n- Imperative vs Reactive Programming Styles\n- Observable, Observer, Async pipe & Unsubscribing\n- Common RxJS Operators\n- Creating Observables & Casting to Observables\n- Capturing Mouse & DOM Events as Observables\n- Observable & Signal Interoperability\nManaging client State & Sharing Events\n\n\n\n- What is State Management\n- State Management Options: Signals vs Observables\n- Stateful Services using Signals\n- Sharing Events between Components\nTesting Angular Applications\n\n\n\n- Angular Testing Options\n- Testing Classes, Directives and Pipes\n- Component Injections, Mocks & Spies\n- Component DOM testing & test ids\n- Testing Component Interaction (Read, Write, Inputs, Events)\n- Material Testing using Component Harnesses\n- In Short: End to End Testing using Cypress\nSecuring & Publishing Angular\n\n\n\n- Authentication / Authorization Basics in Spa™s\n- Token based Auth: Understanding Jwt, OAuth 2.0 & OpenID Connect\n- Observe http-response and setting custom http headers\n- Using Interceptors to Automate Authentication Tokens\n- Angular Routes & functional Route Guards\n- Hosting Options Overview (Docker, Firebase, Azure Static Web App, ...)\n- Publishing Angular Apps
Teilnahmevoraussetzungen:
- JavaScript und HTML Basics (Kurs: Programming HTML5, JavaScript and CSS3)\n- Erfahrung mit Web Development\n- Kenntnis von Objektorientierten Sparchen\n- Kenntnis von modernen Web Technologien (Node, Webpack, TypeScript, Flexbox, CSS Grid, ...) hilfreich. Diese werden im Kurs Advanced Web Technologies (webADV) vermittelt.
Zielgruppe:
Dieses Seminar richtet sich an Web Entwickler welche Angular Anwendungen entwickeln möchten.
