HARTMANN software group

Advanced Angular 4 Programming Training in Kitchener, Canada

Enroll in or hire us to teach our Advanced Angular 4 Programming class in Kitchener, Canada by calling us @303.377.6176. Like all HSG classes, Advanced Angular 4 Programming may be offered either onsite or via instructor led virtual training. Consider looking at our public training schedule to see if it is scheduled: Public Training Classes
Provided there are enough attendees, Advanced Angular 4 Programming may be taught at one of our local training facilities.
We offer private customized training for groups of 3 or more attendees.
get pricing information

Course Description

  
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.
Course Length: 2 Days
Course Tuition: $1090 (US)

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.

Course Outline

  
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
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

Course Directory [training on all levels]

Technical Training Courses
Software engineer/architect, System Admin ... Welcome!
Business Training Courses
Project Managers, Business Analysts, Paralegals ... Welcome!
Upcoming Classes
Gain insight and ideas from students with different perspectives and experiences.

Interesting Reads Take a class with us and receive a book of your choosing for 50% off MSRP.