Building an Angular Application with Node and Token Authentication

When developing a web application, Angular and Node are popular options that many companies utilize today. Learn to develop a web application using the latest web technology and Json Web Token authentication.
Course info
Rating
(78)
Level
Intermediate
Updated
Oct 25, 2017
Duration
2h 55m
Table of contents
Course Overview
Setting up Your Environment
Creating Your First Web Service
Registering a New User with Node and Mongo
Creating a Register View and Service with Angular
Logging In
Showing a User List
User Profile
Posting to User Feed
Developing Advanced Auth
Publishing Your App
Description
Course info
Rating
(78)
Level
Intermediate
Updated
Oct 25, 2017
Duration
2h 55m
Description

At the core of developing a web application is a thorough knowledge of how to work with both back-end and front-end components. The two most popular choices, Angular and Node, will be the focus. In this course, Building an Angular Application with Node and Token Authentication, you'll learn the skills you need to create high-quality web applications. First, you'll explore how to create Angular components; both visual with Angular Material and functional with JavaScript. Next, you'll discover the services that allow you to communicate with the back-end. Finally, you'll learn how to develop an authentication system, Web API's, and work with a mongoose database. When you’re finished with this course, you'll have a foundational understanding of back-end and front-end app development and authentication. This knowledge will help you as you move forward and create your own modern web application, whether personal or commercial. Software required: Angular and Node.

About the author
About the author

Alexander has been an IT Instructor, Developer, and now President at SocialPlay inc.

More from the author
More courses by Alexander Zanfir
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
I have been a developer for over 15 years, and began teaching in college eight years ago. Four years ago I started creating courses for online publishers like Pluralsight. I'm Alexander Zanfir, and in this course we will look at building an Angular application with Node and Token authentication. We will be creating a full Stack application, with Node, Express, MongoDB, and Angular. This Stack has been one of the most popular choices to get your app started. IBM, Uber, Google, and many more well known companies are using the technologies in this Stack, that we will be working with, and learning about in this course. Since I like teaching hands on, we will make everything from start to finish, and you will learn by coding along. I will avoid theory slides as often as I can, and just focus on getting coding as soon as possible. We will learn how to make a demo application that has some of the basic features of popular social networks, such as a user login and registration, using JSON Web Token Authentication. We will then look at posting messages to your social feed, so that your friends can see all of your posts when they go to your profile. Once you are finished this course, you can reuse many of the components we developed in this course for your own app.

Creating Your First Web Service
Hi, my name is Alexander Zanfir, and let's continue our course by creating our first web service. Please go on ahead and open up the backend project inside Visual Studio Code, and make your server. js file is open. We will now modify our existing get route so that we can serve posts. We don't actually have a database set up, so we'll have to serve some marked posts that we'll hard-code inside our server. js. So let's begin by modifying line four, and we'll append posts to the end of the slash, and then we'll send over some posts. So instead of a hard-coded "hello world" string, I'll send over posts. That doesn't exist yet, so let's create that, and I'll make a list of several objects, and for now, our object will have a single property called message, and I'll hard-code this message with "hello" for now, and let's the same for our second object. Now let's give this a try. We can go to our terminal and press control + c to stop the server, and then we can press the up key to get our last command which is going to start our server. js. Now let's give this a try. So we'll go back to our browser and go over to localhost;3000. If we try to refresh that, we should no longer get any information since we no longer have that generic route, but instead we'll add /posts and we'll see our two objects. Now that we have our node backend sending a mock object through a get response, the next thing we can look at is how to receive that with Angular on the frontend and then display it. Let's take a look at that next.

Posting to User Feed
In this module, we'll learn how to post messages to the user feed. We currently have our users list, and when we click on a user, we can see the profile. Over here I'd also like to show all the different messages a user has posted on their feed, and so we'll need two new components, one subcomponent that will show all of the messages, and another component that will allow users to post messages to their feed. But the first quick fix I'd like to do is instead of displaying the email in the users list, we'd like to display the name now that we have a users name. So let's begin by going to the frontend project in our editor. Let's open up our users. component, and on line 8 where we populate the card content, instead of user. email, we'll put in user. name. Let's save that and see those changes. And since I've quickly named both users a, they're both showing up as name a. Now that we have that quick fix, let's focus on creating the endpoint that will allow us to post messages to our backend.