Full Stack Development with MEAN

Get started with the MEAN stack - Mongo Express Angular and Node.JS

This course is curated from a live training session conducted for 8 hours across two days.

Description

The popularity of Full stack web development is on the rise because it allows developers to get the best of both worlds and combine the most powerful frameworks together. It’s a well-known fact that Angular is more like a front end UI library that allows the developers to integrate it with multiple third party libraries and tools. This capability of Angular has made it one of the most powerful tools for full stack developers. In this session, you will go through a practical tutorial that will show you how you can make a complete JavaScript stack with Angular using popular server side frameworks like Node.js, MongoDB, and so on.

You'll learn how to create a reliable and powerful back-end platform with Node.js and Express, as well as exploring how to use MongoDB as the primary database, discover how it perfectly complements Angular to help you to create consistent and stable applications, providing a single immutable store for your entire application, which means that achieving the level of dynamism you want is easier.

What is this training about, and why is it important?

This training is aimed at teaching you how to get started with full-stack development using the MEAN (Mongo Express Angular Node) stack.

What you’ll learn—and how you can apply it

  • Create a web server with Node.JS and Express
  • Store information in a Mongo.DB database
  • Create a web application with Angular that will render data from the backend
  • Learn more about the Angular framework and its different concepts (components, pipes, directives, etc.)

This Online Training is for you because…

The course is aimed at developers, managers, and anyone interested in modern full-stack development!

Prerequisites

  • Basic of JavaScript
  • Some knowledge of HTML / CSS

Materials, downloads, or Supplemental Content needed in advance

  • Git (https://git-scm.com)
  • Node.JS (https://nodejs.org/en/)


Schedule

The timeframes are only estimates and may vary according to how the class is progressing

DAY 1 (~4Hrs)

Section 1: Introduction to the MEAN stack (30 mins)

  • Why MEAN?
  • How this stack came to be?
  • How is it different from other stacks?
  • RESTful Web Services


Section 2: Introduction to Angular (2h)

  • Typical architecture of an Angular application
  • Using Angular CLI to scaffold our app
  • Building Blocks – Components, Services, Pipes, Directives


Lab 1: Creating components with Angular CLI 

  • Create two different components with Angular CLI to build the user interface for our store (20 mins practice + 10 mins solution)


Lab 2: Using directives in Angular

  • Use ngFor to render a list of products in our store
  • Use ngIf to add a conditional "sale" sticker to our products
  • (30 mins practice + 10 mins solution)


Section 3: Introduction to Node.JS and NPM (1h30)

  • What is Node.JS?
  • What is NPM?
  • Creating basic servers with Node.JS
  • Using node modules like http-server to serve static content


Lab 3: A first server with Node.JS 

  • Use http-server to serve static content
  • Use the http module from Node to create a first HTTP server from scratch
  • (20 mins practice + 10 mins solution)


DAY 2 (~4Hrs)

Section 4: Introduction to Express (2h)

  • Using Express to build a robust back-end
  • Integrating CORS with Express
  • Creating different routes
  • Building Restful APIs with Express


Lab 4: Building our back-end server with Express

  • Implement the backend for our online store with Express
  • (20 mins practice + 10 mins solution)


Section 5: Introduction to Mongo.DB (1h)

  • Persisting data in Mongo
  • Retrieving data with queries
  • Structuring a document database


Lab 5: Using Mongo.DB to persist our backend data

  • Create the cart feature using Mongo.DB to persist the current state of the application
  • (20 mins practice + 10 mins solution)


Section 6: Integrating it all: How to connect Angular to the backend? (1h)

  • Introduction to Angular services
  • Introduction to RxJS observables
  • Using the HttpClient to retrieve server data


Lab 6: Connecting our Angular the front-end with the Express back-end

  • We finalize our application by connecting the front-end and the back-end, effectively rendering server data on the client side in the browser.
  • (20 mins practice + 10 mins solution)

Course Curriculum

Alain Chautard
Alain Chautard
Independent Consultant

About the instructor

Alain Chautard is a Google Developer Expert in Web Technologies / Angular. He started working with Angular JS in 2011. Since then he has worked with all Angular versions on a daily basis, both as a developer and as a technical trainer. He is the organizer of the Sacramento Angular Meetup group, co-organizer of the Google Developer Group chapter in Sacramento, California, and published author of the Packt video course “Getting Started with Angular“.