Angular 2 and NodeJS - The Practical Guide to MEAN Stack 2.0

Learn how to connect your Angular 2 Frontend with a NodeJS Backend by building a real Application
4.6 (1,281 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.
6,974 students enrolled
$19
$150
87% off
Take This Course
  • Lectures 109
  • Length 8.5 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 5/2016 English

Course Description

Updated per 19th October 2016: This Course has been fully updated to Angular 2.0 Final!

Create modern, scalable and high-speed Web Applications with Angular 2 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 2.

Benefit from the many improvements and advantages Angular 2 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 2 Basics!

This course is no Angular 2 course, but it includes detailed explanation of the core concepts used as well as about Angular 2 in general. However, keep in mind that, as this course is no Angular 2 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 2 + 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 2 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 2 Application
  • Use NodeJS and Express efficiently
  • Build reusable Components in Angular 2 and create a reactive User Experience with the Tools provided by Angular 2
  • Connect your NodeJS (or any other language!) backend with your Angular 2 App through Angular 2’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 2 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 2 Applications!

FAQ:
1) Are you writing Angular 2 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)
2) How much NodeJS and Angular 2 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 2 will the frontend)

What are the 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 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

What am I going to get from this course?

  • Build real Angular 2 + NodeJS applications
  • Understand how Angular 2 works and how it interacts with Backends
  • Connect any Angular 2 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 2 (+ NodeJS) application by adding Error Handling

What is the target audience?

  • This course is for everyone interested in putting existing Angular 2 and NodeJS knowledge into action
  • If you're familiar with the basics of Angular 2 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

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Getting Started
02:02

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.

01:54

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

01:45

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

03:58

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

02:56

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

04:26

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

06:27

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

Section 2: NodeJS Basics
00:56

Let me introduce you to this module and NodeJS.

09:37

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.

03:55

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

05:25

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

01:51

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

02:56

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

More on NodeJS
Article
Section 3: MongoDB Basics
01:52

Let me introduce you to this module and MongoDB.

02:33

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

01:28

The Server is installed - time to start it.

02:09

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.

01:21

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

02:28

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

10:44

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

06:12

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

04:04

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

00:35

Let me wrap up and summarize this module.

More on MongoDB
Article
Section 4: Creating the Frontend with Angular 2
01:18

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

03:13

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

01:51

A quick refresher on the concept of Components.

06:51

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

00:58

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

02:29

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

04:53

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

03:48

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

07:57

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

01:29

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

06:32

Time to add additional components to the party.

04:10

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

04:02

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

06:16

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

02:39

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.

03:17

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

03:56

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

08:05

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

02:10

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

02:54

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

04:43

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

04:25

Learn how to use this service to get some messages.

02:54

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

11:04

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

05:32

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

05:58

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

03:21

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

02:04

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.

04:03

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

07:44

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

12:52

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

03:31

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

Section 5: Connecting the Angular 2 Frontend with the NodeJS Backend
02:38

Let me give you a brief module introduction.

09:08

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.

02:50

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

17:23

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

03:45

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.

07:21

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

12:57

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

04:28

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

05:48

Again, it's time to wire everything up!

04:48

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

Section 6: Users and Authentication
01:16

Let me introduce you to this module.

02:49

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

07:02

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.

10:53

Let's wire up our Signup Feature!

12:16

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.

Article

Want to dive deeper? Here are some resources!

06:49

Let's put all the Sign In pieces together.

02:45

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

03:19

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

06:11

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.

08:41

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

05:23

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

03:21

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.

02:36

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

06:10

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.

01:44

Time to wrap up this Module on Authentication.

Section 7: Error Handling
00:53

Let me give you an introduction to this module.

02:34

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

07:51

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

02:37

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

06:00

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

Section 8: App Optimizations and Deployment
01:02

Let me introduce you to this module.

04:32

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

07:12

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!

02:21

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!

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Maximilian Schwarzmüller, 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.

Besides web development languages like HTML, PHP, CSS etc. I also got into mobile app development and were able to launch apps as well.

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 known languages. This background and experience enables me to focus on the most relevant key concepts and topics.

Whether working as development instructor or teaching Business Administration I always received great feedback. The most rewarding thing is, though, seeing what people you helped or advised are able to pull off and how you improve as a developer yourself.

Ready to start learning?
Take This Course