Learning MEAN Stack by Building Real world Application
3.7 (180 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
5,658 students enrolled

Learning MEAN Stack by Building Real world Application

Learn how to build Full-Stack Web Application with Nodejs, Express, MongoDB, Angular8, Angular Material, and Passport
3.7 (180 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
5,658 students enrolled
Created by Haider Malik
Last updated 1/2020
English
English [Auto]
Current price: $104.99 Original price: $149.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 14.5 hours on-demand video
  • 20 articles
  • 1 downloadable resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • 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
  • Send Email in Nodejs
Course content
Expand all 308 lectures 14:30:06
+ Angular Fundamentals
15 lectures 46:29
Install Tools
00:05

In this video, you will learn how to install angular-cli and create Angular 5 project using Angular-cli

Preview 02:48

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

Edit Your First Angular Component
01:13

An Angular CLI project is the foundation for both quick experiments and enterprise solutions. In this video, I will explain the project files from Angular-cli project

Project File Review
05:16

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

Preview 01:45

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.

Preview 04:09

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.

Introduction to Components
02:02

  The @Component decorator identifies the class immediately below it as a component class, and specifies its metadata.

Create your first Angular Component
05:07

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

Data Bindings
06:09

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

Preview 02:59

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.

Directives
04:46

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

Introduction to Services
02:00

 In this lesson, we will create a new Angular service.

Create Your Angular Service
01:57

Components consume services; that is, you can injecta service into a component, giving the component access to that service class

Introduction to Dependency Injection
01:57

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

Providing Services
04:16
+ Components and Data Bindings
14 lectures 20:49

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.

Inline Template
02:50

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

Showing an Array property with ngFor
01:03

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:

Creating a class for the data
03:07

You met the double-curly braces of interpolation, {‌{ and }}, early in your Angular education

Interpolation
01:02

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.

Property Binding
01:34

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

Attribute Binding
00:52

In this video, we are going to add bootstrap4 in Angular Application

Adding Bootstrap
02:02

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].

Class Bindings
01:08

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]

Style Binding
00:53

The bindings directives you've met so far flow data in one direction: from a component to an element.

Event Binding
01:05

 You can also implement event filtering in Angular. In this lesson, we will implement keyup event in Angular

Event Filtering
01:12

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 <input> element

Template Reference Variable
01:06

Two-way data binding combines the input and output binding into a single notation using the ngModeldirective.

Two Way Data Binding
01:18

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

Pipes
01:37
+ Building Components
9 lectures 25:45

You can communicate with parent and child component with using input property. It is used to send the data to the child component

@Input Property
03:34

You can also change  the name of Input property  by using aliases in Angular

Alias @Input Property
00:44

The purpose of @Output is to trigger custom events in components and create a channel for inter component communication

@Output Property
03:34

 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.

Passing Data to Events
02:26

You can also change  the name of Output property by using aliases in Angular

Alias @Output Property
00:33

There are three ways to apply styling on Angular component.

Styles Component
02:00

View encapsulation defines whether the template and styles defined within the component can affect the whole application or vice versa.

View Encapsulation
05:53

ng-content is a way of rendering html content between opening and closing tags within template for that componen

ng-content
05:42

If you don’t want to put extra div in the html content then you need ng-container

ng-container
01:19
+ Final Project - Getting Started with Real World Application
7 lectures 08:18
Create Angular Project for our Real world Application
00:55
Complete Source Code for this Module
00:01

In this video, you are going to learn how to add Angular material in to Angular version 5.

Angular Material Setup
02:12

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

Adding Prebuilt Material Theme
00:56

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

Adding Material Fonts
01:27

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

Creating Shared Module
02:20
+ Create Dashboard Layout on Frontend Angular Application
16 lectures 35:57

In this lesson, you are going to learn how to create a new module using Angular-cli

Preview 01:53

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

Adding Lazy Loading
04:54

I will show the demo of lazy loading. You can check that is lazy loading working on your application or not

Lazy Loading Demo
01:23

I will show you to create component using Angular-cli

Create Main Content Component
02:08

You will learn how to create component in Angular using Angular-cli

Create SideNav Component
03:39

I will show how to add material sidenav component in Angular Application

Adding Sidenav to our Layout
03:41

You will learn what is material toolbar component and how to use material toolbar component

Adding Toolbar in Sidebar Navigation
01:11

You will learn how to design a side nav bar using Angular material toolbar component

Adding List Items to the Side Navigation
00:58

I will teach you how to use material toolbar in Angular Application

Adding Toolbar on the top of Layout
00:41

You will learn how to add mode in the Material Sidenav navigation

Adding Mode to the Material Sidenav Navigation
02:06

I will show you how to make a material sidebar responsive

Adding Responsiveness to Side Navigation
05:51

I will show how to debug the material nav bar and its responsiveness

Debugging Side Navigation Responsiveness
01:27

I will show you how to create a menu icon using material menu

Preview 02:47

I will show you how to use material icons in the Angular material application. We will use material icon to create a menu icon

Displaying Menu Icon on Small Screen
01:30

In lesson you will how to use Material Card component in your Angular application

Adding Material Card
01:48
+ Adding Routing in Angular
5 lectures 14:19
Complete Source Code for this Module
00:00

In this lesson, you will learn how to refactor any component and module

Refactor App Structure
04:09

In this lesson, you are going to learn how to use Material list items in Navigation

Preview 01:54

In this lesson, you are going to learn how to create routing and module in Angular

Creating Invoices Module and Routing
05:26

In this video, you are going to learn how to create a module in Angular and routing using Angular-cli

Create Clients Module and Routing
02:50
+ Setup Node.js Server
8 lectures 12:27

In this lesson, you are going to learn how create express server in nodejs application

Creating Express Server
01:48

I will show you how to create a route in express application

Create Route in Express
00:36

You will learn how to use ES6 features with Nodejs using babel plugin

ES6 Setup using Babel
02:31

I will show you how to add npm script for production and debugging

Create npm script for Production
01:14
Setting up Prettier
01:44

You will learn how to use ESLint with Nodejs. I am going to teach how to configure ESlint in Nodejs app

ESlint Setup with Prettier
02:47

I will show you how to use both eslint and prettier with nodejs project

Configure Prettier with ESLint
01:47
+ Creating CRUD(Create, Read, Update, DELETE) API on Node.js Backend
22 lectures 50:42
Complete Source Code for this Module
00:00

In this video, I will show you how to create a get endpoint route in express framework

Preview 02:22

You will learn what is middleware in express and how to create middleware in express

Create Custom Middleware in Express
01:34

I will show you how to convert your nodejs app into MVC pattern.

Refactor App Structure to Controller and Routes
03:02
Refactor the config folder
01:21

You will learn how to connect Nodejs app to mongoose

Connecting to MongoDB
01:36

You will learn how to create new model in mongoose ODM

Create new record in mongoose Model
04:18

I will show you how to debug the Nodejs app in Chrome

Debugging Node.js App in Chrome
02:04

You will learn how to debug the Nodejs app in VS Code

Debugging Node.js App in VS Code
01:45

You will learn how to create error handler middleware in Express

Error Handling Middleware
01:47

I will show you how to handle Errors using error handler middleware

Error Handling Middleware Demo
00:50

You will learn how to catch errors using global level middleware

Creating Global Error Handling Middleware
03:22

I will show you how to implement Logging using morgan package in nodejs

Logging Http Request status using morgan middleware
01:49

I will show you how to parse the request body in express using json body-parser

Preview 01:42

I will show you how to create new record in MongoDB using mongoose model

Preview 01:27

I will show you how to add validations through Joi. Joi is an external package to handle validations

Preview 07:25

I will show you how to find all the records from the Mongodb collection

Preview 00:41

You will learn how to use http status codes in express api

Handling Http status codes
02:20

I will show you how to find record by id

Find Record by ID
02:34

I will show you how to delete record from MongoDB on the based on ID

Delete Record from MongoDB
01:37

You will learn how to update record in Nodejs and MongoDB collection

Update Record by Id from MongoDB
04:10
+ Documentation for the REST APIS Using Swagger In Nodejs
11 lectures 29:18
Complete Source Code for this Module
00:00

In  thi lesson, I will teach you how to setup swagger project with Nodejs

Initial Setup for Documentation
02:26

You will learn how to add host, port, or project meta data in swagger

Adding Meta Data for Swagger
03:14

In this lesson, I will teach you how to add JSON Mime types in swagger file

Adding JSON Mime Types for Swagger
02:32

I will show you how to add model definition in swagger project

Create Swagger Model Definition
03:29

I will show you how to add documentation for HTTP post endpoint in swagger

Preview 05:34

I will teach you how to add documentation for get endpoint

Documentation for the GET Endpoint
02:16

You will learn how to add documentation for FindOne endpoint

Documentation for FindOne Endpoint
03:40

You will learn how to add documentation for DELETE Endpoint in Swagger

Documentation for Delete Endpoint
01:28

You will learn how to add documentation for Update path in Swagger and Nodejs

Documentation for Update Endpoint
03:06

I will teach you to debug the nodejs project api from swagger doc

Update Build Script to add Swagger files
01:33
+ Creating CRUD with Reactive Forms and Material Data Table
28 lectures 01:27:56
Complete Source Code for this Module
00:00

You will learn what you we will cover in this module

Module Intro
01:21

You will learn how to create new service in Angular using Angular-cli

Create Service in Angular
07:07

You will learn how to handle cors in Nodejs application

Handle CORS Issues on Backend
01:42

You will learn how to add Angular Material Data Table in Application

Adding Angular Material Data Table
03:15

You will learn how to populate records into the Material Data Table

Populating Records to the Data Table
03:19

You will learn how to reformat the date using Angular date pipe

Reformat the Date using Pipe
01:08

You will learn how to redirect the user in routing

Redirect in Routing
01:43

You will learn how to add new action menu to the data table

Adding Material Menu in Data Table
03:44

You will learn how to create button to save new inovice

Create Button to save new Invoice
03:00

You will learn how to add Routing for new record in Angular Application

Adding Routing for new Invoice
04:17

You will learn how to add basic form in Angular

Create basic Form
03:25

You will learn how to add Angular Date Picker in the reactive form

Adding Material Date Picker
01:51

You will learn how to add  reactive forms in Angular Application

Adding Reactive Forms
05:21

You will learn how to add save and cancel button the reactive forms

Save and Cancel button in the Form
02:16

You will learn how to send the save record request from the Angular application to nodejs server

Sending create request to the backend server
03:52

You will learn how to change the color scheme of the Angular form fields

Change the Color Scheme for Form Fields
01:39

You will learn how to add validations in reactive forms in Angular Application

Validations in Reactive Forms
02:08

You will learn how to display the validation error to the user

Displaying Validation Error to User
02:57

You will learn how to add success notification to the user

Adding Success Notification
04:13

You will learn how to show error notification to the user

Error Handling Notification
01:42

You will learn how to send the delete record request to the backend server

Delete Invoice
03:40

You will learn how to notification using MatSnacbar mdoue

Adding Notification for Delete Invoice
02:49
Refresh Data Table after deleting records
02:33

You will learn how to add routing to update the record using reactive forms

Adding Routing to update Record
02:43

I will show you how to get the router params in component

Get the Route params using ActivatedRoute
03:36

I will show you how to set the object to reactive forms. How to set default value in reactive form

Set the Object to the Reactive Forms
03:38

In this video, I will show how to update the record in frontend. You will learn how to send the update request to the backend server

Send the Update Request to the backend
08:57
Requirements
  • Basic NodeJS/Express and Angular Experience is required
  • Basic knowledge of HTML, CSS, and Javascript is required
Description

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
Who this course is for:
  • Intermediate Angular Developer who want to learn full-stack web developement
  • Nodejs Developer who want to learn full-stack web development