Back To Course Home

Learning Angular

0% completed

Getting Started

Introduction to the Course

Building Our First Angular Application

Overview Getting Started with Angular Setting Up the Angular CLI Workspace Structure of an Angular Application Summary: Building Our First Angular Application Quiz: Building Our First Angular Application

Introduction to TypeScript

Overview The History of TypeScript Types in TypeScript Dynamic Typing with No Type Functions, Lambdas, and Execution Flow Common TypeScript Features Classes in TypeScript Interfaces in TypeScript Inheritance and Decorators in TypeScript Advanced Types and Modules Summary: Introduction to TypeScript Quiz: Introduction to TypeScript Challenge: TypeScript Inheritance Solution: TypeScript Inheritance

Organizing Applications into Modules

Overview Introducing Angular Modules Grouping Application Features into Modules Organizing Modules by Type Summary: Organizing Applications into Modules Quiz: Organizing Applications into Modules

Enabling User Experience with Components

Overview Creating Our First Component Creating Standalone Components Interacting with the Template Styling the Component Component Intercommunication Listening for Events Using an Output Binding Local Reference Variables in Templates Deciding on a Change Detection Strategy Performing Component Initialization Detecting Input Binding Changes Summary: Enabling User Experience with Components Quiz: Enabling User Experience with Components Challenge: Toggle Visibility Functionality Solution: Toggle Visibility Functionality

Enrich Applications Using Pipes and Directives

Overview Introducing Directives Iterating Through Data Introduction to Pipes and Creating Interfaces Working with Pipes in Angular Building Custom Pipes Change Detection With Pipes Displaying Dynamic Data Property Binding and Responding to Events Toggling Templates Dynamically Summary: Enrich Applications Using Pipes and Directives Quiz: Enrich Applications Using Pipes and Directives Challenge: Adding a Header Using Angular Directives Solution: Adding a Header Using Angular Directives

Managing Complex Tasks with Services

Overview Introducing Angular DI Providing Dependencies Across the Application Sharing Dependencies through Components Sandboxing Components with Multiple Instances Restricting DI Down the Component Tree Overriding Service Implementation Summary: Managing Complex Tasks with Services Quiz: Managing Complex Tasks with Services

Being Reactive Using Observables and RxJS

Overview Strategies for Handling Asynchronous Information Observables in a Nutshell Reactive Programming in Angular The RxJS Library Higher-Order Observables Subscribing to Observables Unsubscribing from Observables Summary: Being Reactive Using Observables and RxJS Quiz: Being Reactive Using Observables and RxJS Challenge: Click Logger Functionality Solution: Click Logger Functionality

Communicating with Data Services over HTTP

Overview Strategies for Handling Asynchronous Information Setting Up a Backend Fetching Data Through HTTP Fetching Data through HTTP GET request Modifying Data Through HTTP Updating Product Price Removing a Product Authentication and Authorization with HTTP Authorizing User Access Authorizing HTTP Requests Summary: Communicating with Data Services over HTTP Quiz: Communicating with Data Services over HTTP Challenge: Implement Authorization Solution: Implement Authorization

Navigating through Application with Routing

Introducing the Angular Router

Configuring the Router

Configuring Routing in our Application

Creating Feature Routing Modules

Handling Unknown Route Paths

Navigating Imperatively to a Route

Passing Parameters to Routes

Reusing Components Using Child Routes

Filtering Data Using Query Parameters

Preventing Navigation Away from a Route

Lazy-Loading Routes

Protecting a Lazy-Loaded Module

Summary: Navigating through the Application with Routing

Quiz: Navigating through the Application with Routing

Challenge: Implement Navigation System Using Routing

Solution: Implement Navigation System Using Routing

Collecting User Data with Forms

Overview Introducing Forms to Web Apps Using Reactive Patterns in Angular Forms Providing Form Status Feedback and Creating Nested Form Creating Elegant Reactive Forms Modifying Forms Dynamically Manipulating Form Data Summary: Collecting User Data with Forms Quiz: Collecting User Data with Forms Challenge: Create a Simple Task Manager Application Solution: Create a Simple Task Manager Application

Introduction to Angular Material

Overview What Are Material Design and Angular Material Adding Angular Material to Our Application Adding Core UI Controls Form Controls: Input Form Controls: Autocomplete Form Controls: Select & Checkbox Form Controls: Datepicker & Navigation Toolbar Layout Creating a Simple Dialog Configuring a Dialog The Table Component Sort Table & Pagination Integration Controls Introducing the Angular CDK Summary: Introduction to Angular Material Quiz: Introduction to Angular Material Challenge: Add Angular Material UI Components Solution: Add Angular Material UI Components

Unit Test an Angular Application

Overview Why Do We Need Unit Tests?Introducing Unit Tests in Angular Testing With Dependencies Spying on the Dependency Method Testing Asynchronous Services Testing with Inputs and Outputs Testing Services Testing Pipes and Directives Testing Forms Summary: Unit Test an Angular Application Quiz: Unit Test an Angular Application Challenge: Create Unit Tests Solution: Create Unit Tests

Bringing an Application to Production

Overview Building an Angular Application Building for Different Environments Limiting the Size and Optimizing the Application Bundle Summary: Bringing an Application to Production Quiz: Bringing an Application to Production

Handling Errors and Application Debugging

Overview Handling Application Errors Creating a Global Error Handler Debugging Angular Applications: Console API & Breakpoints Debugging Angular Applications: DevTools Summary: Handling Errors and Application Debugging Quiz: Handling Errors and Application Debugging

Wrap Up

Appendix

Angular CLI: Setup on the Local Machine VS Code Tooling Installing Angular Material Deploying an Angular Application

Summary: Navigating through the Application with Routing

Go through a summary of what was covered in this chapter.

We have now uncovered the power of the Angular router, and we hope you have enjoyed this journey into the intricacies of this library. One of the things that shines in the Angular router is the vast number of options and scenarios we can cover with such a simple but powerful implementation.

Get hands-on with 1200+ tech skills courses.