Development
Web Development
MEAN Stack
Angular & NodeJS - The MEAN Stack Guide [2020 Edition]
4.6 (17,476 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
84,247 students enrolled

Angular & NodeJS - The MEAN Stack Guide [2020 Edition]

Learn how to connect your Angular Frontend to a NodeJS & Express & MongoDB Backend by building a real Application
Bestseller
4.6 (17,476 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
84,228 students enrolled
Created by Maximilian Schwarzmüller
Last updated 7/2020
English
English, French [Auto], 7 more
  • German [Auto]
  • Indonesian [Auto]
  • Italian [Auto]
  • Polish [Auto]
  • Portuguese [Auto]
  • Romanian [Auto]
  • Spanish [Auto]
Preview this course
Angular & NodeJS - The MEAN Stack Guide [2020 Edition]
Current price: $104.99 Original price: $149.99 Discount: 30% off
5 hours left at this price!
Buy now
30-Day Money-Back Guarantee
This course includes
  • 12.5 hours on-demand video
  • 22 articles
  • 40 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll 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
Course content
Expand all 151 lectures 12:45:03
+ – Getting Started
12 lectures 39:51

Welcome to this course! Let me introduce myself and give you a first overview of the course content.

Introduction
Preview 01:57

What does "MEAN" stand for? Let's explore the different pieces (MongoDB, Express, Angular & Node.js) that make up the MEAN stack and let's see WHY we combine them.

What is MEAN?
Preview 10:35

Learning alone is absolutely fine but finding learning partners might be a nice thing, too. Our learning community is a great place to learn and grow together - of course it's 100% free and optional!

Join our Online Learning Community
00:20

First things first: In order to fully understand the idea behind a MEAN app, we need to understand what a SPA (Single Page Application) is.

What is a Single Page Application (SPA)?
Preview 02:08

So what's the big picture of the MEAN stack? How do the different things work together? Time for a closer look!

How Does the MEAN Stack Work?
Preview 02:58
MUST READ: Angular CLI - Latest Version
00:18

Let's get started and let's install the core tools we need to build MEAN applications!

Installing Node & the Angular CLI
Preview 07:50

To write code efficiently, an IDE is required - here's my recommendation.

Installing our IDE
Preview 03:13

For our MEAN application, we'll have a certain project structure. In this lecture, I'll introduce to that project structure and explain why we use it.

Exploring the Project Structure
Preview 04:02

We have a good idea of what the MEAN stack is about - but what's in this course? This lecture gives you an overview of the course content and the order in which it is presented.

Course Outline
Preview 03:27

Your learning success is important to me! Here are some best practices on how to use the course materials.

How To Get The Most Out Of This Course
Preview 02:53
Section Resources
00:10
+ – The Angular Frontend - Understanding the Basics
19 lectures 01:57:07
Module Introduction
01:40
Understanding the Folder Structure
06:40
Understanding Angular Components
02:39
Adding our First Component
08:01
Listening to Events
03:43
Outputting Content
05:34
Getting User Input
06:03
Installing Angular Material
15:34
Adding a Toolbar
03:57
Outputting Posts
06:37
Diving Into Structural Directives
05:40
Creating Posts with Property & Event Binding
07:38
Creating a Post Model
04:35
Adding Forms
08:18
Getting Posts from Post-Create to Post-List
09:26
Calling GET Post
11:16
More About Observables
05:51
Working on our Form
03:51
Section Resources
00:04
+ – Adding NodeJS to our Project
12 lectures 01:03:28
Module Introduction
02:03
Connecting Node & Angular - Theory
04:37
What is a RESTful API?
04:45
Adding the Node Backend
08:20
Adding the Express Framework
07:37
Improving the server.js Code
04:40
Fetching Initial Posts
05:57
Using the Angular HTTP Client
09:20
Understanding CORS
05:31
Adding the POST Backend Point
05:27
Adding Angular
05:07
Section Resources
00:04
+ – Working with MongoDB
17 lectures 01:05:22
Module Introduction
01:04
What is MongoDB?
01:48
Comparing SQL & NoSQL
04:26
Connecting Angular to a Database
02:07
Setting Up MongoDB
05:14
Using MongoDB Atlas & IP Whitelist
00:19
Adding Mongoose
03:01
Understanding Mongoose Schemas & Models
05:45
Creating a POST Instance
04:08
Connecting our Node Express App to MongoDB
03:10
Storing Data in a Database
05:51
Fetching Data From a Database
05:34
Transforming Response Data
05:07
Deleting Documents
07:37
Updating the Frontend after Deleting Posts
03:02
Adding Posts with an ID
07:07
Section Resources
00:02
+ – Enhancing the App
11 lectures 01:04:22
Module Introduction
01:11
Adding Routing
10:12
Styling Links
03:59
Client Side vs Server Side Routing
02:44
Possible Error
00:08
Creating the "edit" Form
10:38
Finishing the Edit Feature
11:09
Updating Posts on the Server
09:21
Re-Organizing Backend Routes
05:54
Adding Loading Spinners
09:05
Section Resources
00:01
+ – Adding Image Uploads to our App
15 lectures 01:29:06
Module Introduction
00:44
Adding the File Input Button
04:51
Converting the Form from a Template Driven to a Reactive Approach
13:41
Adding Image Controls to Store the Image
06:59
Adding an Image Preview
04:58
Starting with the Mime-Type Validator
08:20
Finishing the Image Validator
07:17
Adding Server Side Upload
08:23
Uploading Files
06:05
Working with the File URL
06:18
Beware of the Spread (...) Operator
00:37
Fetching Images on the Frontend
06:37
Updating Posts with Images
13:20
Wrap Up
00:54
Section Resources
00:02
+ – Adding Pagination
7 lectures 32:53
Module Introduction
01:04
Adding the Pagination Component
07:18
Working on the Pagination Backend
08:08
Connecting the Angular Paginator to the Backend
05:24
Fetching Posts Correctly
06:09
Finishing Touches
04:48
Section Resources
00:02
+ – Adding User Authentication
20 lectures 02:09:00
Module Introduction
00:59
Adding the Login Input Fields
08:15
Handling User Input
03:42
Adding the Signup Screen
03:32
Creating the User Model
06:23
Creating a New User Upon Request
05:30
Connecting Angular to the Backend
06:38
Understanding SPA Authentication
03:39
Implementing SPA Authentication
09:32
Sending the Token to the Frontend
05:43
Adding Middleware to Protect Routes
11:47
Adding the Token to Authenticate Requests
13:45
Improving the UI Header to Reflect the Authentication Status
07:23
Improving the UI Messages to Reflect the Authentication Status
06:19
Connecting the Logout Button to the Authentication Status
02:32
Redirecting Users
04:25
Adding Route Guards
06:48
Reflecting the Token Expiration in the UI
06:12
Saving the Token in the Local Storage
15:54
Section Resources
00:02
+ – Authorization
7 lectures 32:36
Module Introduction
01:09
Adding a Reference to the Model
03:28
Adding the User ID to Posts
07:02
Protecting Resources with Authorization
08:19
Passing the User ID to the Frontend
07:24
Using the User ID on the Frontend
05:11
Section Resources
00:03
+ – Handling Errors
8 lectures 39:57
Module Introduction
01:14
Testing Different Places to Handle Errors
09:49
The Error Interceptor
08:01
Displaying the Basic Error Dialog
05:13
Adding an Error Dialog
05:26
Returning Error Messages on the Server
07:10
Finishing Touches
03:03
Section Resources
00:01
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, basic knowledge about them is strongly recommended
  • It is recommended to have beginner-level Angular 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
  • NO advanced or expert knowledge about any of these topics is assumed or required
Description

Create modern, scalable and high-speed Web Applications with Angular (formerly named Angular 2, now just "Angular") and Node.js + Express + MongoDB.

Angular 1 and NodeJS, together with ExpressJS (a 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 2+.

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 + Express + MongoDB backend!

Learn or refresh the Angular Basics!

This course is no Angular course, but it includes detailed explanations 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 additional resources like my "Angular - The Complete Guide" course is recommended.

In this course, Maximilian, experienced web developer as well as author of many 5-star rated Udemy courses and host of the "Academind" 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.

Specifically, you will learn how to:

  • Set up a NodeJS + Express + MongoDB + Angular Application with the help of the Angular CLI

  • 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 HttpClient service

  • Provide appropriate endpoints on your Backend, for your Frontend to consume

  • Add advanced features like file upload and pagination

  • Make your Application more secure by implementing Users, Authentication as well as Authorization

  • Handle Errors gracefully

  • And much more...!

This hands-on 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 approachable and accessible.

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, 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 strongly recommended

  • 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

  • NO expert or advanced knowledge on any of these topics is required or assumed

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

Who this course is for:
  • This course is for everyone interested in putting existing Angular and NodeJS knowledge into action
  • If you're familiar with the basics of Angular 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 skills will find a great opportunity to do so
Featured review
Constantine Fedoruk
Constantine Fedoruk ( 33 courses, 19 reviews )
7 months ago
I have courses from Maximilian Angular, Mongodb, Nodejs, TypeScript and this course. This course does not examine each of the topics so deeply, but it goes through each of them sufficiently to understand how it all works together. After this course, you can already make your own small project, but if you get stuck, you can look for answers in the courses above. Cool that the guys made just such a collection that covers the full stack. Thanks them)