7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 22Length: 2 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

8.1 Setting Up The Server

Let’s have a quick tour of the server that we’ll be using for creating a persistent contacts app, using NodeJS and MongoDB with Express and Mongoose.

8.1 Setting Up The Server

In the next few videos, we're going to be using Angular to talk to a server using the NG resource module. But first I thought I'd take you through this server that I've built that will act sort of a back end for these videos. We may add some functionality halfway through the videos. But just to start with, I thought I'd show you around, so we can focus on Angular in the other videos. I'm using Node JS for the server, and Mongo is the database. We're gonna be building a Contacts App, and I've set up the contacts scheme here. You can see we're storing the name, first name, last name, and a clean version of the name that we're gonna use as an identifier. We're also saving an email, a potential telephone number, and the date that the contact was added. Before the contact gets saved, we are saving the clean version of them so that we always have that up to date. And if we haven't said when they were added, we're gonna add that too. I've also set the pervertual full name, which means it doesn't exist in the database, but we can use it in our App. And this is constituted of the first and last names. We can also set this name and I've set up here what happens when we do that. And it splits them up, and sets the first name, the last name, and the clean version. Down here, you can see the three API routes that I've got set up. The first one just gets all our contacts, so you can see it's using an empty query, with sorting by the last name, and then it returns all those to Angular. The next root is for getting a specific contact, and you can see that we pass the contact's name in the URL. This is used to query on the user's clean name. And this means we can have really nice URLs to see a contact's specific data, it would be /contact/Tom-Ashworth, for example, which is nicer than a long id. And when we get this back, we return it to Angular. Lastly, we can create a contact where you post to /api/contact. We will pass the name and as I've already said, Mongol will sort out turning this full name into the three ones that we actually want to store. We'll also store the email that's passed in the body and a number. And remember, we've got that post save hook up here that will add the Date in which the contact was added, which will be today's date, when the contact is added, or when the contact is saved, which happens down here, and then we return that contact to Angular. I've also set up a catch all route, which will redirect all requests to old URLs other than the API ones to the index.html file, which is where our angular app will live. This let's us use Angular's HTML 5 URL Support, which will give us some really nice looking URLs. So that was just a quick tour around the server that I'll be using in the next couple of videos. This code will be online for you to download and try out too.

Back to the top