CF

Complete Angular Developer in 2023 Zero to Mastery

27h 28m 36s
English
Paid

Learn Angular step by step with clear examples and simple terms. This course guides you from the basics to real projects so you can build apps with confidence.

What You Will Learn

  • Build apps with Angular 13 and TypeScript, and deploy them to production.
  • Use WebAssembly with Rust to speed up parts of your app.
  • Work with RxJS streams to handle data over time.
  • Set up user accounts and authentication.
  • Build reactive and fast apps with clean patterns.
  • Prepare your app for production and handle real deployments.
  • Use the full Angular toolset from the ground up.
  • Make solid architecture choices and guide a team.
  • Work with routing, directives, pipes, services, and AOT builds.
  • Apply common Angular design patterns.
  • Use Firebase to build front-end and back-end features.
  • Find and fix memory leaks that slow down your app.
  • Add TailwindCSS to style your Angular project.
  • Develop skills that match strong Angular engineers.

About the Author: Zero To Mastery

Zero To Mastery thumbnail

Zero To Mastery (ZTM) is a Toronto-based online coding academy founded by Andrei Neagoie, originally a senior developer at large Canadian tech firms before turning to teaching full-time. The academy's signature is the cohort-based bootcamp track combined with a deep self-paced course library, all aimed at career-changers and self-taught developers preparing to land software-engineering roles at top companies.

The instructor roster has grown well beyond Andrei to include other senior practitioners: Daniel Bourke (machine learning), Aleksa Tešić (DevOps), Jacinto Wong, and others. Courses cover the full software-engineering career path: web development with React and Next.js, Python, machine learning and deep learning, DevOps and cloud, system design, mobile, and the algorithm / data-structure interview prep that gates engineering jobs.

The CourseFlix listing under this source carries over 120 ZTM courses spanning that full range. Material is paid; ZTM itself runs on a monthly / annual membership model. The teaching style favours long-form, project-based courses where students build complete portfolio-quality applications rather than disconnected feature tutorials.

Watch Online 311 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 311 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: What Are We Building?
All Course Lessons (311)
#Lesson TitleDurationAccess
1
What Are We Building? Demo
04:19
2
Join Our Online Classroom!
04:02
3
ZTM Resources
04:24
4
Understanding Frameworks
04:41
5
The Angular CLI
04:09
6
Creating a New Application
03:36
7
Latest Version Of Angular
02:22
8
Starting the server
05:09
9
Reviewing the Configuration Files
07:43
10
Main Entry File
01:26
11
AOT Compilation
05:02
12
Loading a Platform
03:00
13
Bootstrapping Angular
02:48
14
Enabling Production Mode
04:29
15
Understanding Modules
04:01
16
Creating Modules
06:06
17
Understanding Components
01:59
18
Creating Components
06:01
19
External Templates and Styles
06:00
20
Everything else
03:46
21
Introduction to TypeScript
05:10
22
Installing TypeScript
03:46
23
Type Annotations
04:51
24
Variables
04:40
25
Union Types
03:15
26
Arrays
03:01
27
Objects
03:32
28
Interfaces
03:46
29
Classes
03:32
30
Generics
07:42
31
Why Decorators?
04:39
32
TypeScript Configuration
01:57
33
Writing Decorators
07:04
34
Interpolation
07:46
35
Property Binding
03:50
36
Event Binding
06:18
37
Type Assertions
05:38
38
Creating a Component
05:32
39
Custom Properties
06:44
40
Input Aliases
02:46
41
Emitting Events
15:43
42
Content Projection
03:18
43
Discovering Lifecycle Hooks
06:08
44
Exploring More Lifecycle Hooks
10:33
45
Scoped CSS
04:24
46
Understanding Pipes
02:07
47
Pipe Basics
05:43
48
Angular Dev Tools
02:40
49
Pipe Parameters
06:16
50
Dealing with Numbers
07:14
51
Debugging with Pipes
01:51
52
Understanding Directives
02:00
53
The ngClass Directive
05:10
54
The ngStyle Directive
04:12
55
Understanding ng-template
02:12
56
The ngIf Directive
03:51
57
The ngFor directive
05:44
58
Introduction to Master Project
06:03
59
What is Tailwind?
05:37
60
Installing Tailwind
07:16
61
Configuring Tailwind
02:31
62
Practicing with Tailwind
05:26
63
Loading Static Assets
04:42
64
What’s Next?
03:31
65
Creating a User Module
04:36
66
Navigation and Modal Components
05:34
67
Exporting Components
03:25
68
Designing a Modal
02:24
69
Creating a Shared Module
04:10
70
Creating a Reusable Modal
02:49
71
Multi-slot Content Projection
03:13
72
Understanding Services
03:32
73
Creating a Service
01:43
74
Understanding Dependency Injection
05:35
75
Injecting Services
05:12
76
Opening the Modal
05:52
77
Closing the Modal
03:10
78
Understanding Singletons
03:47
79
Creating an ID System
05:46
80
Refactoring the Service
05:06
81
Updating the Components
04:47
82
Memory Leaks
06:03
83
Fixing the memory leak
04:47
84
CSS Issues
05:50
85
Creating a Tabs Component
06:05
86
The ContentChildren Decorator
05:41
87
The QueryList Object
03:23
88
Looping through the Tabs
03:21
89
Setting an Active Tab
07:08
90
Toggling Tabs
04:18
91
Preventing the Default Behavior
02:00
92
Preparing the Forms
05:44
93
Registering a new Form
04:16
94
Adding Form Controls
03:16
95
Binding a Form
03:07
96
Form Validation
07:12
97
Understanding Errors
04:17
98
Handling Errors
05:17
99
Form Controller Status
05:51
100
Designing an Input Component
03:51
101
Binding Form Controls
08:25
102
Updating the Template
06:29
103
Validating Emails
06:50
104
Validating Numbers
05:58
105
Validating Passwords with Patterns
06:01
106
Input Masking
05:54
107
Applying Input Masking
06:06
108
Disabling Buttons
05:12
109
Handling Form Submission
02:50
110
Designing an Alert Component
10:14
111
Importing the FormsModule
02:23
112
Registering a new Form
04:05
113
Two-way Binding
06:39
114
Template Variables
05:47
115
Attribute Validation
03:25
116
Handling Error Messages
03:42
117
Preparing the Password Field
04:14
118
Handling Form Submission
04:50
119
Exercise: Imposter Syndrome
02:57
120
Introduction to RxJS
06:03
121
Observables
05:22
122
Observers
04:21
123
Pushing Asynchronous Values
03:40
124
Unsubscribing from Observables
03:34
125
Declarative Programming with Operators
05:48
126
Timing Operators
05:26
127
DOM Event Operators
02:16
128
The of and from operators
05:55
129
Understanding Pipeable Operators
04:03
130
The Map Operator
04:06
131
Marble Diagram
02:44
132
Pluck Operator
03:40
133
Filter Operator
06:12
134
Reduce Operator
04:04
135
Take Operator
04:17
136
Tap Operator
03:28
137
Understanding Flattening Operators
07:02
138
mergeMap Operator
06:16
139
switchMap Operator
04:42
140
concatMap Operator
02:29
141
exhaustMap Operator
02:33
142
Flattening Operators Recap
02:22
143
Setting up Firebase
07:09
144
Reviewing the Rules
06:15
145
Installing AngularFire
03:59
146
Importing AngularFire
06:59
147
User Registration
07:55
148
Handling the Response
08:38
149
Buckets, Collections, and Documents
03:18
150
Storing User Data
06:33
151
Refactoring to a Service
06:19
152
Interfaces vs. Classes
07:52
153
Collection Types
06:21
154
Connecting the User with their Data
10:09
155
Database Rules
02:40
156
Understanding Authentication
04:14
157
Authentication after Registration
03:20
158
The User Observable
05:53
159
The Async Pipe
07:38
160
Initializing Firebase First
09:33
161
Setting up the Login
09:26
162
Destroying the Modal
06:08
163
The Delay Operator
04:06
164
Signing Out
04:27
165
Sidebar: JSON Web Tokens
09:32
166
Creating a Validator Class
03:57
167
Static Methods
03:19
168
Validating Passwords
06:13
169
Factory Functions
06:17
170
Handling Errors
06:04
171
Creating an Asynchronous Validator
05:27
172
Validating Unique Emails
05:25
173
Finalizing the Validator
07:28
174
Understanding Routing
05:30
175
Configuring the Router
05:50
176
Registering Routes
07:01
177
Exercise: Registering a Route
03:40
178
Adding Navigation Links
03:13
179
Active Links
06:46
180
Generating a Routing Module
05:57
181
Forcing Redirection
04:41
182
A Quick Refactor
03:29
183
Adding Route Data
05:25
184
Filtering Router Events
04:35
185
Retrieving Data Outside of the Outlet
07:43
186
Exercise: Registering a Route with Data
04:37
187
Route Parameters
06:54
188
Subscribing to Route Parameters
04:36
189
Query Parameters
09:30
190
Learning More About Query Parameters
08:43
191
Selecting an Option
01:48
192
Wildcard Routes
05:07
193
Updating Routes
03:50
194
Route Guards
05:52
195
Understanding File Uploads
03:25
196
Blocking Events with Directives
09:02
197
Handling Drag and Drop Events
07:10
198
Handling Files
07:55
199
Multi Step Form
04:30
200
The Upload Form
09:13
201
Uploading Files with Firebase
06:55
202
Firebase Rules and Validation
07:24
203
Adding an Alert Component
05:16
204
Upload Progress Observable
03:47
205
Handling Errors and Successful Uploads
10:23
206
Storing the File Data
08:30
207
Adding the File Data to the Database
08:13
208
Firebase References and Snapshots
02:23
209
Disabling Forms
02:49
210
Fallback Upload
06:19
211
Canceling Uploads
05:47
212
Redirection after Upload
06:25
213
Storing a Timestamp
04:39
214
Querying the Database
08:54
215
Storing the List of Clips
07:21
216
Displaying the List of Clips
02:13
217
Preparing the Form
07:06
218
Passing on the Clip Data
03:28
219
Binding the Edit Form
06:33
220
Updating Clips
09:18
221
Updating the List of Clips
07:00
222
Deleting a Clip from the Storage/Database
10:02
223
Sorting Clips with Behavior Subjects
11:06
224
Composite Indexes
04:33
225
What is WebAssembly?
08:53
226
Getting Started with Rust
06:18
227
Exploring the Starter Project
06:47
228
Variables
05:15
229
Data Types
06:47
230
Debugging with Macros
06:52
231
Control Flow
04:39
232
Match Expressions
07:49
233
Arrays
02:50
234
Vectors
05:19
235
Structures
04:07
236
Ownership
06:49
237
Results
08:20
238
Preparing the Project
03:41
239
Installing Webpack
03:40
240
Configuring Webpack
10:06
241
Reading Files
08:10
242
Compiling Rust with Webpack
04:48
243
Importing Web Assembly
05:43
244
Logging Files
09:15
245
Base64 Decoding
03:08
246
Loading an Image from Memory
03:23
247
Grayscaling an Image
02:58
248
Buffering an Image
04:20
249
Encoding an Image
05:40
250
App Deployment
04:06
251
Understanding FFmpeg
02:45
252
Installing FFmpeg
05:01
253
Custom Asset Paths
05:27
254
Adding support for SharedArrayBuffer
06:46
255
Loading FFmpeg with a Service
04:12
256
Initializing FFMPeg
06:47
257
Saving Files in Memory
05:46
258
Generating a Screenshot
11:01
259
Generating Multiple Screenshots
05:10
260
Creating Screenshot URLs
05:48
261
Bypassing Sanitization with Pipes
08:25
262
Adding Feedback
03:40
263
Selecting a Screenshot
04:16
264
Updating the Firebase Storage Rules
02:03
265
Uploading a Blob
06:32
266
Recalculating the Upload Progress
04:48
267
The forkJoin Operator
07:23
268
Deleting Screenshots
03:46
269
Section Overview
01:44
270
Creating a List Component
01:48
271
Handling Scroll Events
07:41
272
Querying for Clips
10:39
273
Rendering Clips on the Home page
04:51
274
Understanding Cross Origin Issues
03:44
275
Fixing Cross Origin Issues
08:10
276
Fixing the Timestamp
08:16
277
Rendering Clips on the Clip Page
03:31
278
Installing Videojs
01:38
279
Selecting elements with the ViewChild Decorator
05:59
280
Initializing the Video Player
02:03
281
Styles without View Encapsulation
05:17
282
Tailwind’s Aspect Ratio Classes
01:27
283
Resolving Data with a Guard
08:10
284
Dynamically Rendering the Video
07:03
285
Fixing the Manage Page
01:05
286
Copying Links to the Clipboard
06:05
287
Lazy Loading Modules
06:32
288
Production Budgets
03:28
289
Modifying Firebase Rules
03:43
290
Deploying an App with Vercel
10:45
291
Introduction to Testing
11:21
292
Understanding Karma and Jasmine
08:14
293
Preparing our App for Testing
02:57
294
Writing a Sanity Test
06:02
295
Angular’s Test Bed Utility
05:56
296
Testing a Component’s Instance
06:28
297
Querying the Component’s Template
06:40
298
Inverting Matchers
03:11
299
Testing Nested Components
04:42
300
Testing Content Projection
06:25
301
Custom Matcher Error Messages
02:31
302
Mocking Services
06:33
303
Overriding a Dependency
02:45
304
Importing the Router Testing Module
02:00
305
Exercise: Testing the Logout Link
03:06
306
Simulating DOM Events
04:00
307
Installing Cypress
06:10
308
Exploring Cypress
06:05
309
Writing an E2E Sanity Test
06:05
310
Testing the Video Player
08:53
311
Thank You!
01:18
Unlock unlimited learning

Get instant access to all 310 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Books

Read Book Complete Angular Developer in 2023 Zero to Mastery

#TitleTypeOpen
1Book 1 PDF

Related courses

Frequently asked questions

What are the prerequisites for this course?
The course is designed for beginners and does not assume prior knowledge of Angular or TypeScript. However, a basic understanding of HTML, CSS, and JavaScript is recommended to grasp the foundational concepts more easily. The course covers TypeScript installation and configuration, which can help if you're new to that language.
What projects will I build during the course?
You will build several projects, including applications that incorporate user authentication, data handling with RxJS streams, and production-ready deployments. The course also includes a master project that utilizes TailwindCSS for styling, allowing you to apply the skills learned throughout the lessons.
Who is the target audience for this course?
The course is ideal for anyone looking to become a proficient Angular developer, from beginners to those with some experience in web development. It is particularly useful for individuals aiming to build robust, production-ready applications using Angular 13 and TypeScript.
What specific tools and platforms are covered in this course?
The course covers a range of tools and platforms, including the Angular CLI for project setup, RxJS for data handling, and Firebase for both front-end and back-end features. Additionally, it addresses the use of TailwindCSS for styling and WebAssembly with Rust to optimize app performance.
How does this course prepare you for real-world Angular development?
By teaching you to build reactive and fast applications, this course prepares you for real-world Angular development. It covers clean architecture patterns, the full Angular toolset, and common design patterns. You'll also learn to handle real deployments and find and fix memory leaks, which are critical skills in professional environments.
What topics are not covered in this course?
While the course covers a comprehensive range of Angular-related topics, it does not delve into other JavaScript frameworks, such as React or Vue.js. It also does not cover server-side programming in depth beyond Firebase integrations.
What is the time commitment for completing the course?
The course consists of 311 lessons, with varying lengths. Given the extensive material covered, including practical projects and detailed explanations, students should expect to invest a significant amount of time to thoroughly understand and apply the concepts taught.