Advanced Angular 4 Programming Training

• 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

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

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