Angular - The Complete Guide (2023 Edition)

34h 58m 7s
English
Paid
February 29, 2024

Angular 9 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.

More

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

Angular 9 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.

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 9 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 9) 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!

Who this course is for:
  • Newcomer as well as experienced frontend developers interested in learning a modern JavaScript framework
  • This course is for everyone interested in learning a state-of-the-art frontend JavaScript framework
  • Taking this course will enable you to be amongst the first to gain a very solid understanding of Angular

Watch Online Angular - The Complete Guide (2023 Edition)

Join premium to watch
Go to premium
# Title Duration
1 Course Introduction 00:58
2 What is Angular? 02:01
3 Angular vs Angular 2 vs Latest Angular Version 02:56
4 Project Setup and First App 08:50
5 Editing the First App 10:06
6 The Course Structure 04:01
7 How to get the Most out of the Course 02:26
8 What is TypeScript? 02:10
9 A Basic Project Setup using Bootstrap for Styling 04:28
10 Module Introduction 00:58
11 How an Angular App gets Loaded and Started 07:12
12 Components are Important! 03:10
13 Creating a New Component 06:52
14 Understanding the Role of AppModule and Component Declaration 05:16
15 Using Custom Components 01:13
16 Creating Components with the CLI & Nesting Components 03:52
17 Working with Component Templates 03:09
18 Working with Component Styles 04:03
19 Fully Understanding the Component Selector 03:51
20 [OPTIONAL] Assignment Solution 06:43
21 What is Databinding? 02:50
22 String Interpolation 05:20
23 Property Binding 06:35
24 Property Binding vs String Interpolation 03:08
25 Event Binding 04:10
26 Passing and Using Data with Event Binding 04:38
27 Two-Way-Databinding 02:48
28 Combining all Forms of Databinding 01:47
29 [OPTIONAL] Assignment Solution 05:13
30 Understanding Directives 02:18
31 Using ngIf to Output Data Conditionally 03:54
32 Enhancing ngIf with an Else Condition 02:47
33 Styling Elements Dynamically with ngStyle 05:03
34 Applying CSS Classes Dynamically with ngClass 02:54
35 Outputting Lists with ngFor 03:44
36 [OPTIONAL] Assignment Solution 07:07
37 Getting the Index when using ngFor 02:53
38 Project Introduction 01:05
39 Planning the App 05:35
40 Setting up the Application 04:32
41 Creating the Components 09:34
42 Using the Components 03:16
43 Adding a Navigation Bar 05:10
44 Creating a "Recipe" Model 04:34
45 Adding Content to the Recipes Components 07:42
46 Outputting a List of Recipes with ngFor 04:38
47 Displaying Recipe Details 05:54
48 Working on the ShoppingListComponent 01:51
49 Creating an "Ingredient" Model 02:37
50 Creating and Outputting the Shopping List 02:28
51 Adding a Shopping List Edit Section 03:29
52 Wrap Up & Next Steps 00:55
53 Understanding Angular Error Messages 04:37
54 Debugging Code in the Browser Using Sourcemaps 05:33
55 Module Introduction 00:37
56 Splitting Apps into Components 05:57
57 Property & Event Binding Overview 01:45
58 Binding to Custom Properties 05:44
59 Assigning an Alias to Custom Properties 02:00
60 Binding to Custom Events 09:06
61 Assigning an Alias to Custom Events 00:58
62 Custom Property and Event Binding Summary 02:03
63 Understanding View Encapsulation 05:00
64 More on View Encapsulation 02:44
65 Using Local References in Templates 04:37
66 Getting Access to the Template & DOM with @ViewChild 05:03
67 Projecting Content into Components with ng-content 03:23
68 Understanding the Component Lifecycle 04:55
69 Seeing Lifecycle Hooks in Action 11:56
70 Lifecycle Hooks and Template Access 02:34
71 Getting Access to ng-content with @ContentChild 03:01
72 Wrap Up 00:50
73 [OPTIONAL] Assignment Solution 12:22
74 Introduction 00:51
75 Adding Navigation with Event Binding and ngIf 07:32
76 Passing Recipe Data with Property Binding 04:44
77 Passing Data with Event and Property Binding (Combined) 10:33
78 Allowing the User to Add Ingredients to the Shopping List 07:23
79 Module Introduction 01:24
80 ngFor and ngIf Recap 03:37
81 ngClass and ngStyle Recap 02:58
82 Creating a Basic Attribute Directive 06:43
83 Using the Renderer to build a Better Attribute Directive 07:05
84 Using HostListener to Listen to Host Events 03:01
85 Using HostBinding to Bind to Host Properties 03:18
86 Binding to Directive Properties 06:44
87 What Happens behind the Scenes on Structural Directives 03:05
88 Building a Structural Directive 06:15
89 Understanding ngSwitch 02:50
90 Building and Using a Dropdown Directive 06:26
91 Module Introduction 01:41
92 Why would you Need Services? 02:05
93 Creating a Logging Service 03:33
94 Injecting the Logging Service into Components 06:22
95 Creating a Data Service 06:42
96 Understanding the Hierarchical Injector 02:42
97 How many Instances of Service Should It Be? 02:13
98 Injecting Services into Services 05:14
99 Using Services for Cross-Component Communication 04:08
100 [OPTIONAL] Assignment Solution 09:38
101 Introduction 01:24
102 Setting up the Services 01:16
103 Managing Recipes in a Recipe Service 04:08
104 Using a Service for Cross-Component Communication 05:08
105 Adding the Shopping List Service 05:05
106 Using Services for Pushing Data from A to B 03:09
107 Adding Ingredients to Recipes 03:43
108 Passing Ingredients from Recipes to the Shopping List (via a Service) 07:04
109 Module Introduction 01:27
110 Why do we need a Router? 01:17
111 Setting up and Loading Routes 08:03
112 Navigating with Router Links 05:19
113 Understanding Navigation Paths 04:55
114 Styling Active Router Links 05:02
115 Navigating Programmatically 03:29
116 Using Relative Paths in Programmatic Navigation 05:10
117 Passing Parameters to Routes 03:11
118 Fetching Route Parameters 04:02
119 Fetching Route Parameters Reactively 07:26
120 An Important Note about Route Observables 02:43
121 Passing Query Parameters and Fragments 05:54
122 Retrieving Query Parameters and Fragments 03:17
123 Practicing and some Common Gotchas 06:08
124 Setting up Child (Nested) Routes 04:29
125 Using Query Parameters - Practice 05:37
126 Configuring the Handling of Query Parameters 01:51
127 Redirecting and Wildcard Routes 04:37
128 Outsourcing the Route Configuration 04:41
129 An Introduction to Guards 01:46
130 Protecting Routes with canActivate 08:56
131 Protecting Child (Nested) Routes with canActivateChild 02:53
132 Using a Fake Auth Service 01:44
133 Controlling Navigation with canDeactivate 12:29
134 Passing Static Data to a Route 05:57
135 Resolving Dynamic Data with the resolve Guard 09:54
136 Understanding Location Strategies 04:44
137 Wrap Up 00:52
138 Planning the General Structure 01:37
139 Setting Up Routes 07:59
140 Adding Navigation to the App 01:42
141 Marking Active Routes 01:32
142 Fixing Page Reload Issues 02:52
143 Child Routes: Challenge 01:55
144 Adding Child Routing Together 04:22
145 Configuring Route Parameters 06:23
146 Passing Dynamic Parameters to Links 03:02
147 Styling Active Recipe Items 01:16
148 Adding Editing Routes 03:45
149 Retrieving Route Parameters 03:20
150 Programmatic Navigation to the Edit Page 04:47
151 One Note about Route Observables 00:53
152 Module Introduction 04:26
153 Analyzing Angular Observables 02:16
154 Getting Closer to the Core of Observables 06:51
155 Building a Custom Observable 04:47
156 Errors & Completion 06:40
157 Observables & You! 01:56
158 Understanding Operators 08:41
159 Subjects 08:18
160 Wrap Up 01:16
161 Improving the Reactive Service with Observables (Subjects) 06:05
162 Module Introduction 01:20
163 Why do we Need Angular's Help? 02:22
164 Template-Driven (TD) vs Reactive Approach 01:17
165 An Example Form 01:33
166 TD: Creating the Form and Registering the Controls 05:43
167 TD: Submitting and Using the Form 06:16
168 TD: Understanding Form State 02:30
169 TD: Accessing the Form with @ViewChild 03:04
170 TD: Adding Validation to check User Input 04:15
171 TD: Using the Form State 04:28
172 TD: Outputting Validation Error Messages 02:24
173 TD: Set Default Values with ngModel Property Binding 02:17
174 TD: Using ngModel with Two-Way-Binding 02:49
175 TD: Grouping Form Controls 03:31
176 TD: Handling Radio Buttons 03:28
177 TD: Setting and Patching Form Values 04:43
178 TD: Using Form Data 04:45
179 TD: Resetting Forms 01:49
180 Introduction to the Reactive Approach 00:41
181 Reactive: Setup 02:27
182 Reactive: Creating a Form in Code 04:08
183 Reactive: Syncing HTML and Form 03:59
184 Reactive: Submitting the Form 02:16
185 Reactive: Adding Validation 02:52
186 Reactive: Getting Access to Controls 03:48
187 Reactive: Grouping Controls 03:47
188 Reactive: Arrays of Form Controls (FormArray) 07:32
189 Reactive: Creating Custom Validators 06:12
190 Reactive: Using Error Codes 03:21
191 Reactive: Creating a Custom Async Validator 04:39
192 Reactive: Reacting to Status or Value Changes 02:12
193 Reactive: Setting and Patching Values 02:10
194 [OPTIONAL] Assignment Solution 13:49
195 Introduction 01:00
196 TD: Adding the Shopping List Form 03:44
197 Adding Validation to the Form 02:23
198 Allowing the Selection of Items in the List 04:25
199 Loading the Shopping List Items into the Form 03:03
200 Updating existing Items 03:16
201 Resetting the Form 02:35
202 Allowing the the User to Clear (Cancel) the Form 01:17
203 Allowing the Deletion of Shopping List Items 02:53
204 Creating the Template for the (Reactive) Recipe Edit Form 05:01
205 Creating the Form For Editing Recipes 05:07
206 Syncing HTML with the Form 03:53
207 Adding Ingredient Controls to a Form Array 05:40
208 Adding new Ingredient Controls 03:40
209 Validating User Input 05:11
210 Submitting the Recipe Edit Form 07:31
211 Adding a Delete and Clear (Cancel) Functionality 04:48
212 Redirecting the User (after Deleting a Recipe) 01:48
213 Adding an Image Preview 01:49
214 Providing the Recipe Service Correctly 02:00
215 Deleting Ingredients and Some Finishing Touches 03:35
216 Introduction & Why Pipes are Useful 02:03
217 Using Pipes 03:29
218 Parametrizing Pipes 02:11
219 Where to learn more about Pipes 01:57
220 Chaining Multiple Pipes 02:21
221 Creating a Custom Pipe 06:43
222 Parametrizing a Custom Pipe 02:37
223 Example: Creating a Filter Pipe 07:02
224 Pure and Impure Pipes (or: How to "fix" the Filter Pipe) 04:47
225 Understanding the "async" Pipe 04:05
226 A New IDE 00:44
227 Module Introduction 01:07
228 How Does Angular Interact With Backends? 03:10
229 The Anatomy of a Http Request 02:28
230 Backend (Firebase) Setup 02:36
231 Sending a POST Request 10:12
232 GETting Data 02:57
233 Using RxJS Operators to Transform Response Data 04:00
234 Using Types with the HttpClient 05:08
235 Outputting Posts 02:16
236 Showing a Loading Indicator 02:04
237 Using a Service for Http Requests 06:38
238 Services & Components Working Together 03:29
239 Sending a DELETE Request 03:28
240 Handling Errors 06:39
241 Using Subjects for Error Handling 02:40
242 Using the catchError Operator 02:14
243 Error Handling & UX 02:08
244 Setting Headers 03:19
245 Adding Query Params 04:02
246 Observing Different Types of Responses 07:33
247 Changing the Response Body Type 03:17
248 Introducing Interceptors 07:25
249 Manipulating Request Objects 02:33
250 Response Interceptors 02:47
251 Multiple Interceptors 04:53
252 Wrap Up 01:58
253 Module Introduction 00:56
254 Backend (Firebase) Setup 02:04
255 Setting Up the DataStorage Service 05:33
256 Storing Recipes 06:40
257 Fetching Recipes 05:39
258 Transforming Response Data 04:18
259 Resolving Data Before Loading 07:32
260 Fixing a Bug with the Resolver 01:44
261 Module Introduction 00:53
262 How Authentication Works 05:02
263 Adding the Auth Page 06:45
264 Switching Between Auth Modes 04:03
265 Handling Form Input 03:45
266 Preparing the Backend 03:16
267 Preparing the Signup Request 08:25
268 Sending the Signup Request 04:37
269 Adding a Loading Spinner & Error Handling Logic 06:35
270 Improving Error Handling 05:40
271 Sending Login Requests 06:01
272 Login Error Handling 04:30
273 Creating & Storing the User Data 10:18
274 Reflecting the Auth State in the UI 09:42
275 Adding the Token to Outgoing Requests 10:16
276 Attaching the Token with an Interceptor 08:49
277 Adding Logout 03:19
278 Adding Auto-Login 09:56
279 Adding Auto-Logout 07:40
280 Adding an Auth Guard 10:57
281 Wrap Up 01:56
282 Module Introduction 01:10
283 Adding an Alert Modal Component 07:34
284 Understanding the Different Approaches 02:29
285 Using ngIf 03:06
286 Preparing Programmatic Creation 08:28
287 Creating a Component Programmatically 04:47
288 Understanding entryComponents 05:07
289 Data Binding & Event Binding 05:06
290 Wrap Up 01:26
291 Module Introduction 00:42
292 What are Modules? 02:27
293 Analyzing the AppModule 06:25
294 Getting Started with Feature Modules 09:00
295 Splitting Modules Correctly 04:10
296 Adding Routes to Feature Modules 04:36
297 Component Declarations 01:59
298 The ShoppingList Feature Module 04:28
299 Understanding Shared Modules 08:11
300 Understanding the Core Module 05:49
301 Adding an Auth Feature Module 04:23
302 Understanding Lazy Loading 02:53
303 Implementing Lazy Loading 12:21
304 More Lazy Loading 03:03
305 Preloading Lazy-Loaded Code 03:40
306 Modules & Services 05:47
307 Loading Services Differently 08:25
308 Module Introduction 00:53
309 Deployment Preparation & Steps 03:19
310 Using Environment Variables 04:45
311 Deployment Example: Firebase Hosting 09:02
312 Module Introduction 01:28
313 Starting Setup & Why We Want Standalone Components 04:49
314 Building a First Standalone Component 09:50
315 Standalone Directives & Connecting Building Blocks 02:20
316 Migrating Another Component 01:50
317 A Standalone Root Component 04:21
318 Services & Standalone Components 04:00
319 Routing with Standalone Components 06:37
320 Lazy Loading 08:05
321 Summary 01:57
322 Module Introduction 01:09
323 Signals: What & Why? 05:41
324 Creating a New Signal 03:24
325 Updating a Signal Value 02:35
326 Reading & Outputting a Signal Value 02:12
327 Signal Updating: set(), update() & mutate() 06:13
328 Important: Signals are NOT Finished Yet! 01:03
329 Computed Values & Effects 03:49
330 Module Summary 00:56
331 Module Introduction 00:58
332 What Is NgRx? 02:10
333 Understanding NgRx & Its Building Blocks 03:59
334 Project Setup & Installing NgRx 05:13
335 Adding a First Reducer & Store Setup 08:36
336 An Alternative Way Of Creating Reducers 04:20
337 Reading Data From The Store 09:37
338 Introducing Actions & State Changing Reducers 07:50
339 Dispatching Actions 03:42
340 Attaching Data To Actions 04:21
341 Handling Actions Without createReducer 06:02
342 An Alternative Way Of Defining Actions 10:03
343 Time To Practice: A Second Action 05:29
344 Exploring Selectors 08:18
345 Introducing Effects 02:40
346 Installing the Effects Package 02:04
347 Defining a First Effect 08:41
348 The Old @Effect Decorator & Registering Effects 03:44
349 Using Store Data In Effects 03:25
350 Adding a Second Effect 09:59
351 Summary 03:03
352 Getting Started with Reducers 06:45
353 Adding Logic to the Reducer 05:48
354 Understanding & Adding Actions 06:17
355 Setting Up the NgRx Store 04:49
356 Selecting State 08:52
357 Dispatching Actions 07:10
358 Multiple Actions 09:38
359 Preparing Update & Delete Actions 03:10
360 Updating & Deleting Ingredients 11:01
361 Expanding the State 09:18
362 Managing More State via NgRx 09:53
363 Removing Redundant Component State Management 03:33
364 First Summary & Clean Up 05:26
365 One Root State 11:40
366 Setting Up Auth Reducer & Actions 08:26
367 Dispatching Auth Actions 05:54
368 Auth Finished (For Now...) 06:44
369 And Important Note on Actions 06:25
370 Exploring NgRx Effects 03:39
371 Defining the First Effect 05:20
372 Effects & Error Handling 08:58
373 Login via NgRx Effects 09:09
374 Managing UI State in NgRx 07:31
375 Finishing the Login Effect 07:12
376 Preparing Other Auth Actions 04:10
377 Adding Signup 06:18
378 Further Auth Effects 06:14
379 Adding Auto-Login with NgRx 08:17
380 Adding Auto-Logout 06:32
381 Finishing the Auth Effects 02:30
382 Using the Store Devtools 06:21
383 The Router Store 02:12
384 Getting Started with NgRx for Recipes 11:04
385 Fetching Recipe Detail Data 09:15
386 Fetching Recipes & Using the Resolver 12:01
387 Fixing the Auth Redirect 02:11
388 Update, Delete and Add Recipes 15:12
389 Storing Recipes via Effects 05:53
390 Cleanup Work 01:59
391 Wrap Up 02:13
392 Module Introduction 00:34
393 Angular Universal - What & Why? 07:50
394 Converting the App to a Universal App 03:13
395 Analyzing & Running Server-side Code 05:23
396 A Closer Look At The Server-side Code 04:11
397 Integrating a REST API 03:08
398 Some Notes About Deploying Angular Universal Apps 04:31
399 Introduction 01:04
400 Setting up the Starting Project 00:53
401 Animations Triggers and State 07:13
402 Switching between States 02:05
403 Transitions 01:55
404 Advanced Transitions 05:23
405 Transition Phases 03:58
406 The "void" State 06:12
407 Using Keyframes for Animations 05:33
408 Grouping Transitions 02:12
409 Using Animation Callbacks 02:39
410 Module Introduction 02:10
411 Adding Service Workers 12:42
412 Caching Assets for Offline Use 05:29
413 Caching Dynamic Assets & URLs 07:03
414 Introduction 01:19
415 Why Unit Tests? 02:13
416 Analyzing the Testing Setup (as created by the CLI) 08:02
417 Running Tests (with the CLI) 02:00
418 Adding a Component and some fitting Tests 06:15
419 Testing Dependencies: Components and Services 06:56
420 Simulating Async Tasks 09:42
421 Using "fakeAsync" and "tick" 02:15
422 Isolated vs Non-Isolated Tests 06:11
423 Module Introduction 01:45
424 A Closer Look at "ng new" 05:19
425 IDE & Project Setup 02:32
426 Understanding the Config Files 09:02
427 Important CLI Commands 05:26
428 The "angular.json" File - A Closer Look 11:19
429 Angular Schematics - An Introduction 01:42
430 The "ng add" Command 04:32
431 Using Custom "ng generate" Schematics 03:06
432 Smooth Updating of Projects with "ng update" 02:15
433 Simplified Deployment with "ng deploy" 05:47
434 Understanding "Differential Loading" 05:11
435 Managing Multiple Projects in One Folder 04:36
436 Angular Libraries - An Introduction 02:52
437 Wrap Up 01:28
438 A First Look At Angular Elements 15:35
439 Thanks for being part of the course! 00:56
440 Module Introduction 01:16
441 What & Why? 06:33
442 Installing & Using TypeScript 06:23
443 Base Types & Primitives 03:56
444 Array & Object Types 05:34
445 Type Inference 02:48
446 Working with Union Types 02:49
447 Assigning Type Aliases 02:43
448 Diving into Functions & Function Types 05:13
449 Understanding Generics 07:21
450 Classes & TypeScript 07:59
451 Working with Interfaces 05:37
452 Configuring the TypeScript Compiler 02:30

Similar courses to Angular - The Complete Guide (2023 Edition)

PROFESSIONAL Full Stack Developer

PROFESSIONAL Full Stack Developeramigoscode (Nelson Djalo)

Duration 54 hours 23 minutes 35 seconds
Angular - The Complete Guide

Angular - The Complete GuideAcademind Pro

Duration 26 hours 25 minutes 26 seconds
Build Fullstack Trello clone: WebSocket, Socket IO

Build Fullstack Trello clone: WebSocket, Socket IOudemy

Duration 8 hours 49 minutes 48 seconds
Full Stack: Angular and Spring Boot

Full Stack: Angular and Spring Bootudemy

Duration 25 hours 49 minutes 54 seconds