Course Overview

The Test-Driven Web Development with Angular training courses teaches attendees how to build rich client-side business web applications using HTML, CSS, JavaScript/TypeScript, and Angular.

Key Learning Areas

  • Ingest, clean, and transform data
  • Understand the problem that Angular solves
  • Using Jasmine and Karma, learn Angular through test-driven development
  • Explore the building blocks of an Angular application
  • Organize an application with workspaces, libraries, and modules
  • Build reusable component trees
  • Understand the role of application state and how to manage it within an Angular application
  • Configure routing to give uses the multi-page experience
  • Collect data with Reactive Forms
  • Handling authentication and authorization
  • Manage application with NgRx

Course Outline

Introduction

  • What is Angular?
  • What problem does Angular solve?
  • What is Test-Driven Development?
  • Writing and Running Unit Tests with Jasmine and Karma

Unit Testing with Jasmine and Karma

  • What is the goal of unit testing?
  • What is test-driven development?
  • The Cycle: Red – Green – Refactor
  • Three laws of test-driven development
  • Writing BDD style tests
  • Organizing tests into test suites
  • Using the Expect API to assert results
  • Configuring Mocks and Spies

Angular and Web Applications

  • Why is Angular well-suited for building traditional web-based applications?
  • Which parts of the Angular eco-system are geared for business web application development?

Angular CLI

  • How to create a new Angular project
  • Running and debugging Angular projects
  • How to create Angular parts like a Module or a Component

Angular Modules

  • What is an Angular Module?
  • How do Angular Modules differ from JavaScript/TypeScript Modules
  • Organizing an application into multiple modules
  • Importing and exporting from modules

Angular Components

  • What is an Angular Component?
  • Component Class
  • Component Templates
  • Data Binding
  • Unit Testing Data Binding
  • How to keep templates clean
  • Pass Parameters with Inputs
  • Handle Events with Outputs
  • Unit Testing Components with Inputs and Outputs
  • Access DOM elements through Refs

Angular Pipes

  • What is an Angular Pipe?
  • Transforming Template Content with Built-in Pipes
  • Creating Custom Pipes
  • Unit Testing Pipes

Angular Project Structures

  • Angular Workspaces
  • Angular Libraries
  • Incorporate Libraries into Angular Application Development
  • Developing Applications and Libraries Simultaneously
  • Packaging and Distributing Angular Libraries

Collect Data with Angular Reactive Forms

  • Reactive Forms compared to Template Forms
  • Using Form Controls, Groups and Arrays
  • What is form validation?
  • Built-in Validators
  • Coding Custom Validators
  • Unit Testing Custom Validators
  • Validating Form Controls
  • Validating Form Groups
  • Validating Form Arrays
  • Synchronous Validators
  • Asynchronous Validators
  • Using Promises and Observables in Validators
  • Validating from a REST API
  • Distributing Custom Validators in Angular Libraries
  • Displaying Validation Errors
  • Distributing Validation Message Components in Angular Libraries
  • Custom Form Controls
  • Unit Testing Custom Form Controls
  • Integrating Custom Form Controls into the Validation System
  • Distributing Custom Form Controls in Angular Libraries

RxJS and Observables

  • What is an Observable?
  • Creating Observables
  • What is an Observer?
  • Observer Example
  • Operators
    • Map, Filter, Skip, Take
    • SwitchMap, Of, Concat
    • Catch Error
  • Practical Application of using RxJS
  • Subjects
  • Event Emitter Observable

Consume Data from REST APIs

  • What is a REST API?
  • What is the HTTP Client?
  • Execute CRUD HTTP Requests to retrieve and modify REST API data
  • Managing Requests with RxJS
  • Handling Error
  • Unit Testing services using HttpClient

Routing

  • Organizing Applications into Lazy Loaded Modules
  • Lazy Loading with Angular Router
  • Distributing Angular Modules with Angular Libraries
  • Nesting Routes
  • Sibling Routes
  • Preloading Data with Resolvers
  • Handling Resolver Errors
  • Distributing Guards and Resolvers via Angular Libraries

Authentication and Authorization

  • Authenticate the Angular Application with Azure B2C
  • Authenticate the Angular Application through a server app with Azure B2C
  • Using Route Guard to Improve User Experience
  • How Route Guards Help Application Security
  • How Route Guards do not Help Application Security
  • Handling Guard Errors

Application State

  • What is Application State?
  • Persistent State vs. Temporal State
  • Avoiding Component State
  • Managing State with Angular Services
  • The Service as a Store
  • Single Store vs. Multiple Stores
  • Common Store Patterns in Modern UI Development
  • Using RxJS to Select Data from a Store
  • Async Pipe and RxJS
  • Integrating REST APIs with a Store
  • Unit Testing RxJS Code