Complete Angular Developer in 2023: Zero to Mastery

Complete Angular Developer in 2023: Zero to Mastery

English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 322 lectures (27h 24m) | 7.93 GB

Get job ready with Angular! Master the latest version of Angular and learn to build large scale apps that set you apart

Using the latest version of Angular, this course is focused on efficiency and turning you into a professional Angular developer. Never spend time on confusing, out of date, incomplete tutorials anymore! Graduates of Andrei’s courses are now working at Google, Tesla, Amazon, Apple, IBM, JP Morgan, Facebook (Meta), + other top tech companies for a reason.

We guarantee you this is the most comprehensive online resource on Angular. This project based course will introduce you to all of the modern toolchain of an Angular (formally AngularJS/Angular.js) developer in 2023. Along the way, we will build a massive video sharing application using Angular, TypeScript, WebAssembly, Rust, RxJS, TailwindCSS, Firebase and much more! This is going to be a Fullstack app. We will also build other mini projects along the way so you feel confident deploying any Angular project to production in the future by yourself!

All code is going to be provided step by step and even if you don’t like to code along, you will get access to all the code from the projects we build so anyone signed up for the course will have their own project to put on their portfolio right away.

Finally, this course will be constantly evolving and updating as the landscape changes. Just as the Angular ecosystem evolves, we want this course to be constantly updated with lectures and resource for you to come back to, in order to find the latest Angular best practices anytime in the future.

Here is what the course will cover:

1. BOOTSTRAPPING ANGULAR – In this section, we’ll explore how an Angular application is bootstrapped on the browser. Unlike other frameworks, Angular gives developers a lot of boilerplate for a starter project. How does Angular load an application? What is ahead-of-time compilation? What are platforms? These are the types of questions that’ll be answered in this section along with an introduction to modules and components.

2. (Optional) TYPESCRIPT – In this section, students will learn the fundamentals of TypeScript. While optional, Angular is heavily written with TypeScript. The goal of this section is to get you up to speed on TypeScript for Angular development. Topics include type annotations, type inference, generics, interfaces, and decorators.

3. COMPONENT FUNDAMENTALS – In this section, we’ll explore components in-depth. Components are considered the building blocks of an application. They’re a feature for teaching browsers new HTML tags. We’ll start from the basics of property binding and work our way up to topics like inputs/outputs, content projection, and lifecycle hooks.

4. TRANSFORMING CONTENT – In this section, we’ll take the next step of working with components by discovering directives and pipes. They’re a feature for transforming the output of content whether it’s through appearance or behavior. Angular ships dozens of pipes and directives, most of which will be covered.

5. MASTER PROJECT: COMPONENT DESIGN – In this section, we will finally start working on the master project for this course. We’re going to be building a video-sharing application for gamers! Building large-scale applications can be challenging. You’ll learn how to structure an application by utilizing common design patterns for components. Concepts such as services, singletons, multi-slot content projection, dealing with memory leaks, and TailwindCSS integration are discussed in this section.

6. MASTER PROJECT: REACTIVE FORMS – In this section, we’ll start working on registering accounts with reactive forms. Forms can be tricky to deal with. Angular ships a module for helping us deal with validating, submitting, and rendering forms. This section will focus on dealing with forms in Angular.

7. MASTER PROJECT: TEMPLATE FORMS – In this section, we’ll look at an alternative module for working with forms called template forms. We’ll talk about the differences between template forms and reactive forms. By the end, you’ll have a good idea of when to use either module system.

8. INTRO TO RXJS – In this section, we’ll learn about RXJS for helping us deal with asynchronous operations. RXJS is a library that helps us deal with streams of data and feed it into various components. In some cases, you may need to subscribe to multiple sources of data. With RxJS, we can easily simplify the flow of data from beginning to end.

9. MASTER PROJECT: AUTHENTICATION – In this section, we’ll revisit our master project to add authentication. Behind the scenes, we’ll integrate Firebase to help us store user data, handle tokens, and authenticate users. Lastly, we’ll use RxJS to help us handle the response from Firebase.

10. MASTER PROJECT: CUSTOM VALIDATORS – In this lecture, we’re going to revisit forms to handle custom validation. Synchronous and asynchronous validation is supported in Angular. This will get us into a design pattern called factory functions for creating dynamic validators. Most importantly, we’ll learn how to handle custom errors.

11. MASTER PROJECT: ROUTING – In this section, we’ll learn how routing will open the door for organizing our project into separate pages/components. Under the hood, Angular leverages the history API for boosting the performance of the app by preventing the browser from re-downloading assets on navigation. Angular is packed with features support parameters, queries, wildcards, generating links, redirection and so much more.

12. MASTER PROJECT: UPLOADING FILES – In this section, we’re going to start uploading files to Firebase. It’s vital we validate files with Firebase. We don’t want users to accidentally download a malicious file when watching videos. We’ll cover how to enforce validation with Firebase rules. After doing so, we’ll store additional information in a database. We’ll even cover how to implement a fallback solution in case drag n drop is not available.

13. WEBASSEMBLY & RUST – In this section, we’ll step away from the master project to discuss WebAssembly and Rust. WebAssembly is a new technology for interacting with the user’s hardware from the browser. It won’t be long before WebAssembly becomes a common skill amongst developers. Get ahead of the curve by learning how it can help us bring desktop experiences to the browser. Don’t worry if you don’t have any experience with systems programming, this section is designed to be as friendly as possible to beginners.

14. MASTER PROJECT: PROCESSING VIDEOS WITH FFMPEG – In this section, we’ll get back into the master project to process videos with FFmpeg. FFmpeg is a tool for interacting with audio and video files. Our knowledge of WebAssembly will come in handy since FFmpeg is not a JavaScript library but a CLI tool. Additional topics include bypassing sanitization, working with blobs, and learning a new RxJS operator.

15. MASTER PROJECT: PLAYING VIDEOS – In this section, we’re going to finalize our app by playing videos with the popular Video.js library. Users will be able to search through uploads with infinite scrolling. Lastly, we’ll run into CORS issues, which is notorious for confusing developers. Learn why CORS errors appear when embedding content.

16. MASTER PROJECT: DEPLOYMENT & PRODUCTION- In this section, we’ll share our project with the world by deploying the App with Vercel. Final adjustments are made to the build such as updating the Firebase rules and updating budgets.

This course is not about making you just code along without understanding the principles so that when you are done with the course you don’t know what to do other than watch another tutorial. No! This course will push you and challenge you to go from an absolute beginner in Angular to someone that is in the top 10% of Angular web developers.

We guarantee you this is the most comprehensive online course on Angular! Have a look at the course outline video to see all the topics we are going to cover, all the projects we’re going to build, and all the techniques you’re going to learn to become a top Angular developer!

What you’ll learn

  • Build enterprise level Angular and TypeScript applications to deploy to production
  • Learn to lead Angular projects by making good architecture decisions and helping others on your team
  • Use WebAssembly and Rust in your applications to improve performance and combine with the power of Angular
  • Learn the latest features in Angular: Routing, Directives, Pipes, Services, Ahead of time Compilation + much more
  • Use RxJS and Streams in your applications
  • Master Angular Design Patterns
  • Set up authentication and user accounts
  • Use Firebase to build full stack applications
  • Learn to build reactive, performant, large scale applications like a senior developer
  • Learn to deal with Memory Leaks in your projects to improve performance
  • Master Production and Deployment of a professional Angular app
  • Learn to use TailwindCSS in an Angular application
  • Master the latest ecosystem of a Angular Developer from scratch
  • Become the top 10% Angular Developer
Table of Contents

1 What Are We Building
2 Join Our Online Classroom!
3 Exercise Meet Your Classmates and Instructor
4 Complete Course Resources + Code
5 Monthly Coding Challenges, Free Resources and Guides

Bootstrapping Angular
6 Understanding Frameworks
7 The Angular CLI
8 Creating a New Application
9 Latest Version Of Angular
10 Web Developer Monthly
11 Starting the server
12 Time For TypeScript
13 Reviewing the Configuration Files
14 Main Entry File
15 AOT Compilation
16 Loading a Platform
17 Bootstrapping Angular
18 Enabling Production Mode
19 Understanding Modules
20 Creating Modules
21 Understanding Components
22 Creating Components
23 External Templates and Styles
24 Everything else
25 LinkedIn Endorsements

26 Introduction to TypeScript
27 Installing TypeScript
28 Type Annotations
29 Variables
30 Union Types
31 Arrays
32 Objects
33 Interfaces
34 Classes
35 Generics
36 Why Decorators
37 TypeScript Configuration
38 Writing Decorators

Component Fundamentals
39 Interpolation
40 Property Binding
41 Event Binding
42 Type Assertions
43 Creating a Component
44 Custom Properties
45 Input Aliases
46 Emitting Events
47 Content Projection
48 Discovering Lifecycle Hooks
49 Exploring More Lifecycle Hooks
50 Scoped CSS

Transforming Content
51 Understanding Pipes
52 Pipe Basics
53 Angular Dev Tools
54 Pipe Parameters
55 Dealing with Numbers
56 Debugging with Pipes
57 Understanding Directives
58 The ngClass Directive
59 The ngStyle Directive
60 Understanding ng-template
61 The ngIf Directive
62 The ngFor directive

Master Project Component Design
63 Introduction to Master Project
64 What is Tailwind
65 Installing Tailwind
66 Configuring Tailwind
67 Practicing with Tailwind
68 Loading Static Assets
69 Whats Next
70 Creating a User Module
71 Navigation and Modal Components
72 Exporting Components
73 Designing a Modal
74 Creating a Shared Module
75 Creating a Reusable Modal
76 Multi-slot Content Projection
77 Understanding Services
78 Creating a Service
79 Understanding Dependency Injection
80 Injecting Services
81 Opening the Modal
82 Closing the Modal
83 Understanding Singletons
84 Creating an ID System
85 Refactoring the Service
86 Updating the Components
87 Memory Leaks
88 Fixing the memory leak
89 CSS Issues
90 Creating a Tabs Component
91 The ContentChildren Decorator
92 The QueryList Object
93 Looping through the Tabs
94 Setting an Active Tab
95 Toggling Tabs
96 Preventing the Default Behavior

Master Project Reactive Forms
97 Preparing the Forms
98 Adjusting the noPropertyAccessFromIndexSignature option
99 Registering a new Form
100 Adding Form Controls
101 Binding a Form
102 Form Validation
103 Understanding Errors
104 Handling Errors
105 Form Controller Status
106 Designing an Input Component
107 Binding Form Controls
108 Updating the Template
109 Validating Emails
110 Validating Numbers
111 Validating Passwords with Patterns
112 Input Masking
113 Applying Input Masking
114 Disabling Buttons
115 Handling Form Submission
116 Designing an Alert Component

Master Project Template Forms
117 Importing the FormsModule
118 Registering a new Form
119 Two-way Binding
120 Template Variables
121 Attribute Validation
122 Handling Error Messages
123 Preparing the Password Field
124 Handling Form Submission
125 Exercise Imposter Syndrome

Intro to RxJS
126 Introduction to RxJS
127 Observables
128 Observers
129 Pushing Asynchronous Values
130 Unsubscribing from Observables
131 Declarative Programming with Operators
132 Timing Operators
133 DOM Event Operators
134 The of and from operators
135 Understanding Pipeable Operators
136 The Map Operator
137 Marble Diagram
138 Pluck Operator
139 Filter Operator
140 Reduce Operator
141 Take Operator
142 Tap Operator
143 Understanding Flattening Operators
144 mergeMap Operator
145 switchMap Operator
146 concatMap Operator
147 exhaustMap Operator
148 Flattening Operators Recap

Master Project Authentication
149 Setting up Firebase
150 Reviewing the Rules
151 Installing AngularFire
152 Importing AngularFire
153 User Registration
154 Handling the Response
155 Buckets, Collections, and Documents
156 Storing User Data
157 Refactoring to a Service
158 Interfaces vs. Classes
159 Collection Types
160 Connecting the User with their Data
161 Database Rules
162 Understanding Authentication
163 Authentication after Registration
164 The User Observable
165 The Async Pipe
166 Initializing Firebase First
167 Setting up the Login
168 Destroying the Modal
169 The Delay Operator
170 Signing Out
171 Sidebar JSON Web Tokens

Master Project Custom Validators
172 Creating a Validator Class
173 Static Methods
174 Validating Passwords
175 Factory Functions
176 Handling Errors
177 Creating an Asynchronous Validator
178 Validating Unique Emails
179 Finalizing the Validator

Master Project Routing
180 Understanding Routing
181 Configuring the Router
182 Registering Routes
183 Exercise Registering a Route
184 Adding Navigation Links
185 Active Links
186 Generating a Routing Module
187 Forcing Redirection
188 A Quick Refactor
189 Adding Route Data
190 Filtering Router Events
191 Retrieving Data Outside of the Outlet
192 Exercise Registering a Route with Data
193 Route Parameters
194 Subscribing to Route Parameters
195 Query Parameters
196 Learning More About Query Parameters
197 Selecting an Option
198 Wildcard Routes
199 Updating Routes
200 Route Guards

Master Project Uploading Files
201 Understanding File Uploads
202 Blocking Events with Directives
203 Handling Drag and Drop Events
204 Handling Files
205 Multi Step Form
206 The Upload Form
207 Uploading Files with Firebase
208 Firebase Rules and Validation
209 Adding an Alert Component
210 Upload Progress Observable
211 Handling Errors and Successful Uploads
212 Storing the File Data
213 Adding the File Data to the Database
214 Firebase References and Snapshots
215 Disabling Forms
216 Fallback Upload
217 Canceling Uploads
218 Redirection after Upload
219 Storing a Timestamp
220 Querying the Database
221 Storing the List of Clips
222 Displaying the List of Clips
223 Preparing the Form
224 Passing on the Clip Data
225 Binding the Edit Form
226 Updating Clips
227 Updating the List of Clips
228 Deleting a Clip from the StorageDatabase
229 Sorting Clips with Behavior Subjects
230 Composite Indexes

WebAssembly & Rust
231 What is WebAssembly
232 Getting Started with Rust
233 Exploring the Starter Project
234 Variables
235 Data Types
236 Debugging with Macros
237 Control Flow
238 Match Expressions
239 Arrays
240 Vectors
241 Structures
242 Ownership
243 Results
244 Preparing the Project
245 Installing Webpack
246 Configuring Webpack
247 Reading Files
248 Compiling Rust with Webpack
249 Importing Web Assembly
250 Logging Files
251 Base64 Decoding
252 Loading an Image from Memory
253 Grayscaling an Image
254 Buffering an Image
255 Encoding an Image
256 App Deployment

Master Project Processing Videos with FFmpeg
257 Understanding FFmpeg
258 Installing FFmpeg
259 Custom Asset Paths
260 Adding support for SharedArrayBuffer
261 Loading FFmpeg with a Service
262 Initializing FFMPeg
263 Saving Files in Memory
264 Generating a Screenshot
265 Generating Multiple Screenshots
266 Creating Screenshot URLs
267 Bypassing Sanitization with Pipes
268 Adding Feedback
269 Selecting a Screenshot
270 Updating the Firebase Storage Rules
271 Uploading a Blob
272 Recalculating the Upload Progress
273 The forkJoin Operator
274 Deleting Screenshots

Master Project Playing Videos
275 Section Overview
276 Creating a List Component
277 Handling Scroll Events
278 Querying for Clips
279 Rendering Clips on the Home page
280 Understanding Cross Origin Issues
281 Fixing Cross Origin Issues
282 Fixing the Timestamp
283 Rendering Clips on the Clip Page
284 Installing Videojs
285 Selecting elements with the ViewChild Decorator
286 Initializing the Video Player
287 Styles without View Encapsulation
288 Tailwinds Aspect Ratio Classes
289 Resolving Data with a Guard
290 Dynamically Rendering the Video
291 Fixing the Manage Page
292 Copying Links to the Clipboard
293 Lazy Loading Modules

Master Project Deployment
294 Production Budgets
295 Modifying Firebase Rules
296 Deploying an App with Vercel

Master Project Testing
297 Introduction to Testing
298 Understanding Karma and Jasmine
299 Preparing our App for Testing
300 Writing a Sanity Test
301 Angulars Test Bed Utility
302 Testing a Components Instance
303 Querying the Components Template
304 Inverting Matchers
305 Testing Nested Components
306 Testing Content Projection
307 Custom Matcher Error Messages
308 Mocking Services
309 Overriding a Dependency
310 Importing the Router Testing Module
311 Exercise Testing the Logout Link
312 Simulating DOM Events
313 Installing Cypress
314 Exploring Cypress
315 Writing an E2E Sanity Test
316 Testing the Video Player

Where To Go From Here
317 Thank You!
318 Become An Alumni
319 Endorsements On LinkedIn
320 Learning Guideline
321 Coding Challenges

322 Bonus Lecture