Angular (Angular 2 or 4) & NodeJS - The MEAN Stack Guide
4.7 (3,971 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.
21,300 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Angular (Angular 2 or 4) & NodeJS - The MEAN Stack Guide to your Wishlist.

Add to Wishlist

Angular (Angular 2 or 4) & NodeJS - The MEAN Stack Guide

Learn how to connect your Angular 2/ Angular 4 Frontend with a NodeJS Backend by building a real Application
Best Seller
4.7 (3,971 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.
21,300 students enrolled
Last updated 9/2017
Current price: $10 Original price: $150 Discount: 93% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 8 hours on-demand video
  • 9 Articles
  • 34 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Build real Angular + NodeJS applications
  • Understand how Angular works and how it interacts with Backends
  • Connect any Angular Frontend with a NodeJS Backend
  • Use MongoDB with Mongoose to interact with Data on the Backend
  • Use ExpressJS as a NodeJS Framework
  • Provide a great user experience by using Optimistic Updating on the Frontend
  • Improve any Angular (+ NodeJS) application by adding Error Handling
View Curriculum
  • Concepts behind NodeJS, Express and MongoDB (with Mongoose) will be refreshed in this course but as this course is focused on the connection of these technologies with Angular 2, basic knowledge about them is required
  • It is recommended to have beginner-level Angular 2/ Angular 4 knowledge, though this course will provided a detailed refresher and will explain the core concepts used in detail
  • HTML, CSS and basic JavaScript knowledge is assumed throughout this course

This course is up-to-date to the latest version of Angular (formerly Angular 2): Angular 4.

Create modern, scalable and high-speed Web Applications with Angular 2/ Angular 4 (or just "Angular") and NodeJS

Angular 1 and NodeJS, together with ExpressJS (NodeJS Framework) and MongoDB formed the very popular MEAN stack. Now is the time to dive into MEAN 2.0 and replace Angular 1 with Angular 4.

Benefit from the many improvements and advantages Angular offers you: Speed, ease of development, highly reactive, awesome support for asynchronous operations, great scalability and more!
And combine these advantages with the power of a NodeJS backend!

Learn or refresh the Angular Basics!

This course is no Angular course, but it includes detailed explanation of the core concepts used as well as about Angular in general. However, keep in mind that, as this course is no Angular course, having other resources at hand is recommended.

In this course, Maximilian, experienced web developer as well as author of two 5-star rated Udemy courses and host of a Coding Channel on YouTube, will take you on a hands-on journey to get you to build your own Angular + NodeJS Applications in no time.

This course follows a hands-on approach, which means that the whole course is structured around one big application and the different concepts will be explained detailedly as they are introduced in this application.

This concept allows you to not get stuck in the theory, but instantly see real implementation examples!

Hear what students of other courses as well as viewers of my YouTube channel have to say

Max has gone through great lengths to create great content and this course has been great. His teaching style covers everything from basic to advanced topics, and his explanations have been thorough on each topic

Max demonstrates very good knowledge of the subject matter and great enthusiasm in delivering the lectures.

Max does a wonderful job making the core concepts of Angular 2 approachable and accessible.

Hands-on: Build a real application throughout this course

I’m convinced that you learn the most while doing it! Therefore, in this course you will build a real application and whilst building it, you will learn, step by step, how to create an Angular frontend and hook it up to a secure and flexible NodeJS backend.
Starting off with a basic application, the course project will quickly incorporate user management, authentication, authorization, error handling, frontend and backend routing and much more!

Specifically, you will learn how to:

  • Set up a NodeJS + Express + MongoDB + Angular Application
  • Use NodeJS and Express efficiently
  • Build reusable Components in Angular and create a reactive User Experience with the Tools provided by Angular
  • Connect your NodeJS (or any other language!) backend with your Angular App through Angular’s Http Service
  • Provide appropriate endpoints on your Backend, for your Frontend to consume
  • Make your Application more secure by implementing Users and Authentication as well as Authorization
  • Handle Errors gracefully
  • And much more...!

Don’t stop at the basics!

Do you know those courses which show you a „Hello World“ example and then call it an end? That won’t happen to you in this course. While beginning with a very basic app and basic features, you will quickly be able to incorporate many different routes, subrouting, Observables, Events, Authentication and Authorization, Error Handling and much more into your applications.
The best thing is: You’ll learn all that by putting it into practice immediately! No wall of powerpoint slides, no unrealistic mini-examples – this is the real deal!

Who should take this course?

  • Basic NodeJS/Express and Angular Experience is required
  • You should be familiar with HTML, CSS and JavaScript Basics, too
  • MongoDB (+ Mongoose) knowledge is a Plus as MongoDB will be used in this course but won’t be subject of in-depth explanations

By the end of this course, you will be able to create your own, awesome NodeJS + Angular Applications!

1) Are you writing Angular code in JavaScript or TypeScript?
TypeScript is the language of choice, since it not only makes development quicker, less error-prone and more fun, but also has the most documentation and resources on the internet (for Angular)
2) How much NodeJS and Angular experience should I have?
You don’t need to be an expert by any means! All important concepts will be refreshed in this course and I will go into detail about the design and coding choices taken in this course. But I won’t start at zero for both languages, neither will I go into detail – for example you won’t get a detailed explanation of NodeJS views and view engines in this course, because we don’t need them (as Angular will the frontend)

Who is the target audience?
  • This course is for everyone interested in putting existing Angular 2/ Angular 4 and NodeJS knowledge into action
  • If you're familiar with the basics of Angular 2/ Angular 4 and NodeJS, this course provides a detailed guide on how to connect both technologies
  • Everyone interested in building a modern, full-stack application
  • Students who want to exercise with their NodeJS and Angular 2 skills will find a great opportunity to do so
Compare to Other Node.Js Courses
Curriculum For This Course
112 Lectures
Getting Started
7 Lectures 23:28

Let me introduce myself and give you an overview over the structure of this course. In this video you will learn how to best advance in this course, how to use the material provided and what the idea behind the course is.

Preview 02:02

In this course, we'll use both Angular 2 and NodeJS. So let's start by asking: What is NodeJS?

Preview 01:54

In this course, we'll use both Angular 2 and NodeJS. So let's start by asking: What is Angular 2?

Preview 01:45

Now that you know what Angular 2 and NodeJS are, let's see how both work together!

Preview 03:58

This lectures dives into the structure of the Course and gives an Overview over it.

Preview 02:56

We'll build a big project throughout the course - so let's get started and set it up!

Setting up the Course Project

We got the Project set up but what do all the files and folders do? This video answers these questions.

Understanding the Project Structure
NodeJS Basics
7 Lectures 24:56

Let me introduce you to this module and NodeJS.


It's key to understand what happens to a request once it reaches the server. So let's have a look at this in this lecture.

Preview 09:37

How can we work with the Requests we receive? How can we send Responses? This lecture answers it!

Working with Requests and Responses

Time to learn how to create Routes on the NodeJS backend and how to pass some Data around.

Creating Routes and Passing Data

Learn more about available Http methods and when to use them.

Knowledge Injection: Http Methods

This lectures dives into the question how Data is transferred and which Formats you may use.

Knowledge Injection: Data Formats

More on NodeJS
MongoDB Basics
11 Lectures 33:34

Let me introduce you to this module and MongoDB.


This lecture explains how to install the MongoDB server on your machine.

Setting up MongoDB

The Server is installed - time to start it.

Starting a MongoDB Server

Most of the time, we'll use NodeJS to access our data. But from time to time we want to take a look directly into the database. We can do this with the Shell Client - learn more in this lecture.

Using the MongoDB Shell Client

Working with Data and accessing the Database is a breeze with Mongoose - this lecture explains why that is the case.

Using Mongoose to work with Data and Models

Time to use Mongoose in our NodeJS app. This lecture explores how to do that.

Using Mongoose in NodeJS

In this lecture, we'll create the Models used throughout this course with Mongoose.

Creating the Project Models with Mongoose

How do you store Data in the Database? It's very easy as this lecture shows you.

Storing Data in the Database

After storing Data, it's now time to fetch it. Very easy as well as you will learn.

Fetching Data from the Database

Let me wrap up and summarize this module.

Wrap Up

More on MongoDB
Creating the Frontend with Angular 2
33 Lectures 02:27:15

A short introduction to this module and what we're going to build.


Did you ever wonder how to render an Angular 2 app with NodeJS / Express? This lecture should be helpful.

Preview 03:13

A quick refresher on the concept of Components.

Knowledge Injection - Components

An Angular 2 app needs to be started - which is very simple. This lecture explains how it works.

Starting an Angular 2 App

Decorators are a TypeScript feature you'll encounter quite a bit in an Angular 2 app. This video helps you understanding them!

Understanding Decorators

Time to output the first data! Learn how String Interpolation allows you to do that.

Outputting Data with String Interpolation

Let's apply some styling to the component and learn how Angular 2 Styling and Templates work.

Working with Templates and Styles

This lecture explores how you may use Two-Way-Binding in your Angular 2 app!


We'll work with users and messages. It makes sense to create separate models for these, so let's do that.

Adding Custom Models

Our project grows - and with that, the folder structure needs to be improved. Learn how to do that, in this video.

Improving the Folder Structure

Time to add additional components to the party.

Multiple Components

Property and Even Binding are very important concepts - get a brief refresher on them!

Knowledge Injection - Property and Event Binding

Let's add some custom Property Bindings to the app.

Using Property Binding

Like with the custom Property Binding, it's now time to add custom Event Binding.

Using Event Binding

In order to continue with our app, we need to use some directives. If you're not sure what they are - here's a brief refresher.

Knowledge Injection - Directives

There are "Attribute" and "Structural" Directives in Angular 2. This lectures dive into the first one.

Understanding Attribute Directives

One message is boring, let's output a list of them! With *ngFor!

Using NgFor to Output a List

Time to further modularize the app and add additional components to it.

Adding Input and List Components

To handle our messages with ease, we should use a service. And we should inject that service. How? This video helps.

Knowledge Injection - Services & Dependency Injection

Let's start simple and create a new Service. It's easy!

Creating a Service

Time to connect all our pieces and take the data input via the form and store them with the help of the Service.

Adding Messages with a Service

Learn how to use this service to get some messages.

Getting Messages via a Service

Somehow, the app is behaving strangely. Let's fix it by using only one Instance of our Service.

One Instance to Rule them All

Enabling Default HTML Validation in Angular 4

Angular 2 makes using Forms easy. Learn how to use the Template-Driven approach to add new messages.

Adding Messages with a Template-Driven Form

Time to prepare for the usage of the Angular 2 Router. For that, let's reorganize the app and add a header.

Creating a Header & Re-Structuring the Project

Now it's time to add some Routes and make the Router work. Learn how it works, in this video.

Setting Up Routing

Routing works, but it's not that great to use without any links. Time to add some Navigation to the app.

Routing & Navigation

If you enter a URL into your URL bar and hit enter, the app probably doesn't work the way you want it to work. Time to understand why and fix it.

Routing and the Server

Almost there! Let's enhance the application by adding some user-related Components.

Creating User-related Components

The user routes should be reached as Child Routes of the Authentication Route. Let's implement this functionality.

Adding Child Routes

To manage the User Signup Form, we'll use Reactive (Data-Driven) Forms. Learn how that works, in this video.

User Signup with Reactive (Data-Driven) Forms

Let's finish the Angular 2 Frontend by adding a User Signin Form.

Finishing the Frontend
Connecting the Angular 2 Frontend with the NodeJS Backend
10 Lectures 01:11:06

Let me give you a brief module introduction.


Learn how to add a route on your backend, which later will allow your Angular 2 frontend to reach out to it and save a message.

Backend - Saving Messages

Time for a brief refresher on how Angular 2 Http actually works.

Knowledge Injection - Angular 2 & Http

The backend has been prepared, now it's time to wire up the frontend to it!

Saving Messages - Wiring Up Frontend and Backend

Saving Messages is great - but we also want to be able to load them, right? Let's add a route which allows us to fetch Messages.

Backend - Getting Messages

Again, it's time to wire up the frontend and the backend to be able to get messages.

Getting Messages - Wiring Up Frontend and Backend

Editing Messages is actually the trickiest part. Learn how to implement a great editing workflow in your Angular 2 App.

Editing Messages - Preparing the Frontend

Now that the frontend has been prepared, it's time to work on the backend and provide a route to actually edit messages.

Backend - Updating Messages

Again, it's time to wire everything up!

Editing Messages - Wiring Up Frontend and Backend

The missing feature is the possibility to delete messages. Let's add the according code on both the front- and backend.

Deleting Messages
Users and Authentication
17 Lectures 01:22:51

Let me introduce you to this module.


Authentication doesn't work like in a "normal" server-side application. Learn more about the differences in this video.

How Authentication works in a MEAN Application

It would be great if we had some users in our app. Let's create a route which enables the frontend to actually send user data and create new users.

Backend - Signing Up

Let's wire up our Signup Feature!

Signing Up Users - Wiring Up Frontend and Backend

Having users is great, but without a way to login, it's not that useful. Therefore, let's create a route which enables user to log in.

Backend - Sign In

Want to dive deeper? Here are some resources!

More Information on JWT

Let's put all the Sign In pieces together.

User Sign In - Wiring Up Frontend and Backend

Logged in Users are great, but sometimes you want to leave. Learn how to log users out, in this video.

Logging Users Out

How to know if a User is logged in? Learn about a way to find this out!

Checking the Login State

We're using JWT to protect our backend routes. Right now, we're not doing this. Learn how to utilize the Token to make sure no unauthorized access happens.

Backend Route Protection with JWT

You may encounter a bug when saving messages, check this lecture to fix it.

Fixing a Mongoose Bug

We got Users. We got Messages. Let's connect them!

Connecting Users with Messages

Finally, it's time to use that Token and enable the client to authenticate itself.

Sending Requests with a Token

Not all messages should be editable and deletable by every user. Learn how to find out which user tries to edit/ delete and react appropriately.

Handle User Authorization

When fetching Messages, we're also interested in the users who created them, so let's fetch that data, too.

Passing the User Object with Messages

Since some messages can't be deleted or edited by a user, it would be best to not even show the buttons to begin with. Let's add such a functionality.

Frontend Authorization Check

Time to wrap up this Module on Authentication.

Wrap Up
Error Handling
5 Lectures 19:55

Let me give you an introduction to this module.


Learn which parts you may use to set up a flexible Error Handling mechanism.


Let's create the component we'll use for displaying errors.

The Error Component

Let's create the Service we'll use to handle errors.

The Error Service

A good idea is, to use a central service which handles all errors. Learn more about such a service, in this video.

Using an Error Service & Passing Data
App Optimizations and Deployment
10 Lectures 37:59

Let me introduce you to this module.


We'll use the Module System Angular 2 offers us and create a Message Module in this lecture.

Creating a Message Module

After learning how to create a feature Module (for the Message Module), it's now time to extend this and not only create another Module but also use Lazy Loading!

Using an Auth Module and Lazy Loading

Angular 2 allows us to compile the App during development. This allows us to keep the Compiler out of the final package we ship. So let's dive into this in this lecture!

Compiling the Compilation Ahead of Time (AoT)

More on Angular 2 Modules

Let's prepare our Application for Deployment!

Deployment Preparations

Deployment Disclaimer

In this module, we'll use MongoLab to host our MongoDB. Learn how to set everything up in this lecture.

Setting up MongoLab to Host the MongoDB

This lecture teaches you how to successfully deploy your app to Heroku.

Deploying to Heroku

This lecture teaches you how to successfully deploy your app with AWS Elastic Beanstalk.

Deploying to AWS Elastic Beanstalk (AWS EC2 + AWS S3)
Creating a Custom Seed Project
10 Lectures 48:00

Let me introduce you to this module.


Let's start by creating the basic folder structure and the backbone of the backend - using Express Generator.

Setting up NodeJS & Express

Time to fine-tune the backend and adjust it to our needs.

Preparing the Backend

Time to install all Production Dependencies and Types we'll need in our NodeJS + Angular 2 app.

Installing Production Dependencies and Types

Time to also install all required Development Dependencies and start working on our Webpack Configuration!

Installing Development Dependencies and Setting up a Common Webpack Config

Let's add the Development-only Configuration to our Webpack Process.

Setting up a Development Workflow with Webpack

We haven't any Frontend yet! Time to change this and add a basic Angular 2 app.

Creating the Angular 2 Frontend

Let's finish the Development Workflow by adding a Script we may execute to run it.

Adding a Development Workflow Script

Time to finish the seed project by adding the Production Workflow, using AoT Compilation.

Setting up the Production Workflow (using AoT Compilation)

This module showed you how to create the seed project from scratch - but with Angular 2. This lecture now shows you how to update this project to Angular 4.

Updating the Custom Seed to Angular 4
Updating Angular 2
2 Lectures 14:42

This video gives an overview over necessary changes in your code when using the Angular 2 RC instead of the Beta version.

Preview 08:41

Learn how to successfully update your old Project.

Updating from Release Candidate to Final Release
About the Instructor
Maximilian Schwarzmüller
4.7 Average rating
49,523 Reviews
150,589 Students
16 Courses
Professional Web Developer and Instructor

Experience as Web Developer

Starting out at the age of 13 I never stopped learning new programming skills and languages. Early I started creating websites for friends and just for fun as well. This passion has since lasted and lead to my decision of working as a freelance web developer and consultant. The success and fun I have in this job is immense and really keeps that passion burningly alive.

Starting web development on the backend (PHP with Laravel, NodeJS) I also became more and more of a frontend developer using modern frameworks like Angular or VueJS 2 in a lot of projects. I love both worlds nowadays!

As a self-taught developer I had the chance to broaden my horizon by studying Business Administration where I hold a Master's degree. That enabled me to work in a major strategy consultancy as well as a bank. While learning, that I enjoy development more than these fields, the time in this sector greatly improved my overall experience and skills.

Experience as Instructor

As a self-taught professional I really know the hard parts and the difficult topics when learning new or improving on already-known languages. This background and experience enables me to focus on the most relevant key concepts and topics. My track record of many 5-star rated courses, more than 100.000 students on Udemy as well as a successful YouTube channel is the best proof for that.

Whether working as development instructor or teaching Business Administration I always received great feedback. The most rewarding experience is to see how people find new, better jobs, build awesome web applications, acquire amazing projects or simply enjoy their hobby with the help of my content.