Test-Driven Web Development with Angular

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