Angular – The Complete Guide (2023 Edition)

Angular – The Complete Guide (2023 Edition)

English | MP4 | AVC 1920×1080 | AAC 48KHz 2ch | 499 lectures (36h 30m) | 19.47 GB

Master Angular (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 Optional TypeScript Quick Introduction
12 A Basic Project Setup using Bootstrap for Styling
13 About the Course Code Code Snapshots

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

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

Debugging
61 Understanding Angular Error Messages
62 Debugging Code in the Browser Using Sourcemaps

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 ngcontent
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 ngcontent 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 Alternative Injection Syntax
109 Creating a Data Service
110 Understanding the Hierarchical Injector
111 How many Instances of Service Should It Be
112 Injecting Services into Services
113 Using Services for CrossComponent Communication
114 A Different Way Of Injecting Services
115 OPTIONAL Assignment Solution

Course Project Services Dependency Injection
116 Introduction
117 Setting up the Services
118 Managing Recipes in a Recipe Service
119 Using a Service for CrossComponent Communication
120 Adding the Shopping List Service
121 Using Services for Pushing Data from A to B
122 Adding Ingredients to Recipes
123 Passing Ingredients from Recipes to the Shopping List via a Service

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

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

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

Course Project Observables
181 Improving the Reactive Service with Observables Subjects
182 Changed the Subscription Name

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

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

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

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

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

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

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

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

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

Standalone Components
345 Module Introduction
346 Starting Setup Why We Want Standalone Components
347 Building a First Standalone Component
348 Standalone Components Are Now Stable
349 Standalone Directives Connecting Building Blocks
350 Migrating Another Component
351 A Standalone Root Component
352 Services Standalone Components
353 Routing with Standalone Components
354 Lazy Loading
355 Summary

Angular Signals
356 Module Introduction
357 Signals What Why
358 Creating a New Signal
359 Updating a Signal Value
360 Reading Outputting a Signal Value
361 Signal Updating set update mutate
362 Important Signals are NOT Finished Yet
363 Signals Whats To Come
364 Computed Values Effects
365 Module Summary

Bonus Using NgRx For State Management
366 Module Introduction
367 What Is NgRx
368 Understanding NgRx Its Building Blocks
369 Project Setup Installing NgRx
370 Adding a First Reducer Store Setup
371 An Alternative Way Of Creating Reducers
372 Reading Data From The Store
373 Introducing Actions State Changing Reducers
374 Dispatching Actions
375 Attaching Data To Actions
376 Handling Actions Without createReducer
377 An Alternative Way Of Defining Actions
378 Time To Practice A Second Action
379 Exploring Selectors
380 Introducing Effects
381 Installing the Effects Package
382 Defining a First Effect
383 The Old Effect Decorator Registering Effects
384 Using Store Data In Effects
385 Adding a Second Effect
386 Summary
387 About The Remaining Section
388 Recipe Project Starting Code
389 Getting Started with Reducers
390 Adding Logic to the Reducer
391 Understanding Adding Actions
392 Setting Up the NgRx Store
393 Selecting State
394 Dispatching Actions
395 Multiple Actions
396 Preparing Update Delete Actions
397 Updating Deleting Ingredients
398 Expanding the State
399 Managing More State via NgRx
400 Removing Redundant Component State Management
401 First Summary Clean Up
402 One Root State
403 Setting Up Auth Reducer Actions
404 Dispatching Auth Actions
405 Auth Finished For Now
406 And Important Note on Actions
407 Exploring NgRx Effects
408 Defining the First Effect
409 Important Avoid Effect
410 Effects Error Handling
411 Login via NgRx Effects
412 Managing UI State in NgRx
413 Finishing the Login Effect
414 Preparing Other Auth Actions
415 Adding Signup
416 Further Auth Effects
417 Adding AutoLogin with NgRx
418 Adding AutoLogout
419 Finishing the Auth Effects
420 Using the Store Devtools
421 The Router Store
422 Getting Started with NgRx for Recipes
423 Fetching Recipe Detail Data
424 Fetching Recipes Using the Resolver
425 Fixing the Auth Redirect
426 Update Delete and Add Recipes
427 Storing Recipes via Effects
428 Cleanup Work
429 Wrap Up
430 Alternative NgRx Syntax
431 Useful Resources Links

Bonus Angular Universal
432 Module Introduction
433 Angular Universal What Why
434 Converting the App to a Universal App
435 Analyzing Running Serverside Code
436 A Closer Look At The Serverside Code
437 Integrating a REST API
438 Some Notes About Deploying Angular Universal Apps
439 Angular Universal Gotchas

Angular Animations
440 Making Animations Work with Angular 4
441 Introduction
442 Setting up the Starting Project
443 Animations Triggers and State
444 Switching between States
445 Transitions
446 Advanced Transitions
447 Transition Phases
448 The void State
449 Using Keyframes for Animations
450 Grouping Transitions
451 Using Animation Callbacks

Adding Offline Capabilities with Service Workers
452 Module Introduction
453 Adding Service Workers
454 Caching Assets for Offline Use
455 Caching Dynamic Assets URLs
456 Further Links Resources

A Basic Introduction to Unit Testing in Angular Apps
457 About this Section
458 Introduction
459 Why Unit Tests
460 Analyzing the Testing Setup as created by the CLI
461 Running Tests with the CLI
462 Adding a Component and some fitting Tests
463 Testing Dependencies Components and Services
464 Simulating Async Tasks
465 Using fakeAsync and tick
466 Isolated vs NonIsolated Tests
467 Further Resources Where to Go Next

Angular as a Platform Closer Look at the CLI
468 Module Introduction
469 A Closer Look at ng new
470 IDE Project Setup
471 Understanding the Config Files
472 Important CLI Commands
473 The angularjson File A Closer Look
474 Angular Schematics An Introduction
475 The ng add Command
476 Using Custom ng generate Schematics
477 Smooth Updating of Projects with ng update
478 Simplified Deployment with ng deploy
479 Understanding Differential Loading
480 Managing Multiple Projects in One Folder
481 Angular Libraries An Introduction
482 Wrap Up

Angular Changes New Features
483 A First Look At Angular Elements

Course Roundup
484 Thanks for being part of the course
485 Bonus More Content

Bonus TypeScript Introduction for Angular 2 Usage
486 Module Introduction
487 What Why
488 Installing Using TypeScript
489 Base Types Primitives
490 Array Object Types
491 Type Inference
492 Working with Union Types
493 Assigning Type Aliases
494 Diving into Functions Function Types
495 Understanding Generics
496 Classes TypeScript
497 Working with Interfaces
498 Configuring the TypeScript Compiler
499 Module Resources

Homepage