Learning Mean Stack By Building Real World Application

Integrate Any Angular Application with Nodejs
CURD(Create,Read,Update,Delete) Operation with Nodejs, Express and Mongoose
CURD(Create,Read,Update,Delete) Operation with Nodejs, Express and Mongoose
JSON Web Token Authentication with PassportJs in MEAN Stack
Social(Twitter, Github, Google) Authentication with PassportJs in MEAN Stack

Today many enterprise leaders are struggling to use the diverse options available to create web development projects. With technological advancements taking place every few months, it becomes difficult to keep pace unless you are a fast learner. Just when the web development community was getting comfortable with LAMP, MEAN stack made its entry and boy it has completely redefined how web developers work.

MEAN Stack is an acronym for MongoDB, Express, Angular and Node.js – whereby all these four are integrated to form solution-built full-stack JavaScript applications.

Almost, every web development player in the market is trying to become a MEAN stack app developer.

Why MEAN Stack App Development is such a great choice?

Using the same programming language in both the front and back ends of the application has multiple benefits. For one thing, it makes data communication between server and client simpler and faster. It makes modifications to either end easier. It also promotes reusing code across the multiple technologies that in turn helps keep the application secure and stable.

1)Time Saver – as all the JavaScript libraries are combined together, it saves a lot of time for the developers as they can access all the libraries at one go. The time saved here can be used to advance the project further.

2) Speedy data storage and retrieval – MongoDB does not require any predefined regulation to establish field relations unlike MySQL database that cannot operate without predefined database schemas and rules. Moreover, addition or deletion of records is very easy in MongoDB – all thanks to the dynamic schemas that it relies on. All this ensures that the system becomes efficient and more speedy regular functions can be performed.

3) Uniform Programming Language – what works in favor of MEAN stack is that one can control both the front end and back end activities because of JSON which is compatible with MongoDB database, Express and Node.js server and Angular. As such the need for any other programming languages like PYTHON or PHP.

Furthermore, node.js framework reduces the page load time making it a hot favorite for web based applications.

4) OS Compatibility – MEAN stack is compatible with MS Windows, MAC OS and Linux. You still have doubts about the feasibility of MEAN stack?

5) Agility and Quality of Apps – the basic architecture of MEAN is set up to support automated testing; as such developers can easily make corrections as and when the situation arises. Hence one can expect agile and quality app development with MEAN stack.

6) MEAN stack supports the MVC architecture –The single programming language and flexible database of MEAN stack allows it to handle the complex procedures of MVC framework. This ensures that development work does not become tedious or less productive.

You will learn how to:

Create Nodejs server with Express.js
Use ES6 with Nodejs
Create Restful APIS with Nodejs, Express and Mongoose
Secure Restful APIS with Passport and JWT
Social(Twitter, Google, Github) Authentication in Nodejs
CRUD(Create, Read, Update, Delete) Operation in Angular
Build Angular App with Angular Material, Material Data Table, and Material Dialog
Learn how to use Angular Material Components in Real world Application
JSON Web Token Authentication in Angular
Social(Twitter, Google, Github) Authentication in Angular
Generate PDF File in Nodejs
Download PDF File in Angular
Document RESTFUL APIS with Swagger
Send Email in Nodejs

Basic NodeJS/Express and Angular Experience is required

Intermediate Angular Developer who want to learn full-stack web development

Section 1 : Angular Fundamentals 15 Lectures 00:42:21
Lecture 1 :
Create Angular project using Angular-cil Preview
In this video, you will learn how to install angular-cli and create Angular 5 project using Angular-cli
Lecture 2 :
Edit Your First Angular Component
The CLI created the first Angular component for you. This is the root component and it is named app-root. You can find it in ./src/app/app.component.ts. In this lesson, You will learn how to edit your first component in Angular Application
Lecture 3 :
Project File Review
Lecture 4 :
Introduction to Modules
Angular apps are modular and Angular has its own modularity system called NgModules. An NgModule is a container for a cohesive block of code dedicated to an application domain, a workflow, or a closely related set of capabilities. It can contain components, service providers, and other code files whose scope is defined by the containing NgModule
Lecture 5 :
NgModule Meta Data
An NgModule is defined as a class decorated with @NgModule. The @NgModule decorator is a function that takes a single metadata object, whose properties describe the module.
Lecture 6 :
Introduction to Components
A component controls a patch of screen called a view. You define a component's application logicâ€”what it does to support the viewâ€”inside a class. The class interacts with the view through an API of properties and methods.
Lecture 7 :
Create your first Angular Componen
The @Component decorator identifies the class immediately below it as a component class, and specifies its metadata.
Lecture 8 :
Data Bindings
Without a framework, you would be responsible for pushing data values into the HTML controls and turning user responses into actions and value updates. Writing such push/pull logic by hand is tedious, error-prone, and a nightmare to read, as any experienced jQuery programmer can attest. Angular supports two-way data binding, a mechanism for coordinating parts of a template with parts of a component. Add binding markup to the template HTML to tell Angular how to connect both sides
Lecture 9 :
Pipes
Angular pipes let you declare display-value transformations in your template HTML. A class with the @Pipe decorator defines a function that transforms input values to output values for display in a view
Lecture 10 :
Directives
Angular templates are dynamic. When Angular renders them, it transforms the DOM according to the instructions given by directives. A directive is a class with a @Directive decorator.
Lecture 11 :
Introduction to Services
service is a broad category encompassing any value, function, or feature that an app needs. A service is typically a class with a narrow, well-defined purpose. It should do something specific and do it well
Lecture 12 :
Create Your Angular Service
In this lesson, we will create a new Angular service.
Lecture 13 :
Introduction to Dependency Injection
Components consume services; that is, you can injecta service into a component, giving the component access to that service class
Lecture 14 :
Providing Services
To define a class as a service in Angular, use the @Injectable decorator to provide the metadata that allows Angular to inject it into a component as a dependency
Lecture 15 :
Find all Records from MongoDB
Section 2 : Components and Data Bindings 14 Lectures 00:21:03
Lecture 1 :
Inline Template
You can store your component's template in one of two places. You can define it inline using the template property, or you can define the template in a separate HTML file and link to it in the component metadata using the @Componentdecorator's templateUrl property.
Lecture 2 :
Showing an Array property with ngFor
To display a list of heroes, begin by adding an array of hero names to the component and redefine myHero to be the first name in the array
Lecture 3 :
Creating a class for the data
The app's code defines the data directly inside the component, which isn't best practice. In a simple demo, however, it's fine. At the moment, the binding is to an array of strings. In real applications, most bindings are to more specialized objects. To convert this binding to use specialized objects, turn the array of hero names into an array of Hero objects. For that you'll need a Hero class:
Lecture 4 :
Interpolation
You met the double-curly braces of interpolation, {â€Œ{ and }}, early in your Angular education
Lecture 5 :
Property Binding
Write a template property binding to set a property of a view element. The binding sets the property to the value of a template expression.
Lecture 6 :
Attribute Binding
You can set the value of an attribute directly with an attribute binding. This guide stresses repeatedly that setting an element property with a property binding is always preferred to setting the attribute with a string
Lecture 7 :
Adding Bootstrap
In this video, we are going to add bootstrap4 in Angular Application
Lecture 8 :
Class Bindings
you can add and remove CSS class names from an element's class attribute with a class binding. Class binding syntax resembles property binding. Instead of an element property between brackets, start with the prefix class, optionally followed by a dot (.) and the name of a CSS class: [class.class-name].
Lecture 9 :
Style Binding
You can set inline styles with a style binding. Style binding syntax resembles property binding. Instead of an element property between brackets, start with the prefix style, followed by a dot (.) and the name of a CSS style property: [style.style-property]
Lecture 10 :
Event Binding
The bindings directives you've met so far flow data in one direction: from a component to an element.
Lecture 11 :
Event Filtering
You can also implement event filtering in Angular. In this lesson, we will implement keyup event in Angular
Lecture 12 :
Template Reference Variable
A template reference variable is often a reference to a DOM element within a template. It can also be a reference to an Angular component or directive or a web component. Use the hash symbol (#) to declare a reference variable. The #phone declares a phone variable on an element
Lecture 13 :
Two Way Data Binding
Two-way data binding combines the input and output binding into a single notation using the ngModeldirective.
Lecture 14 :
Pipes
Every application starts out with what seems like a simple task: get data, transform them, and show them to users. Getting data could be as simple as creating a local variable or as complex as streaming data over a WebSocket
Section 3 : Building Components 9 Lectures 00:25:54
Lecture 1 :
@Input Property
You can communicate with parent and child component with using input property. It is used to send the data to the child component
Lecture 2 :
Alias @Input Property
You can also change the name of Input property by using aliases in Angular
Lecture 3 :
@Output Property
The purpose of @Output is to trigger custom events in components and create a channel for inter component communication
Lecture 4 :
Passing Data to Events
You can also send the data by emitting the event emitter. In this lesson, I will send the hero object while emitting the event emitter.
Lecture 5 :
Alias @Output Property
You can also change the name of Output property by using aliases in Angular
Lecture 6 :
Styles Component
There are three ways to apply styling on Angular component.
Lecture 7 :
View Encapsulation
View encapsulation defines whether the template and styles defined within the component can affect the whole application or vice versa.
Lecture 8 :
ng-content
ng-content is a way of rendering html content between opening and closing tags within template for that componen
Lecture 9 :
ng-container
If you donâ€™t want to put extra div in the html content then you need ng-container
Section 4 : Final Project - Getting Started with Real World Application 6 Lectures 00:10:03
Lecture 1 :
Create Angular Project for our Real world Application
Lecture 2 :
Important Note related to Angular Material Documentation
Lecture 3 :
Angular Material Setup
In this video, you are going to learn how to add Angular material in to Angular version 5.
Lecture 4 :
Adding Prebuilt Material Theme
Angular provides many prebuilt theme like indigo-pink.css. It depends on you whatever you want to use. I will show you how to add prebuilt theme in Angular Material
Lecture 5 :
Adding Material Fonts
In this videos, you are going to learn how to Material Fonts in Angular Material project. Material fonts provide many built icons for buttons. I will show you how to use material icons in buttons and material menu
Lecture 6 :
Creating Shared Module
If you have to use any module into multiple module then you need to create a shared module. Shared Module will contain all the reusable piece of components, directives and modules
Section 5 : Create Dashboard Layout on Frontend Angular Application 15 Lectures 00:36:12
Lecture 1 :
Create Module using Angular-Cil
In this lesson, you are going to learn how to create a new module using Angular-cli
Lecture 2 :
Adding Lazy Loading
In this lesson, I will teach you what is lazy loading and how to implement lazy loading in angular. Lazy loading is used to load components on the demand
Lecture 3 :
Lazy Loading Demo
I will show the demo of lazy loading. You can check that is lazy loading working on your application or not
Lecture 4 :
Create Main Content Component
I will show you to create component using Angular-cli
Lecture 5 :
Create SideNav Component
You will learn how to create component in Angular using Angular-cli
Lecture 6 :
Adding Sidenav to our Layout
I will show how to add material sidenav component in Angular Application
Lecture 7 :
Adding Toolbar in Sidebar Navigation
You will learn what is material toolbar component and how to use material toolbar component
Lecture 8 :
Adding List Items to the Side Navigation
You will learn how to design a side nav bar using Angular material toolbar component
Lecture 9 :
Adding Toolbar on the top of Layout
I will teach you how to use material toolbar in Angular Application
Lecture 10 :
Adding Mode to the Material Sidenav Navigation
You will learn how to add mode in the Material Sidenav navigation
Lecture 11 :
Adding Responsiveness to Side Navigation
I will show you how to make a material sidebar responsive
Lecture 12 :
Debugging Side Navigation Responsiveness
I will show how to debug the material nav bar and its responsiveness
Lecture 13 :
Create menu Icon
I will show you how to create a menu icon using material menu
Lecture 14 :
Displaying Menu Icon on Small Screen
I will show you how to use material icons in the Angular material application. We will use material icon to create a menu icon
Lecture 15 :
Adding Material Card
In lesson you will how to use Material Card component in your Angular application
Section 6 : Adding Routing in Angular 4 Lectures 00:14:23
Lecture 1 :
Refactor App Structure
Lecture 2 :
Add NAV List Items
In this lesson, you are going to learn how to use Material list items in Navigation
Lecture 3 :
Creating Invoices Module and Routing
In this lesson, you are going to learn how to create routing and module in Angular
Lecture 4 :
Create Clients Module and Routing
In this video, you are going to learn how to create a module in Angular and routing using Angular-cli
Section 7 : Setup Node.js Server 7 Lectures 00:12:34
Lecture 1 :
Creating Express Server
In this lesson, you are going to learn how create express server in nodejs application
Lecture 2 :
Create Route in Express
I will show you how to create a route in express application
Lecture 3 :
ES6 Setup using Babel
You will learn how to use ES6 features with Nodejs using babel plugin
Lecture 4 :
Create npm script for Production
I will show you how to add npm script for production and debugging
Lecture 5 :
Setting up Prettier
Lecture 6 :
ESlint Setup with Prettier
You will learn how to use ESLint with Nodejs. I am going to teach how to configure ESlint in Nodejs app
Lecture 7 :
Configure Prettier with ESLint
I will show you how to use both eslint and prettier with nodejs project
Section 8 : Creating CRUD(Create, Read, Update, DELETE) API on Node.js Backend 21 Lectures 00:36:39
Lecture 1 :
Create Invoice Listing Endpoints
In this video, I will show you how to create a get endpoint route in express framework
Lecture 2 :
Create Custom Middleware in Express
You will learn what is middleware in express and how to create middleware in express
Lecture 3 :
Refactor App Structure to Controller and Routes
I will show you how to convert your nodejs app into MVC pattern.
Lecture 4 :
Refactor the config folder
Lecture 5 :
Connecting to MongoDB
You will learn how to connect Nodejs app to mongoose
Lecture 6 :
Creating new Model in Mongoose
Lecture 7 :
Create new record in mongoose Model
You will learn how to create new model in mongoose ODM
Lecture 8 :
Debugging Node.js App in Chrome
I will show you how to debug the Nodejs app in Chrome
Lecture 9 :
Debugging Node.js App in VS Code
You will learn how to debug the Nodejs app in VS Code
Lecture 10 :
Error Handling Middleware
You will learn how to create error handler middleware in Express
Lecture 11 :
Error Handling Middleware Demo
I will show you how to handle Errors using error handler middleware
Lecture 12 :
Creating Global Error Handling Middleware
You will learn how to catch errors using global level middleware
Lecture 13 :
Logging Http Request status using morgan middleware
I will show you how to implement Logging using morgan package in nodejs
Lecture 14 :
Parsing the Requested Body in Express
I will show you how to parse the request body in express using json body-parser
Lecture 15 :
Create a New Record in MongoDB
I will show you how to create new record in MongoDB using mongoose model
Lecture 16 :
Adding Validations through Joi
I will show you how to add validations through Joi. Joi is an external package to handle validations
Lecture 17 :
Find all Records from MongoDB
Lecture 18 :
Handling Http status codes
Lecture 19 :
Find Record by ID
Lecture 20 :
Delete Record from MongoDB
Lecture 21 :
Update Record by Id from MongoDB
Section 9 : Documentation for the REST APIS Using Swagger In Nodejs 10 Lectures 00:20:21
Lecture 1 :
Initial Setup for Documentation
In thi lesson, I will teach you how to setup swagger project with Nodejs
Lecture 2 :
Adding Meta Data for Swagger
You will learn how to add host, port, or project meta data in swagger
Lecture 3 :
Adding JSON Mime Types for Swagger
In this lesson, I will teach you how to add JSON Mime types in swagger file
Lecture 4 :
Create Swagger Model Definition
Lecture 5 :
Documentation for the POST Endpoint
Lecture 6 :
Documentation for the GET Endpoint
I will teach you how to add documentation for get endpoint
Lecture 7 :
Documentation for FindOne Endpoint
You will learn how to add documentation for FindOne endpoint
Lecture 8 :
Documentation for Delete Endpoint
You will learn how to add documentation for DELETE Endpoint in Swagger
Lecture 9 :
Documentation for Update Endpoint
You will learn how to add documentation for Update path in Swagger and Nodejs
Lecture 10 :
Update Build Script to add Swagger files
I will teach you to debug the nodejs project api from swagger doc
Section 10 : Creating CRUD with Reactive Forms and Material Data Table 27 Lectures 01:28:23
Lecture 1 :
Module Intro
You will learn what you we will cover in this module
Lecture 2 :
Create Service in Angular
You will learn how to create new service in Angular using Angular-cli
Lecture 3 :
Handle CORS Issues on Backend
You will learn how to handle cors in Nodejs application
Lecture 4 :
Adding Angular Material Data Table
You will learn how to add Angular Material Data Table in Application
Lecture 5 :
Populating Records to the Data Table
You will learn how to populate records into the Material Data Table
Lecture 6 :
Reformat the Date using Pipe
You will learn how to reformat the date using Angular date pipe
Lecture 7 :
Redirect in Routing
You will learn how to redirect the user in routing
Lecture 8 :
Adding Material Menu in Data Table
You will learn how to add new action menu to the data table
Lecture 9 :
Create Button to save new Invoice
You will learn how to create button to save new inovice
Lecture 10 :
Adding Routing for new Invoice
You will learn how to add Routing for new record in Angular Application
Lecture 11 :
Create basic Form
You will learn how to add basic form in Angula
Lecture 12 :
Adding Material Date Picker
You will learn how to add Angular Date Picker in the reactive form
Lecture 13 :
Adding Reactive Forms
You will learn how to add reactive forms in Angular Application
Lecture 14 :
Save and Cancel button in the Form
You will learn how to add save and cancel button the reactive forms
Lecture 15 :
Sending create request to the backend server
You will learn how to send the save record request from the Angular application to nodejs server
Lecture 16 :
Change the Color Scheme for Form Fields
You will learn how to change the color scheme of the Angular form fields
Lecture 17 :
Validations in Reactive Forms
You will learn how to add validations in reactive forms in Angular Application
Lecture 18 :
Displaying Validation Error to User
You will learn how to display the validation error to the user
Lecture 19 :
Adding Success Notification
You will learn how to add success notification to the user
Lecture 20 :
Error Handling Notification
You will learn how to show error notification to the user
Lecture 21 :
Delete Invoice
You will learn how to send the delete record request to the backend server
Lecture 22 :
Adding Notification for Delete Invoice
You will learn how to notification using MatSnacbar mdoue
Lecture 23 :
Refresh Data Table after deleting records
Lecture 24 :
Adding Routing to update Record
You will learn how to add routing to update the record using reactive forms
Lecture 25 :
Get the Route params using ActivatedRoute
I will show you how to get the router params in component
Lecture 26 :
Set the Object to the Reactive Forms
I will show you how to set the object to reactive forms. How to set default value in reactive form
Lecture 27 :
Send the Update Request to the backend
Send the Update Request to the backend
Section 11 : Pagination, Sorting and Filtering on Angular and Nodejs 18 Lectures 01:04:37
Lecture 1 :
Adding Pagination on Backend
In this lesson, you will learn how to add pagination in mongoose using mongoose-paginate plugin
Lecture 2 :
Adding Documentation for Pagination
In this lesson you will learn how to add query param variables in swagger documentation
Lecture 3 :
Refactor Get Invoices on Frontend
In this lesson, you are going to learn how to fetch records in Angular component using Angular service
Lecture 4 :
Adding Paginator Component
In this lesson, you are going to learn how to use Material Pagination controls
Lecture 5 :
Bind the Length of Records in Pagination Controls
In this lesson, you are going to learn how to Bind the Length of Records in Pagination Controls
Lecture 6 :
Change the Page Size using Page Event
In this lesson, you are going to learn how to set the page size of the material pagination controls. I will show you how to use material page event
Lecture 7 :
Running Observables in Series
You will learn how to use flatMap method to run the observables in series
Lecture 8 :
Adding Progress Spinner
In this lesson, you are going to learn how to use Material Spinner in loading results
Lecture 9 :
Adding Styling for Spinner
In this lesson, you are going to learn how to style Material Spinner component
Lecture 10 :
Filtering on Backend
In this lesson, you are going to learn how to add filtering on the Nodejs and mongoose
Lecture 11 :
Adding Sorting on Backend
You will learn how to add sorting in Nodejs and Mongoose
Lecture 12 :
Adding Documentation for Sorting and Filtering
In this lesson, you are going to learn how to add documentation for Query param variables
Lecture 13 :
Implement ngAfterViewInit
In this lesson, you are going to learn how to use ngAfterViewInit in Angular Application
Lecture 14 :
Basic Setup for Sorting on Frontend
In this lesson, you are going to learn how to implement sorting in Material Table
Lecture 15 :
Adding Sorting on Fronetnd
In this lesson, you are going to learn how to Adding Sorting on Frontend
Lecture 16 :
Refactoring to Rxjs Merge
In this lesson, you are going to learn how to do Refactoring to Rxjs Merge
Lecture 17 :
Creating Form Fields for Filter Invoices
In this lesson, you are going to learn how to Create Form Fields for Filter Invoice
Lecture 18 :
Send Backend Request to Filter Invoices
In this lesson, you are going to learn how to send Backend Request for Filter records in Angular Application
Section 12 : Client Feature (Material Dialog and Material Data Table) 38 Lectures 01:53:43
Lecture 1 :
Module Intro
In this module we are going to build CRUD feature with Material Dialog and Material Table
Lecture 2 :
Structure a Node.js App feature by feature
You will learn how to structure you Node.js app feature by feature.
Lecture 3 :
Basic Setup for Client Module
You will learn how to create Module in Angular using Angular-cli
Lecture 4 :
Create Client Module in Mongoose
You will learn how to create model in Mongoose
Lecture 5 :
Validating Request Body Using Joi
Lecture 6 :
Create Record Using Async/Await
You will learn how to use Async/Await with Nodejs
Lecture 7 :
Find All Clients
You will learn how to fetch all the records from MongoDB
Lecture 8 :
FindOne Client
Lecture 9 :
Delete Client
You will learn how to find single record from MongoDB
Lecture 10 :
Update Client
You will learn how to update record in MongoDB using mongoose
Lecture 11 :
Adding Relationship between Client and Invoice
You will learn how to add relationship between two mongoose model. I will show you how to add one to one relationship
Lecture 12 :
Populate Client with All Invoices
You will learn how to populate Client nested model in Mongoose
Lecture 13 :
Add Client while Updating Invoice
You will learn how to update mongoose model properties
Lecture 14 :
Create Client Model Definition in Swagger
You will learn how to create model definition file in Swagger.json file
Lecture 15 :
Adding Documentation for GET and POST Client
You will learn how to add documentation for get and post endpoint in Swagger file
Lecture 16 :
Adding Documentation for FindOne, Update, And Delete
You will learn how to add documentation for get, delete, and update endpoint
Lecture 17 :
Fetch Clients from the Backend
You will learn how to fetch all the records from the backend
Lecture 18 :
Load Clients to the Data Table
You will learn how to display the records in Material Data Table
Lecture 19 :
Adding Toolbar
You will learn how to use Material toolbar in Angular Application
Lecture 20 :
Setup Basic Dialog
You will learn how to use Material Dialog in Angular Application
Lecture 21 :
Refactor Client From Dialog to Separate File
You will learn how to refactor Client form Dialog to separate file
Lecture 22 :
Refactor width and height of Material Dialog
You will learn how to refactor width and height of Material Dialog
Lecture 23 :
Create new Form in the Dialog
You will learn how to create new reactive form inside the Material Dialog
Lecture 24 :
Create Reactive Forms inside Material Dialog
You will learn how to create new reactive form inside the Material Dialog
Lecture 25 :
Validations for required Fields
You will learn how to create new reactive form inside the Material Dialog and validations for reactive form
Lecture 26 :
Get the Data from Material Dialog
You will learn how to get data from the Material Dialog
Lecture 27 :
Save new Client
In this lesson you will learn how to save new record in mongoose model
Lecture 28 :
Handling Empty Results in Observable
In this lesson you will learn how to use filerMap operator in Rxjs
Lecture 29 :
Adding Spinner
In this lesson you will learn how to use Material Spinner in Angular Application
Lecture 30 :
Adding Edit and Delete Action Item
In this lesson you will learn how to add new material menu action item
Lecture 31 :
Passing Data to the Material Dialog
In this lesson you will learn how to send data to the Material Dialog Compoent
Lecture 32 :
Set the Client to the Form
In this lesson you will learn how to set the record to the reactive forms using patch value method
Lecture 33 :
Update the Client
In this lesson you will learn how to save update record from the frontend app
Lecture 34 :
Update Title on Material Dialog
In this lesson you will learn how to update the title on the Material Dialog
Lecture 35 :
Delete Client
In this lesson you will learn how to delete record from the Mongoose model
Lecture 36 :
Refactor Save and Update to Conditionals
In this lesson you will learn how to refactor the observables logic
Lecture 37 :
Add Material SelectBox
In this lesson you will learn how to add select menu in Angular Application
Lecture 38 :
Adding Validations for Client
In this lesson you will learn how to add validations in reactive forms
Section 13 : JSON Web Token Authentication with Passport 14 Lectures 00:59:29
Lecture 1 :
Basic Setup for User Module
In this lesson, you will learn how to create module in Angular using Angular-cli
Lecture 2 :
Create User Model
In this lesson, you will learn how to create new model in mongoose
Lecture 3 :
Save new User in MongoDB
In this lesson, you are going to learn how to create new model in Mongoose
Lecture 4 :
Encrypt the User Password
In this lesson, you are going to learn encrypt the user password using bcryptjs package
Lecture 5 :
User Login
In this lesson, you are going to implement login user in Nodejs, express and mongoose
Lecture 6 :
Register Config to development
Lecture 7 :
Register global Middlewares in Separate file
In this lesson, you are going to learn how to register global middlewares in separate file
Lecture 8 :
Configure Passport JWT Strategy
In this lesson, you are going to learn how to setup passport with Nodejs. I will also show you how to configure Passport JWT Strategy
Lecture 9 :
Debugging the Passport JWT Strategy
In this lesson, you are going to learn how to setup passport with Nodejs. I will also show you how to configure Passport JWT Strategy
Lecture 10 :
Code Review for Passport Library
In this lesson, you are going to learn how to setup passport with Nodejs. I will also show you how to configure Passport JWT Strategy
Lecture 11 :
Apply Authentication on Routes
In this lesson, you are going to learn how to apply passport-jwt strategy on protected routes. You will learn how to authenticate routes in Nodejs and express
Lecture 12 :
Add Documentation for Signup
In this lesson, you are going to learn how to setup passport with Nodejs. I will also show you how to configure Passport JWT Strategy
Lecture 13 :
Adding Documentation for Login
In this lesson, you are going to learn how to add documentation for rest apis using swagger package
Lecture 14 :
Adding Authentication Header in Documentation
In this lesson, you are going to learn how to add documentation for authentication header in swaggger
Section 14 : JSON Web Token Authentication in Angular 16 Lectures 01:10:14
Lecture 1 :
Create Auth Module
In this lesson, you are going to learn how to create module and routing using Angular-cli
Lecture 2 :
Creating Reactive Forms
In this lesson, you are going to learn how to create reactive forms in Angular
Lecture 3 :
Send Login Request to the backend Server
In this lesson, you are going to learn how to implement JWT Authentication in Angular
Lecture 4 :
Save Token to LocalStorage
In this lesson, you are going to learn how to implement JWT Authentication in Angular and save token in Localstorage
Lecture 5 :
Create HTTP Token Interceptor
In this lesson, you are going to learn how to implement JWT Authentication in Angular and implement Http interceptor in Angular
Lecture 6 :
Apply HTTP Token Interceptor
In this lesson, you are going to learn how to implement JWT Authentication in Angular and apply token interceptor on the routes
Lecture 7 :
Adding Title Dynamically
Lecture 8 :
Adding Signup Button in the Form
Lecture 9 :
Send Signup Request to the Backend Server
Lecture 10 :
Error Handling
Lecture 11 :
Adding Loading Spinner in Auth Form
In this lesson, you are going to learn how to use Material Spinner in Angular Material
Lecture 12 :
Apply Routing Guards
In this lesson, you are going to learn how to create routing guard in Angular. I will show you how to protect private routes in ANgular
Lecture 13 :
Apply NoAuthGuard on Public Routes
In this lesson, you are going to learn how to implement canActivate router guard method in Angular
Lecture 14 :
Fixing Invoice Title
Lecture 15 :
Adding Resolve Guards for Edit Invoice
In this lesson, you are going to learn how to implement routing resolve guard. You will learn how to fetch record in Angular before navigating to the route
Lecture 16 :
Logout User
Section 15 : Social Authentication(Google, Twitter, Github) with Passport in Node.js 20 Lectures 00:55:41
Lecture 1 :
Setup Auth Module
You will learn how to create module using Angular-cli for Authentication
Lecture 2 :
Setup Auth Credentials From Google
You will learn how to create new application in google developer console. I will show you how to get Authentication credentials from the google app
Lecture 3 :
Configure Passport-google Strategy
You will learn how to configure google strategy in Nodejs. I will show you how to authenticate user from google and save user credentials in Mongodb datatabase
Lecture 4 :
Setup Routes for Google Authentication
I will show you how to authenticate routes using google strategy
Lecture 5 :
Serializing and Deserializing User in Passport
In this lesson, you are going to learn how to serialize user and deserialize user in Passport strategy
Lecture 6 :
Understanding Passport Google Auth Flow
In this lesson, you are going to learn how passport-google strategy works in Nodejs
Lecture 7 :
Add Scope for Email and Profile in Google Strategy
You will learn how to add scope for email and profile in gmail
Lecture 8 :
Find or create the user after Authenticated from Google
You will learn how to Find One Or Create the User after authenticated
Lecture 9 :
Refactoring Signup
Lecture 10 :
Handle Duplicate Account Validation in Signup
Lecture 11 :
Refactor Login
Lecture 12 :
Fix Profile Error
Lecture 13 :
Send JWT Token After Authenticated with Google Strategy
Lecture 14 :
Redirect to Login After Failed Authentication
You will learn how to redirect to external route in Angular
Lecture 15 :
Create New Twitter Application
You will learn how to create new Twitter Application for passport-twitter strategy
Lecture 16 :
Setup Passport Twitter Strategy
You will learn how to setup Passport-twitter Strategy
Lecture 17 :
Twitter Authentication with Passport
You will learn how to authenticate user using twitter strategy
Lecture 18 :
Creating developer Application in Github
I will show you how to create new developer application in github for user authentication
Lecture 19 :
Authenticate User with Github Strategy
You will learn how to authenticate user using github strategy in Nodejs
Lecture 20 :
Wrap Up
Section 16 : Social Authentication(Google, Twitter, Github) with Passport on Frontend 13 Lectures 00:42:33
Lecture 1 :
CORS Access Control Error in Google Authentication
In this lesson, you are going to learn how to handle cors issues in google authentication
Lecture 2 :
Adding Proxy for the API in Angular
I will show you how to use proxy in Angular5 project.
Lecture 3 :
Redirect User to Dashboard Router after Authenticated
You will learn how to implement navigation in Angular routing using navigate method
Lecture 4 :
Extract Query Param in AuthGuard
I will show you how to extract query param in can Activate method
Lecture 5 :
Authenticate User from the backend Server
You are going to learn how to authenticate user on the backend server
Lecture 6 :
Fix Authentication in AuthGuard
I will show you how to fix authentication in AuthGuard
Lecture 7 :
Github and Twitter Authentication
I will show you how to authenticate user from frontend using github authentication and twitter authentication
Lecture 8 :
Styling Social Buttons
I will show you how add styling for social icons
Lecture 9 :
Refactor Styling for Signup Buttons
I will show you how to refactor Styling for Signup buttons
Lecture 10 :
Logout User on Backend
I will show you how implement logout user on the passport
Lecture 11 :
Logout User on Frontend
You will learn how to implement logout on the frontend Angular Application
Lecture 12 :
Fixing Http Interceptor on Lazy Loaded Modules
Fixing Http Interceptor on Lazy Loaded Modules
Lecture 13 :
Adding Error Handling in Logout
In this lesson, you will learn how to add error handling in logout
Section 17 : Invoice View 9 Lectures 00:26:06
Lecture 1 :
Module Intro
I will show you how build details view in Material Card
Lecture 2 :
Creating Invoice view Component
You will learn how to create component in Angular using Angular-cli
Lecture 3 :
Adding View Action Item to Table
I will show you how to add Material Menu Item to the Material Data Table
Lecture 4 :
Apply Resolve Guard on Component
You will learn how to add Resolve Guard on Component
Lecture 5 :
Populate Client with Invoice
I am going to show you how to populate records in Mongoose models
Lecture 6 :
Display Invoice Details to the Material Card
Lecture 7 :
Styling Material Card for Invoice Details
I will show how to use Styling for Material card for Invoice Details
Lecture 8 :
Apply Routing for Edit Invoice
I am going to show you how to apply routing for Edit Invoice in Angular
Lecture 9 :
Calculate the Total Value included Tax
You will learn how to calculate total value included tax
Section 18 : Download PDF Invoice 17 Lectures 00:53:38
Lecture 1 :
Module Intro
Lecture 2 :
Installing Plugins to generate PDF File
In this video will install plugins for pdf like express-pdf, phantom-prebuilt, and html-pdf.
Lecture 3 :
Generate Basic Pdf File
In this video, we will generate a basic pdf file with hello world text
Lecture 4 :
Adding Bootstrap to Invoice Template
You can also add bootstrap to html template to generate pdf file. I will show you how to get generate pdf file with bootstrap css
Lecture 5 :
Generate Dummy Invoice
I will generate a dummy invoice with data table
Lecture 6 :
Render Dynamic Content to PDF
You will learn how to render dynamic content in pdf. You will learn how to pass dynamic data to html template using template strings
Lecture 7 :
Display Total and SubTotal in the Invoice
You will learn how to calculate total value by adding sales tax
Lecture 8 :
Refactor Template Code into Methods
I will show you how to refactor template code in methods
Lecture 9 :
Download Invoice From Frontend
In this video, I will show you how to download the pdf file in Nodejs project
Lecture 10 :
Download and Save PDF from Frontend
I will show you how to download pdf file in Angular by using file-saver plugin
Lecture 11 :
Adding Material ProgressBar
I will show you how to add Material ProgressBar in Angular
Lecture 12 :
Adding Name Attribute for Local User
I will show you how to add Name Attribute for Local user
Lecture 13 :
Adding User name and email to the Invoice
In this video, I will show you how to add user name and email in the pdf invoice
Lecture 14 :
Fix Dynamic User name and Email in the Invoice
In this video, I will fix Dynamic User name and Email in the invoice
Lecture 15 :
Adding Error Handling Method
In this video, I will show you how to add error handling method in Angular
Lecture 16 :
Fetch Email from the Twitter Profile
I will show you how to get email in the user profile from passport-twitter authentication
Lecture 17 :
Refactor getUser method
Section 19 : Forgot Password 16 Lectures 00:58:18
Lecture 1 :
Add Link for Forgot Password
In this video, I will show you how to add Link for forgot password in Angular
Lecture 2 :
Create Forgot Password Component
I will show you how to create forgot password component in Angular
Lecture 3 :
Design the Forgot Password Component
I will show how to add Material form fields in Angular Component
Lecture 4 :
Create Forgot Password Route on Backend
You will learn how to implement forgot password in Authentication in Nodejs project
Lecture 5 :
Send Forgot Password Request from Frontend
I am going to show you how to send forgot password request from the frontend application
Lecture 6 :
Create Reset Link to Reset password
I will show you how to create reset password link via email
Lecture 7 :
Create new Account at Ethereal
Ethereal is a local smtp server for only testing local email. In this video, we will create new account at ethereal
Lecture 8 :
Send Reset Password Email to User
I will show you how to send reset password request link to user email
Lecture 9 :
Spinner on Forgot Password
We will add progress bar on forgot password
Lecture 10 :
Create Reset Password Component
We will form fields in reactive forms in Angular
Lecture 11 :
Design the Reset Password Form
I will show you how to design the reset password form
Lecture 12 :
Implement Reset Password on backend
In this video, You are going to learn how to implement reset password on backend
Lecture 13 :
Adding Password Match Validation
In this video, I am going to add password match validation check in Angular component
Lecture 14 :
Reset Password Request from Frontend
You are going to learn how to reset password from frontend
Lecture 15 :
Refactor Documentation for Signup
We will add documentation in swagger for our rest apis
Lecture 16 :
Fix Color typo for Client Select Box

How do i access the course after purchase?

It's simple. When you sign up, you'll immediately have unlimited viewing of thousands of expert courses, paths to guide your learning, tools to measure your skills and hands-on resources like exercise files. There’s no limit on what you can learn and you can cancel at any time.
Are these video based online self-learning courses?

Yes. All of the courses comes with online video based lectures created by certified instructors. Instructors have crafted these courses with a blend of high quality interactive videos, lectures, quizzes & real world projects to give you an indepth knowledge about the topic.
Can i play & pause the course as per my convenience?

Yes absolutely & thats one of the advantage of self-paced courses. You can anytime pause or resume the course & come back & forth from one lecture to another lecture, play the videos mulitple times & so on.
How do i contact the instructor for any doubts or questions?

Most of these courses have general questions & answers already covered within the course lectures. However, if you need any further help from the instructor, you can use the inbuilt Chat with Instructor option to send a message to an instructor & they will reply you within 24 hours. You can ask as many questions as you want.
Do i need a pc to access the course or can i do it on mobile & tablet as well?

Brilliant question? Isn't it? You can access the courses on any device like PC, Mobile, Tablet & even on a smart tv. For mobile & a tablet you can download the Learnfly android or an iOS app. If mobile app is not available in your country, you can access the course directly by visting our website, its fully mobile friendly.
Do i get any certificate for the courses?

Yes. Once you complete any course on our platform along with provided assessments by the instructor, you will be eligble to get certificate of course completion.
For how long can i access my course on the platform?

You require an active subscription to access courses on our platform. If your subscription is active, you can access any course on our platform with no restrictions.
Is there any free trial?

Currently, we do not offer any free trial.
Can i cancel anytime?

Yes, you can cancel your subscription at any time. Your subscription will auto-renew until you cancel, but why would you want to?

Haider Malik,

17018 Course Views

2 Courses

Fullstack Javascript developer and Instructor Haider Malik is the founder of fullstackhour. He is a full-stack Javascript developer. He is passionate about everything JavaScript, and he loves exploring new libraries. Heâ€™s had extensive experience developing software and working with teams to improve how software is developed to meet business objectives.Although his primary focus is on outcomes, implementation often includes technical competency

Learning MEAN Stack by Building Real world Application

This plan includes

This plan includes

What you'll learn?

Course Overview

Pre-requisites

Target Audience

Curriculum 289 Lectures 14:12:12

Section 1 : Angular Fundamentals 15 Lectures 00:42:21

Section 2 : Components and Data Bindings 14 Lectures 00:21:03

Section 3 : Building Components 9 Lectures 00:25:54

Section 4 : Final Project - Getting Started with Real World Application 6 Lectures 00:10:03

Section 5 : Create Dashboard Layout on Frontend Angular Application 15 Lectures 00:36:12

Section 6 : Adding Routing in Angular 4 Lectures 00:14:23

Section 7 : Setup Node.js Server 7 Lectures 00:12:34

Section 8 : Creating CRUD(Create, Read, Update, DELETE) API on Node.js Backend 21 Lectures 00:36:39

Section 9 : Documentation for the REST APIS Using Swagger In Nodejs 10 Lectures 00:20:21

Section 10 : Creating CRUD with Reactive Forms and Material Data Table 27 Lectures 01:28:23

Section 11 : Pagination, Sorting and Filtering on Angular and Nodejs 18 Lectures 01:04:37

Section 12 : Client Feature (Material Dialog and Material Data Table) 38 Lectures 01:53:43

Section 13 : JSON Web Token Authentication with Passport 14 Lectures 00:59:29

Section 14 : JSON Web Token Authentication in Angular 16 Lectures 01:10:14

Section 15 : Social Authentication(Google, Twitter, Github) with Passport in Node.js 20 Lectures 00:55:41

Section 16 : Social Authentication(Google, Twitter, Github) with Passport on Frontend 13 Lectures 00:42:33

Section 17 : Invoice View 9 Lectures 00:26:06

Section 18 : Download PDF Invoice 17 Lectures 00:53:38

Section 19 : Forgot Password 16 Lectures 00:58:18

Our learners work at

Frequently Asked Questions

How do i access the course after purchase?

Are these video based online self-learning courses?

Can i play & pause the course as per my convenience?

How do i contact the instructor for any doubts or questions?

Do i need a pc to access the course or can i do it on mobile & tablet as well?

Do i get any certificate for the courses?

For how long can i access my course on the platform?

Is there any free trial?

Can i cancel anytime?

Instructor

More Courses By : Haider Malik

Haider Malik

Learn React 16 and Redux by building rea...

Student Reviews 4.6

Students also bought

The Extreme Web Development Course

Develop your own Chrome Extension &...

The Ultimate Codeigniter 3 Course

Superb Advance Javascript - Become ...

Application development with IBM Wa...

Learn React 16 and Redux by buildin...

Added to cart

Learning MEAN Stack by Building Real world Application

Buy Combo Deals

Learning MEAN Stack by Building Rea...

The Extreme Web Development Course

Develop your own Chrome Extension &...

Students learning on Learnfly works with Fortune 500 companies around the globe.