Your experience on this site will be improved by allowing cookies
Advanced Enterprise Angular Development Masterclass
Angular Developer from scratch
large scale applications like a senior developer
=>Build enterprise level Angular and Type Script applications to deploy to production
=>Learn to lead Angular projects by making good architecture decisions and helping others on your team
=>Use Web Assembly 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 Tailwind CSS in an Angular application
=>Master the latest ecosystem of a Angular Developer from scratch
=>Become the top 10% Angular Developer
=>You do not need any experience with Angular or any other JS framework!
=>Just released with all new Angular best practices and trends for 2023! Join a live online community of over 600,000+ developers and a course taught by industry experts that have actually worked both in Silicon Valley and Toronto with Angular.
=>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.
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!
See you inside!
Who this course is for:
=>Students who are interested in going beyond a normal "beginner" tutorial
=>Programmers who want to learn one of the most in demand skill of a web developer
=>Developers that want to be in the top 10% of Angular Developers
=>Students who want to gain experience working on a scalable large application
=>Bootcamp or online tutorial graduates that want to go beyond the basics.
The Angular CLI
Creating a New Application
Latest Version Of Angular
Starting the server
Reviewing the Configuration Files
Main Entry File
Loading a Platform
Enabling Production Mode
External Templates and Styles
Angular Dev Tools
Dealing with Numbers
Debugging with Pipes
The ngClass Directive
The ngStyle Directive
The ngIf Directive
The ngFor directive
Introduction to Master Project
What is Tailwind?
Practicing with Tailwind
Loading Static Assets
Creating a User Module
Navigation and Modal Components
Designing a Modal
Creating a Shared Module
Creating a Reusable Modal
Multi-slot Content Projection
Creating a Service
Understanding Dependency Injection
Opening the Modal
Closing the Modal
Creating an ID System
Refactoring the Service
Updating the Components
Fixing the memory leak
Creating a Tabs Component
The Content Children Decorator
The Query List Object
Looping through the Tabs
Setting an Active Tab
Preventing the Default Behavior
Preparing the Forms
Registering a new Form
Adding Form Controls
Binding a Form
Form Controller Status
Designing an Input Component
Binding Form Controls
Updating the Template
Validating Passwords with Patterns
Applying Input Masking
Handling Form Submission
Designing an Alert Component
Introduction to RxJS
Pushing Asynchronous Values
Unsubscribing from Observables
Declarative Programming with Operators
DOM Event Operators
The of and from operators
Understanding Pipeable Operators
The Map Operator
Understanding Flattening Operators
mergeMap ,switchMap,concatMap,exhaustMap Operator
Flattening Operators Recap
Setting up Firebase
Handling the Response
Buckets, Collections, and Documents
Storing User Data
Refactoring to a Service
Interfaces vs. Classes
Connecting the User with their Data
Authentication after Registration
Initializing Firebase First
Setting up the Login
Destroying the Modal
The Delay Operator
Sidebar: JSON Web Tokens
Configuring the Router
Exercise: Registering a Route
Adding Navigation Links
Generating a Routing Module
A Quick Refactor
Adding Route Data
Filtering Router Events
Retrieving Data Outside of the Outlet
Exercise: Registering a Route with Data
Understanding File Uploads
Blocking Events with Directives
Handling Drag and Drop Events
Multi Step Form
The Upload Form
Uploading Files with Firebase
Firebase Rules and Validation
Adding an Alert Component
Upload Progress Observable
Handling Errors and Successful Uploads
Storing the File Data
Adding the File Data to the Database
Firebase References and Snapshots
Redirection after Upload
Storing a Timestamp
Querying the Database
Storing the List of Clips
Displaying the List of Clips
Updating the List of Clips
Deleting a Clip from the Storage/Database
Sorting Clips with Behavior Subjects
What is WebAssembly?
Getting Started with Rust
Exploring the Starter Project
Debugging with Macros
Preparing the Project
Loading an Image from Memory
Grayscaling ,Buffering ,Encoding an Image
Custom Asset Paths
Adding support for SharedArrayBuffer
Loading FFmpeg with a Service
Saving Files in Memory
Saving Files in Memory
Generating a Screenshot
Generating Multiple Screenshots
Creating Screenshot URLs
Bypassing Sanitization with Pipes
Selecting a Screenshot
Updating the Firebase Storage Rules
Creating a List Component
Handling Scroll Events
Handling Scroll Events
Querying for Clips
Rendering Clips on the Home page
Understanding Cross Origin Issues
Fixing Cross Origin Issues
Fixing the Timestamp
Rendering Clips on the Clip Page
Selecting elements with the ViewChild Decorator
Initializing the Video Player
Styles without View Encapsulation
Tailwind’s Aspect Ratio Classes
Resolving Data with a Guard
Dynamically Rendering the Video
Fixing the Manage Page
Copying Links to the Clipboard
Introduction to Testing
Understanding Karma and Jasmine
Preparing our App for Testing
Writing a Sanity Test
Angular’s Test Bed Utility
Testing a Component’s Instance
Querying the Component’s Template
Importing the Router Testing Module
Exercise: Testing the Logout Link
Installing , Exploring Cypress