English Delivery Only: Angular [STA_ANG]

OVERVIEW

Angular is a hugely popular TypeScript framework for building web applications. It provides for the division of page content into modular, self-contained components that are easy to maintain and test. Ideally suited to highly dynamic, single-page applications and with routing built in, Angular is a staple for millions of front-end web developers worldwide.

This course is delivered using the latest version and includes sessions dealing the basics, signals, components, templates, directives, dependency injection, routing, forms, HTTP Client, and testing.

Exercises and examples are used throughout the course to give practical hands-on experience with the techniques covered.

Company Events

These events can be delivered exclusively for your company at our locations or yours, specifically for your delegates and your needs. The Company Events can be tailored or standard course deliveries.

OBJECTIVES

This course aims to provide the delegate with the knowledge and skills necessary to build simple web applications with Angular, and to lay the foundations for further learning. 

AUDIENCE

The Angular course is aimed at front-end web developers who will be required to build, or contribute to the building of, Angular web applications. It may also be of interest to testers, engineers, architects, and development team leaders. 

CONTENT

Angular Training Course Course Contents - DAY 1

Course Introduction

• Administration and course materials
• Course structure and agenda
• Delegate and trainer introductions

Session 1: INTRODUCTION

• What is Angular?
• Installation
• The CLI
• TypeScript

Session 2: THE BASICS

• Components
• Signals
• Templates
• Dependency injection

Session 3: SIGNALS

• What is a signal?
• Writable signal
• Computed signal
• Effects
• Angular Training Course Course Contents - DAY 2

Session 4: COMPONENTS

• What is a component?
• Inline HTML & CSS
• HTML & CSS files
• Imports
• Selectors
• Styling
• Inputs
• Outputs
• Content projection
• Host elements
• Lifecycle
• Referencing component children
• Accessing the DOM

Session 5: TEMPLATES

• What is a template?
• Template vs HTML
• Interpolation
• Binding
• Event handling
• Control flow
• Pipes
• Template variables
• Angular Training Course Course Contents - DAY 3

Session 6: DIRECTIVES

• What is a directive?
• Attribute directives
• Structural directives

Session 7: DEPENDENCY INJECTION

• What is dependency injection?
• Creating a service
• Injectors
• Providing a dependency
• Injecting a dependency

Session 8: ROUTING

• The problem with SPAs
• What is routing?
• Installation
• How @angular/router works
• Routes
• Outlets
• Links
• Route state
• Guards
• Angular Training Course Course Contents - DAY 4

Session 9: FORMS

• Form types
• A simple reactive form
• A simple template-driven form
• Reactive forms: the basics
• Reactive forms: grouping controls
• Reactive forms: validation
• Reactive forms: dynamic feedback
• Reactive forms: dynamic styling

Session 10: HTTP CLIENT

• What is HttpClient?
• RxJS Observables
• Providing HttpClient
• Fetching data
• Mutating server state
• Setting URL parameters
• Setting request headers
• Accessing the response object
• Handling errors

 Session 11: TESTING

• Jasmine and Karma
• The testing setup
• Basic component testing
• Component binding
• Component with external files
• Component with dependency
• Component with async service
• Component with inputs and outputs
• Routing and routed components