Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:17Length:2.7 hours
Webappangular
  • Overview
  • Transcript

1.6 Creating Our Resource

Our contacts application will need to keep track of contact objects that our users will create. This means we need both a server and client component. On the server, we’ll create a database and a series of REST routes. In our front-end application, we’ll create an Angular resource.

Related Links

1.6 Creating Our Resource

Pretty much every angular application you build will be mostly a front end application. And that's certainly true about the application we're building in this course. Most of the code that we write will be run in the browser on the front end. However, almost every application will need to have something going on on the server, and that is the case for this application as well. Since we're creating a contacts application that allows our users to create and update, read, and delete contacts, we need to have basically a rest API on the back end that will be used to store all of our users' contacts. Now the way that Angular interacts with a rest database like this is through what's called an Angular resource. And so, in this screen cast, we're going to build this rest API back end. And we're also going to write the angular resource that uses this back end. So I'm here in the root directory of our project. And as we saw previously our web server is in the server.js file. We're gonna put our rest API in a different file. So I'm gonna open an api .js file. And this is where we're going to use the express version four router feature to create our API. Now if you're not familiar with express four and its router feature there is a video about this router feature in my previous Tuts Plus course on express version four. So check that out if you're not familiar with what we're doing here. So the first thing we have to do is require express. So, we'll go ahead and require express like that. And we're also going to need a database system to store all of our data in. Right? Now, if this were a production application, my preference would be to use Mongo DB. However, since this is just something small that we're gonna be working on just here on our local computer, I'm going to use a database system that I wrote called bourne. It just stores all of the data in a front file adjacent file. It kind of has a Mongo DB like interface. So, I'm going to do npm install bourne, and while I'm here on the command line, I happen to know that I'm going to need to be able to parse the bodies of requests from our API, because of course the body of the request is how we will work with post requests and put requests. Now, previous versions of express came with body parsing metaware. However, express four has moved pretty much all metaware out into separate packages, and so I'm gonna go ahead and install the npm. I'll do mp install body dash parser. And this is what we will use to parse the bodies of our http requests. All right, with those installed I can come back here and let's pull them in. So I will get bourne, and I will require the body parser. Final variable that we'll need is the database itself. And this, we can create just by saying new bourne and then we'll say data.JSON. Okay, actually, there's one more variable that we need to create, and it's the most important one of all, and this is the router. We can create a router object by doing express.router with a capital R. We call that function, and we get a brand new router object, ready for us to create some new routes. So, down here, lets do router. And the very first thing I'm gonna do is add a piece of middleware that is only going to be temporary. See, eventually we're going to have user authentication as you saw in the demo in the first video, where a user has to sign in to see the contacts in their address book. And when we store each contact in the database, one of the attributes of that contact will be a user ID, which will be the user who has created that contact. But we don't have authentication yet, so we don't actually know what the user's ID is gonna be. And so, what this piece of middleware is gonna do is, we'll just say if there is no request.user object, then we'll go ahead and set request.user equal to an object that has an ID of one, and then, we'll pass the request on with next. So, eventually, when we do get authentication, request.user will be the object of the user that is currently logged in. But since this doesn't exist yet we'll just mock this data as we've done here. Okay, the next thing we wanna do is actually use that body parsing middle wear that we pulled in, so we'll say a bodyParser.json to parse the different request bodies and now we can say route.slash contact and this is also a new express feature. What we can do here is say a route contact and then we can have .get and .post methods and we don't pass the route as a parameter to get our post because we have the parameter up here passed to route. So we can just pass the functions here. And I prefer this method because if we ever wanted to change this route, doing it this way, we only ever have to change it one place, instead of going to each one of these functions, and changing that first parameter. So, first when the user gets slash contact, we'll expect the response to be an array of all the contacts that that user has. So, we'll say db.findall, it's going to take a query object, where we are going to look for the user ID, and I am going to go ahead and parse in to request .user .id. The reason I do this is because when this user ID actually gets stored in the database, it stores as a string, so we have to go ahead and parse it there. So we're going to find everything with the ID of the currently logged in user. And all of those records of course will belong to that user. So then, we can have our call back function here, and we can just do a response.json and send all that data back to the browser. Now, if we get a post request to the slash contact route. Then that means that the user is trying to create a new contact record. So, we'll go ahead and create our contact here, and we can do this just by assigning the request body to contact, and then we'll set contact.userid equals request.user.id, and then we can do db.insertcontact, and then in the call back function here, we'll do the same thing again and respond by sending the data back to the user. Alright, so these are the two functions that will need to be run for different http requests on the route slash contact. However, any other routes will follow the pattern slash contact slash colon id, where that is the id of the specific record that the user is either modifying or deleting, so what we need to do here is, once again we'll call the router object. And we have to do this, we can't just chain them onto these ones above because these are specifically for the slash contact route. And we have to change that route. So we'll say .router and we're going to say .param. And this is another new express four feature and what happens is .param is that this is basically middle ware that will only be run when one of the parameters of a route is the id. So right underneath param here we're gonna have .route, and it's going to be /contact/:id, and this id here as the first parameter to our param method, refers to this colon id in the route, so for any of the functions that go on this route, this param metaware will be done first. And, this is really simple, I'm just gonna do request.dbquery equals, and we'll say where id equals parseintrequest.params.id so, basically. Typically what this does is it adds a property to our request object, and this is the request object that continues to get passed down, so this database query will be available in all of the routes that we put on slash contact slash id. Basically this means that we don't have to write this JavaScript object here in every one of those functions. It allows us to assign it as a property request object and then use it later on. You'll see what I mean here in just a second. So, the first function we'll call is the get function. And here we can do a db.find one. Oh, before we go any further here, I think I made a mistake up above. Yeah, I just realized when I wrote find one here, I remembered up above here, I said find all, but that is not find all, that should just be find. There's find and find one. Those are the two functions for either finding an array, or for just finding one. So, if we wanna just find one here, find one and we'll find one and we'll pass it the request.dbquery as the parameter. Remember, that'll be this object up here, and then of course this will take the standard call back function. And we can go ahead and respond by sending that data as JSON back to the browser. So when we have a get request to a contact slash id, our API will respond by sending only that record back. Now the other option, is a put request. And a put request will occur when the user tries to update this individual record. So once again I'm gonna get the contact information by doing request dot body and then I'm gonna go ahead and do delete contact dot dollar sign promise, and I'm also gonna delete contact dot dollar sign resolved. These are two values that angular uses. And it adds them to the object, and they're only used on the front end. But when we perform this put request to update our values, they do get sent along to the server. And if we don't remove them they would be stored, and we do not want those stored. So we'll go ahead and delete those values right there. So now we can do db.update. We'll find the record to update by using the request.dbquery we will pass in the contact as the data that we want to update it with. And then finally in our callback we'll again do response.json however this time we only want to pass back the data index zero because here we happen to know that we're updating only a single record. However the update method is written so that you can update many records with it. And so the data return will be an array. But since in this case it will only be a single item in that array, we'll return that single item instead of the array itself. All right, and the very last case to prepare for is when we get a delete request to this route. We know that this means that the user wants to delete this record, and so we'll do db.delete. We'll go ahead and pass at the query object once again, and in the call back function here, once that has been successfully deleted, we'll just send null back, because there's nothing else that we need to send back. Well believe it or not, we've just created a very simple rest API here that we are going to use as our backend. All we need to do is make sure we export this router object from this module. So right here at the bottom here we are going to do, module.exports equals router, and that is all we have to do. So now, let's move back to the server.js. And up at the top, let's go ahead and require our API. And now we have to apply this API to our application. So right underneath where we're serving our public directory, we'll call that use function again. Our first parameter will be slash API and the second parameter will be the API object itself. Now what the first parameter does here is basically it prefixes all of the routes inside our API object with slash API. So where inside the api.js file, we had /contact and /contact/:id. Now that we've actually put this into our applications, the browser will have to make a request to /api/contact and /api/contract/id. So, now that we have the back end created, we need to go ahead and attach the front end to this back end, and as I mentioned earlier, to do this in angular, we need to create an angular resource. Now, the angular resource code is not included in angular by default, so we need to go ahead and do bower, install, angular, dash resource. Now, we'll need to include this in our main page, so let's open up the public slash main.html and let me copy our angular route here and, we're gonna change lib slash angular route to angular dash resource, and we'll change it here to angular dash resource as well. And then, we have to open up the public slash source /app.js. And here where we are including the ngRoute dependency, we also want to include the ngResource dependency. The very last step is to create our resource as a factory in Angular. So, we're gonna create a new file here, public slash source slash factories.js. Once again, we'll start with Angular module and our module is called contacts app, so we'll use this to reference our module. And then we'll say factory and we're calling this factory Contact. The callback function here takes the dollar sign resource object and now inside of our callback here we will return the calling of this resource function and we'll pass it our URL which is /api/contact/:id and this is one of the neat things about Angular. What we can do is we say slash colon ID, and then, in an object after this, we say that this ID links to the ID property on each one of our resource instances. The at sign here just means that it's a one-way link. So, basically, we just take the ID off the contact instance that we create and it becomes the final parameter here, but the neat thing is if we just try and say query the database for all of our users, it will just use up until this colon here. So /api/contact, and that will work just fine. Now we need to do one more thing here in a third object. In the last parameter to the resource function, we need to create the update method, which we will used when updating our contact records. And we just have to tell, Angular that the update function should use the HTTP method put. While this is the proper way to do an update, older browsers didn't support put and you would have to do an update via post. However all the modern browsers allow us to do an update via put, so that is what we are going to use here. So this is our whole resource and that means that we have successfully created both the node js back end which is connected to our database. We've wired that up in our server.js so that it's part of our main application. We have included the resource here in our main.html. We've made sure that we've stated as resources dependency. And finally we are using that resource to create our contact factory here, which we will use not only to create new contacts, but also to get contacts from the server and store contacts on the server. So in the next screen cast, we'll look at how we can actually use all of this code that we have written.

Back to the top