Udemy

Platform

English

Language

Web Development

Category

Angular - The Complete Guide (2021 Edition)

Master Angular 10 (formerly "Angular 2") and build awesome, reactive web apps with the successor of Angular.js

4.57 (137306 reviews)

454214

Students

33.5 hours

Content

Dec 2020

Last Update
$94.99
Regular Price

What you will learn

Develop modern, complex, responsive and scalable web applications with Angular 11

Fully understand the architecture behind an Angular application and how to use it

Use the gained, deep understanding of the Angular fundamentals to quickly establish yourself as a frontend developer

Create single-page applications with one of the most modern JavaScript frameworks out there


Topics

Angular


Description

This course starts from scratch, you neither need to know Angular 1 nor Angular 2!

Angular 11 simply is the latest version of Angular 2, you will learn this amazing framework from the ground up in this course!

Join the most comprehensive, popular and bestselling Angular course on Udemy and benefit not just from a proven course concept but from a huge community as well! 

From Setup to Deployment, this course covers it all! You'll learn all about Components, Directives, Services, Forms, Http Access, Authentication, Optimizing an Angular App with Modules and Offline Compilation and much more - and in the end: You'll learn how to deploy an application!

But that's not all! This course will also show you how to use the Angular CLI and feature a complete project, which allows you to practice the things learned throughout the course!

And if you do get stuck, you benefit from an extremely fast and friendly support - both via direct messaging or discussion. You have my word! ;-)

Angular is one of the most modern, performance-efficient and powerful frontend frameworks you can learn as of today. It allows you to build great web apps which offer awesome user experiences! Learn all the fundamentals you need to know to get started developing Angular applications right away.

Hear what my students have to say

Absolutely fantastic tutorial series. I cannot thank you enough. The quality is first class and your presentational skills are second to none. Keep up this excellent work. You really rock! - Paul Whitehouse

The instructor, Max, is very enthusiastic and engaging. He does a great job of explaining what he's doing and why rather than having students just mimic his coding. Max was also very responsive to questions. I would recommend this course and any others that he offers. Thanks, Max!

As a person new to both JavaScript and Angular 2 I found this course extremely helpful because Max does a great job of explaining all the important concepts behind the code. Max has a great teaching ability to focus on what his audience needs to understand.

This Course uses TypeScript

TypeScript is the main language used by the official Angular team and the language you'll mostly see in Angular tutorials. It's a superset to JavaScript and makes writing Angular apps really easy. Using it ensures, that you will have the best possible preparation for creating Angular apps. Check out the free videos for more information.

TypeScript knowledge is, however, not required - basic JavaScript knowledge is enough.

Why Angular?

Angular is the next big deal. Being the successor of the overwhelmingly successful Angular.js framework it’s bound to shape the future of frontend development in a similar way. The powerful features and capabilities of Angular allow you to create complex, customizable, modern, responsive and user friendly web applications.

Angular 11 simply is the latest version of the Angular framework and simply an update to Angular 2.

Angular is faster than Angular 1 and offers a much more flexible and modular development approach. After taking this course you’ll be able to fully take advantage of all those features and start developing awesome applications immediately.

Due to the drastic differences between Angular 1 and Angular (=Angular 10) you don’t need to know anything about Angular.js to be able to benefit from this course and build your futures projects with Angular.

Get a very deep understanding of how to create Angular applications

This course will teach you all the fundamentals about modules, directives, components, databinding, routing, HTTP access and much more! We will take a lot of deep dives and each section is backed up with a real project. All examples showcase the features Angular offers and how to apply them correctly.

Specifically you will learn:

  • Which architecture Angular uses

  • How to use TypeScript to write Angular applications

  • All about directives and components, including the creation of custom directives/ components

  • How databinding works

  • All about routing and handling navigation

  • What Pipes are and how to use them

  • How to access the Web (e.g. RESTful servers)

  • What dependency injection is and how to use it

  • How to use Modules in Angular

  • How to optimize your (bigger) Angular Application

  • An introduction to NgRx and complex state management

  • We will build a major project in this course so that you can practice all concepts

  • and so much more!

Pay once, benefit a lifetime!

Don’t lose any time, gain an edge and start developing now!


Screenshots

Angular - The Complete Guide (2021 Edition)
Angular - The Complete Guide (2021 Edition)
Angular - The Complete Guide (2021 Edition)
Angular - The Complete Guide (2021 Edition)

Content

Getting Started

Course Introduction

What is Angular?

Join our Online Learning Community

Angular vs Angular 2 vs Angular 9

CLI Deep Dive & Troubleshooting

Project Setup and First App

Editing the First App

The Course Structure

How to get the Most out of the Course

What is TypeScript?

A Basic Project Setup using Bootstrap for Styling

Where to find the Course Source Code

The Basics

Module Introduction

How an Angular App gets Loaded and Started

Components are Important!

Creating a New Component

Understanding the Role of AppModule and Component Declaration

Using Custom Components

Creating Components with the CLI & Nesting Components

Working with Component Templates

Working with Component Styles

Fully Understanding the Component Selector

[OPTIONAL] Assignment Solution

What is Databinding?

String Interpolation

Property Binding

Property Binding vs String Interpolation

Event Binding

Bindable Properties and Events

Passing and Using Data with Event Binding

Important: FormsModule is Required for Two-Way-Binding!

Two-Way-Databinding

Combining all Forms of Databinding

[OPTIONAL] Assignment Solution

Understanding Directives

Using ngIf to Output Data Conditionally

Enhancing ngIf with an Else Condition

Styling Elements Dynamically with ngStyle

Applying CSS Classes Dynamically with ngClass

Outputting Lists with ngFor

[OPTIONAL] Assignment Solution

Getting the Index when using ngFor

Course Project - The Basics

Project Introduction

Planning the App

Installing Bootstrap Correctly

Setting up the Application

Creating the Components

Using the Components

Adding a Navigation Bar

Alternative Non-Collapsable Navigation Bar

Creating a "Recipe" Model

Adding Content to the Recipes Components

Outputting a List of Recipes with ngFor

Displaying Recipe Details

Working on the ShoppingListComponent

Creating an "Ingredient" Model

Creating and Outputting the Shopping List

Adding a Shopping List Edit Section

Wrap Up & Next Steps

Debugging

Understanding Angular Error Messages

Debugging Code in the Browser Using Sourcemaps

Using Augury to Dive into Angular Apps

Components & Databinding Deep Dive

Module Introduction

Splitting Apps into Components

Property & Event Binding Overview

Binding to Custom Properties

Assigning an Alias to Custom Properties

Binding to Custom Events

Assigning an Alias to Custom Events

Custom Property and Event Binding Summary

Understanding View Encapsulation

More on View Encapsulation

Using Local References in Templates

@ViewChild() in Angular 8+

Getting Access to the Template & DOM with @ViewChild

Projecting Content into Components with ng-content

Understanding the Component Lifecycle

Seeing Lifecycle Hooks in Action

Lifecycle Hooks and Template Access

@ContentChild() in Angular 8+

Getting Access to ng-content with @ContentChild

Wrap Up

[OPTIONAL] Assignment Solution

Course Project - Components & Databinding

Introduction

Adding Navigation with Event Binding and ngIf

Passing Recipe Data with Property Binding

Passing Data with Event and Property Binding (Combined)

Make sure you have FormsModule added!

Allowing the User to Add Ingredients to the Shopping List

Directives Deep Dive

Module Introduction

ngFor and ngIf Recap

ngClass and ngStyle Recap

Creating a Basic Attribute Directive

Using the Renderer to build a Better Attribute Directive

More about the Renderer

Using HostListener to Listen to Host Events

Using HostBinding to Bind to Host Properties

Binding to Directive Properties

What Happens behind the Scenes on Structural Directives

Building a Structural Directive

Understanding ngSwitch

Course Project - Directives

Building and Using a Dropdown Directive

Closing the Dropdown From Anywhere

Using Services & Dependency Injection

Module Introduction

Why would you Need Services?

Creating a Logging Service

Injecting the Logging Service into Components

Creating a Data Service

Understanding the Hierarchical Injector

How many Instances of Service Should It Be?

Injecting Services into Services

Using Services for Cross-Component Communication

Services in Angular 6+

[OPTIONAL] Assignment Solution

Course Project - Services & Dependency Injection

Introduction

Setting up the Services

Managing Recipes in a Recipe Service

Using a Service for Cross-Component Communication

Adding the Shopping List Service

Using Services for Pushing Data from A to B

Adding Ingredients to Recipes

Passing Ingredients from Recipes to the Shopping List (via a Service)

Changing Pages with Routing

Module Introduction

Why do we need a Router?

Understanding the Example Project

Setting up and Loading Routes

Navigating with Router Links

Understanding Navigation Paths

Styling Active Router Links

Navigating Programmatically

Using Relative Paths in Programmatic Navigation

Passing Parameters to Routes

Fetching Route Parameters

Fetching Route Parameters Reactively

An Important Note about Route Observables

Passing Query Parameters and Fragments

Retrieving Query Parameters and Fragments

Practicing and some Common Gotchas

Setting up Child (Nested) Routes

Using Query Parameters - Practice

Configuring the Handling of Query Parameters

Redirecting and Wildcard Routes

Important: Redirection Path Matching

Outsourcing the Route Configuration

An Introduction to Guards

Protecting Routes with canActivate

Protecting Child (Nested) Routes with canActivateChild

Using a Fake Auth Service

Controlling Navigation with canDeactivate

Passing Static Data to a Route

Resolving Dynamic Data with the resolve Guard

Understanding Location Strategies

Wrap Up

Course Project - Routing

Planning the General Structure

Setting Up Routes

Adding Navigation to the App

Marking Active Routes

Fixing Page Reload Issues

Child Routes: Challenge

Adding Child Routing Together

Configuring Route Parameters

Passing Dynamic Parameters to Links

Styling Active Recipe Items

Adding Editing Routes

Retrieving Route Parameters

Programmatic Navigation to the Edit Page

One Note about Route Observables

Project Cleanup

Understanding Observables

Module Introduction

Analyzing Angular Observables

Getting Closer to the Core of Observables

Building a Custom Observable

Errors & Completion

Observables & You!

Understanding Operators

Subjects

Wrap Up

Useful Resources & Links

Course Project - Observables

Improving the Reactive Service with Observables (Subjects)

Changed the Subscription Name

Handling Forms in Angular Apps

Module Introduction

Why do we Need Angular's Help?

Template-Driven (TD) vs Reactive Approach

An Example Form

TD: Creating the Form and Registering the Controls

TD: Submitting and Using the Form

TD: Understanding Form State

TD: Accessing the Form with @ViewChild

TD: Adding Validation to check User Input

Built-in Validators & Using HTML5 Validation

TD: Using the Form State

TD: Outputting Validation Error Messages

TD: Set Default Values with ngModel Property Binding

TD: Using ngModel with Two-Way-Binding

TD: Grouping Form Controls

TD: Handling Radio Buttons

TD: Setting and Patching Form Values

TD: Using Form Data

TD: Resetting Forms

Introduction to the Reactive Approach

Reactive: Setup

Reactive: Creating a Form in Code

Reactive: Syncing HTML and Form

Reactive: Submitting the Form

Reactive: Adding Validation

Reactive: Getting Access to Controls

Reactive: Grouping Controls

Fixing a Bug

Reactive: Arrays of Form Controls (FormArray)

Reactive: Creating Custom Validators

Reactive: Using Error Codes

Reactive: Creating a Custom Async Validator

Reactive: Reacting to Status or Value Changes

Reactive: Setting and Patching Values

[OPTIONAL] Assignment Solution

Course Project - Forms

Introduction

TD: Adding the Shopping List Form

Adding Validation to the Form

Allowing the Selection of Items in the List

Loading the Shopping List Items into the Form

Updating existing Items

Resetting the Form

Allowing the the User to Clear (Cancel) the Form

Allowing the Deletion of Shopping List Items

Creating the Template for the (Reactive) Recipe Edit Form

Creating the Form For Editing Recipes

Syncing HTML with the Form

Fixing a Bug

Adding Ingredient Controls to a Form Array

Adding new Ingredient Controls

Validating User Input

Submitting the Recipe Edit Form

Adding a Delete and Clear (Cancel) Functionality

Redirecting the User (after Deleting a Recipe)

Adding an Image Preview

Providing the Recipe Service Correctly

Deleting Ingredients and Some Finishing Touches

Deleting all Items in a FormArray

Using Pipes to Transform Output

Introduction & Why Pipes are Useful

Using Pipes

Parametrizing Pipes

Where to learn more about Pipes

Chaining Multiple Pipes

Creating a Custom Pipe

Parametrizing a Custom Pipe

Example: Creating a Filter Pipe

Pure and Impure Pipes (or: How to "fix" the Filter Pipe)

Understanding the "async" Pipe

Making Http Requests

A New IDE

Module Introduction

How Does Angular Interact With Backends?

The Anatomy of a Http Request

Backend (Firebase) Setup

Sending a POST Request

GETting Data

Using RxJS Operators to Transform Response Data

Using Types with the HttpClient

Outputting Posts

Showing a Loading Indicator

Using a Service for Http Requests

Services & Components Working Together

Sending a DELETE Request

Handling Errors

Using Subjects for Error Handling

Using the catchError Operator

Error Handling & UX

Setting Headers

Adding Query Params

Observing Different Types of Responses

Changing the Response Body Type

Introducing Interceptors

Manipulating Request Objects

Response Interceptors

Multiple Interceptors

Wrap Up

Useful Resources & Links

Course Project - Http

Module Introduction

Backend (Firebase) Setup

Setting Up the DataStorage Service

Storing Recipes

Fetching Recipes

Transforming Response Data

Resolving Data Before Loading

Fixing a Bug with the Resolver

Authentication & Route Protection in Angular

Module Introduction

How Authentication Works

Adding the Auth Page

Switching Between Auth Modes

Handling Form Input

Preparing the Backend

Make sure you got Recipes in your backend!

Preparing the Signup Request

Sending the Signup Request

Adding a Loading Spinner & Error Handling Logic

Improving Error Handling

Sending Login Requests

Login Error Handling

Creating & Storing the User Data

Reflecting the Auth State in the UI

Adding the Token to Outgoing Requests

Attaching the Token with an Interceptor

Adding Logout

Adding Auto-Login

Adding Auto-Logout

Adding an Auth Guard

Wrap Up

Useful Resources & Links

Dynamic Components

Module Introduction

Adding an Alert Modal Component

Understanding the Different Approaches

Using ngIf

Preparing Programmatic Creation

Creating a Component Programmatically

Understanding entryComponents

Data Binding & Event Binding

Wrap Up

Useful Resources & Links

Angular Modules & Optimizing Angular Apps

Module Introduction

What are Modules?

Analyzing the AppModule

Getting Started with Feature Modules

Splitting Modules Correctly

Adding Routes to Feature Modules

Component Declarations

The ShoppingList Feature Module

Understanding Shared Modules

Understanding the Core Module

Adding an Auth Feature Module

Understanding Lazy Loading

Implementing Lazy Loading

More Lazy Loading

Preloading Lazy-Loaded Code

Modules & Services

Loading Services Differently

Ahead-of-Time Compilation

Wrap Up

Useful Resources & Links

Deploying an Angular App

Module Introduction

Deployment Preparation & Steps

Using Environment Variables

Deployment Example: Firebase Hosting

Server Routing vs Browser Routing

Bonus: Working with NgRx in our Project

Module Introduction

What is Application State?

What is NgRx?

Getting Started with Reducers

Adding Logic to the Reducer

Understanding & Adding Actions

Setting Up the NgRx Store

Selecting State

Dispatching Actions

Multiple Actions

Preparing Update & Delete Actions

Updating & Deleting Ingredients

Expanding the State

Managing More State via NgRx

Removing Redundant Component State Management

First Summary & Clean Up

One Root State

Setting Up Auth Reducer & Actions

Dispatching Auth Actions

Auth Finished (For Now...)

And Important Note on Actions

Exploring NgRx Effects

Defining the First Effect

Effects & Error Handling

Login via NgRx Effects

Managing UI State in NgRx

Finishing the Login Effect

Preparing Other Auth Actions

Adding Signup

Further Auth Effects

Adding Auto-Login with NgRx

Adding Auto-Logout

Finishing the Auth Effects

Using the Store Devtools

The Router Store

Getting Started with NgRx for Recipes

Fetching Recipe Detail Data

Fetching Recipes & Using the Resolver

Fixing the Auth Redirect

Update, Delete and Add Recipes

Storing Recipes via Effects

Cleanup Work

Wrap Up

Alternative NgRx Syntax

Useful Resources & Links

MUST READ: The [LEGACY] Lectures

[LEGACY] Module Introduction

[LEGACY] Important: Angular 6, RxJS 6 and this section!

[LEGACY] State Challenges

[LEGACY] Getting Started with Reducers

[LEGACY] Adding Actions

[LEGACY] Finishing the First Reducer

[LEGACY] Registering the Application Store

[LEGACY] Selecting Data from State

[LEGACY] Dispatch Actions

[LEGACY] More Actions and Adding Ingredients

[LEGACY] Dispatching Update and Deleting Shopping List Actions

[LEGACY] Expanding App State

[LEGACY] Editing the Shopping-List via NgRx

[LEGACY] Managing all Relevant State

[LEGACY] Authentication and Side Effects - Introduction

[LEGACY] Setting up the Auth Store Files

[LEGACY] The Reducer

[LEGACY] Adding Reducer Logic & Actions

[LEGACY] Adjusting the App Module Setup

[LEGACY] Using Authentication

[LEGACY] Dispatch Actions

[LEGACY] Getting State Access in Http Interceptor

[LEGACY] Handling the Auth Token

[LEGACY] Only React to Actions Once via take(1)

[LEGACY] A Closer Look at Effects

[LEGACY] Auth Effects and Actions

[LEGACY] Using NgRx Effects with NgRx >= 7

[LEGACY] Effects - How they Work

[LEGACY] Adding Auth Signup

[LEGACY] Adding Auth Signin

[LEGACY] Navigation as a Side Effect

[LEGACY] Handling Logout via NgRx

[LEGACY] Additional Fixes

[LEGACY] Redirecting Upon Logout

[LEGACY] What's Next?

[LEGACY] The Router Store Package

[LEGACY] Store Devtools

[LEGACY] Lazy Load and Dynamic Injection

[LEGACY] Adding Recipe Actions

[LEGACY] Adding Recipe Reducers

[LEGACY] Dispatching and Selecting State

[LEGACY] Viewing and Deleting Recipes via NgRx

[LEGACY] Editing and Updating Recipes via NgRx

[LEGACY] Recipes Side Effects - Fetching from Server

[LEGACY] Recipes Side Effects - Storing Recipes on Server

[LEGACY] Cleaning Up

[LEGACY] Updating to RxJS 6+

[LEGACY] Wrap Up

[LEGACY] Useful Resources & Links

Bonus: Angular Universal

Module Introduction

Adding Angular Universal

Adding Angular Universal with NestJS

Deploying Universal Apps

Important: Remaining Lectures

Module Introduction

Getting Started with Angular Universal

Working on the App Module

Adding a Server-Side Build Workflow

Adding a NodeJS Server

Pre-Rendering the App on the Server

Next Steps

Angular Universal Gotchas

Angular Animations

Making Animations Work with Angular 4+

Introduction

Setting up the Starting Project

Animations Triggers and State

Switching between States

Transitions

Advanced Transitions

Transition Phases

The "void" State

Using Keyframes for Animations

Grouping Transitions

Using Animation Callbacks

Adding Offline Capabilities with Service Workers

Module Introduction

Adding Service Workers

Caching Assets for Offline Use

Caching Dynamic Assets & URLs

Further Links & Resources

A Basic Introduction to Unit Testing in Angular Apps

About this Section

Introduction

Why Unit Tests?

Analyzing the Testing Setup (as created by the CLI)

Running Tests (with the CLI)

Adding a Component and some fitting Tests

Testing Dependencies: Components and Services

Simulating Async Tasks

Using "fakeAsync" and "tick"

Isolated vs Non-Isolated Tests

Further Resources & Where to Go Next

Angular as a Platform & Closer Look at the CLI

Module Introduction

A Closer Look at "ng new"

IDE & Project Setup

Understanding the Config Files

Important CLI Commands

The "angular.json" File - A Closer Look

Angular Schematics - An Introduction

The "ng add" Command

Using Custom "ng generate" Schematics

Smooth Updating of Projects with "ng update"

Simplified Deployment with "ng deploy"

Understanding "Differential Loading"

Managing Multiple Projects in One Folder

Angular Libraries - An Introduction

Wrap Up

Angular Changes & New Features

What's New & How to Update

Course Roundup

Course Roundup

Bonus: More Content!

Bonus: TypeScript Introduction (for Angular 2 Usage)

Introduction

Using Types

Classes

Interfaces

Generics

Wrap up & Modules

Deep dive into TypeScript



Reviews

D
Danijel8 October 2020

If you want to know web development, go to Max. I took multiple courses. All of them, including this one, were fantastic. Thank you Max!

I
Ibrahim8 October 2020

It was great in the beginning up until lesson 65. Now, I think there is a lot of redundant talking and it is making thinks more complex to understand. I needed to check out some other websites to understand what is the deal with input and output attributes which in the end turned out to be very simple to understand. However, Max made it too complex to see what is really going on by giving a very complex example. It would be better if he explained things on simpler examples and do not mix up multiple concepts in one simple example.

S
Scott7 October 2020

Should have shown Windows Command Prompt commands as well. You can't just open cmd and start installing. Also, you didn't show where you got the app.component.html to replace the one in src/app.

Y
Yogaparthasarathy5 October 2020

Max always gives his MAXimum. When I was enrolling the course, I was wondering How can I complete such a long course. But the way Max explains the concept made me feel like this is crash course. I will complete this very sooner. This is my first review across all the online learning platform. Awesome Course. Thanks MAX.

C
Candice4 October 2020

Great course to get an understanding of Angular and what it does behind the scenes. I liked how the we kept going back to the course project to apply the theories just learnt. But also how the project was improved as we went along. Would recommend!

M
Matthew26 February 2020

I've used Max's courses before, and as usual, this is of the highest quality for learning the topics! Thanks again!!

N
Nikita25 February 2020

The tutor is the best. Max explains every aspect in detail. You will feel as if you are in a class room attending the session. And the best part is all your doubts and queries will definitely be resolved. Happy learning..!

J
Jose25 February 2020

Hi Max, I just can say thank you for this course. Clear and complete. You have skills for teaching and you did a great job. I work in computers (I'm a PL/sql, Java & Forms - Oracle developer). If one day you come to Porto (Portugal), I'l be very pleased to pay you a drink! Thank you very much. José.

C
Cesar24 February 2020

todo bien hasta el momento. solo que los videos se suelen ver pequeños los comandos usados y con el subtitulo a español no se ve muy bien.

R
Rohith23 February 2020

So far the course coverage has been really adequate. I already have experience in Java programming but even otherwise, the content is easily relatable.

C
Cameron23 February 2020

I'm only a few sections into this course, but so far Max has been doing an incredible job at explaining everything in great detail without making me feel overloaded. The tasks he assigns help massively in solidifying what he's taught me. Couldn't recommend this course enough.

K
Konstantin22 February 2020

Not everything is explained perfectly, especially if you are on Windows, but all in all its a great course

Z
Zubair21 February 2020

Just started the course, I found it very interesting, looks like I am going to finish this as early as possible, just because of my curiosity.

W
Weronika21 February 2020

Yeah, the guy is really good, I am learning a lot in fast paste, however my past experience with java is becoming handy sometimes.

A
Alfredo20 February 2020

It is an older format from Maximilian and it shows. It is still good, but much longer and bloated, sometimes losing itself in explanations that shouldn't even be there in the first place. I think the requirements should be changed and require previous knowledge of TypeScript and adjust the course accordingly, since quite a few things are done in a very shallow way. All in all, Max's courses always leave you more knowledgeable than you were before doing them, so I still recommend it.


Coupons

StatusDateDiscount
Expired12/17/202095% OFF


756150

Udemy ID

2/8/2016

Course created date

6/9/2019

Course Indexed date
Bot
Course Submitted by

Twitter
Telegram
Android PlayStore
Apple Appstore