Course #:WA2630

Advanced Angular 4 Programming Training

Courseware: Available for sale

Web Age Solution's Advanced Angular 4 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 4 fundamentals and now want to cover more advanced features the Angular 4 framework offers.

This course includes advanced topics not covered in our 3 day Introduction to Angular 4 Programming class. This includes specifics about how to consume REST web services and WebSocket data from Angular 4 applications. Advanced use of the Angular Routing module and Angular Animations are covered. You will learn how to develop Angular 4 applications using Angular CLI. Details of how to test and debug Angular 4 applications are covered in addition to best practices for the style and organization of Angular 4 projects.

Lab exercises provide essential and practical hands-on experience for each topic.

Objectives

In this training, attendees will learn how to:

Consume data from REST web services
Consume WebSocket data
Advanced Router Usage
Angular Animations
Testing and debugging Angular applications
AngularCLI
Best practices for Angular application style and organization

Prerequisites

Students must have some prior understanding of Angular fundamentals in addition to web development using, HTML, CSS and JavaScript. Experience developing with AngularJS or Angular 2 (the prior versions) is not required.

Students without any Angular knowledge could take WA2625 Comprehensive Angular 4 Programming which includees all of the topics from this advanced course in addition to learning Angular fundamentals.

Duration

2 Days

Outline of Advanced Angular 4 Programming Training

Chapter 1. Consuming REST Web Services in Angular

REST Web Services and Angular
Understanding REST
REST Example – Create
REST Example – Retrieve
REST Example – Update
REST Example – Delete
REST Example – Client Generated ID
REST Example – JSON
Knowledge of the REST API
Common Angular Tasks for REST Communication
Angular Service Class Using HTTP Client
RequestOptions
URL Path Parameters
Query Parameters
Common HTTP Request Headers
Override Default Request Options
Returning Response Data
DELETE
GET
PUT
POST
Security of REST APIs
Summary

Chapter 2. 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

Chapter 3. Advanced Routing

Routing Overview
External Route Configuration File
Dedicated Router Module
routerLinkActive binding
Wildcard Route Path
redirectTo
Default Route
Child Routes
Defining Child Routes
<router-outlet> for Child Routes
routerLink Prefixes
Invoking Child Routes
Lazy Loading Modules via Child Routes
Lazy Loading: The child routing module
Lazy Loading: Add routing to the module
Lazy Loading: Update the main routing file
Navigation Guards
Creating Guard Implementations
Using Guards in a Route
Route Animations
Summary

Chapter 4. Angular Animations

What is Animation?
Animation Configuration
Animation Techniques
Animation Concepts
CSS Property Animation
Animation Property Settings
CSS Transforms
Starting and Stopping Animation
Animation Events
Browser Support
Angular Animations
Animation Imports
Named Animation States
Transitions
Special States: void, *
The animate() function
Triggers
Assigning Animations to Elements using Trigger
Invoking Transitions
Assigning Animation to Routes
External Animation Definitions
Summary

Chapter 5. Testing Angular Components and Services

Testing Angular Components
Testing Tools
Testing Setup
Important Test Configuration Settings
Typical Testing Process
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 TestBed
Typical Test Structure
Example of Basic Angular Test
Basic beforeEach Configuration
Automatically Detecting Component Changes
Testing External Templates
Testing Components With Dependencies
Getting Injected Services
Testing With Dependencies – Test Double
Testing With Dependencies – Spy
Testing With Asynchronous Dependencies
Testing Components With @Input and @Output
Testing Routed Components
Summary

Chapter 6. Developing Using AngularCLI

What is AngularCLI?
AngularCLI Prerequisites
Installing AngularCLI
Command Help
Creating an App
Running Angular CLI Apps with ng serve
ng serve options
AngularCLI Blueprints
Generating Components
The .angular-cli.json Settings File
Generated Modules
Generated Services
Generated Specs for Unit Testing
An Example Unit Test Spec
Running Unit Tests
End to End Testing
Example End to End Test:
Summary

Chapter 7. Debugging

Debugging Overview
Basic Debugging Practices
Development (Debug) Mode
Selecting Elements to Inspect
Inspecting Angular Components with ng.probe
Saving ng.probe Component References
Modifying Values using Component References
Using Breakpoints in Angular Code
Breakpoint in TypeScript Code
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

Chapter 8. Angular Style Guide

What is the Angular Style Guide?
Style Categories
Single Responsibility
Naming
Coding Conventions
App Structure and Angular Modules
Components
Directives and Services
Summary

Chapter 9. Overview of JSON Web Tokens (JWT)

RESTful Web Service API Refresher
JSON Web Tokens
JSON Web Token Architecture
JWT Header
JWT Payload
JWT Example Payload
JWT Example Signature
How JWT Tokens are Used
Adding JWT to HTTP Header
How The Server Makes Use of JWT Tokens
What are “Scopes”?
What About OAuth?
Summary

Lab Exercises

Lab 1. Angular Communication with REST Services
Lab 2. Consuming Data from Web Sockets
Lab 3. Advanced Routing
Lab 4. Angular Animations
Lab 5. Testing Angular Components
Lab 6. Debugging Angular Applications

We regularly offer classes in these and other cities. Atlanta, Austin, Baltimore, Calgary, Chicago, Cleveland, Dallas, Denver, Detroit, Houston, Jacksonville, Miami, Montreal, New York City, Orlando, Ottawa, Philadelphia, Phoenix, Pittsburgh, Seattle, Toronto, Vancouver, Washington DC.

View Course Outline