Hands-On MEAN Stack Web Development
3.8 (19 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.
72 students enrolled

Hands-On MEAN Stack Web Development

Become a MEAN Stack developer by applying MongoDB, Express, Angular, and Node.js in your web development projects
3.8 (19 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.
72 students enrolled
Created by Packt Publishing
Last updated 9/2018
English
English [Auto-generated]
Current price: $86.99 Original price: $124.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 3 hours on-demand video
  • 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
  • Build an end-to-end MEAN stack application
  • Setting up a server with Node .js
  • Building APIs with Express
  • Store, update, and retrieve data with MongoDB
  • Building user interfaces with Angular
  • Using the latest features of JavaScript ES6/7
  • Exploring the basics of TypeScript
Course content
Expand all 38 lectures 02:51:07
+ Installation and Setup
4 lectures 11:28

This video provides an overview of the entire course.

Preview 02:31

In this video, we will set up and install Node.js.

   •  Download and install a code editor and Visual Studio is recommended

   •  Go to nodejs.org and download the latest version

   •  Verify the version on your terminal

Setup and Installation – Node.js
01:57

In this video, we will install the Angular CLI.

   •  Go to cli.angular.io

   •  Install the command-line tool via the terminal

   •  Open the project in IntelliJ

Installing Angular CLI
01:20

In this video, we will install MongoDB.

   •  Go to the site mongodb.com/download-center#atlas

   •  Download the tgz file

   •  Follow the instructions on the installation documentation to create the data directory, set permissions, and run MongoDB

Installing MongoDB
05:40
+ Building User Interfaces with Angular
10 lectures 01:11:45

In this video, we will look at the frontend and single-page application (SPA).

   •  Understand Single-Page Applications

   •  Understand how Angular helps to build a single-page application

   •  Demonstrate deploying a complete application to Amazon Web Services

Preview 01:58

In this video, we will generate our first Angular project.

   •  Use the Angular CLI tool downloaded earlier to create the project

   •  Test the project template by compiling and running it

   •  Create a Hello World application

Generating an Angular Project
03:18

In this video, we will look at our project’s folder structure and overview.

   •  Have a look at what roles all the folders generated by Angular CLI play

   •  See how changes are propagated with the help of our test app

   •  Build a custom role to install and configure a custom application

Project Structure Overview
08:43

In this video, we will see how to create our first Angular component.

   •  Create a new component in our test app

   •  Run the app to see how the data of the component is executed

   •  A live programming session solving example

Our First Angular Component
09:01

In this video, we will look at templates in Angular.

   •  Display a property inside a template, that is, html part of the page

   •  Display the names of a few days of the week inside a template, that is, html part of the page

   •  Use an encrypted file as part of an Ansible playbook run

Templates
07:08

We will look at events and bindings in Angular.

   •  Create new component for our events and bindings

   •  Add a click event binding to the onclick event of a JavaScript element

   •  Use event binding for property events as well

Events and Bindings
09:27

In this video, we will look at custom events and bindings.

   •  Bind to custom properties

   •  Display property from parent and send data from parent to child as well as child to the parent

   •  When event is fired, a function is run and is getting data passed from event emitter

Custom Events and Bindings
07:36

In this video, we will look at services in Angular.

   •  Introduction to services

   •  Create a service for our project

Services
10:46

In this video, we will look at two-way data binding in Angular.

   •  See how two-way data binding works

   •  Show that data given as input in our app is actually going to the component

   •  Show that changes to data given as input in our app are seen live

Two-Way Data Binding
05:50

Angular comes out of the box with a forms module which we can use to create and validate forms with ease.

   •  Learn about template driven Forms

   •  Add forms module to the application

   •  Validate the form fields

Forms
07:58
+ Build Server-Side with Node.js
7 lectures 27:58

In this video, we will introduce NodeJS.

   •  Overview of NodeJS

   •  Check out the advantages

   •  Learn in detail about synchronous and asynchronous

Preview 04:07

In this video, we will create our first NodeJS application.

   •  Create a new NodeJS project

   •  Run the test project in the terminal

   •  Create and run a hello project

Hello NodeJS
03:51

In this video, we will look at modules and require.

   •  Go to the NodeJS documentation to learn more about modules

   •  Use the File System module using the require function

   •  Execute the app

Modules and Require
03:39

We will be creating our own module.

   •  Create a module by creating a new file in NodeJS project

   •  Use the module in a console.log (module) and run

   •  Show an example for method overloading

Creating a Module
03:25

In this video, we will look at installing external modules in our application.

   •  Create a package.json file

   •  Import an external module into our application

   •  See how JavaDoc looks by compiling via gradle

NPM and External Modules
04:38

In this video, we will look at the asynchronous nature of Node.

   •  Learn how a program executes in synchronous and asynchronous application respectively

   •  Make your application asynchronous and test the output

Synchronous versus Asynchronous
03:44

In this video, we will create our own HTTP server.

   •  Import HTTP

   •  Create a server using the HTTP module

   •  See that we can listen to requests and send our responses

Creating an HTTP server
04:34
+ Building APIs with Express
8 lectures 21:34

We will introduce Express and look at RESTful services.

   •  Understand why Express is better for building APIs

   •  See how REST services work

   •  Look at different requests: GET, POST PUT and DELETE

Preview 03:53

In this video, we will create our Express server.

   •  Install Express

   •  Use the function require to require Express into our app

   •  Create a server to run a Hello World app

Creating a Server
02:19

In this video, we will explore the GET method.

   •  Use the GET method to get back an array of users in our Hello World app

   •  Pass a parameter to get one specific user in our app

   •  Use the GET method to get one particular property by adding a query

GET Method
04:37

In this video, we will install Nodemon.

   •  Understand what Nodemon/ Node monitor is

   •  Install and run Nodemon

   •  Use try-catch to better protect the code

Nodemon
00:58

We will create a POST request.

   •  See how it is used similar to GET request

   •  Use a form like Postman for the data to be posted

   •  Use NIO and read text from a file to be converted

POST Method
05:05

In this video, we will look at making a PUT request.

   •  See how it is used similar to GET request

   •  Use the PUT id to see the users should values should be updated

   •  Use a form like Postman for the data to be updated

PUT Method
01:31

In this video, we will create a DELETE request.

   •  See how it is used similar to GET request

   •  Use the id to find the user and find the index of the id to remove that from the index array

   •  Use a form like Postman for the data to be deleted

DELETE Method
01:13

In this video, we will look at cleaning up.

   •  Understand what PATCH method is and why it should be used

   •  If the record doesn’t exist, we cannot update the record

   •  Add error case

Cleaning Up
01:58
+ Managing Data with MongoDB
6 lectures 14:26

In this video, we will be installing Mongoose.

   •  Understand why to use a different client called Mongoose instead of the Mongo client in our node application

   •  Install Mongoose

   •  Require Mongoose into our app

Installing Mongoose
02:20

In this video, we will look at models.

   •  Create a file called model

   •  Access to models with Mongoose

   •  Create our application’s deployment and service

Models
02:03

In this video, we will use the model to create a record.

   •  Use the same API that we had Express

   •  Create a new user for the record

   •  Use a form like Postman to see what happens when we send a data

Create a Record
03:21

We will get a record through our model.

   •  Use the same API that we had Express

   •  Add a function for callback of error and records

   •  Use a form like Postman to see how we get the data

Get a Record
01:51

In this video, we will edit a record with our model.

   •  Add a function to find a user by id

   •  Add a function for callback of error and records

   •  Use a form like Postman to see how we can edit the data

Edit a Record
02:16

We will delete a record with our model.

   •  Add a function to find a user by id and remove it

   •  Add a function for callback of error and records

   •  Use a form like Postman to see how we can delete the data

Delete a Record
02:35
+ Putting It All Together
3 lectures 23:56

In this video, we will build the front-end of our application with Angular.

   •  Create the user interface and the components

   •  Style the application

   •  Create the required services

Building the Frontend
07:38

In this video, we will build the back-end and the APIs required for the application.

   •  Create the API endpoints in Express

   •  Create Mongoose models for the collections

   •  Use the models in the API to perform CRUD operations

Building the Backend
05:43

In this video, we will connect the client side to the API server.

   •  Consume the API in the front-end

   •  Use HTTP to connect to the API

   •  Update the services to use the APIs

Connecting the API
10:35
Requirements
  • A basic knowledge of Angular will be helpful.
Description

JavaScript libraries are emerging as the latest tools for web development. As a result, companies and startups are now looking for MEAN stack developers.

This course will help you achieve this by teaching you MEAN stack development through building a Reddit-like application. This course will teach you how to apply MongoDB, Express, Angular, and Node.js in your web development projects.

By the end of the course, you will be a confident MEAN stack developer and will be able to build web applications.

About the Author

Abhilash Govula is a front-end developer with over seven years' experience working on many JavaScript-driven web applications/interfaces and mobile apps. He has strong hands-on experience with JavaScript and libraries such as AngularJS, Angular2, ReactJS, React Native, Redux, Ionic, jQuery, and Bootstrap, and is Proficient with Node.js, Express, and MongoDB. He also has experience in developing JavaScript-driven mobile apps using React Native, Ionic and progressive web applications. Also, he was responsible for developing new layouts/wireframes for desktop and mobile, maintaining existing layouts and frameworks, and has a thorough grasp of cross-platform, cross-browser compatibility issues. His major focus is on designing user interactive web applications and Rich Internet Applications (RIA’s). He is skilled enough to handle designing, maintaining, developing, and deploying applications. He has demonstrated the ability to complete high-end projects and is able to effectively communicate with a wide range of clients and co-workers.

Who this course is for:
  • This course targets web-developers who want to learn MEAN Stack development.