Developing Applications using Angular Training

This 5-day course is a complete guide to building scalable web applications using Google’s popular Angular framework, leveraging the power of TypeScript to build type-safe applications.

An overview of the framework is given and then each of the 8 building blocks (Modules, Components, Directives, Metadata, Templates, Services, Data Binding and Dependency Injection) are covered in deep dives including testing. RxJS observables are covered as both discrete JavaScript and how they are integrated into Angular. Template-Driven and Reactive forms implementation applications is compared and examined. Creating a single page application through the use of routing is also on the outline of the course which can be seen below.

Delivery is through instructor-led explanations and short follow-up exercises that allow learners to experiment with code. A practical agile-style project is included for learners to complete, either as a collaborative group or individually.

It is essential you understand the face of contemporary web development to attend this course. We insist upon JavaScript experience equivalent to the skills covered in Programming with JavaScript (QAJAVSC) along with good HTML and CSS skills (as covered in QAHTMLCSS).

This course uses TypeScript for all code demonstrations and exercises and so it is essential that attendees have experience equivalent to the skills covered in Programming with TypeScript (QAPTS).

Angular Introduction

To become aware of what Angular is
To understand the difference between Angular and AngularJS
To be aware of the versioning and release schedules for Angular
To be able to set up the developer environment using Angular CLI
To become familiar with some fundamental Angular CLI commands
To be aware of developer tools available for Angular

Angular Architecture

To be aware of the eight building blocks of Angular:

Modules
Components
Templates
Metadata
Data binding
Directives
Services
Dependency injection

Testing with Jasmine

To understand how a Jasmine Unit Test is written
To be able to use spies in tests
To be able to use functions to set up and tear down tests
To understand how asynchronous testing can be done
To be able to debug Jasmine tests
To be able to generate code coverage reports from Jasmine tests

Components

To be able to create a component
To be able to create and edit component templates and style
To be able to bind data from:
- Component to Template
- Template to Component
- 2-way Databinding
To understand and be able to use Life-cycle hooks
To know how to test Components:
- As a class
- With the DOM

Directives

To be able to use built-in directives
To be able to use and test Input and Output properties
To be able to create and test Custom Directives

Observables

To understand what an Observable is
To understand what RxJS is
To be able to use RxJS operators to work with Observables
To understand how Observables can be used in Angular

Template-Driven Forms

To understand the similarities and differences between Template-Driven and Reactive Forms
To be able to build template-driven forms by:
- Binding data to the template and component
- Tracking the changes to and validity of data
- Using data supplied by forms to provide feedback to users
- Controlling the submission of data

Reactive Forms

To be able to build and use reactive forms by being able to:
Generate and import a new form controls
Register controls in a template
Display form control values
Group related form controls
Associate the FormGroup model with a view
Nest a form group
Group nested forms in a template
Use FormBuilder to create forms
Controlling form submission

Form Validation and Testing

To understand how to validate template-driven forms
To understand how to validate and test reactive forms
How to use Validator functions
How to use built-in Validators
To be able to create and test Custom Validators
To understand how cross-field validation works
To understand how Async Validation works

Services

To understand when and how to create a Service and provide them in the appropriate place
To be able to create tests for Services
To be able to use Services through dependency injection
To be able to make Services interact with REST APIs using Observables

Routing

To be able to create a new application with routing enabled
To understand how Router Modules are configured and tested
- Defining arrays of Route objects for specific paths to display specific components
- Supplying data to a component on a route
- Redirecting routes
- Dealing with 404s
To understand RouteState, ActivatedRoutes and RouterEvents
To be able to add links to templates for navigation
To be able to add child routes to an application
To be able to use Route Guards to control navigation

Pipes

To understand what Pipes are and why they are used in Angular
To become aware of Angular’s in-built Pipes
To be able to create Custom pipes
To understand the difference between Pure and Impure pipes
To understand how the AsyncPipe works
To be able to test Pipes

Developing Applications using Angular Training

Prerequisites

Outline

Upcoming Trainings