Learning Web Development with the MEAN Stack
2.4 (10 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
125 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Learning Web Development with the MEAN Stack to your Wishlist.

Add to Wishlist

Learning Web Development with the MEAN Stack

Discover the MEAN stack for web development to create powerful, enterprise-scale applications
2.4 (10 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
125 students enrolled
Created by Packt Publishing
Last updated 3/2016
Current price: $10 Original price: $75 Discount: 87% off
1 day left at this price!
30-Day Money-Back Guarantee
  • 3 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Leverage existing third-party libraries using npm and bower.
  • Develop an Angular application without a Node backend
  • Build graphs for the dashboard of our enterprise application with d3.
  • Create your own Node modules using npm
  • Utilize Mongoose to manage your data in Mongo and build complex pipelined queries.
  • Test your Node and Angular applications with Grunt, Mocha and Jasmine
  • Use Grunt for automation and streamlined development.
View Curriculum
  • You just need to brush up on JavaScript and NoSQL and you’re good to go!

MEAN is the now famously known combination of MongoDB, ExpressJS, AngularJS, and NodeJS, which has emerged as one of the leading technology stacks for developing dynamic web applications. The MEAN stack simplifies development and promotes team cohesion by allowing applications to be written and maintained entirely in JavaScript, on the frontend, and backend.

This course focuses on the full-stack MEAN development process and goes in-depth by incorporating a supporting architecture with Grunt and integrating automated testing. It will walk you through building a real, enterprise-grade application.

Starting out with the fundamentals of the MEAN stack technologies, you will learn how to build a strong solution architecture for automated builds and distributed development. You’ll then dive deep into Grunt, Bower, and npm to become a full-stack MEAN engineer. You will discover how to build one-to-many relationships using arrays of objects in Mongoose. Diving even deeper, you’ll meet new technologies such as D3, which will help you to build graphs for an enterprise dashboard. Then, we will test our Node and Angular applications with Karma, Jasmine, Mocha, and Chai.

By the end, you’ll be able to build a powerful, MEAN-backed application for working in a distributed team.

About The Author

Michael Perrenoud is a veteran enterprise application engineer with more than 15 years of experience architecting and building full-stack solutions for small businesses and Fortune 500 companies. He’s mentored literally hundreds of engineers across the world on the MEAN stack and more. He is the CEO and Founder of Consult with Mike, LLC and provides thousands of dollars in free resources in the form of blog posts on his site today.

He also has an e-book coming out soon, MEAN with Mike, which is a composition of hundreds of hours of mentorship. It’s a true, long-term, learning course that is meant to build problem solvers.

Who is the target audience?
  • If you’re just starting out on the MEAN stack or you’ve gotten started with a template generator, this video course will broaden your horizons.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 39 Lectures Collapse All 39 Lectures 02:48:07
Peering Down on Meanville
7 Lectures 26:46

There is a lot of information out there about the MEAN stack. Let’s bring it all together, giftwrap it, and deliver a real-world application.

The Course Overview

The acronym is catchy but undescriptive. Let’s break each letter down and demystify the stack.

What Is the MEAN Stack?

We need an editor, one that is going to provide us with great assistance. WebStorm is going to be that editor.

Installing WebStorm

We need to download the libraries we depend on. We also need to be able to distribute them to production. The tools npm, Bower, and Grunt are going to make that possible.

Installing npm, Bower, and Grunt

We need to build an automated testing scenario, for both Angular and Node. Karma, Jasmin, Mocha, and Chai are going to make that happen.

Installing Test Suites

Having the tools in the toolbox is great; using them is another story. Let’s use them in some practical examples.

What Do All of These Tools Do?

A necessary foundation has been laid, but an entire example hasn't. Let’s build the quintessential Hello, World! application and put it all together.

Hello, Mr. Grinch, Let’s Get MEAN!
You’re a MEAN One!
5 Lectures 31:44

Before building an application we need to understand what we are building. Generally, this is where you’d get an introduction from the customer, but we have a complete application to look at.

Preview 06:09

While it’s nice to have an API to work against, this is not always possible. With AngularJS, however, this isn’t a problem; we can fake that data to make sure that we are ready for the API.

Getting Started

One of the things that have to be considered is what’s displayed when no data is available. Building the dashboard skeleton before faking all of the data will allow us to do that.

The Dashboard

Let’s get started adding data. The components we build here are really going to be the meat and potatoes of any enterprise application.

Adding a Customer

Adding a customer is awesome. However, we need to know how to list customers so that newly added ones can be seen and edited.

Listing Customers
Building the Sled
5 Lectures 19:30

Listing data is great, but a database is no good if you can’t edit it. Let’s walk through how we might edit a customer record.

Preview 04:02

Having a list of customers is great, but we need to be able to sell them products and keep track of those sales.

Adding a Sale

Often, we will need to be able to list all the sales for a customer. There are a lot of ways to do this, but I’m going to leverage a child state and a one-to-many view.

Listing a Customer’s Sales

Sometimes, there is something missed on a sale, so we need to edit it, such as the shipping address.

Editing a Sale

Most of the times, a standard control is good enough for input, but there are times when we need something more complex. Angular Bootstrap provides some of this.

Using the Angular Bootstrap Date Picker
Unwrapping the Presents
4 Lectures 19:12

There are times when you need a specific set of data to test something that will grow over time. A dashboard is perfect here.

Preview 05:15

There are also times when you’ll need to build visual aids for the management or analysts. Graphs are the quintessential visual aid

Dashboard – Monthly and Quarterly Sales

Let’s list all unfulfilled orders in the system on the dashboard.

Dashboard – Unfulfilled Orders

Let’s list all recent orders on the dashboard.

Dashboard – Recent Orders
Loading the Presents onto the Sled
5 Lectures 27:41

Let’s get to the other side of the stack and start building the server-side pieces. The first part is building our Mongoose models.

Preview 03:09

We know every endpoint that we need. Let’s build those endpoints in ExpressJS.

ExpressJS – Setting Up the Routes

We have the endpoints set up on the server side. Now let’s talk about getting out of the mock data and going end-to-end.

AngularJS – Hooking Up the API

We have a full stack. Let’s now add a customer to the database for real.

Full Stack – Adding a Customer

Let’s add a sale to customer

Full Stack – Adding a Sale
Up to the Mountain — Testing the Stack
5 Lectures 23:39

We want to make sure that all the routes exist that are published. Let’s test them.

Preview 04:17

We want to make sure that the API works as expected, so we will build tests for all endpoints.

NodeJS – Testing the API

We now want to make sure that we are handling every part of the API, so let’s test it.

AngularJS – Testing the API

We need to make sure that the controllers are behaving as expected, so let’s test them.

AngularJS – Testing the Controllers

Services need to provide exactly what they publish, so let’s test them as well.

AngularJS – Testing the Services
A Change of Heart – Deploying Your Application
5 Lectures 12:03

We need to build a distribution package. However, we need concatenation and uglification. Let’s count on Grunt to do this for us.

Preview 03:45

We need a place to deploy our code. Let’s look up to Heroku for that.

Heroku – Publishing Your Code

We need a database, off-premise, that is used for production. Let’s use a Heroku add-on for that.

Heroku – Setting Up the Database

We have different settings in production, for some things, as against development. Let’s add some environment variables to Heroku for this.

Heroku – Setting Up Environment Variables

We need to see what our application looks like in production. Let’s launch our newly deployed Heroku application.

Viewing Your Application
A Change in Tools
3 Lectures 07:32

There are some helpful plugins for Sublime that will make it easier; let’s review those.

Preview 03:01

This is a different tool set, so we need to review how we might use it differently compared to WebStorm.

Using the Tools

There are some caveats to using Sublime over WebStorm, and so we’ll review those.

Understanding the Caveats in Sublime
About the Instructor
Packt Publishing
3.9 Average rating
4,574 Reviews
36,117 Students
356 Courses
Tech Knowledge in Motion

Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.

With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.

From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.

Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.