Angular Fundamentals
Install Tools
Create Angular Project using Angular-cli
Edit Your First Angular Component
Project File Review
Introduction to Modules
NgModule MetaData
Introduction to Components
Create your first Angular Component
Data Bindings
Pipes
Directives
Introduction to Services
Create Your Angular Service
Introduction to Dependency Injection
Providing Services
Components and Data Bindings
Inline Template
Showing an Array property with ngFor
Creating a class for the data
Interpolation
Property Binding
Attribute Binding
Adding Bootstrap
Class Bindings
Style Binding
Event Binding
Event Filtering
Template Reference Variable
Two Way Data Binding
Pipes
Building Components
@Input Property
Alias @Input Property
@Output Property
Passing Data to Events
Alias @Output Property
Styles Component
View Encapsulation
ng-content
ng-container
Final Project - Getting Started with Real World Application
Create Angular Project for our Real world Application
Complete Source Code for this Module
Important Note related to Angular Material Documentation
Angular Material Setup
Adding Prebuilt Material Theme
Adding Material Fonts
Creating Shared Module
Create Dashboard Layout on Frontend Angular Application
Complete Source Code for this Module
Creating Module using Angular-cli
Adding Lazy Loading
Lazy Loading Demo
Create Main Content Component
Create SideNav Component
Adding Sidenav to our Layout
Adding Toolbar in Sidebar Navigation
Adding List Items to the Side Navigation
Adding Toolbar on the top of Layout
Adding Mode to the Material Sidenav Navigation
Adding Responsiveness to Side Navigation
Debugging Side Navigation Responsiveness
Create Menu Icon
Displaying Menu Icon on Small Screen
Adding Material Card
Adding Routing in Angular
Complete Source Code for this Module
Refactor App Structure
Adding Nav List Items
Creating Invoices Module and Routing
Create Clients Module and Routing
Setup Node.js Server
Complete Source Code for this Module
Creating Express Server
Create Route in Express
ES6 Setup using Babel
Create npm script for Production
Setting up Prettier
ESlint Setup with Prettier
Configure Prettier with ESLint
Creating CRUD(Create, Read, Update, DELETE) API on Node.js Backend
Complete Source Code for this Module
Create Invoice Listing Endpoint
Create Custom Middleware in Express
Refactor App Structure to Controller and Routes
Refactor the config folder
Connecting to MongoDB
Creating new Model in Mongoose
Create new record in mongoose Model
Debugging Node.js App in Chrome
Debugging Node.js App in VS Code
Error Handling Middleware
Error Handling Middleware Demo
Creating Global Error Handling Middleware
Logging Http Request status using morgan middleware
Parsing the Request Body in Express
Create new record in MongoDB
Adding Validations through Joi
Find all Records from MongoDB
Handling Http status codes
Find Record by ID
Delete Record from MongoDB
Update Record by Id from MongoDB
Documentation for the REST APIS Using Swagger In Nodejs
Complete Source Code for this Module
Initial Setup for Documentation
Adding Meta Data for Swagger
Adding JSON Mime Types for Swagger
Create Swagger Model Definition
Documentation for the POST Endpoint
Documentation for the GET Endpoint
Documentation for FindOne Endpoint
Documentation for Delete Endpoint
Documentation for Update Endpoint
Update Build Script to add Swagger files
Creating CRUD with Reactive Forms and Material Data Table
Complete Source Code for this Module
Module Intro
Create Service in Angular
Handle CORS Issues on Backend
Adding Angular Material Data Table
Populating Records to the Data Table
Reformat the Date using Pipe
Redirect in Routing
Adding Material Menu in Data Table
Create Button to save new Invoice
Adding Routing for new Invoice
Create basic Form
Adding Material Date Picker
Adding Reactive Forms
Save and Cancel button in the Form
Sending create request to the backend server
Change the Color Scheme for Form Fields
Validations in Reactive Forms
Displaying Validation Error to User
Adding Success Notification
Error Handling Notification
Delete Invoice
Adding Notification for Delete Invoice
Refresh Data Table after deleting records
Adding Routing to update Record
Get the Route params using ActivatedRoute
Set the Object to the Reactive Forms
Send the Update Request to the backend
Pagination, Sorting and Filtering on Angular and Nodejs
Complete Source Code for this Module
Adding Pagination on Backend
Adding Documentation for Pagination
Refactor Get Invoices on Frontend
Adding Paginator Component
Bind the Length of Records in Pagination Controls
Change the Page Size using Page Event
Running Observables in Series
Adding Progress Spinner
Adding Styling for Spinner
Filtering on Backend
Adding Sorting on Backend
Adding Documentation for Sorting and Filtering
Implement ngAfterViewInit
Basic Setup for Sorting on Frontend
Adding Sorting on Fronetnd
Refactoring to Rxjs Merge
Creating Form Fields for Filter Invoices
Send Backend Request to Filter Invoices
Client Feature (Material Dialog and Material Data Table)
Complete Source Code for this Module
Module Intro
Structure a Node.js App feature by feature
Basic Setup for Client Module
Create Client Module in Mongoose
Validating Request Body Using Joi
Create Record Using Async/Await
Find All Clients
FindOne Client
Delete Client
Update Client
Adding Relationship between Client and Invoice
Populate Client with All Invoices
Add Client while Updating Invoice
Create Client Model Definition in Swagger
Adding Documentation for GET and POST Client
Adding Documentation for FindOne, Update, And Delete
Fetch Clients from the Backend
Load Clients to the Data Table
Adding Toolbar
Setup Basic Dialog
Refactor Client From Dialog to Separate File
Refactor width and height of Material Dialog
Create new Form in the Dialog
Create Reactive Forms inside Material Dialog
Validations for required Fields
Get the Data from Material Dialog
Save new Client
Handling Empty Results in Observable
Adding Spinner
Adding Edit and Delete Action Item
Passing Data to the Material Dialog
Set the Client to the Form
Update the Client
Update Title on Material Dialog
Delete Client
Refactor Save and Update to Conditionals
Add Material SelectBox
Adding Validations for Client
JSON Web Token Authentication with Passport
Complete Source Code for this Module
Basic Setup for User Module
Create User Model
Save new User in MongoDB
Encrypt the User Password
User Login
Fix typo for bcryptjs.compare method
Register Config to development
Register global Middlewares in Separate file
Configure Passport JWT Strategy
Debugging the Passport JWT Strategy
Code Review for Passport Library
Apply Authentication on Routes
Add Documentation for Signup
Adding Documentation for Login
Adding Authentication Header in Documentation
JSON Web Token Authentication in Angular
Complete Source Code for this Module
Create Auth Module
Creating Reactive Forms
Send Login Request to the backend Server
Save Token to LocalStorage
Create HTTP Token Interceptor
Apply HTTP Token Interceptor
Adding Title Dynamically
Adding Signup Button in the Form
Send Signup Request to the Backend Server
Error Handling
Adding Loading Spinner in Auth Form
Apply Routing Guards
Apply NoAuthGuard on Public Routes
Fixing Invoice Title
Adding Resolve Guards for Edit Invoice
Logout User
Social Authentication(Google, Twitter, Github) with Passport in Node.js
Complete Source Code for this Module
Setup Auth Module
Setup Auth Credentials From Google
Configure Passport-google Strategy
Setup Routes for Google Authentication
Serializing and Deserializing User in Passport
Understanding Passport Google Auth Flow
Add Scope for Email and Profile in Google Strategy
Find or create the user after Authenticated from Google
Refactoring Signup
Handle Duplicate Account Validation in Signup
Refactor Login
FIx Profile Error
Send JWT Token After Authenticated with Google Strategy
Redirect to Login After Failed Authentication
Create New Twitter Application
Setup Passport Twitter Strategy
Twitter Authentication with Passport
Creating developer Application in Github
Authenticate User with Github Strategy
Wrap Up
Social Authentication(Google, Twitter, Github) with Passport on Frontend
Complete Source Code for this Module
CORS Access Control Error in Google Authentication
Adding Proxy for the API in Angular
Redirect User to Dashboard Router after Authenticated
Extract Query Param in AuthGuard
Authenticate User from the backend Server
Fix Authentication in AuthGuard
Github and Twitter Authentication
Styling Social Buttons
Refactor Styling for Signup Buttons
Logout User on Backend
Logout User on Frontend
Fixing Http Interceptor on Lazy Loaded Modules
Adding Error Handling in Logout
Invoice View
Complete Source Code for this Module
Module Intro
Creating Invoice view Component
Adding View Action Item to Table
Apply Resolve Guard on Component
Populate Client with Invoice
Display Invoice Details to the Material Card
Styling Material Card for Invoice Details
Apply Routing for Edit Invoice
Calculate the Total Value included Tax
Download PDF Invoice
Complete Source Code for this Module
Module Intro
Installing Plugins to generate PDF File
Generate Basic Pdf File
Adding Bootstrap to Invoice Template
Generate Dummy Invoice
Render Dynamic Content to PDF
Display Total and SubTotal in the Invoice
Refactor Template Code into Methods
Download Invoice From Frontend
Download and Save PDF from Frontend
Adding Material ProgressBar
Adding Name Attribute for Local User
Adding User name and email to the Invoice
Fix Dynamic User name and Email in the Invoice
Adding Error Handling Method
Fetch Email from the Twitter Profile
Refactor getUser method
Forgot Password
Complete Source Code for this Module
Add Link for Forgot Password
Create Forgot Password Component
Design the Forgot Password Component
Create Forgot Password Route on Backend
Send Forgot Password Request from Frontend
Create Reset Link to Reset password
Create new Account at Ethereal
Send Reset Password Email to User
Spinner on Forgot Password
Create Reset Password Component
Design the Reset Password Form
Implement Reset Password on backend
Adding Password Match Validation
Reset Password Request from Frontend
Refactor Documentation for Signup
Fix Color typo for Client Select Box
Bonus
Download Source Code
Learning Path to become a full-stack developer
Learning Path to become a full-stack developer