Advanced Angular Programming

This Advanced Angular Programming training class Web Age Solution's Advanced Angular 7 training covers advanced topics of this next generation of the Angular framework. This course is intended for those that already have a basic understanding of the Angular 7 fundamentals and now want to cover more advanced features the Angular 7 framework offers.

Note: Although initially the 1st major revision of the AngularJS framework was known as "Angular 2" this is now technically incorrect as the Angular framework is releasing newer major versions (although the structure is still the same). Now "AngularJS" refers to the old architecture while simply "Angular" refers to the new architecture.

Goals

Create advanced HTTP clients.

Consume WebSocket data.

Use the featured of advanced routing.

Test and debug Angular applications.

Outline

Advanced HTTP Client

Request Options

Returning an HttpResponse Object

Setting Request Headers

Creating New Observables

Creating a Simple Observable

The Observable.create() Method

Observable Operators

More About map

Piping Operators

The flatMap() Operator

The tap() Operator

The zip() Operator

Caching HTTP Response

Making Sequential HTTP Calls

Making Parallel Calls

Customizing Error Object with catchError()

Error in Pipeline

Error Recovery

Summary

Consuming WebSockets Data in Angular

Web Sockets Overview

Web Sockets Use Cases

Web Socket URLs

Web Sockets Servers

Web Socket Client

The socket.io-client library

Using socket.io-client in JavaScript

Setting up socket.io-client in Angular Projects

Using socket.io-client in an Angular service

Angular websocket.service Notes:

The Angular Web Socket Client Sample App

Angular websocket.component.ts

The Full websocket.component.ts code

Implementation Modifications

Summary

Advanced Routing

Routing Overview

Routing Enabled Project

Routing Enabled Feature Module

Using the Feature Module

Lazy Loading the Feature Module

Creating Links for the Feature Module Components

More About Lazy Loading

routerLinkActive binding

Default Route

Wildcard Route Path

redirectTo

Child Routes

Defining Child Routes

<router-outlet> for Child Routes

Links for Child Routes

Navigation Guards

Creating Guard Implementations

Using Guards in a Route

Route Animations

Summary

Introduction to Testing Angular Applications

Unit Testing Angular Artifacts

Testing Tools

Testing Setup

Typical Testing Steps

Test Results

Jasmine Test Suites

Jasmine Specs (Unit Tests)

Expectations (Assertions)

Matchers

Examples of Using Matchers

Using the not Property

Setup and Teardown in Unit Test Suites

Example of beforeEach and afterEach Functions

Angular Test Module

Example Angular Test Module

Testing a Service

Injecting a Service Instance

Test a Synchronous Method

Test an Asynchronous Method

Using Mock HTTP Client

Supplying Canned Response

Testing a Component

Component Test Module

Creating a Component Instance

The ComponentFixture Class

Basic Component Tests

The DebugElement Class

Simulating User Interaction

Summary

Debugging

Overview of Angular Debugging

Viewing TypeScript Code in Debugger

Using the debugger Keyword

Inspecting Components

Saving ng.probe Component References

Modifying Values using Component References

Debug Logging

What is Augury?

Installing Augury

Opening Augury

Augury - Component Tree

Augury - Router Tree.

Augury - NgModules Tab

Common Exceptions

Common Exceptions: 'No such file: package.json'

Common Exceptions: 'Cant bind to ngModel'

Common Exceptions: 'router-outlet not a known element'

Common Exceptions: 'No provider for Router!'

Summary

Class Materials

Each student in our Live Online and our Onsite classes receives a comprehensive set of materials, including course notes and all the class examples.

Class Prerequisites

Experience in the following is required for this Angular class:

Some prior understanding of Angular fundamentals in addition to web development using HTML, CSS, and JavaScript. Experience developing with AngularJS (the prior version) is not required.

What people say about our training

Great content, even greater instructor!

Don Collins

DoD

My web design class was just what I was looking for and my instructor not only did a great job in relaying the information I needed, she also was able to answer questions I had that were above & beyond the course material!

Bill Dannelly

HoneyBaked Foods, Inc.

I really enjoyed learning how to run SQL queries in this course! Looking forward to using Webucator again.

Bridgette Harris

Citrix

Highly recommend MS Project: Digging Deeper course if you want to learn more efficient ways of using MS Project.