All in One Offer! | Access Unlimited Courses in any category starting at just $29. Signup today. Offer Ends in: 6 Days!

Browse Library

Learning MEAN Stack by Building Real world Application

Learn how to build Full-Stack Web Application with Nodejs, Express, MongoDB, Angular5/6, Angular Material, and Passport

Instructed by Haider Malik

6 days left at this price!
Get Unlimited Courses Access $29
$29
It Includes
  • Get Full Access to the platform
  • Access to 16000+ online courses
  • High Quality Recorded Lectures
  • Learn Online from Mobile/PC/Tablet
  • Assignments & Projects
  • Online iLab Access
  • Certificate of Completion
  • Download for offline viewing
  • Free Instructor Support
  • Access valid for 1 user only
  • Cancel Anytime
  • 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
View More...

Section 1 : Angular Fundamentals

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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)

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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?

    Once you purchase a course (Single course or Subscription), you will be able to access the courses instantly online by logging into your account. Use the user name & password that you created while signing up. Once logged in, you can go to the "My Courses" section to access your course.
  • 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 certification after completing the course?

    Yes. Once you succesfully complete any course on Learnfly marketplace, you get a certiifcate of course completion emailed to you within 24 hours with your name & the Learnfly badge. You can definately brag about it & share it on your social media or with friends as one of your achievement. Click here to view the sample certificate Click Here
  • For how long can i access my course after the purchase?

    If you buy a single course, that course is accessible to you for a lifetime. If you go for a premium subcription, you can access all the courses on Learnfly marketplace till your subscription is Active.
  • Whats the difference between Single Course Purchase & Go Premium option?

    With Single Course Purchase, you only get an access of one single course. Whereas, with premium monhtly or annual subscription, you can access all the existing or new courses on learnfly marketplace. You can decide what option suits you the best and accordingly you can make your purchase.
  • Is there any free trial?

    Currently, we don't have any free trial but it may be available in near future.
  • What is the refund policy?

    We would hate you to leave us. However, if you are not satisfied, you can ask for a full refund within 30 days & we will be happy to assist you further.

Haider Malik,

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
View More...
the-extreme-web-development-course

The Extreme Web Development Course

By : Paul Carlo Tordecilla

Lecture 124

develop-your-own-chrome-extension-firefox-plugin

Develop your own Chrome Extension &...

By : Harshit Srivastava

Lecture 15

the-ultimate-codeigniter-3-course

The Ultimate Codeigniter 3 Course

By : Paul Carlo Tordecilla

Lecture 23

superb-advance-javascript-become-javascript-professional

Superb Advance Javascript - Become ...

By : Paul Carlo Tordecilla

Lecture 28

application-development-with-ibm-watson

Application development with IBM Wa...

By : Harshit Srivastava

Lecture 14

learn-react-16-and-redux-by-building-real-world-application

Learn React 16 and Redux by buildin...

By : Haider Malik

Lecture 74

Sign up and start learning
By signing up, you agree to our Terms of Use and Privacy Policy
Reset Password Request
Enter your email address and we'll send you a link to reset your password.