NGBASICS
Classroom Training
Duration 5 days
Price (excl. tax)
- Germany: 2,890.- €
Onsite Training
Request training- Home
- Training
- Software Engineering
- NGBASICS
Angular Single Page Application (SPA) Development (NGBASICS)
Who should attend
Dieses Seminar richtet sich an Web Entwickler welche Angular Anwendungen entwickeln möchten.
Prerequisites
- JavaScript und HTML Basics (Kurs: Programming HTML5, JavaScript and CSS3)
- Erfahrung mit Web Development
- Kenntnis von Objektorientierten Sparchen
- Kenntnis von modernen Web Technologien (Node, Webpack, TypeScript, Flexbox, CSS Grid, ...) hilfreich. Diese werden im Kurs Advanced Web Technologies (webADV) vermittelt.
Course Objectives
Nach Abschluss dieses Seminars haben die Teilnehmer Kenntnisse zu folgenden Themen:
- Environment & Tools Setup and Introduction
- TypeScript Fundamentals
- Angular Projektkonfiguration & CLI
- Understanding Fundamentals & Completing Basic Tasks
- Nesting Components
- Routing & Modularity
- Implementing a Responsive User Interface
- Form Design & Validation
- Implementing & Consuming Data Models and REST APIs
- Introduction to Observables & Reactive Programming
- Managing State & Broadcasting Events
- Angular Unit Testing
- Securing & Publishing the Application
Follow On Courses
Course Content
Angular Introduction & Setup
- What / Why Single Page Applications
- Angular Overview and Version Comparison
- Node and its Role in the Angular ECO-System
- Angular Command Line Interface – Angular CLI
- Bootstrapping Angular
- Angular Debugging Options
- Updating Angular Projects
TypeScript Fundamentals
- ECMA Script Standards
- TypeScript Overview, Configuration, Debugging
- 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
- Classic vs Standalone (Moduleless) Components
- Pipes & Localization
- Custom Directives & Pipes
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
- Child- & Secondary (Auxiliary) Routes
- Preloading Component Data
- Organizing Angular Applications using Modules
- Module Lazy Loading
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)
Forms Design & Validation
- Forms Introduction
- Template Driven Forms vs Reactive (Model Based) Forms
- FormControl, FormGroups & FormArrays
- Validating Forms
- Custom- & Code-Based Validators
Consuming RESTful Services
- Introduction Into .NET Core
- Implementing Consuming .NET Core RESTful APIs
- Using JSON Server for Prototyping
- Implementing the Client-Side Data Models
Observables & Reactive Programming
- What is Reactive Programming / Benefits
- Observable, Observer & Subject
- Creating Observables & Casting to Observables
- 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
- Overview of the Redux Pattern with NgRx HelloWorld
Testing Basics
- Unit Tests vs Integration Tests
- Karma & Jasmine Basics
- Test Setup & Mocking
- Testing Angular Components, Services and Forms
- In Short: End to End Testing
Securing & Publishing Angular
- Authentication / Authorization Basics in SPAs
- Token based Auth: Understanding Jwt, OAuth 2.0 & OpenID Connect
- Securing Angular Routes using Route Guards
- Using Interceptors to Automate Tokens
- Preparing & Creating a Production Build
- Hosting Option Overview (Webserver, Docker, …)
- Mastering Url Rewrite
Classroom Training
Duration 5 days
Price (excl. tax)
- Germany: 2,890.- €
Schedule
Instructor-led Online Training:
This computer icon in the schedule indicates that this date/time will be conducted as Instructor-Led Online Training.
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.
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.