Angular 2 (or 4) & NodeJS - The Practical MEAN Stack Guide
4.7 (2,723 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.
15,017 students enrolled
Wishlisted Wishlist

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

Add to Wishlist

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

Learn how to connect your Angular 2/ Angular 4 Frontend with a NodeJS Backend by building a real Application
Bestselling
4.7 (2,723 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.
15,017 students enrolled
Last updated 5/2017
English
English
Learn Fest Sale
Current price: $10 Original price: $150 Discount: 93% off
3 days left at this price!
30-Day Money-Back Guarantee
Includes:
  • 8 hours on-demand video
  • 7 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
Requirements
  • 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
Description

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!

FAQ:
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
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 110 Lectures Collapse All 110 Lectures 08:20:48
+
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
04:26

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

Understanding the Project Structure
06:27
+
NodeJS Basics
7 Lectures 24:56

Let me introduce you to this module and NodeJS.

Introduction
00:56

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
03:55

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

Creating Routes and Passing Data
05:25

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

Knowledge Injection: Http Methods
01:51

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

Knowledge Injection: Data Formats
02:56

More on NodeJS
00:16
+
MongoDB Basics
11 Lectures 33:34

Let me introduce you to this module and MongoDB.

Introduction
01:52

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

Setting up MongoDB
02:33

The Server is installed - time to start it.

Starting a MongoDB Server
01:28

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
02:09

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
01:21

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

Using Mongoose in NodeJS
02:28

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

Creating the Project Models with Mongoose
10:44

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

Storing Data in the Database
06:12

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

Fetching Data from the Database
04:04

Let me wrap up and summarize this module.

Wrap Up
00:35

More on MongoDB
00:08
+
Creating the Frontend with Angular 2
32 Lectures 02:26:59

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

Introduction
01:18

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
01:51

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

Starting an Angular 2 App
06:51

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

Understanding Decorators
00:58

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

Outputting Data with String Interpolation
02:29

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

Working with Templates and Styles
04:53

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

Two-Way-Binding
03:48

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

Adding Custom Models
07:57

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
01:29

Time to add additional components to the party.

Multiple Components
06:32

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

Knowledge Injection - Property and Event Binding
04:10

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

Using Property Binding
04:02

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

Using Event Binding
06:16

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
02:39

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

Understanding Attribute Directives
03:17

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

Using NgFor to Output a List
03:56

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

Adding Input and List Components
08:05

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
02:10

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

Creating a Service
02:54

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
04:43

Learn how to use this service to get some messages.

Getting Messages via a Service
04:25

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

One Instance to Rule them All
02:54

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
11:04

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
05:32

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

Setting Up Routing
05:58

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

Routing & Navigation
03:21

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
02:04

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

Creating User-related Components
04:03

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

Adding Child Routes
07:44

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
12:52

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

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

Let me give you a brief module introduction.

Introduction
02:38

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
09:08

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

Knowledge Injection - Angular 2 & Http
02:50

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

Saving Messages - Wiring Up Frontend and Backend
17:23

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
03:45

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
07:21

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
12:57

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
04:28

Again, it's time to wire everything up!

Editing Messages - Wiring Up Frontend and Backend
05:48

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

Deleting Messages
04:48
+
Users and Authentication
16 Lectures 01:21:25

Let me introduce you to this module.

Introduction
01:16

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
02:49

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
07:02

Let's wire up our Signup Feature!

Signing Up Users - Wiring Up Frontend and Backend
10:53

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
12:16

Want to dive deeper? Here are some resources!

More Information on JWT
00:10

Let's put all the Sign In pieces together.

User Sign In - Wiring Up Frontend and Backend
06:49

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

Logging Users Out
02:45

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

Checking the Login State
03:19

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
06:11

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

Connecting Users with Messages
08:41

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

Sending Requests with a Token
05:23

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
03:21

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
02:36

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
06:10

Time to wrap up this Module on Authentication.

Wrap Up
01:44
+
Error Handling
5 Lectures 19:55

Let me give you an introduction to this module.

Introduction
00:53

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

Setup
02:34

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

The Error Component
07:51

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

The Error Service
02:37

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
06:00
+
App Optimizations and Deployment
10 Lectures 37:59

Let me introduce you to this module.

Introduction
01:02

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

Creating a Message Module
04:32

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
07:12

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)
02:21

More on Angular 2 Modules
00:03

Let's prepare our Application for Deployment!

Deployment Preparations
01:18

Deployment Disclaimer
00:11

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
03:53

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

Deploying to Heroku
08:08

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

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

Let me introduce you to this module.

Introduction
00:28

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

Setting up NodeJS & Express
01:57

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

Preparing the Backend
05:03

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

Installing Production Dependencies and Types
02:55

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
08:30

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

Setting up a Development Workflow with Webpack
02:39

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

Creating the Angular 2 Frontend
06:16

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

Adding a Development Workflow Script
02:46

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

Setting up the Production Workflow (using AoT Compilation)
13:34

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
03:52
+
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
06:01
About the Instructor
Maximilian Schwarzmüller
4.7 Average rating
26,874 Reviews
84,742 Students
12 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 world 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 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.