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