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