Angular: Designing and Architecting Web Applications

Course Overview

This course will teach you step-by-step how to design and architect large Angular applications. You’ll start with the basics: components, pipes, and directives. These are the building blocks of any Angular application, so you will get plenty of hands-on practice with this material. N... See More

Train, upskill, & onboard your developers with a tailored solution for your team or company with

Educative for Business

How You'll Learn

Hands-on coding environments

You don’t get better at swimming by watching others. Coding is no different. Practice as you learn with live code environments inside your browser.

Faster than videos

Videos are holding you back. The average video tutorial is spoken at 150 words per minute, while you can read at 250. That‘s why our courses are text-based.

No set-up required

Start learning immediately instead of fiddling with SDKs and IDEs. It‘s all on the cloud.

Progress you can show

Built in assessments let you test your skills. Completion certificates let you show them off.

Hands-on coding environments

You don’t get better at swimming by watching others. Coding is no different. Practice as you learn with live code environments inside your browser.

Faster than videos

Videos are holding you back. The average video tutorial is spoken at 150 words per minute, while you can read at 250. That‘s why our courses are text-based.

No set-up required

Start learning immediately instead of fiddling with SDKs and IDEs. It‘s all on the cloud.

Progress you can show

Built in assessments let you test your skills. Completion certificates let you show them off.

Course Contents

Hide All

Hide All Lessons

1. First Steps

Introduction

Setting Up

2. Our First Project

Creating an App

Reviewing the Files

Event Binding

Property Binding

Interpolation

Global CSS

Structural Directives

Deploying the App

Quiz

Completed Project

3. Component Basics

Creating a New Project

Understanding Components

Creating a Component

Passing Data From Parent to Child Component

The ngFor Directive

Static Assets

Scoped CSS

Quiz

Completed Project

4. Pipes

Pipes Overview

Pipe Basics

Pipe Parameters

Currency Pipe and Decimal Pipe

JSON Pipe

Custom Pipes

Taking Things a Step Further

Quiz

Completed Project

5. Directives

Creating a New Project

The ngClass Directive

Toggling Images

The ng-container Element

The ngSwitch Directive

Creating a New Directive

Binding Properties to Directives

Creating a Structural Directive

Quiz

Completed Project

6. Modules

Creating a New Project

Exploring Modules

Creating a Module

Importing and Exporting Modules

7. Routing

The RouterOutlet Placeholder

Creating More Routes

The RouterLink Directive

Active Link Styles

Wildcard Routes

Lazy Loading Modules

The NgContent Directive

Selecting Content

Child Routes

RouterLink Configuration

8. Advanced Components

Creating a Modal

Problems With Modals

Lifecycle Hooks

Opening the Modal

Emitting Events

Reusable Modal

Completed Project

9. Services

Creating a New Project

Submitting the Form

Generating Services

Understanding Dependency Injection

HTTP Requests

Displaying the Results

Highlighting Keywords

Understanding XSS Attacks

Inserting Raw HTML

Tricky CSS

10. RxJS

Introduction to RxJS

Observables

Observers

Pipes and Operators

Avoiding Single Operators

Handling Errors

Creating Raw Observables

Alternative Observer Syntax

Unicast Observables

Understanding RxJS in Our Application

Using Generics With Observables

Completed Project

11. Reactive Forms

Forms Overview

Creating a New Project

Form Groups and Controls

Binding a Form

Validation

Handling Validation

Form Controller Status

Reusing the Input

Wiring the Form

Quick Adjustment

Validating the Other Inputs

Input Masking

Resetting the Form

Completed Project

12. Template Forms

Creating a New Project

The FormsModule

Two-Way Data Binding

Understanding Template Forms

Validation

Handling Form Submission

Completed Project

13. Custom Validators

Creating a New Project

Adding Routes

Adding Reactive Forms

Adding Validators

Custom Validators

Injecting Validators

Asynchronous Validators

Creating a Service

Hashing a Password

Handling the Response

Using Async Validators

Creating a Reusable Input

Handling Errors

14. Authentication

Setting Up Firebase

Configuring Firebase with Angular

Registration Form Submission

Creating a New Account

Redirection After Creating an Account

Handling Registration Errors

Validating and Submitting the Login Form

Authentication

Authentication Persistence

Toggling Menu Items

Logging Out

Router Guards

Guarding Guest Routes

Completed Project

15. Conclusion

Where To Go From Here?