Take this
course

Software Development / Web Development

Learning Web Development with the MEAN Stack

Discover the MEAN stack for web development to create powerful, enterprise-scale applications

Description

MEAN is the now famously known combination of MongoDB, Express.js, AngularJS, and Node.js, 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.

Full details

Curriculum

  • Peering Down on Meanville
    The Course Overview
    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. • Demystifying the tools and technologies • Building and testing a real-world application • Deploying a real-world application
    3:08
    What Is the MEAN Stack?
    The acronym is catchy but undescriptive. Let’s break each letter down and demystify the stack. • Understanding each technology involved • Understanding what technologies are server side • Understanding what technologies are client side
    2:13
    Installing WebStorm
    We need an editor, one that is going to provide us with great assistance. WebStorm is going to be that editor. • Installing WebStorm • Introduction to WebStorm • Using WebStorm
    2:08
    Installing npm, Bower, and Grunt
    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 Node.js • Introducing and using npm and Bower • Introducing and using Grunt
    7:31
    Installing Test Suites
    We need to build an automated testing scenario, for both Angular and Node. Karma, Jasmin, Mocha, and Chai are going to make that happen. • Introducing and configuring Karma • Introducing and using Jasmine with Karma • Introducing and using Mocha and Chai for Node
    3:02
    What Do All of These Tools Do?
    Having the tools in the toolbox is great; using them is another story. Let’s use them in some practical examples. • A practical example using Grunt • A practical example using Bower and npm • A practical example using Karma, Jasmine, Mocha, and Chai
    4:30
    Hello, Mr. Grinch, Let’s Get MEAN!
    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. • Reviewing the code • Executing the code • Understanding the code
    4:21
  • You’re a MEAN One!
    The Application Introduction
    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. • Walk through the dashboard and discuss the functionalities of the components • Navigate to the All Customers screen and also review the New Customer and New Sale screens • Review Edit Customer and Edit Sale
    6:13
    Getting Started
    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. • Review the code that is necessary for persisting and generating mock data • Review the code that is necessary for intercepting the calls to the server • Launch the application
    8:13
    The Dashboard
    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. • Add a template for a directive that will be reused • We build our first complex directive • Run the application
    5:57
    Adding a Customer
    Let’s get started adding data. The components we build here are really going to be the meat and potatoes of any enterprise application. • Build a shared header component for detail screens • Build an entry form • Review the controller behind it all and see it in action
    8:50
    Listing Customers
    Adding a customer is awesome. However, we need to know how to list customers so that newly added ones can be seen and edited. • Reuse a directive that we’ve already built • Review how we might look up all records with a resource • Add a route to the system so that we can navigate to the list and see it in action
    2:39
  • Building the Sled
    Editing a Customer
    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. • Build a detail form to show the data specific to a single customer and save any changes • Leverage a controller after building the view • Add a route to navigate to this view
    4:03
    Adding a Sale
    Having a list of customers is great, but we need to be able to sell them products and keep track of those sales. • Build a view • Build a controller that looks a lot like the customer controller • Add a route for this new view and try it out
    6:24
    Listing a Customer’s Sales
    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. • Build a way to list sales • Build a directive and a specific controller for this upcoming child state. Also use named views • Add a route in place and see this in action
    4:00
    Editing a Sale
    Sometimes, there is something missed on a sale, so we need to edit it, such as the shipping address. • Reuse the detail form view that is already in place • We make sure that our controller is up to snuff and ready for action if we’re editing a sale • Add a new route for editing of a sale and then see this in action
    1:39
    Using the Angular Bootstrap Date Picker
    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. • Review what Angular Bootstrap is • Explore the date picker and a common way of configuring it • See the date picker in action
    3:29
  • Unwrapping the Presents
    Automated Seeding of Data
    There are times when you need a specific set of data to test something that will grow over time. A dashboard is perfect here. • Review what the Chance library is and how it can be used • Review the ways we can use the Chance library and understand why to build mock data • We review the algorithm that wraps our use of the Chance algorithm, and explain why we wrapped it
    5:16
    Dashboard – Monthly and Quarterly Sales
    There are also times when you’ll need to build visual aids for the management or analysts. Graphs are the quintessential visual aid • Discuss what types of configuration information are necessary for a D3 graph • Review how we might make the graph real time and switchable between monthly and quarterly sales • Write the code for building a D3 line graph and see it in action. This will include reviewing of the code in the mock backend to see what kind of data structure we’re going to bind to
    9:31
    Dashboard – Unfulfilled Orders
    Let’s list all unfulfilled orders in the system on the dashboard. • Review the code in the mock backend that’s going to return unfulfilled orders • Review the Resource, directive, controller, and view that will be used to display this data • Add the new view to the dashboard and see it in action
    2:15
    Dashboard – Recent Orders
    Let’s list all recent orders on the dashboard. • Review the code in the mock backend that’s going to return all recent orders • Review the Resource, directive, controller, and view that will be used to display this data • Add the new view to the dashboard and see it in action
    2:14
  • Loading the Presents onto the Sled
    Node.js and MongoDB – Modeling in Mongoose
    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. • Build the simplest of models, the Customer model, and talk about other data types available • Make the more complex structure, the Sale model Talk about one-to-many relationships
    3:10
    ExpressJS – Setting Up the Routes
    We know every endpoint that we need. Let’s build those endpoints in ExpressJS. • Discuss how to modularize the routes and set up an endpoint • Dig a little deeper into the CRUD module and understand how one method can handle both insert and update operations • Discuss a more complex endpoint in the dashboard
    6:49
    AngularJS – Hooking Up the API
    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. • Discuss the mock data strategy in more detail and how we will turn mock data off • Discuss the application framework pieces that are in place to support turning the mock data on and off • Discuss the actions necessary to turn the mock data off
    8:12
    Full Stack – Adding a Customer
    We have a full stack. Let’s now add a customer to the database for real. • Discuss and demonstrate the Grunt action required to operate in full-stack mode • Demonstrate adding a new customer to the database and view that new customer • Discuss how the communication between the client and server works, as well as dig deeper into the ExpressJS middleware
    4:55
    Full Stack – Adding a Sale
    Let’s add a sale to customer • Discuss the server-side operations for the sale entity • We discuss the technologies we’ve been using in more general terms, and also discuss the good and bad uses of them • Demonstrate the starting up of the application and add a new sale to a customer
    4:40
  • Up to the Mountain — Testing the Stack
    Node.js – Testing the Routes
    We want to make sure that all the routes exist that are published. Let’s test them. • Build a spec in Mocha and see how it’s similar to Jasmine • Write tests that ensure that the routes we say are published exist, including building mocks for verification • Execute the tests using Grunt
    4:18
    Node.js – Testing the API
    We want to make sure that the API works as expected, so we will build tests for all endpoints. • Understand the difference between testing a route and the API • Build more mock classes that will help you test a fully integrated API • Execute the tests using Grunt and see the results of those tests
    9:02
    AngularJS – Testing the API
    We now want to make sure that we are handling every part of the API, so let’s test it. • Add a spec that will test the endpoints on a resource, and see how it’s similar to the way we mocked data • Discuss how an API works using Jasmine and the importance of $httpBackend • Execute the tests using Grunt and validate the results
    3:01
    AngularJS – Testing the Controllers
    We need to make sure that the controllers are behaving as expected, so let’s test them. • Explain the difference between unit tests and behavioral tests • Build a spec that will test the controllers' behavior • Execute the tests using Grunt and see the results
    4:03
    AngularJS – Testing the Services
    Services need to provide exactly what they publish, so let’s test them as well. • Explain how testing services as units can be a really helpful tool • Learn how to provide mocks for the dependencies that your service has • Execute the tests using Grunt and see how helpful spying really is
    3:20
  • A Change of Heart – Deploying Your Application
    Grunt – Building a Distribution
    We need to build a distribution package. However, we need concatenation and uglification. Let’s count on Grunt to do this for us. • Discuss why we need a distribution task anyway • Dig into Grunt and see just what it means to build a distribution • We build a distribution and prepare our code base for production
    3:46
    Heroku – Publishing Your Code
    We need a place to deploy our code. Let’s look up to Heroku for that. • Discuss what it means to deploy your code on Heroku • Execute the commands necessary to prepare Heroku for your code • Publish your code on Heroku
    2:17
    Heroku – Setting Up the Database
    We need a database, off-premise, that is used for production. Let’s use a Heroku add-on for that. • Discuss what a Heroku add-on is • Add a production database using the MongoLab add-on
    2:05
    Heroku – Setting Up Environment Variables
    We have different settings in production, for some things, as against development. Let’s add some environment variables to Heroku for this. • Discuss just what environment variables are and why they are important • Set up any remaining environment variables necessary for production
    2:02
    Viewing Your Application
    We need to see what our application looks like in production. Let’s launch our newly deployed Heroku application. • See how to view our application, now that it’s in production • Start up our application and walk through it • Take a look at the MongoLab database and see the new data
    1:58
  • A Change in Tools
    Learning Helpful Plugins
    There are some helpful plugins for Sublime that will make it easier; let’s review those. • Talk about Sublime and how you can get plugins • Install package control • Install some helpful plugins and provide an overview of them
    3:02
    Using the Tools
    This is a different tool set, so we need to review how we might use it differently compared to WebStorm. • Demonstrate how to use the code formatting plugin and its caveats regarding extensions • Demonstrate how to use the terminal plugin to get to the current directory and project root • Discuss how that terminal plugin is going to be crucial to your development flow
    1:50
    Understanding the Caveats in Sublime
    There are some caveats to using Sublime over WebStorm, and so we’ll review those. • Discuss what caveats exist when moving to Sublime instead of WebStorm • Discuss why those are issues, especially debugging • Discuss external references
    2:43

Skills

  • AngularJS
  • Jasmine
  • MEAN Stack
  • Node.js

Similar Courses

More Courses by this Instructor