Angular 2 (Angular 4) - Http Client and the In Memory Web API

[Music] hi everyone how's it going now in the previous video we looked at services and promises and we looked at a pretty simple crud operation type app which this is a list of players and we added players updated players and deleted players right but we we built it all in memory so there was a collection of memory that was contained in the service and we basically handled promises to maintain whether something was successful or not well in this video we're going to think something will be bigger than that is the HTTP client and people place it there right now thinking or finally we're gonna get a web server you know something to put in the back end like a node app or something like that will hook into it and we're gonna do your rest operations off that well not really I we are going to do that and I'm gonna cover that in the next video but for this video I'm gonna stick with what's referred to as an in-memory web api that is basically another package but it's not part of the angular CLI by default but somebody has written a handy little web api that basically intercepts your HTTP XML requests or what angular uses to call that inside and basically doesn't in memory representation of certain data so if you got like a for example in my case the players collection you can emulate that as a data source and make it look like it's part of the web api so you can run rest calls again so for put postally get all that kind of stuff and it looks like it's come from without the operative strong guys coming from in-memory okay so that's what we're gonna be covering to start this video and then basically after that we're going to use the HTTP client to return promises from this in-memory web api on now another library is going to be used to start this video something called Eric's jeaious you may have heard of it already and I'll angular 2 videos of people may have put up on the Internet I am going to be looking I'm going to be doing videos on Eric's jeaious just not right now and simply because I want to slowly build up towards that so for this video we're just going to be looking at promises and how we can use promises to basically detect the same the same thing we had in the previous one but we're just using an HTTP where if you are down the next video I will be building a proper web server application and that'll be written in node so people can then see for a fact that the Coburn and a right in this video is going to work in a real life scenario okay then we're gonna move on to our HJs which I'll then go through servable is and all those other bits and pieces okay but one step at a time let's take let's take this slowly because you know we can only absorb so much information and minds in one go so to get started we do have to do a few thing in starting to get this underway the first thing is that for this memory API to work I had to update the angular CLI now that's a pretty simple operation right now my version of the angular CLI is this so I've got version 1.0.0 dot b dot 28.3 right and this also requires an update or it's giving me a warning at this stage that it requires a minimum node update of six point nine okay so if you're running a version of node that is less than 6.9 what you need to do is you need to update that this one is currently running 7.5 so you come over to the node side and you get the current version here which is 7.5 or you can run it via bruins well however you guys want to update your node version that's up to you on power and I'll leave that to you guys to do that but you do need at least six more nine based on the warning right and then basically what I've done after that is in my repository which I will come over to HP crud here which is the new repository that I've created I'm going to leave the clone the clone links in the description I've got three branches here so currently I've got master which is the end result for this video but may eventually be something else in the future when we get to observables but I've also created a branch that just says promises that's the final result of this video and then before HTTP is before I implement the HTTP part so this is the starting point this is the ending point and this is whatever it's currently at okay so I'm gonna put the clones I'm gonna put the clone for that and then you'll have to switch to in order to run go along with this video you're gonna have to switch to the before HTTP branch okay that should get you up to this point once you've updated your angular say all right now I'm things I said see iLife you've forgotten it's just NPM update that's G cuz you want to be globally updated and then hang your eyes - Ceylon now I'm not gonna run this because it's a waste of time but you guys get the gist of it once you've done that there's one other thing we need to do I'm gonna quote I'm going to stop my sale right here because I don't want to have this running right now so what you need to do next is in order to get this in memory way of a peeler we need to add it as a package okay so currently over here my visual Co code I've opened up the full folder I'm just gonna come into package Jason and that's very interesting does that happen ah no this is the wrong folder let me get to the right application here I should be proud I'm gonna open this all the way coming to my package Jason which I have open and now you notice dependency or a death dependency it really doesn't matter dev dependencies obviously when we're running in the dev environment but I'm just gonna add in here underneath the rxjs which D just to give you an idea of this this needs to have a updated version of rxjs which is 5.0.1 in my case and if you look at that the latest version 5.0 app icon 1.0 but for this example we have any 10.1 so in here I'm going to add in the angular in-memory AP line package angular in-memory API our Web API like that and the version we're going to use is 0.24 and for now just close that save now we need to go and install that so again we come back over here and we go npm install and we'll it'll read the package here so it should pick out that that new package that we need to install there it is thank you like in memory web api and that's now installed so now we can get access to this angular in memory api on sorry how do how do we use this thing okay well the first thing you need to do is connect to your source into the app and we need to add it module okay so come to add module and and then it must be under HTTP module because if we put it before HP module HTTP module will override what this module does but after it we need to include in memory a Web API module so in memory where they feel almost what you can see there now I'm gonna grab the honor that's fine up there AB but we need to go full route alright so this is this for the routes part of the rest api so everything from the rid of the apple it's hard to explain but just for now because we're not going to be going too deep into it just see it as this is the data that's going to be exposed for this API okay from the very root of the application and then what I'm gonna pass it is something that's saying in memory DB service now I'm just gonna create my own here so the bus will play out sorry basketball player data I'm gonna call that okay now I haven't read this class yet but I will be I'm going to save this and basically what is this bus will player data well this is going to be basically is essentially like our database that's hidden behind an API okay so when we do crowd operations the data that's in this class is what's going to be modified and updated deleted fetch from all this stuff okay so we need to actually create this file okay so that's that's what I'm gonna now so we're gonna come to you I'm gonna create a new file and I'm just gonna call it for now player - data dot PS okay so what so what we need to do from here though and this is part of the angular in-memory API we need to import something so we need to import what's referred to as in-memory DB service which is what that for it was asking or asking for and we're gonna get that from yes you probably may have guessed it the angular oops and you are in memory that thing right so that's it now that we've actually put that package this thing resolved and then we need to exploit a class and we're gonna call it basketball player data so it's going to implement the in-memory DB service box set and basically this in-memory DB service has a contract that has a create DB this is like your database that's hidden behind a API and this is pretty much when we put that when we put the data for the place all right the players are here currently so if we come over to the player service essentially what we're passing is this okay so if we may even just quickly grab this copy now it's not gonna look exactly like this so just pay some of these so what we need is we need a player's variable like this equals and then we're gonna pass an array now the array is not going to be a basketball player it's just going to be an array of objects so what we need to do here is we just put in some simple objects right now for this example to work well I'm going to add a NID for all these and there isn't a showing ID is if you think like a real REST API what you generally do when you're doing quite operational api's you pass ideas around yeah unless you're doing a get collection or you're you're doing a insert okay they're the only times you probably don't need an ID but for the rest of them we're getting an individual player one with the leading player and when we updating player you're going to want to pass in an ID okay so that's why I'm gonna add here so then the rest of it's pretty much the same so in this case we got first name and we go out LeBron and LeBron last name James and I'm keeping these property names the same as the basketball player here okay so if I go to basketball player and the reason for those I want to convey at this this object here into a basketball player at a later stage so I actually need to add an ID here like so and then the last ones description and I hope I'm not going too fast for you guys I'm trying not to but you can always pause the video and have a think about what I'm doing here it's pretty straight forward at this stage we're just creating basically some data that will be returned or basically manipulated by an API using they should be quite operations so we got three rows three rows yeah and I'm just gonna copy the data so this is a bit of a boring copy/paste job here paste and love copy paste copy the anytime we should really be copy and paste them and no copying code from the internet and pasting it is not a reasonable option unless you know what it's doing that's just a bit of advice there okay so now do that now we need to return something here to say that this is this is actually that's it now it's very important what we named this variable here because what this is going to be is the name of the API endpoint so how this in-memory thing works is if you put in the name players here the rest path is going to look for built-in is API slash players like that if I make this players to like that they're its API players to that's going to look for okay very important than speech in there that you understand that that's how it works because of may confusion later on when we do the actual HTTP stuff okay so we've registered this now we've got our new memory API sitting there ready to be manipulated and that's all you need to do okay in terms of creating the API the rest of it in terms of HP client all that is already handled for you when you registered this module in the app model all right now I just need to quickly add in here the import basketball player data and now we're all good to go okay so we have an internal API we're going to manipulate in order to do crud operations so what is next well let's have a look at the app info web sorry the app component do we have to do much in here probably not all that much there might be a couple situations where we might do a few things inside of here but overall we re simply we're returning a promise and we're handling the situation or some of the situations that we need to handle at this stage all right now there's a few things that we'll need to do in here simply because this in-memory representation is going to have to be modified outside of the service now remember in the previous video I said the service was the players here was pointing to the same in-memory representation of the flight that was inside the player service that's not going to be the case now in this video so we are going to have to do a few extra things inside of these functions to especially remove and save to make Bui work okay you'll see that when we get to it so the first thing I want to actually look at here is I look at the get players okay so we're already handling when we get a player we're binding to the players that's returned and we're handling errors this doesn't need to change at all okay so let's start with this so we need to go over to the player service and basically we're gonna come in here now we're gonna change a few things okay so the first thing I want to do is we need to access actually pay right we're going to import that okay import and then import two things when the import HTP and we import something called headers now it is you won't see for the gap but you will see later for the insert and update but I'm gonna now anyway so from at angular slide 50 be sure now one more thing I need to add and this is not something I'm gonna talk about too much in this video but I will be in previous bit in future videos we're gonna put something called rxjs flash add / operator / - promise and the reason why we're adding this is so I can stick with promises for this example further on we're going to look at something called observables neither observables we're not going to need this okay but for this video we need to use it to music we've promises now the next thing we're gonna do is when it come to the players from the yard okay what are we doing before while resolving a promise for sitting at time now alright the set timeout was to emulate at the light we don't need that anymore because we're gonna have a real API so to speak it's an in-memory one but it's gonna be an API so and then we're resolving this top layers now this top players not needed in this collection anymore and this is where we're gonna get that the players being returned now on the points to the same object a memory issue anymore so that gets deleted because we're not gonna need it okay what we are gonna need is really the URL to point to an API so you go private there players each plays your equals about app / players remember I mentioned that earlier normally I would create a whole another service that handles just rest and you just pass in these things but for example we're going to use HTTP now at this point we have not included HTTP in our particular so we need to inject that and how did we eject services well we did it in the previous we did it in the previous video so it's the same deal here we go eject and we need HCP object just like that whoops so now we get access to HCP objects o HD service so there we go this dot HCP so the ACP is now officially this is like we're going into rest okay we're going to make a web api call to some server somewhere which in our case happens to be memory so then we go doc get cuz we're gonna get something what we're gonna get is the stuff from this top layers URL okay and then what we want to do is we wanna return a promise right remember but so we need to do that first like so so now we have a promise however this promise is not returning what we want it's returning something called an observable response okay that's I'm sorry it's returning for a promise of a response all right we don't want to return a response object we want to return something we want to return players or I collector the players so how do we do that well now that we've accessed to a promise that we have a response we need to manipulate this response and convert the result of the response to the set of possible players right isn't right and when you do that quite simply while using the then state and like we did in the previous video so now we're going to response objects and again with that arrow Convention and on the response object that we have something called response type JSON like that pretty simple and then we grab the data so the response from the API in the our case will be it always be wrapped in sort of something called data that's just how the HCP object works it wraps any response you get back from the web server and sort of a data object and it's because you can have other things for safety but these are security you know I can't remember off Tommy head but there's something like that and now we want to cast this at this point we don't we don't want it as it is we want to cast it something so we're the class to basketball why yeah right okay and at this point we're done okay or are we not quiet remember with any operation HTP we get errors okay so this is the what we're doing when we get a successful return what happens if we get an error well we have to catch it now we could catch it inside of the the app component however once again if we catch it there what's gonna happen is that we're really getting some reason data from inside of the HCP right we want to manipulate the message that comes back from the server and make it a little bit friendlier to understand for the component right we don't want to spit it out like a stack trace or something like that out to the world we want to just maybe grab maybe there's an error code inside of it or something like that maybe we can manipulate that error code to represent another message you know so that when the component reads it the user actually visually sees the error on their screen get something that makes sense to them okay that's generally what you do with any kind of UI right you get an arrow back from the server and rather than show you a bunch of stacktrace stuff which is a bit of a vulnerability we show them a friendly message so this is what you do yup okay for this I'm just this door handle error and we're not going to handle this as perfectly as I'd suggest here so but I want to handle here because I want to return something different okay this is just how you do it let me come down here and get a private handle there okay and inside of the panel Luna we have a parameter and it's an error now this could be anything we don't know what it is exactly and then we're just gonna go return all right promise dark reject we're gonna return the error or the message of the error all right or we're gonna return the error if there's no message now not ideal again we would do more in this area if you were billion fully fledged application but we're not also I'm going to log out the error so we go and error good and just to see why it actually comes up it's okay so we like we can say it as developers now normally you would not have this in a production environment but we're just doing the volunteer we're learning so I'm just gonna do that for the month so that pretty much handles that situation now we do have all this other stuff I'll return I will delete this because we don't want the need of that anymore and I've got to return this it's one of the effort to do you could actually return it otherwise it makes no sense now for these other ones for the moment we're gonna do is I'm just gonna comment out the code here and we're gonna get to it one more one and that's just to get rid of the actual compilation issues because we delete and there is spits fun so Paul writes I've done this right we should still get a list of buffer players so if we come over and we refresh to load ah cars I've not run G&G serve let's do that again there's that warning once again that's really annoying now it's gonna say that until I get the next version that you will sell like it's saying it's already being used oh boy that's annoying guys I'm gonna have to just pause the video here for a second and we'll get back to this story and done back survey that guys don't know what happened there I would seem to say as an application was running on that port it's like the old ng serve didn't quite shut down properly and then when I tried to run it again it just crapped out so I had to kill off that that port and then I restarted in g7 also good so but successfully if you look over here it's working so now if i refresh you'll see it's a bit of the light but then it kicks in it says that's normal for an HTTP request now the interesting thing is you'll see down you know when we come to the network tab i refresh the page I'm currently sitting on xhr which we all knows well hopefully you know that XML HTTP request we get this info thing but that's to do with sockets and ng serve over here but when I actually do something or it loads the screen you'll see this narrow HTTP request being made out there now again that's because of the memory API is it's in store intercepting any calls are going to be made out via XML HTTP by the ace of no GP request through the angular framework and just basically on boards on to in memory dinosaurs so don't expect anything to come out here you're not going to see yeah okay well we get the next video and we point to a real server you will see stuff coming up you know moving on so as you can see this was successful so now when we return back we are absolutely 100% returning back I promise where we are promising to deliver a list of possible players so once again coming back over to the component we changed nothing yeah there's nothing that changed okay now let's move on to the next part what do we wanna do next how about add okay we want to add a new plot so we're gonna come over the component and we're all down a bit and we remember when we click the show platform we're checking efforts and if it's not a player we're gonna create a new player okay now we don't necessarily need anymore to specify three parameters here because remember we do have an ID that was in the list so there is I'm gonna create an empty array now for this basketball player empty constructor sorry I'm gonna come back over to the player model and send away all this like so I'm just gonna come in and then initialize stuff so like sorry woops okay I'm gonna create empty and I did number by default to me left what the default is right we just want to make sure that we actually have some values just even if it's empty okay that's for a new player is there anything else we need to do not really okay so everything else stays the same there now down here we've got an insert player now the one thing I could change here and should change here is that remember now at this point this player has an eye something set normally when you do a a post to the database you will get a new ID a unique ID for that new player all right so we need to be able to establish that okay this calls not going to be sufficient okay so this like this part's fine the catch is fine but what we need to now handle is the then we have then and what then is going to do with this example this is gonna return and insert it quiet now the instead apply is gonna have to new ID on it in there so once we have the incentive player we're gonna go this dot players dot push the new instead of player okay and like before the player we originally had here can be nullified out we don't need it anymore it was just a placeholder temporarily for the form okay so we know that don't need it this here will allow us to add the new instead of player to the player's collection which now becomes very important to handle because this place closer is no longer pointing to an in-memory representation but in fact to a results of a HTTP request which doesn't have a direct memory time now you might say the in-memory API service might create a reference point it doesn't it creates a copy of the data and sends it across to the caller so the reason I referenced there so that's why you have to manually update its collection yourself now so there's a couple of little Meier things that you have to establish now with a real HTTP server that's what you would have to do as well so there's no this would be required regardless of whether you used an in-memory API or a real one I hope that makes sense if it doesn't make sense please send me an email I'll explain more so that's what we need to do for that caches as expected and for insert that's all we really need to do planet level everything else stays the same we're still returning a promise the only difference is now a routine a promise they expects a player now if we go over to the service what are we returning here for an insert we're returning any okay now we need to return a player okay at this point which is resolving we're not part we just passing through nothing okay this bill works because whenever you do a resolve and in fact this doesn't quite work because we're not resolving anything so nothing had ever be resolved but we're going to do that right now oh so how do we how do we handle this particular function whatever whatever thing it's actually not much different to the get okay first thing is we're not gonna return a promise anymore that's that's the first bit we don't return you know promised or we are returned your promise but we're not returning it using the promise object okay we're going to be returning something from HTP right so this diet ATP and what do you wanna do it well we're gonna do a post okay and what we want to post well it's the player's URL okay and what are we going to post well we're going to post a JSON representation Jason dot stringify a JSON representation of the player okay so we're going to if we try and post it the way it is a ticket it will not work for this post operation it needs a string I believe or is this body of any but when I ran this I've needed to stringify this for this to work and the last thing it needs is it needs to set up options now if you know HDPE or rest you know that whenever you send something by Jason you need to spike the specify that the content type is Jason okay so in order to do that we need a head up so this last one allows us to add headers so headers objects now we need to specify what we want to put in this headers object well I'm just gonna put this dot headers for the minute and the reason why I do that is because up here I'm going to create a headers object and that's where we get we get this new remember I passed up here the headers we're never gonna use this here there are new headers so and we're gonna pass it here is basically a stream of main value pairs so a dictionary essentially in top script and the first one would be content type whoops capital T and then after that we have application slash JSON like so content type here's blue we okay maybe this is the editor it's considered it's a property of the dictionary so I guess that make sense so now that we've got the hair specifier we're going to pass that through which we have now when I've done here obviously this is at this point what it's returning is an observable of a response which is not what we want to return right we want to do the same as we did with the get so we go to promise and again that's not enough why is that not enough while the promise is still returning a response here well we need we need to change that so we need to do this we did with the get we got Oakland and we passed in the response oops oxide and just like before got another response dot JSON dog died out as possible playing this time an individual player now that pretends a no sorry no no right now that works and you got yep that's good enough but we want to handle the arrow too because we do not want to handle errors of type response so we'll go catch and in this case we're going to handle this dot handle there okay yep I think that's right from the stop bus we'll apply a catch yeah just I'll handle era our handle Eric rejects it or anything at this stage what this should be handling and I still retain the right it's the routine the right thing now the reason why we can't change this handle area to be promised all cluster player is because we use the same handler for a collection of Buster players which is why we have error of any and we use promised Raj straight away okay so that's unless you want to go and create another error handler just for this you know then you can have a different return type here but I don't know you can't have a return time so by rights this should now sorry this should now work let's let's give it a go let's try and insert a new flat so I'm going to insert me I'm 13 submit now a bit of a delight and then you can see it comes up all right now the other thing I want to do quickly here just to show you something pretty cool go back over to the UI for this app component I'm going to include your idea so teenage you know ID th and in the Listeria TD why our ID now this is something you may not have noticed when you first like I've got one one one and the reason why it has one one one probably because my player data has one one one yeah so this needs to be two and three so reload that again so we've got one two three here once again I like myself and this is the cool thing about the in-memory representation of this I click Submit and I come up but look what also happens it increments the ID so now I'm number four okay so now when I loaded the or when I go to edit myself which we haven't fully working yet if I was to put and on a day here and in fact I might even demonstrate this even though I don't have it in my github at the moment which you guys can add yourselves if you really want to one of my dude is this guy ID and we'll go form player ID this will allow us to see the ID but what you'll say is when we do the insert it's not the loop so not to the pony empty and you can see it's empty but if I come in and I edit given you'll see it's three two one and then come in with add razor there coating cement there I am actually edit and you can see IDs instantly become for here okay then I take that out just because I don't really like the fact that empty when I'm insert you guys can try and make it table when it's an insert and all that stuff in your life for this example I don't really care okay so what do we do next okay I was like insert look-alike get let's try update and there are four you remember from the previous video we did nothing for updating in the service we literally just resolved for the promise right well this time we are going to do something do something interesting so the first thing we do actually before we go to that let's go back to file with make sure we're covering all aspects which we are not say once again we're not hadley a actually I don't know if we need to handle a success here because we're reusing model bonding and I think that actually that should be fun the way that it is so we don't need to touch anything here so let's go back to the service alright and in the service we're gonna do a few things now obviously because we need to update someone the first thing I want to do please let's think about with a real API where we would updates all will you rub update on API slash player slash their ID make sense right simple REST conventions so we need to specify the URL here so let's go let update URL equals a cool thing about typescript is this chilled option and we go dollar in parenthesis this dot players URL all right and then we go slash in fact I should it yeah that's right slash dollar and we player ID all right yeah cool so what we're doing here is we're growing API slash players and then we're incrementing /id on the end okay and we need to do this so we can update the individual player and this is pretty much how the the in-memory API works as well but normally under normal conventions you should be doing it as far as well so like that yeah once again we go return this whoa geez that's definitely not right SVG this dot HCP what because we're putting something in update URL what are we putting well we're putting in the player and once again we're gonna return the headers of this doc you know because it's also Jason right widget which sitting Jason over once again to promise you've seen all this before so I'm just completely go through this and all this is the same in fact up and pretty much copy the code from here nothing there changes make sense in fact there's only one difference we're not returning a player and this is Fitz why because we don't need to weave or at least in our case we don't need to because the data that was updating is already in the object that was pushed through some why return the same object back now technically we could and maybe an API would you know instead of just going success and won't return the object that you just updated back to you to which you can associate response in my case I don't care I'm just gonna go create a method called this top success all right and all this thought success is gonna do is return and its promise I promise any all right and then this guy returned promise dot resolve and that's it that's all of it okay if it's successful I'm just gonna resolve and say yeah we're opening and then I read this last one now this should also work so let's quickly go and check that and we've updated here so that's coming to see LeBron James book click edit and keep in mind this is going to be very hard to know without looking at the consoles if there's any errors whether this session works why because we've got model binding turned on and because we've got model binding turned on whenever I go LeBron and therefore it's instantly gonna update up here now with reactive forms and all those other forms that I've done in the previous videos you can see more how this works stiffly but I'm just being lazy yeah if I click Submit you'll see that's updated and there's been no error so for the most part you'll know that it's sound worked and if we want to know if it's truly worked well you can do something like this we can come over to sorry not this one we need to go to the component if you really really want to know if it worked or not we can come in and go like then we even just call this dot ng on in it right and what this is gonna do if you think about it and this is not something I would keep in your code but this is now gonna go and make a full get request again to fetch it from the API and reload the playlist alright so you'll see for a fact well you can pretty much feel satisfied that it's updated okay if I doing this so let's quickly just check that smoke coming over and we're in the prime and we change it to 433 you'll see it's than that I'll submit alright and what I might do as well just to give an idea that it's actually disappeared and then reappeared because again you still can't really see can you what I'll do is I'll clear out the list and this is stuff I haven't done in my my repo so just keep in mind if you're looking at that and trying to find what this code is it's like there is very clear I will just do this empty this points wouldn't do her right all right it's not the nicest why because it's changing memory locations but it'll have to do for now so let's give this a go again and refresh and walk died hopefully we'll see like at least a flicker yep and there you go did you see that I kinda don't go edit let's change it to 46 it clears for a second and then it comes back and you can see what's coming back from the API is correct alright so that validates that the update has worked ok so now coming back I'm gonna get rid of this then because we don't need it because we're not doing anything else with it and save now the last one we need to do is delete now do we want to do anything on the lead yes we do in this in this case we want to handle the in memory this dot players when we don't successfully delete from the web server so we come in and we go then and we're gonna grab in fact we already have a reference to the player we're gonna go this in fact it's a chunk of code and now what do we write in here I'll put the play yeah we got the list of players so what are we right well if you remember in the previous video the player service remember I might be taking some of the code back this is one Simon Kirke that I'm taking back ok back it out of the service and back into the component and dumping it yeah yeah why because this dot plays it Knicks are funny that player and then basically right and this should handle that if we're successful deleting and in fact if I come back over you'll see that it should work regardless it won't delete from the server at this stage but it should delete from the table so let's let's just have a quick flip to see if that works delete LeBron and didn't work holy ah because remember I've got to resolve this resolve like that okay that is what I said ah doesn't really matters when looking at it yet delete now resolve it is the only deletes itself okay so that card in the component is now working okay compile it's all good nothing else needs to change it so this now we can close it we're happy closed ears from close this we close the mark-up and we oppose the module and we're stuck in Plato's service now how do we handle a a delete to the server very similar to update I'm just coming here woke up this update you're out and we'll change it took the leap yeah that's the same this is where you normally create some kind of resource configuration someone that's you have to keep repeating code but for this if I don't care so we're not going to have this promise anymore and we're gonna return this DCP dot delete now we don't need to reference any player here but we do need the player to get its ID that's why I was like yeah so we go the late URL all right that's all we need and then we need to convert it to a promise I'm sorry and once again we'll go then and in this case we're just gonna have this dot success I believe yes then this dot success because we don't care and also on catch this dog in there and save now my rights everything now should be working hopefully by now this should make sense to you what I just did so I called the blade method passing the URL because I've got the player /rd I've been called success which is an empty promise handler that just resolves and then attached which is the handle that our channels any errors right returns it so come back over or refresh it to be safe I click delete now that this like the lady but as you can see LeBron gets deleted okay so that's the Kron operations using promises now if you want to quickly check the errors you can throw errors yourself these is why throwing errors is to change the name of the euro and that will prevent it from happening and you can see down here and errors occur blah blah you know so you can see straight away what's being logged out so in the first case we've got you know the an era has occurred and the error object all right and the second one if there's no error message which happens to be there's no error message in this case so we just dump out the object okay so that's it for this video in the next video what we're gonna do is something that all of you guys have been looking forward to and we're gonna get rid of this in memory with API and we're gonna point to a real thing to a real node server so I will spend a little bit time writing a note server in the next video now I'm gonna be honest with you guys right now this is not a node course so I will not be sitting there explaining every bit of node code that I'm writing I'm just gonna show you very quickly how to create a simple web server that had spread operations and I'll have an in-memory representation of well as well of the Web API data so what will happen is whenever we reload this page the information will come back from the server will remain consistent what is on the server rather than when we refresh this page LeBron comes back see if I delete in here and i refresh the page you'll see the fronts back again in the next example we will see I do this and they're gone and I'm gonna refresh they will not be here only Kevin Love will exist okay so thank you everyone for watching please comment down below what you think of the video let me know if anything you have issues with that once again my email my Twitter anything to get in contact with me if you're stuck but I'm gonna end it there because I need to edit this and give it up to you guys to enjoy and I'm gonna go so I thank you everybody for listening and I'll see you the next video bye for now [Music] you

Channel: Lyrad Digital

Views: 7,626

Keywords: lyraddigital, angular 2 httpclient, httpclient, http service, angular 2 http service, angular, angular 2, angular services, angular 2 services, angular 2 promises, rxjs, rxjs promises, rxjs toPromise, Angular In Memory Web API, angular promises, promises, asynchronous javascript, typescript, javascript, Learn Angular 2 With Me, angular 2 for beginners, InMemoryDbService, InMemoryWebApiModule, InMemoryWebApiModule.forRoot, forRoot, angular 2 rest, lyraddigitaldevelopment, LearnAngular2WithMe

Id: 0vNcYT6e99c

Length: 56min 15sec (3375 seconds)

Published: Sat Feb 04 2017