by
Lessons:25Length:2.9 hours
Angular test1
  • Overview
  • Transcript

2.5 Implementing a Simple Back End With Express

Welcome ladies and gentlemen and thank you for joining me again. In the last video we with a little bit of difficulty, got karma working, a big success for us as web developers. In this last setup video, we're going to setup a simple backend that we're going to use for our app. This is going to be very simple, and we're not going to use a database of any kind. So let's get started. Let's create a new file in the base, and we'll just call it server.js. We're going to need Express, so let's go to our terminal and install Express. And, be sure to add the save flag to that. Cool. Now, go back to server js and we'll say, aver express, and we'll just require express. We're going to call our server app. So we'll var app = and we'll invoke express. Now there's a lot we can do with this app, but we're just going to create a very simple, almost dummy like, contacts service. So let's make an array and call it contacts. And inside this array, just put a few objects and give them names, so I'll make one of mine named Eddard and another called Robert. This is just for demonstration, so you can have as few or as many contacts as you like. Now we'll define a simple root for the server, which will make the server return the contacts. We'll say app.get. Slash contacts. And we'll pass it a function, which takes a rec and a res argument. And this is all pretty much going to go the same way. We're just going to say res.send200 sorry, res.status200. Which means okay.json Contacts and that's all there is to it. Let's save that and now run this file. Go to your terminal and type node server.js. Nothing happened. Looks we forgot to listen with our server. So go back to server.js and add app dot listen. And now we need to specify a port. Lets just specify the port 9001. Save that and try running it again. Did something happen? Let's go to local host, port 9,001. Let's go to the contacts root. Cool, and there's our contacts. So we've just gone ahead and set up a backend that we're going to use in our Angular app. As you can see, this is very simple. We're not using a database, we're really just trying to get, as simple as possible, asynchronous backend that we can. Finally, we're going to want to run our server automatically every time we run our app, or else our app won't work. So we're going to use a plugin called gulp-live-server to make this happen. Go to your terminal and type npm install save, gulp-live-server. Now go to your gulp file. And require it. We'll just call it server, so say var server = gulp-live-server. Now we'll add a task and we'll call it server as opposed to serve. Save their life and we'll make that equal to a new instance of live server and pass it the path to our js file. And we'll call start on that. Now, we'll make the server task a dependency of the serve task, so in the gulp task serve, as a new argument between serve and function, insert an array, and the array should have the string server. Cool, let's give it a shot. Go to your terminal and type gulp serve. We get an error, start is not defined. Well, that's because we made an error on line 8 here. This should be live.start. Let's give it a try with gulp serve. So here I have my app open. If I go to 8080, I see my Hello World, but if I go to 9001/contacts I see my list of contacts, so we're all set. Our angular app on the front-end is going to communicate with this back-end, and we're going to test it all. So, hopefully you've followed along and put together your app. If not, that's fine, you can just clone the GIT repository and check out lesson five, which is where we're going to be at the beginning of the next lesson, and follow along from there.

Back to the top