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 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.