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