Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Complete Angular Developer in 2024: Zero to Mastery
Introduction
Complete Angular Developer: Zero to Mastery (2:22)
What Are We Building? (4:17)
Exercise: Meet Your Classmates and Instructor
Complete Course Resources + Code
Understanding Your Video Player (notes, video speed, subtitles + more)
Set Your Learning Streak Goal
Bootstrapping Angular
Understanding Frameworks (4:40)
The Angular CLI (4:08)
Latest Version Of Angular (2:21)
Web Developer Monthly
Creating a New Application (3:35)
Starting the Server (5:08)
Time For TypeScript
Angular Cheat Sheet
Reviewing the Configuration Files (7:43)
Main Entry File (1:25)
AOT Compilation (5:01)
Loading a Platform (2:59)
Bootstrapping Angular (2:47)
Enabling Production Mode (4:28)
Understanding Modules (4:00)
Creating Modules (6:05)
Understanding Components (1:58)
Creating Components (6:00)
External Templates and Styles (5:59)
Everything Else (3:44)
Let's Have Some Fun (+ Free Resources)
OPTIONAL: TypeScript
Introduction to TypeScript (5:08)
Installing TypeScript (3:45)
Type Annotations (4:49)
Variables (4:39)
Union Types (3:14)
Arrays (3:00)
Objects (3:30)
Interfaces (3:45)
Classes (3:31)
Generics (7:41)
TypeScript Configuration (1:55)
Why Decorators? (4:38)
Writing Decorators (7:03)
Component Fundamentals
Interpolation (7:45)
Property Binding (3:49)
Event Binding (6:17)
Type Assertions (5:37)
Creating a Component (5:31)
Custom Properties (6:43)
Input Aliases (2:44)
Emitting Events (9:10)
Content Projection (3:17)
Discovering Lifecycle Hooks (6:07)
Exploring More Lifecycle Hooks (10:32)
Scoped CSS (4:23)
Unlimited Updates
Transforming Content
Understanding Pipes (2:06)
Pipe Basics (5:42)
Angular Dev Tools (2:39)
Pipe Parameters (6:14)
Dealing with Numbers (7:13)
Debugging with Pipes (1:50)
Understanding Directives (1:59)
The ngClass Directive (5:09)
The ngStyle Directive (4:10)
Understanding ng-template (2:11)
The ngIf Directive (3:50)
The ngFor directive (5:43)
Course Check-In
Master Project: Component Design
Introduction to Master Project (6:02)
What is Tailwind? (5:36)
Installing Tailwind (7:15)
Configuring Tailwind (2:30)
Practicing with Tailwind (5:25)
Loading Static Assets (4:41)
What’s Next? (3:30)
Creating a User Module (4:35)
Navigation and Modal Components (5:33)
Exporting Components (3:24)
Designing a Modal (2:23)
Creating a Shared Module (4:09)
Creating a Reusable Modal (2:47)
Multi-slot Content Projection (3:12)
Understanding Services (3:31)
Creating a Service (1:41)
Understanding Dependency Injection (5:34)
Injecting Services (5:11)
Opening the Modal (5:51)
Closing the Modal (3:09)
Understanding Singletons (3:46)
Creating an ID System (5:45)
Refactoring the Service (5:04)
Updating the Components (4:46)
Memory Leaks (6:02)
Fixing the Memory Leak (4:46)
CSS Issues (5:49)
Creating a Tabs Component (6:03)
The ContentChildren Decorator (5:40)
The QueryList Object (3:22)
Looping through the Tabs (3:20)
Setting an Active Tab (7:07)
Toggling Tabs (4:17)
Preventing the Default Behavior (1:59)
Implement a New Life System
Master Project: Reactive Forms
Preparing the Forms (5:42)
Adjusting the "noPropertyAccessFromIndexSignature" option
Registering a new Form (4:15)
Adding Form Controls (3:15)
Binding a Form (3:05)
Form Validation (7:11)
Understanding Errors (4:16)
Handling Errors (5:16)
Form Controller Status (5:49)
Designing an Input Component (3:50)
Binding Form Controls (8:23)
Updating the Template (6:27)
Validating Emails (6:49)
Validating Numbers (5:57)
Validating Passwords with Patterns (6:00)
Input Masking (5:54)
Applying Input Masking (6:05)
Disabling Buttons (5:11)
Handling Form Submission (2:49)
Designing an Alert Component (10:13)
Master Project: Template Forms
Importing the FormsModule (2:22)
Registering a new Form (4:04)
Two-way Binding (6:38)
Template Variables (5:46)
Attribute Validation (3:24)
Handling Error Messages (3:40)
Preparing the Password Field (4:13)
Handling Form Submission (4:49)
Exercise: Imposter Syndrome (2:55)
Intro to RxJS
Introduction to RxJS (6:02)
Observables (5:21)
Observers (4:20)
Pushing Asynchronous Values (3:39)
Unsubscribing from Observables (3:33)
Declarative Programming with Operators (5:47)
Timing Operators (5:25)
DOM Event Operators (2:15)
The of and from operators (5:53)
Understanding Pipeable Operators (4:01)
The Map Operator (4:04)
Marble Diagram (2:43)
Filter Operator (7:26)
Reduce Operator (4:03)
Take Operator (4:16)
Tap Operator (3:26)
Understanding Flattening Operators (7:01)
mergeMap Operator (6:14)
switchMap Operator (4:41)
concatMap Operator (2:28)
exhaustMap Operator (2:31)
Flattening Operators Recap (2:21)
Master Project: Authentication
Setting up Firebase (7:08)
Reviewing the Rules (6:14)
Skipping Library Checks
Installing AngularFire (3:57)
Importing AngularFire (6:58)
User Registration (7:54)
Handling the Response (8:37)
Buckets, Collections, and Documents (3:17)
Storing User Data (6:32)
Refactoring to a Service (6:18)
Interfaces vs. Classes (7:50)
Collection Types (6:20)
Connecting the User with their Data (10:08)
Database Rules (2:39)
Understanding Authentication (4:13)
Authentication after Registration (3:19)
The User Observable (5:52)
The Async Pipe (7:37)
Initializing Firebase First (9:32)
Setting up the Login (9:25)
Destroying the Modal (6:07)
The Delay Operator (4:05)
Signing Out (4:26)
Sidebar: JSON Web Tokens (9:31)
Master Project: Custom Validators
Creating a Validator Class (3:56)
Static Methods (3:18)
Validating Passwords (6:12)
Factory Functions (6:15)
Handling Errors (6:03)
Creating an Asynchronous Validator (5:26)
Validating Unique Emails (5:24)
Finalizing the Validator (7:27)
Master Project: Routing
Understanding Routing (5:28)
Configuring the Router (5:49)
Registering Routes (7:00)
Exercise: Registering a Route (3:39)
Adding Navigation Links (3:12)
Active Links (6:45)
Generating a Routing Module (5:56)
Forcing Redirection (4:39)
A Quick Refactor (3:28)
Adding Route Data (5:24)
Filtering Router Events (4:34)
Retrieving Data Outside of the Outlet (7:42)
Exercise: Registering a Route with Data (4:36)
Route Parameters (6:52)
Subscribing to Route Parameters (4:35)
Query Parameters (9:24)
Learning More About Query Parameters (8:42)
Selecting an Option (1:47)
Wildcard Routes (5:06)
Updating Routes (3:49)
Route Guards (5:51)
Master Project: Uploading Files
Understanding File Uploads (3:24)
Blocking Events with Directives (9:01)
Handling Drag and Drop Events (7:09)
Handling Files (7:53)
Multi Step Form (4:29)
The Upload Form (9:12)
Uploading Files with Firebase (6:54)
Firebase Rules and Validation (7:23)
Adding an Alert Component (5:15)
Upload Progress Observable (3:46)
Handling Errors and Successful Uploads (10:22)
Storing the File Data (8:28)
Adding the File Data to the Database (8:12)
Firebase References and Snapshots (2:22)
Disabling Forms (2:47)
Fallback Upload (6:17)
Canceling Uploads (5:46)
Redirection after Upload (6:24)
Storing a Timestamp (4:38)
Querying the Database (8:53)
Storing the List of Clips (7:20)
Displaying the List of Clips (2:12)
Preparing the Form (7:05)
Passing on the Clip Data (3:27)
Binding the Edit Form (6:32)
Updating Clips (9:17)
Updating the List of Clips (6:59)
Deleting a Clip from the Storage/Database (10:01)
Sorting Clips with Behavior Subjects (11:05)
Composite Indexes (4:31)
WebAssembly & Rust
What is WebAssembly? (8:51)
Getting Started with Rust (6:17)
Exploring the Starter Project (6:46)
Variables (5:14)
Data Types (6:46)
Debugging with Macros (6:51)
Control Flow (4:38)
Match Expressions (7:48)
Arrays (2:49)
Vectors (5:18)
Structures (4:06)
Ownership (6:48)
Results (8:19)
Preparing the Project (3:40)
Installing Webpack (3:39)
Configuring Webpack (10:05)
Reading Files (8:09)
Compiling Rust with Webpack (4:47)
Importing Web Assembly (5:42)
Logging Files (9:14)
Base64 Decoding (3:06)
Loading an Image from Memory (3:21)
Grayscaling an Image (2:57)
Buffering an Image (4:19)
Encoding an Image (5:39)
App Deployment (4:05)
Master Project: Processing Videos with FFmpeg
Understanding FFmpeg (2:44)
Installing FFmpeg (5:00)
Custom Asset Paths (5:25)
Adding support for SharedArrayBuffer (6:45)
Loading FFmpeg with a Service (4:11)
Initializing FFMPeg (6:46)
Saving Files in Memory (5:45)
Generating a Screenshot (11:00)
Generating Multiple Screenshots (5:08)
Creating Screenshot URLs (5:46)
Bypassing Sanitization with Pipes (8:24)
Adding Feedback (3:38)
Selecting a Screenshot (4:15)
Updating the Firebase Storage Rules (2:02)
Uploading a Blob (6:31)
Recalculating the Upload Progress (4:47)
The forkJoin Operator (7:22)
Deleting Screenshots (3:45)
Master Project: Playing Videos
Section Overview (1:43)
Creating a List Component (1:47)
Handling Scroll Events (7:40)
Querying for Clips (10:38)
Rendering Clips on the Home page (4:50)
Understanding Cross Origin Issues (3:43)
Fixing Cross Origin Issues (8:09)
Fixing the Timestamp (8:15)
Rendering Clips on the Clip Page (3:30)
Installing Videojs (1:37)
Selecting elements with the ViewChild Decorator (5:58)
Initializing the Video Player (2:02)
Styles without View Encapsulation (5:16)
Tailwind’s Aspect Ratio Classes (1:26)
Resolving Data with a Guard (8:09)
Dynamically Rendering the Video (7:02)
Fixing the Manage Page (1:03)
Copying Links to the Clipboard (6:04)
Lazy Loading Modules (6:31)
Master Project: Deployment
Production Budgets (3:26)
Modifying Firebase Rules (3:42)
Deploying an App with Vercel (10:44)
Master Project: Testing
Introduction to Testing (11:20)
Understanding Karma and Jasmine (8:13)
Preparing our App for Testing (2:56)
Writing a Sanity Test (6:01)
Angular’s Test Bed Utility (5:55)
Testing a Component’s Instance (6:27)
Querying the Component’s Template (6:39)
Inverting Matchers (3:10)
Testing Nested Components (4:41)
Testing Content Projection (6:24)
Custom Matcher Error Messages (2:30)
Mocking Services (6:32)
Overriding a Dependency (2:44)
Importing the Router Testing Module (1:59)
Exercise: Testing the Logout Link (3:05)
Simulating DOM Events (3:58)
Installing Cypress (6:09)
Exploring Cypress (6:04)
Writing an E2E Sanity Test (6:04)
Testing the Video Player (8:52)
Where To Go From Here?
Thank You! (1:17)
Review This Course!
Become An Alumni
Learning Guideline
ZTM Events Every Month
LinkedIn Endorsements
The Angular CLI
Download