Angular – The Complete Guide (2021 Edition)

Angular – The Complete Guide (2021 Edition)

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 33.5 Hours | 13.7 GB

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

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!

What you’ll 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

+ Table of Contents

Getting Started
1 Course Introduction
2 What is Angular
3 Join our Online Learning Community
4 Angular vs Angular 2 vs Latest Angular Version
5 CLI Deep Dive & Troubleshooting
6 Project Setup and First App
7 Editing the First App
8 The Course Structure
9 How to get the Most out of the Course
10 What is TypeScript
11 A Basic Project Setup using Bootstrap for Styling
12 About the Course Code Code Snapshots

The Basics
13 Module Introduction
14 How an Angular App gets Loaded and Started
15 Components are Important!
16 Creating a New Component
17 Understanding the Role of AppModule and Component Declaration
18 Using Custom Components
19 Creating Components with the CLI & Nesting Components
20 Working with Component Templates
21 Working with Component Styles
22 Fully Understanding the Component Selector
23 [OPTIONAL] Assignment Solution
24 What is Databinding
25 String Interpolation
26 Property Binding
27 Property Binding vs String Interpolation
28 Event Binding
29 Bindable Properties and Events
30 Passing and Using Data with Event Binding
31 Important FormsModule is Required for Two-Way-Binding!
32 Two-Way-Databinding
33 Combining all Forms of Databinding
34 [OPTIONAL] Assignment Solution
35 Understanding Directives
36 Using ngIf to Output Data Conditionally
37 Enhancing ngIf with an Else Condition
38 Styling Elements Dynamically with ngStyle
39 Applying CSS Classes Dynamically with ngClass
40 Outputting Lists with ngFor
41 [OPTIONAL] Assignment Solution
42 Getting the Index when using ngFor

Course Project – The Basics
43 Project Introduction
44 Planning the App
45 Installing Bootstrap Correctly
46 Setting up the Application
47 Creating the Components
48 Using the Components
49 Adding a Navigation Bar
50 Alternative Non-Collapsable Navigation Bar
51 Creating a Recipe Model
52 Adding Content to the Recipes Components
53 Outputting a List of Recipes with ngFor
54 Displaying Recipe Details
55 Working on the ShoppingListComponent
56 Creating an Ingredient Model
57 Creating and Outputting the Shopping List
58 Adding a Shopping List Edit Section
59 Wrap Up & Next Steps

60 Understanding Angular Error Messages
61 Debugging Code in the Browser Using Sourcemaps
62 Using Augury to Dive into Angular Apps

Components & Databinding Deep Dive
63 Module Introduction
64 Splitting Apps into Components
65 Property & Event Binding Overview
66 Binding to Custom Properties
67 Assigning an Alias to Custom Properties
68 Binding to Custom Events
69 Assigning an Alias to Custom Events
70 Custom Property and Event Binding Summary
71 Understanding View Encapsulation
72 More on View Encapsulation
73 Using Local References in Templates
74 @ViewChild() in Angular 8+
75 Getting Access to the Template & DOM with @ViewChild
76 Projecting Content into Components with ng-content
77 Understanding the Component Lifecycle
78 Seeing Lifecycle Hooks in Action
79 Lifecycle Hooks and Template Access
80 @ContentChild() in Angular 8+
81 Getting Access to ng-content with @ContentChild
82 Wrap Up
83 [OPTIONAL] Assignment Solution

Course Project – Components & Databinding
84 Introduction
85 Adding Navigation with Event Binding and ngIf
86 Passing Recipe Data with Property Binding
87 Passing Data with Event and Property Binding (Combined)
88 Make sure you have FormsModule added!
89 Allowing the User to Add Ingredients to the Shopping List

Directives Deep Dive
90 Module Introduction
91 ngFor and ngIf Recap
92 ngClass and ngStyle Recap
93 Creating a Basic Attribute Directive
94 Using the Renderer to build a Better Attribute Directive
95 More about the Renderer
96 Using HostListener to Listen to Host Events
97 Using HostBinding to Bind to Host Properties
98 Binding to Directive Properties
99 What Happens behind the Scenes on Structural Directives
100 Building a Structural Directive
101 Understanding ngSwitch

Course Project – Directives
102 Building and Using a Dropdown Directive
103 Closing the Dropdown From Anywhere

Using Services & Dependency Injection
104 Module Introduction
105 Why would you Need Services
106 Creating a Logging Service
107 Injecting the Logging Service into Components
108 Creating a Data Service
109 Understanding the Hierarchical Injector
110 How many Instances of Service Should It Be
111 Injecting Services into Services
112 Using Services for Cross-Component Communication
113 Services in Angular 6+
114 [OPTIONAL] Assignment Solution

Course Project – Services & Dependency Injection
115 Introduction
116 Setting up the Services
117 Managing Recipes in a Recipe Service
118 Using a Service for Cross-Component Communication
119 Adding the Shopping List Service
120 Using Services for Pushing Data from A to B
121 Adding Ingredients to Recipes
122 Passing Ingredients from Recipes to the Shopping List (via a Service)

Changing Pages with Routing
123 Module Introduction
124 Why do we need a Router
125 Understanding the Example Project
126 Setting up and Loading Routes
127 Navigating with Router Links
128 Understanding Navigation Paths
129 Styling Active Router Links
130 Navigating Programmatically
131 Using Relative Paths in Programmatic Navigation
132 Passing Parameters to Routes
133 Fetching Route Parameters
134 Fetching Route Parameters Reactively
135 An Important Note about Route Observables
136 Passing Query Parameters and Fragments
137 Retrieving Query Parameters and Fragments
138 Practicing and some Common Gotchas
139 Setting up Child (Nested) Routes
140 Using Query Parameters – Practice
141 Configuring the Handling of Query Parameters
142 Redirecting and Wildcard Routes
143 Important Redirection Path Matching
144 Outsourcing the Route Configuration
145 An Introduction to Guards
146 Protecting Routes with canActivate
147 Protecting Child (Nested) Routes with canActivateChild
148 Using a Fake Auth Service
149 Controlling Navigation with canDeactivate
150 Passing Static Data to a Route
151 Resolving Dynamic Data with the resolve Guard
152 Understanding Location Strategies
153 Wrap Up

Course Project – Routing
154 Planning the General Structure
155 Setting Up Routes
156 Adding Navigation to the App
157 Marking Active Routes
158 Fixing Page Reload Issues
159 Child Routes Challenge
160 Adding Child Routing Together
161 Configuring Route Parameters
162 Passing Dynamic Parameters to Links
163 Styling Active Recipe Items
164 Adding Editing Routes
165 Retrieving Route Parameters
166 Programmatic Navigation to the Edit Page
167 One Note about Route Observables
168 Project Cleanup

Understanding Observables
169 Module Introduction
170 Analyzing Angular Observables
171 Getting Closer to the Core of Observables
172 Building a Custom Observable
173 Errors & Completion
174 Observables & You!
175 Understanding Operators
176 Subjects
177 Wrap Up
178 Useful Resources & Links

Course Project – Observables
179 Improving the Reactive Service with Observables (Subjects)
180 Changed the Subscription Name

Handling Forms in Angular Apps
181 Module Introduction
182 Why do we Need Angular’s Help
183 Template-Driven (TD) vs Reactive Approach
184 An Example Form
185 TD Creating the Form and Registering the Controls
186 TD Submitting and Using the Form
187 TD Understanding Form State
188 TD Accessing the Form with @ViewChild
189 TD Adding Validation to check User Input
190 Built-in Validators & Using HTML5 Validation
191 TD Using the Form State
192 TD Outputting Validation Error Messages
193 TD Set Default Values with ngModel Property Binding
194 TD Using ngModel with Two-Way-Binding
195 TD Grouping Form Controls
196 TD Handling Radio Buttons
197 TD Setting and Patching Form Values
198 TD Using Form Data
199 TD Resetting Forms
200 Introduction to the Reactive Approach
201 Reactive Setup
202 Reactive Creating a Form in Code
203 Reactive Syncing HTML and Form
204 Reactive Submitting the Form
205 Reactive Adding Validation
206 Reactive Getting Access to Controls
207 Reactive Grouping Controls
208 Fixing a Bug
209 Reactive Arrays of Form Controls (FormArray)
210 Reactive Creating Custom Validators
211 Reactive Using Error Codes
212 Reactive Creating a Custom Async Validator
213 Reactive Reacting to Status or Value Changes
214 Reactive Setting and Patching Values
215 [OPTIONAL] Assignment Solution

Course Project – Forms
216 Introduction
217 TD Adding the Shopping List Form
218 Adding Validation to the Form
219 Allowing the Selection of Items in the List
220 Loading the Shopping List Items into the Form
221 Updating existing Items
222 Resetting the Form
223 Allowing the the User to Clear (Cancel) the Form
224 Allowing the Deletion of Shopping List Items
225 Creating the Template for the (Reactive) Recipe Edit Form
226 Creating the Form For Editing Recipes
227 Syncing HTML with the Form
228 Fixing a Bug
229 Adding Ingredient Controls to a Form Array
230 Adding new Ingredient Controls
231 Validating User Input
232 Submitting the Recipe Edit Form
233 Adding a Delete and Clear (Cancel) Functionality
234 Redirecting the User (after Deleting a Recipe)
235 Adding an Image Preview
236 Providing the Recipe Service Correctly
237 Deleting Ingredients and Some Finishing Touches
238 Deleting all Items in a FormArray

Using Pipes to Transform Output
239 Introduction & Why Pipes are Useful
240 Using Pipes
241 Parametrizing Pipes
242 Where to learn more about Pipes
243 Chaining Multiple Pipes
244 Creating a Custom Pipe
245 Parametrizing a Custom Pipe
246 Example Creating a Filter Pipe
247 Pure and Impure Pipes (or How to fix the Filter Pipe)
248 Understanding the async Pipe

Making Http Requests
249 A New IDE
250 Module Introduction
251 How Does Angular Interact With Backends
252 The Anatomy of a Http Request
253 Backend (Firebase) Setup
254 Sending a POST Request
255 GETting Data
256 Using RxJS Operators to Transform Response Data
257 Using Types with the HttpClient
258 Outputting Posts
259 Showing a Loading Indicator
260 Using a Service for Http Requests
261 Services & Components Working Together
262 Sending a DELETE Request
263 Handling Errors
264 Using Subjects for Error Handling
265 Using the catchError Operator
266 Error Handling & UX
267 Setting Headers
268 Adding Query Params
269 Observing Different Types of Responses
270 Changing the Response Body Type
271 Introducing Interceptors
272 Manipulating Request Objects
273 Response Interceptors
274 Multiple Interceptors
275 Wrap Up
276 Useful Resources & Links

Course Project – Http
277 Module Introduction
278 Backend (Firebase) Setup
279 Setting Up the DataStorage Service
280 Storing Recipes
281 Fetching Recipes
282 Transforming Response Data
283 Resolving Data Before Loading
284 Fixing a Bug with the Resolver

Authentication & Route Protection in Angular
285 Module Introduction
286 How Authentication Works
287 Adding the Auth Page
288 Switching Between Auth Modes
289 Handling Form Input
290 Preparing the Backend
291 Make sure you got Recipes in your backend!
292 Preparing the Signup Request
293 Sending the Signup Request
294 Adding a Loading Spinner & Error Handling Logic
295 Improving Error Handling
296 Sending Login Requests
297 Login Error Handling
298 Creating & Storing the User Data
299 Reflecting the Auth State in the UI
300 Adding the Token to Outgoing Requests
301 Attaching the Token with an Interceptor
302 Adding Logout
303 Adding Auto-Login
304 Adding Auto-Logout
305 Adding an Auth Guard
306 Wrap Up
307 Useful Resources & Links

Dynamic Components
308 Module Introduction
309 Adding an Alert Modal Component
310 Understanding the Different Approaches
311 Using ngIf
312 Preparing Programmatic Creation
313 Creating a Component Programmatically
314 Understanding entryComponents
315 Data Binding & Event Binding
316 Wrap Up
317 Useful Resources & Links

Angular Modules & Optimizing Angular Apps
318 Module Introduction
319 What are Modules
320 Analyzing the AppModule
321 Getting Started with Feature Modules
322 Splitting Modules Correctly
323 Adding Routes to Feature Modules
324 Component Declarations
325 The ShoppingList Feature Module
326 Understanding Shared Modules
327 Understanding the Core Module
328 Adding an Auth Feature Module
329 Understanding Lazy Loading
330 Implementing Lazy Loading
331 More Lazy Loading
332 Preloading Lazy-Loaded Code
333 Modules & Services
334 Loading Services Differently
335 Ahead-of-Time Compilation
336 Wrap Up
337 Useful Resources & Links

Deploying an Angular App
338 Module Introduction
339 Deployment Preparation & Steps
340 Using Environment Variables
341 Deployment Example Firebase Hosting
342 Server Routing vs Browser Routing

Bonus Working with NgRx in our Project
343 Module Introduction
344 What is Application State
345 What is NgRx
346 Getting Started with Reducers
347 Adding Logic to the Reducer
348 Understanding & Adding Actions
349 Setting Up the NgRx Store
350 Selecting State
351 Dispatching Actions
352 Multiple Actions
353 Preparing Update & Delete Actions
354 Updating & Deleting Ingredients
355 Expanding the State
356 Managing More State via NgRx
357 Removing Redundant Component State Management
358 First Summary & Clean Up
359 One Root State
360 Setting Up Auth Reducer & Actions
361 Dispatching Auth Actions
362 Auth Finished (For Now…)
363 And Important Note on Actions
364 Exploring NgRx Effects
365 Defining the First Effect
366 Effects & Error Handling
367 Login via NgRx Effects
368 Managing UI State in NgRx
369 Finishing the Login Effect
370 Preparing Other Auth Actions
371 Adding Signup
372 Further Auth Effects
373 Adding Auto-Login with NgRx
374 Adding Auto-Logout
375 Finishing the Auth Effects
376 Using the Store Devtools
377 The Router Store
378 Getting Started with NgRx for Recipes
379 Fetching Recipe Detail Data
380 Fetching Recipes & Using the Resolver
381 Fixing the Auth Redirect
382 Update, Delete and Add Recipes
383 Storing Recipes via Effects
384 Cleanup Work
385 Wrap Up
386 Alternative NgRx Syntax
387 Useful Resources & Links

Bonus Angular Universal
388 Module Introduction
389 Angular Universal & ModuleMapLoader
390 Adding Angular Universal
391 Adding Angular Universal with NestJS
392 Deploying Universal Apps
393 Important Remaining Lectures
394 Module Introduction
395 Getting Started with Angular Universal
396 Working on the App Module
397 Adding a Server-Side Build Workflow
398 Adding a NodeJS Server
399 Pre-Rendering the App on the Server
400 Next Steps
401 Angular Universal Gotchas

Angular Animations
402 Making Animations Work with Angular 4+
403 Introduction
404 Setting up the Starting Project
405 Animations Triggers and State
406 Switching between States
407 Transitions
408 Advanced Transitions
409 Transition Phases
410 The void State
411 Using Keyframes for Animations
412 Grouping Transitions
413 Using Animation Callbacks

Adding Offline Capabilities with Service Workers
414 Module Introduction
415 Adding Service Workers
416 Caching Assets for Offline Use
417 Caching Dynamic Assets & URLs
418 Further Links & Resources

A Basic Introduction to Unit Testing in Angular Apps
419 About this Section
420 Introduction
421 Why Unit Tests
422 Analyzing the Testing Setup (as created by the CLI)
423 Running Tests (with the CLI)
424 Adding a Component and some fitting Tests
425 Testing Dependencies Components and Services
426 Simulating Async Tasks
427 Using fakeAsync and tick
428 Isolated vs Non-Isolated Tests
429 Further Resources & Where to Go Next

Angular as a Platform & Closer Look at the CLI
430 Module Introduction
431 A Closer Look at ng new
432 IDE & Project Setup
433 Understanding the Config Files
434 Important CLI Commands
435 The angular.json File – A Closer Look
436 Angular Schematics – An Introduction
437 The ng add Command
438 Using Custom ng generate Schematics
439 Smooth Updating of Projects with ng update
440 Simplified Deployment with ng deploy
441 Understanding Differential Loading
442 Managing Multiple Projects in One Folder
443 Angular Libraries – An Introduction
444 Wrap Up

Angular Changes & New Features
445 A First Look At Angular Elements
446 What’s New & How to Update

Course Roundup
447 Course Roundup
448 Bonus More Content!

Bonus TypeScript Introduction (for Angular 2 Usage)
449 Introduction
450 Using Types
451 Classes
452 Interfaces
453 Generics
454 Wrap up & Modules
455 Deep dive into TypeScript