Angular 2 And Nodejs The Practical Guide

  1. Home
  2. Nodejs
  3. Angular 2 And Nodejs The Practical Guide

Tags: Node.Js

Learn how to connect your Angular Frontend to a NodeJS & Express & MongoDB Backend by building a real Application

Last updated 2022-01-10 | 4.6

- Build real Angular + NodeJS applications
- Understand how Angular works and how it interacts with Backends
- Connect any Angular Frontend with a NodeJS Backend

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

* 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

Course content

13 sections • 151 lectures

Getting Started 12 lectures

Introduction Preview 01:57

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

What is MEAN? Preview 10:35

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.

Join our Online Learning Community Preview 00:23

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!

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

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.

How Does the MEAN Stack Work? Preview 02:58

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

MUST READ: Angular CLI - Latest Version Preview 00:50

Installing Node & the Angular CLI Preview 07:50

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

Installing our IDE Preview 03:13

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

Exploring the Project Structure Preview 04:02

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.

Course Outline Preview 03:27

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.

How To Get The Most Out Of This Course Preview 02:53

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

Section Resources Preview 00:10

The Angular Frontend - Understanding the Basics 19 lectures

Module Introduction Preview 01:40

Understanding the Folder Structure Preview 06:40

Understanding Angular Components Preview 02:39

Adding our First Component Preview 08:01

Listening to Events Preview 03:43

Outputting Content Preview 05:34

Getting User Input Preview 06:03

Installing Angular Material Preview 15:34

Adding a Toolbar Preview 03:57

Outputting Posts Preview 06:37

Diving Into Structural Directives Preview 05:40

Creating Posts with Property & Event Binding Preview 07:38

Creating a Post Model Preview 04:35

Adding Forms Preview 08:18

Getting Posts from Post-Create to Post-List Preview 09:26

Calling GET Post Preview 11:16

More About Observables Preview 05:51

Working on our Form Preview 03:51

Section Resources Preview 00:09

Adding NodeJS to our Project 12 lectures

Module Introduction Preview 02:03

Connecting Node & Angular - Theory Preview 04:37

What is a RESTful API? Preview 04:45

Adding the Node Backend Preview 08:20

Adding the Express Framework Preview 07:37

Improving the server.js Code Preview 04:40

Fetching Initial Posts Preview 05:57

Using the Angular HTTP Client Preview 09:20

Understanding CORS Preview 05:31

Adding the POST Backend Point Preview 05:27

Adding Angular Preview 05:07

Section Resources Preview 00:04

Working with MongoDB 17 lectures

Module Introduction Preview 01:04

What is MongoDB? Preview 01:48

Comparing SQL & NoSQL Preview 04:26

Connecting Angular to a Database Preview 02:07

Setting Up MongoDB Preview 05:14

Using MongoDB Atlas & IP Whitelist Preview 00:19

Adding Mongoose Preview 03:01

Understanding Mongoose Schemas & Models Preview 05:45

Creating a POST Instance Preview 04:08

Connecting our Node Express App to MongoDB Preview 03:10

Storing Data in a Database Preview 05:51

Fetching Data From a Database Preview 05:34

Transforming Response Data Preview 05:07

Deleting Documents Preview 07:37

Updating the Frontend after Deleting Posts Preview 03:02

Adding Posts with an ID Preview 07:07

Section Resources Preview 00:02

Enhancing the App 11 lectures

Module Introduction Preview 01:11

Adding Routing Preview 10:12

Styling Links Preview 04:00

Client Side vs Server Side Routing Preview 02:44

Possible Error Preview 00:08

Creating the "edit" Form Preview 10:38

Finishing the Edit Feature Preview 11:09

Updating Posts on the Server Preview 09:21

Re-Organizing Backend Routes Preview 05:54

Adding Loading Spinners Preview 09:05

Section Resources Preview 00:01

Adding Image Uploads to our App 15 lectures

Module Introduction Preview 00:44

Adding the File Input Button Preview 04:51

Converting the Form from a Template Driven to a Reactive Approach Preview 13:41

Adding Image Controls to Store the Image Preview 06:59

Adding an Image Preview Preview 04:58

Starting with the Mime-Type Validator Preview 08:20

Finishing the Image Validator Preview 07:17

Adding Server Side Upload Preview 08:23

Uploading Files Preview 06:05

Working with the File URL Preview 06:18

Beware of the Spread (...) Operator Preview 00:37

Fetching Images on the Frontend Preview 06:37

Updating Posts with Images Preview 13:20

Wrap Up Preview 00:54

Section Resources Preview 00:02

Adding Pagination 7 lectures

Module Introduction Preview 01:04

Adding the Pagination Component Preview 07:18

Working on the Pagination Backend Preview 08:08

Connecting the Angular Paginator to the Backend Preview 05:24

Fetching Posts Correctly Preview 06:09

Finishing Touches Preview 04:48

Section Resources Preview 00:02

Adding User Authentication 20 lectures

Module Introduction Preview 00:59

Adding the Login Input Fields Preview 08:15

Handling User Input Preview 03:42

Adding the Signup Screen Preview 03:32

Creating the User Model Preview 06:23

Creating a New User Upon Request Preview 05:30

Connecting Angular to the Backend Preview 06:38

Understanding SPA Authentication Preview 03:39

Implementing SPA Authentication Preview 09:32

Sending the Token to the Frontend Preview 05:43

Adding Middleware to Protect Routes Preview 11:47

Adding the Token to Authenticate Requests Preview 13:45

Improving the UI Header to Reflect the Authentication Status Preview 07:23

Improving the UI Messages to Reflect the Authentication Status Preview 06:19

Connecting the Logout Button to the Authentication Status Preview 02:32

Redirecting Users Preview 04:25

Adding Route Guards Preview 06:48

Reflecting the Token Expiration in the UI Preview 06:12

Saving the Token in the Local Storage Preview 15:54

Section Resources Preview 00:02

Authorization 7 lectures

Module Introduction Preview 01:09

Adding a Reference to the Model Preview 03:28

Adding the User ID to Posts Preview 07:02

Protecting Resources with Authorization Preview 08:19

Passing the User ID to the Frontend Preview 07:24

Using the User ID on the Frontend Preview 05:11

Section Resources Preview 00:03

Handling Errors 8 lectures

Module Introduction Preview 01:14

Testing Different Places to Handle Errors Preview 09:49

The Error Interceptor Preview 08:01

Displaying the Basic Error Dialog Preview 05:13

Adding an Error Dialog Preview 05:26

Returning Error Messages on the Server Preview 07:10

Finishing Touches Preview 03:03

Section Resources Preview 00:01

Optimizations 12 lectures

Module Introduction Preview 00:34

Using Controllers Preview 08:16

Separating the Middleware Preview 03:30

Creating an Angular Material Module Preview 04:20

Splitting the App Into Feature Modules Preview 05:14

Fixing an Update Bug Preview 02:31

Creating the Auth Module Preview 04:08

Adding Lazy Loading Preview 09:35

Fixing the AuthGuard Preview 00:04

Using a Global Angular Config Preview 06:18

Using Node Environment Variables Preview 05:26

Section Resources Preview 00:02

Deploying our App 8 lectures

Module Introduction Preview 00:40

Deployment Options Preview 04:00

Deploying the REST API Preview 00:26

Deploying the REST Api Preview 13:34

Deploying Angular Preview 00:27

Angular Deployment - Finishing the Two App Setup Preview 09:51

Using the Integrated Approach Preview 09:37

Section Resources Preview 00:01

Course Roundup 3 lectures

Course Roundup Preview 02:05

Possible Addition: Add Web Sockets for Realtime Refresh Preview 00:18

Bonus: More Content! Preview 00:20