Advanced Angular 4 Programming

2 Days

Description

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

Upcoming Classes

Virtual Classroom Live
November 09, 2017

$1,195.00
2 Days    9:00am - 5:00pm
view class details and enroll
Private Training Available
No date scheduled, don’t see a date that works for you or looking for a private training event, please call 651-905-3729 or submit a request for further information here.
request a private session or new date

Course Overview

  • 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

Upcoming Classes

Virtual Classroom Live
November 09, 2017

$1,195.00
2 Days    9:00am - 5:00pm
view class details and enroll
Private Training Available
No date scheduled, don’t see a date that works for you or looking for a private training event, please call 651-905-3729 or submit a request for further information here.
request a private session or new date

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.

Upcoming Classes

Virtual Classroom Live
November 09, 2017

$1,195.00
2 Days    9:00am - 5:00pm
view class details and enroll
Private Training Available
No date scheduled, don’t see a date that works for you or looking for a private training event, please call 651-905-3729 or submit a request for further information here.
request a private session or new date