Angular & NodeJS - The MEAN Stack Guide

Learn how to connect your Angular frontend to a NodeJS & Express & MongoDB backend by building a real application

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, I (Maximilian), an experienced web developer as well as author of many top-rated 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!

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 features like 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!

Course content

Section 1Getting Started

Introduction
1:54
What is MEAN?
10:35
What is a Single Page Application (SPA)?
2:08
How Does the MEAN Stack Work?
2:58
Installing Node & the Angular CLI
7:50
Join our Online Learning Community
1:00
Installing our IDE
3:13
Exploring the Project Structure
4:02
Course Outline
3:27
How To Get The Most Out Of This Course
2:47
Section Resources
1:00

Section 2The Angular Frontend - Understanding the Basics

Module IntroductionPremium
1:40
Understanding the Folder StructurePremium
6:40
Understanding Angular ComponentsPremium
2:39
Adding our First ComponentPremium
8:01
Listening to EventsPremium
3:43
Outputting ContentPremium
5:34
Getting User InputPremium
6:03
Installing Angular MaterialPremium
15:34
Adding a ToolbarPremium
3:57
Outputting PostsPremium
6:37
Diving Into Structural DirectivesPremium
5:40
Creating Posts with Property & Event BindingPremium
7:38
Creating a Post ModelPremium
4:35
Adding FormsPremium
8:18
Getting Posts from Post-Create to Post-ListPremium
9:26
Calling GET PostPremium
11:14
More About ObservablesPremium
5:51
Working on our FormPremium
3:51
Section ResourcesPremium
1:00

Section 3Adding NodeJS to our Project

Module IntroductionPremium
2:03
Connecting Node & Angular - Theory
4:37
What is a RESTful API?
4:45
Adding the Node BackendPremium
8:20
Adding the Express FrameworkPremium
7:37
Improving the server.js CodePremium
4:40
Fetching Initial PostsPremium
5:57
Using the Angular HTTP ClientPremium
9:20
Understanding CORSPremium
5:31
Adding the POST Backend PointPremium
5:27
Adding AngularPremium
5:07
Section ResourcesPremium
1:00

Section 4Working with MongoDB

Module IntroductionPremium
1:04
What is MongoDB?Premium
1:48
Comparing SQL & NoSQLPremium
4:26
Connecting Angular to a DatabasePremium
2:07
Setting Up MongoDBPremium
5:14
Adding MongoosePremium
3:01
Understanding Mongoose Schemas & ModelsPremium
5:45
Creating a POST InstancePremium
4:08
Connecting our Node Express App to MongoDBPremium
3:10
Storing Data in a DatabasePremium
5:51
Fetching Data From a DatabasePremium
5:34
Transforming Response DataPremium
5:07
Deleting DocumentsPremium
7:37
Updating the Frontend after Deleting PostsPremium
3:02
Adding Posts with an IDPremium
7:07
Section ResourcesPremium
1:00

Section 5Enhancing the App

Module IntroductionPremium
1:11
Adding RoutingPremium
10:12
Styling LinksPremium
3:59
Client Side vs Server Side RoutingPremium
2:44
Creating the "Edit" FormPremium
10:38
Finishing the Edit FeaturePremium
11:09
Updating Posts on the ServerPremium
9:21
Re-Organizing Backend RoutesPremium
5:54
Adding Loading SpinnersPremium
9:05
Section ResourcesPremium
1:00

Section 6Adding Image Uploads to our App

Module IntroductionPremium
0:44
Adding the File Input ButtonPremium
4:51
Converting the Form from a Template Driven to a Reactive ApproachPremium
13:41
Adding Image Controls to Store the ImagePremium
6:59
Adding an Image PreviewPremium
4:58
Starting with the Mime-Type ValidatorPremium
8:20
Finishing the Image ValidatorPremium
7:17
Adding Server Side UploadPremium
8:23
Uploading FilesPremium
6:05
Working with the File URLPremium
6:18
Fetching Images on the FrontendPremium
6:37
Updating Posts with ImagesPremium
13:20
Wrap UpPremium
0:54
Section ResourcesPremium
1:00

Section 7Adding Pagination

Module IntroductionPremium
1:04
Adding the Pagination ComponentPremium
7:18
Working on the Pagination BackendPremium
8:08
Connecting the Angular Paginator to the BackendPremium
5:24
Fetching Posts CorrectlyPremium
6:09
Finishing TouchesPremium
4:48
Section ResourcesPremium
1:00

Section 8Adding User Authentication

Module IntroductionPremium
0:59
Adding the Login Input FieldsPremium
8:15
Handling User InputPremium
3:42
Adding the Signup ScreenPremium
3:32
Creating the User ModelPremium
6:23
Creating a New User Upon RequestPremium
5:30
Connecting Angular to the BackendPremium
6:38
Understanding SPA AuthenticationPremium
3:39
Implementing SPA AuthenticationPremium
9:32
Sending the Token to the FrontendPremium
5:43
Adding Middleware to Protect RoutesPremium
11:47
Adding the Token to Authenticate RequestsPremium
13:45
Improving the UI Header to Reflect the Authentication StatusPremium
7:23
Improving the UI Messages to Reflect the Authentication StatusPremium
6:19
Connecting the Logout Button to the Authentication StatusPremium
2:32
Redirecting UsersPremium
4:25
Adding Route GuardsPremium
6:48
Reflecting the Token Expiration in the UIPremium
6:12
Saving the Token in the Local StoragePremium
15:54
Section ResourcesPremium
1:00

Section 9Authorization

Module IntroductionPremium
1:09
Adding a Reference to the ModelPremium
3:28
Adding the User ID to PostsPremium
7:02
Protecting Resources with AuthorizationPremium
8:19
Passing the User ID to the FrontendPremium
7:24
Using the User ID on the FrontendPremium
5:11
Section ResourcesPremium
1:00

Section 10Handling Errors

Module IntroductionPremium
1:14
Testing Different Places to Handle ErrorsPremium
9:49
The Error InterceptorPremium
8:01
Displaying the Basic Error DialogPremium
5:13
Adding an Error DialogPremium
5:26
Returning Error Messages on the ServerPremium
7:10
Finishing TouchesPremium
3:03
Section ResourcesPremium
1:00

Section 11Optimizations

Module IntroductionPremium
0:34
Using ControllersPremium
8:16
Separating the MiddlewarePremium
3:30
Creating an Angular Material ModulePremium
4:20
Splitting the App Into Feature ModulesPremium
5:14
Fixing an Update BugPremium
2:31
Creating the Auth ModulePremium
4:08
Adding Lazy LoadingPremium
9:35
Fixing the Auth GuardPremium
1:00
Using a Global Angular ConfigPremium
6:18
Using Node Environment VariablesPremium
5:26
Section ResourcesPremium
1:00

Section 12Deploying our App

Module IntroductionPremium
0:40
Deployment OptionsPremium
3:59
Deploying the REST ApiPremium
13:34
Angular Deployment - Finishing the Two App SetupPremium
9:51
Using the Integrated ApproachPremium
9:37
Section ResourcesPremium
1:00

Section 13Course Roundup

RoundupPremium
2:05

Course instructor

Maximilian Schwarzmüller

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 enable me to focus on the most relevant key concepts and topics. My track record of many 5-star rated courses, more than 1,000,000 students worldwide as well as a successful YouTube channel is the best proof for that.

The most rewarding experience for me is to see how people find new, better jobs, build awesome web applications, work on amazing projects or simply enjoy their hobby with the help of my content. That's why, together with Manuel Lorenz, I founded Academind to offer the best possible learning experience and to share the pleasure of learning with our students.