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:
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?
By the end of this course, you will be able to create your own, awesome NodeJS + Angular Applications!
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)
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.
In this course, we'll use both Angular 2 and NodeJS. So let's start by asking: What is NodeJS?
In this course, we'll use both Angular 2 and NodeJS. So let's start by asking: What is Angular 2?
Now that you know what Angular 2 and NodeJS are, let's see how both work together!
This lectures dives into the structure of the Course and gives an Overview over it.
We'll build a big project throughout the course - so let's get started and set it up!
We got the Project set up but what do all the files and folders do? This video answers these questions.
Let me introduce you to this module and NodeJS.
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.
How can we work with the Requests we receive? How can we send Responses? This lecture answers it!
Time to learn how to create Routes on the NodeJS backend and how to pass some Data around.
Learn more about available Http methods and when to use them.
This lectures dives into the question how Data is transferred and which Formats you may use.
Let me introduce you to this module and MongoDB.
This lecture explains how to install the MongoDB server on your machine.
The Server is installed - time to start it.
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.
Working with Data and accessing the Database is a breeze with Mongoose - this lecture explains why that is the case.
Time to use Mongoose in our NodeJS app. This lecture explores how to do that.
In this lecture, we'll create the Models used throughout this course with Mongoose.
How do you store Data in the Database? It's very easy as this lecture shows you.
After storing Data, it's now time to fetch it. Very easy as well as you will learn.
Let me wrap up and summarize this module.
A short introduction to this module and what we're going to build.
Did you ever wonder how to render an Angular 2 app with NodeJS / Express? This lecture should be helpful.
A quick refresher on the concept of Components.
An Angular 2 app needs to be started - which is very simple. This lecture explains how it works.
Decorators are a TypeScript feature you'll encounter quite a bit in an Angular 2 app. This video helps you understanding them!
Time to output the first data! Learn how String Interpolation allows you to do that.
Let's apply some styling to the component and learn how Angular 2 Styling and Templates work.
This lecture explores how you may use Two-Way-Binding in your Angular 2 app!
We'll work with users and messages. It makes sense to create separate models for these, so let's do that.
Our project grows - and with that, the folder structure needs to be improved. Learn how to do that, in this video.
Time to add additional components to the party.
Property and Even Binding are very important concepts - get a brief refresher on them!
Let's add some custom Property Bindings to the app.
Like with the custom Property Binding, it's now time to add custom Event Binding.
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.
There are "Attribute" and "Structural" Directives in Angular 2. This lectures dive into the first one.
One message is boring, let's output a list of them! With *ngFor!
Time to further modularize the app and add additional components to it.
To handle our messages with ease, we should use a service. And we should inject that service. How? This video helps.
Let's start simple and create a new Service. It's easy!
Time to connect all our pieces and take the data input via the form and store them with the help of the Service.
Learn how to use this service to get some messages.
Somehow, the app is behaving strangely. Let's fix it by using only one Instance of our Service.
Angular 2 makes using Forms easy. Learn how to use the Template-Driven approach to add new messages.
Time to prepare for the usage of the Angular 2 Router. For that, let's reorganize the app and add a header.
Now it's time to add some Routes and make the Router work. Learn how it works, in this video.
Routing works, but it's not that great to use without any links. Time to add some Navigation to the app.
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.
Almost there! Let's enhance the application by adding some user-related Components.
The user routes should be reached as Child Routes of the Authentication Route. Let's implement this functionality.
To manage the User Signup Form, we'll use Reactive (Data-Driven) Forms. Learn how that works, in this video.
Let's finish the Angular 2 Frontend by adding a User Signin Form.
Let me give you a brief module introduction.
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.
Time for a brief refresher on how Angular 2 Http actually works.
The backend has been prepared, now it's time to wire up the frontend to it!
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.
Again, it's time to wire up the frontend and the backend to be able to get messages.
Editing Messages is actually the trickiest part. Learn how to implement a great editing workflow in your Angular 2 App.
Now that the frontend has been prepared, it's time to work on the backend and provide a route to actually edit messages.
Again, it's time to wire everything up!
The missing feature is the possibility to delete messages. Let's add the according code on both the front- and backend.
Let me introduce you to this module.
Authentication doesn't work like in a "normal" server-side application. Learn more about the differences in this video.
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.
Let's wire up our Signup Feature!
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.
Want to dive deeper? Here are some resources!
Let's put all the Sign In pieces together.
Logged in Users are great, but sometimes you want to leave. Learn how to log users out, in this video.
How to know if a User is logged in? Learn about a way to find this out!
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.
We got Users. We got Messages. Let's connect them!
Finally, it's time to use that Token and enable the client to authenticate itself.
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.
When fetching Messages, we're also interested in the users who created them, so let's fetch that data, too.
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.
Time to wrap up this Module on Authentication.
Let me give you an introduction to this module.
Learn which parts you may use to set up a flexible Error Handling mechanism.
Let's create the component we'll use for displaying errors.
Let's create the Service we'll use to handle errors.
A good idea is, to use a central service which handles all errors. Learn more about such a service, in this video.
Let me introduce you to this module.
We'll use the Module System Angular 2 offers us and create a Message Module in this lecture.
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!
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!
Let's prepare our Application for Deployment!
In this module, we'll use MongoLab to host our MongoDB. Learn how to set everything up in this lecture.
This lecture teaches you how to successfully deploy your app to Heroku.
This lecture teaches you how to successfully deploy your app with AWS Elastic Beanstalk.
Let me introduce you to this module.
Let's start by creating the basic folder structure and the backbone of the backend - using Express Generator.
Time to fine-tune the backend and adjust it to our needs.
Time to install all Production Dependencies and Types we'll need in our NodeJS + Angular 2 app.
Time to also install all required Development Dependencies and start working on our Webpack Configuration!
Let's add the Development-only Configuration to our Webpack Process.
We haven't any Frontend yet! Time to change this and add a basic Angular 2 app.
Let's finish the Development Workflow by adding a Script we may execute to run it.
Time to finish the seed project by adding the Production Workflow, using AoT Compilation.
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.
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.