Coding

Angular 2 Tutorial (2016) – HTTP (GET and POST to RESTful Service)

  • 00:00:02 everyone so far into this chorus we've
  • 00:00:06 covered a lot of topics and one great
  • 00:00:10 topic has been missing as of now and
  • 00:00:12 that is how we can connect to the web
  • 00:00:15 how to use HTTP to get or manipulate
  • 00:00:19 data for example through a restful
  • 00:00:21 service now we got our service set up in
  • 00:00:25 this project or in this course because
  • 00:00:27 we were already using services but we
  • 00:00:30 were fetching our data from well in the
  • 00:00:32 end just a constant or a variable we
  • 00:00:34 defined right so that probably won't be
  • 00:00:38 how we will be doing it in a real app
  • 00:00:39 and therefore we will have a look at
  • 00:00:42 HTTP now in this video yes that's right
  • 00:00:44 we will have a look at HTTP and how we
  • 00:00:46 can access the web to access and
  • 00:00:49 manipulate data let's have a look at
  • 00:00:51 this here we are ready for some HTTP for
  • 00:00:56 this video I'll use JSON test comm where
  • 00:01:00 I basically have the chance to use their
  • 00:01:03 REST API to send get and post requests
  • 00:01:07 and get something back so that I can
  • 00:01:09 just demonstrate how we do that I also
  • 00:01:14 listen to some comments which complained
  • 00:01:17 that it was a little bit hard to read
  • 00:01:19 from time to time because of my font
  • 00:01:22 size so I would try to take care about
  • 00:01:24 that and increase my font size
  • 00:01:27 appropriately what I want to do in this
  • 00:01:30 video is I use my contacts app and I
  • 00:01:32 will add a little side note because I
  • 00:01:35 didn't find a way to at the moment
  • 00:01:38 implement it in a way it would refit
  • 00:01:41 into the contacts phim so I will just
  • 00:01:43 implement an additional component which
  • 00:01:46 does that HTTP request stuff so that you
  • 00:01:49 have a chance to learn that and then we
  • 00:01:53 might find a better way to embed it in
  • 00:01:55 our contacts application the future so
  • 00:01:58 first thing I'm going to do is I'll
  • 00:01:59 create a new contact and/or a new
  • 00:02:02 component not in my contacts folder
  • 00:02:04 button the top folder and I will call
  • 00:02:06 this component an HTTP test dot
  • 00:02:10 component TS and
  • 00:02:15 let me just get this boilerplate here so
  • 00:02:21 to say we'll have a selector of HTTP
  • 00:02:24 test don't need that out of it as of now
  • 00:02:26 in the routing configuration and here we
  • 00:02:29 will have HTTP test component so that
  • 00:02:33 will be my MD the testing component and
  • 00:02:36 what this component will hold is it will
  • 00:02:39 get a button which says test get
  • 00:02:46 requests it will get a paragraph where I
  • 00:02:52 will be able to output whatever I have
  • 00:02:56 in my get data which will be a property
  • 00:02:58 I'll define a second I will have a nut
  • 00:03:02 or yeah will have another button which
  • 00:03:06 says test post request also line break
  • 00:03:11 here and then I have another paragraph
  • 00:03:13 where I will have the output of that
  • 00:03:16 request the post data property will be
  • 00:03:20 used here in my class here I have to
  • 00:03:26 define my get tighter and my post data
  • 00:03:29 properties so as I again that will be
  • 00:03:32 the properties that result or the
  • 00:03:34 response of my requests will be bound to
  • 00:03:37 and yeah that's that for the component
  • 00:03:41 as of now in my app component right
  • 00:03:43 under my router outlet here I will embed
  • 00:03:46 my HTTP test component I just created
  • 00:03:49 and for Network we also have to add as a
  • 00:03:54 directive in our directives array here
  • 00:03:57 so the HTTP test component save it and
  • 00:04:01 now we get our component here nothing
  • 00:04:05 nothing happening as of now obviously
  • 00:04:07 but that will change soon now I will
  • 00:04:10 define a new or create a new service the
  • 00:04:13 service which will do that HTTP access
  • 00:04:16 because that would be the the standard
  • 00:04:19 the default way you do that an angle at
  • 00:04:21 you you create a service which has the
  • 00:04:24 methods to to get or to a manipulated
  • 00:04:26 data and then you can call that service
  • 00:04:29 on
  • 00:04:29 methods in the service from all the
  • 00:04:31 components where you in check the
  • 00:04:32 service so that's the much most modular
  • 00:04:35 and flexible way you could do it and
  • 00:04:38 therefore the way I would strongly
  • 00:04:40 recommend you do it so I create a
  • 00:04:42 service and I will just call it so I
  • 00:04:47 look great the service and I will just
  • 00:04:48 call it HTTP test service dot TS and now
  • 00:04:57 for that service I'll use my contact
  • 00:04:58 service here just real quick copy all
  • 00:05:01 the content here get rid of that I need
  • 00:05:03 them tractable that's important and get
  • 00:05:07 rid of that and call it HTTP test
  • 00:05:10 service good
  • 00:05:13 so now let's our service isn't doing
  • 00:05:15 that much as of now let's change that I
  • 00:05:18 will need my my HTTP service to access
  • 00:05:23 the web HTTP is a service already
  • 00:05:27 included in the angular 2 package so we
  • 00:05:30 can use that but to be able to use that
  • 00:05:34 there is one very important thing to do
  • 00:05:37 but to be able to use the HTTP service
  • 00:05:41 at least currently as of beta zero there
  • 00:05:45 is one very important thing to do
  • 00:05:47 otherwise nothing will work there in my
  • 00:05:51 index.html I have to add another import
  • 00:05:56 up here I'll add it under the up right
  • 00:05:59 below the router here and the import I
  • 00:06:02 need is the HTTP package and you can get
  • 00:06:09 it from that URL here be sure to to
  • 00:06:13 write it down or looked it up you can
  • 00:06:15 also Google for it and this will import
  • 00:06:18 it otherwise we can't use HTTP it's
  • 00:06:21 currently not included in any of the
  • 00:06:25 packages or of the script swearing
  • 00:06:28 importing here very important so in my
  • 00:06:32 test service and I notice I forgot to
  • 00:06:35 zoom in a little bit more than before
  • 00:06:36 but I'll do it from now on
  • 00:06:39 and the test service I'll inject the
  • 00:06:42 HTTP service by writing construct in my
  • 00:06:46 constructor by writing private a pry
  • 00:06:50 private HTTP HTTP this import was again
  • 00:07:00 automatically added for me it's
  • 00:07:03 importing it from angular to slash HTTP
  • 00:07:05 now I will have two methods in the
  • 00:07:08 service which I want to be able to use
  • 00:07:09 I'll have the get current time method
  • 00:07:13 because that is one of the things we can
  • 00:07:17 do here get this date and time API
  • 00:07:22 endpoint which we can call where we
  • 00:07:24 basically have to call date chase and
  • 00:07:27 test come and we'll get back a chase on
  • 00:07:29 with yep current time and date so that
  • 00:07:34 will be the get route will be using and
  • 00:07:36 I want to be able to post data therefore
  • 00:07:40 I'm using that validate endpoint here
  • 00:07:44 where I can send and JavaScript object
  • 00:07:48 with Jason element and it will give me
  • 00:07:53 back if it's a valid object so to say or
  • 00:07:56 what it is just like you're an example
  • 00:07:59 just a little jason element it will give
  • 00:08:01 me back which says something about chase
  • 00:08:04 and I sent there so that will be my post
  • 00:08:08 route so I will just call that post
  • 00:08:13 jason just like that and obviously now I
  • 00:08:19 could pass some arguments to those
  • 00:08:21 methods and you probably would do that
  • 00:08:24 if you call it from from a component
  • 00:08:28 where you might have some logic which
  • 00:08:31 defines what you post or get but as this
  • 00:08:33 is just a little example and it's not
  • 00:08:35 about passing arguments I'm pretty sure
  • 00:08:37 you know how to that I'll just use dummy
  • 00:08:41 values which I create here in my service
  • 00:08:43 so let's start with the get route as I
  • 00:08:48 said I'll be calling this date and time
  • 00:08:50 route here and all I have to do is
  • 00:08:52 somehow send a get request there and get
  • 00:08:56 the the answer or the response I don't
  • 00:08:59 have to provide any arguments I do this
  • 00:09:03 why or I will return it to my component
  • 00:09:07 which called by calling the get method
  • 00:09:12 on this HTTP service we injected by the
  • 00:09:16 way all this methods this does HTTP
  • 00:09:19 service has are very intuitive you got
  • 00:09:22 delete get hat patch post so yeah all
  • 00:09:25 your HTTP works here in this case as I
  • 00:09:28 said get and we will get it from this
  • 00:09:31 end point here so let me just copy that
  • 00:09:34 and HTTP returns air and observable
  • 00:09:44 observables are something angular 2 uses
  • 00:09:48 instead of promises as it did in angular
  • 00:09:51 1 to get something in this case from an
  • 00:09:56 HTTP request and then we can subscribe
  • 00:10:00 every component which wants which which
  • 00:10:04 gets our observable basically everything
  • 00:10:06 which gets this observable can subscribe
  • 00:10:08 to let's say everything which happens
  • 00:10:12 with this request or it to all the
  • 00:10:14 events fired by that observable so to
  • 00:10:17 say so as the name says it observes
  • 00:10:20 changes in the state of that object
  • 00:10:25 I could tell much more about observables
  • 00:10:28 because there is much more to tell and
  • 00:10:31 observables are much more complex than
  • 00:10:33 just what we were using them here for
  • 00:10:35 but this video is about HTTP HTTP and
  • 00:10:38 therefore I will stick to the very
  • 00:10:40 basics I might do with you about
  • 00:10:42 observables in the future you might also
  • 00:10:44 if you are very interested right now
  • 00:10:46 Google that but I will focus on just the
  • 00:10:49 basics here because otherwise this video
  • 00:10:51 would boom explode so I will call the
  • 00:10:56 map method on this observable and this
  • 00:11:00 allows me to map the response we get
  • 00:11:03 back to your variable to to transform
  • 00:11:07 the response service
  • 00:11:09 in this case I know I get back a JSON
  • 00:11:13 formatted text so I will map this where
  • 00:11:19 I will extract it so to say by using a
  • 00:11:23 fed arrow function here where I pass the
  • 00:11:25 response in and then I call the Chasen
  • 00:11:30 method on that passed in value or on
  • 00:11:37 this past and object you this what this
  • 00:11:41 does is basically it says ok it has to
  • 00:11:43 be Jason I will extract it as such I
  • 00:11:47 will use it as such that's very
  • 00:11:50 important because when we then subscribe
  • 00:11:52 to our observable here we will be able
  • 00:11:55 to actually get and display the data
  • 00:11:58 excuse me and therefore we have to know
  • 00:12:00 which format data has and that is what
  • 00:12:02 we're saying here so I'm returning this
  • 00:12:05 observable where I already kind of
  • 00:12:08 specified which kind of text or what our
  • 00:12:12 answer will be our response so that we
  • 00:12:15 can use it back to my test component
  • 00:12:19 here I want to when I bet and click this
  • 00:12:22 button I want to fire that get request
  • 00:12:24 so I will add a click event here and I
  • 00:12:26 will call on test get I will create this
  • 00:12:30 method here now on test get this will
  • 00:12:36 call our HTTP service method to get this
  • 00:12:43 yeah basically just the get current time
  • 00:12:46 function there to do that I first have
  • 00:12:49 to add a provider namely our HTTP test
  • 00:12:55 service and I have to inject it in our
  • 00:12:58 constructor here by defining it to our
  • 00:13:04 HTTP service property the HTTP test
  • 00:13:09 service so this will inject it in that
  • 00:13:12 component and now we can use it here to
  • 00:13:16 call our get current time method and now
  • 00:13:19 remember that returns and observable
  • 00:13:21 therefore we are now here able to
  • 00:13:23 use all those observable methods and as
  • 00:13:25 you can see there are a lot the ones we
  • 00:13:28 will need is one we will need is the
  • 00:13:33 SUBSCRIBE method which means to any
  • 00:13:35 changes that happen there I want to be
  • 00:13:38 part of it and be able to listen to in
  • 00:13:41 this case the data we get sent back or
  • 00:13:43 if we get an error back so I want to
  • 00:13:45 receive that notification if you want to
  • 00:13:48 say it that way so I'll subscribe to it
  • 00:13:52 and now I can enter free parameters or
  • 00:13:55 free arguments to this function the
  • 00:13:58 first one is if I get back data what
  • 00:14:01 will I do with this so the success part
  • 00:14:04 of our request in this case I want to
  • 00:14:09 set my get data property here let me
  • 00:14:13 increase it maybe a little bit I want to
  • 00:14:14 set the get data property to that Jason
  • 00:14:20 we get back but as a string so what we
  • 00:14:22 call json.stringify and then data which
  • 00:14:28 we pass in there and if you're not
  • 00:14:30 familiar with that syntax that's the fat
  • 00:14:32 arrow function it was added as of the
  • 00:14:36 es6 specification and it's also
  • 00:14:40 available in typescript and basically
  • 00:14:43 this is just a function where we pass in
  • 00:14:47 that variable or that argument and then
  • 00:14:50 this is our function body we also got an
  • 00:14:54 error case where we say okay if we get
  • 00:14:57 an error what when we don't goo what
  • 00:15:01 should we do well in this case I will
  • 00:15:02 just send an alert and the last argument
  • 00:15:08 is a complete function which is executed
  • 00:15:11 somewhere as you can see passing
  • 00:15:13 functions in all three arguments but the
  • 00:15:15 last argument we will pass a function
  • 00:15:17 which will be called when everything is
  • 00:15:22 completed so not in the success case but
  • 00:15:25 just when the request completed so to
  • 00:15:29 say in this case and we will just output
  • 00:15:34 finished
  • 00:15:36 to the command line let me reformat that
  • 00:15:38 really quick okay that's everything I
  • 00:15:43 need here now if I were to test it now
  • 00:15:47 that would work cause we're injecting
  • 00:15:51 HTTP here we're importing it here but
  • 00:15:58 two things are currently missing one
  • 00:16:02 should be more or less pretty clear here
  • 00:16:09 we're setting a provider to use our HTTP
  • 00:16:11 test service which you then inject in
  • 00:16:13 our constructor now where are we doing
  • 00:16:16 that here we can't do it in our service
  • 00:16:18 right we have no decorator which allows
  • 00:16:21 us to set a provider Cerie so somehow
  • 00:16:25 how does Anglet you know how to create
  • 00:16:28 such an HTTP object the answer is it
  • 00:16:31 doesn't we have to go to our bootstrap
  • 00:16:34 method here and as we added our router
  • 00:16:36 providers to were able to be able to use
  • 00:16:38 all that routing functionality we also
  • 00:16:41 have to check or provide or HTTP
  • 00:16:44 providers so that's one thing and there
  • 00:16:47 is one other thing which I'm pretty sure
  • 00:16:49 is isn't clear or which is bit
  • 00:16:52 surprising we have to add an import
  • 00:16:56 statement to our service because we're
  • 00:16:59 using that map function here we have to
  • 00:17:02 use this import statement to add that
  • 00:17:05 map operator and to be able to use it
  • 00:17:08 now I can't tell you of it well if it
  • 00:17:11 will stay that way when angular 2 is in
  • 00:17:16 its final form and released currently we
  • 00:17:19 have to do that
  • 00:17:19 otherwise we will get an error and a
  • 00:17:21 pretty annoying one too because it takes
  • 00:17:25 some time until you figure out what is
  • 00:17:26 wrong I can tell you that so let me save
  • 00:17:29 this and now let's try it by clicking
  • 00:17:32 here and we get back our time as a chase
  • 00:17:35 great let's do the same thing for the
  • 00:17:38 post request in my service we will do is
  • 00:17:43 I will create just an arbitrary JSON
  • 00:17:47 object here
  • 00:17:48 chase an element where I will string if
  • 00:17:53 I let's say any object I want let's say
  • 00:18:00 I have bar one is test and r2 will be a
  • 00:18:05 number doesn't really matter now I will
  • 00:18:10 use this and send it as a parameter to
  • 00:18:13 my post request and so it will just set
  • 00:18:17 it up now the parameter here is
  • 00:18:18 important if we look back to our
  • 00:18:21 validate entry here it tells us that we
  • 00:18:25 should send chase and equals so will be
  • 00:18:32 equals you my string if I'd JavaScript
  • 00:18:37 object I get here so that will be the
  • 00:18:42 parameters I'll send with that request
  • 00:18:44 I'll also create a header new headers
  • 00:18:53 and this header and will append that's
  • 00:19:00 also angle to you built-in object I will
  • 00:19:04 append the content type which will be
  • 00:19:11 application/x-www-form-urlencoded so
  • 00:19:22 that will be the header attached to a
  • 00:19:23 post request and now I can again call
  • 00:19:28 return this then HTTP POST now and the
  • 00:19:33 post request takes two mandatory
  • 00:19:37 arguments the first one is tea URL which
  • 00:19:41 is validate adjacent as calm that's the
  • 00:19:51 URL the second one are our or arguments
  • 00:19:55 so to say the body of the post request
  • 00:19:57 to be precise will it be that will be
  • 00:20:00 our appearance and the
  • 00:20:02 argument is a JavaScript object where I
  • 00:20:05 can specify additional arguments in this
  • 00:20:09 case I want to pass some headers or it
  • 00:20:11 will pass the header I created here so
  • 00:20:13 I'll save that now again I'll call the
  • 00:20:16 map method on this what we get back on
  • 00:20:21 our response and I will again unwrap it
  • 00:20:27 as JSON so to say now back in my test
  • 00:20:30 component I now will create a click
  • 00:20:35 event here which fires on test post now
  • 00:20:41 let me create that method here and I
  • 00:20:46 will call my HTTP service the post Jason
  • 00:20:50 method and then I will again subscribe
  • 00:20:54 and will just copy that here because I'm
  • 00:20:58 pretty much doing the same so I'm just
  • 00:21:02 subscribing here the data will be bound
  • 00:21:05 to my post data property here that's
  • 00:21:07 important and the rest can stay the same
  • 00:21:10 now let me save this and click test post
  • 00:21:13 request yeah we get back to validation
  • 00:21:15 that we sent an object with two elements
  • 00:21:17 and and so on and they get requests so
  • 00:21:21 that is everything that is two HTTP in
  • 00:21:24 Anglet you to the basics at least
  • 00:21:26 obviously we got more HTTP words and I
  • 00:21:29 can configure request a different way
  • 00:21:31 and we haven't even talked about the
  • 00:21:32 methods or the functionality observables
  • 00:21:37 offer us but that is basically how we
  • 00:21:40 use HTTP in angular 2 how we can reach
  • 00:21:43 out to an REST API endpoint and get or
  • 00:21:47 post data and then get that data and
  • 00:21:51 bind it to a property and use it in our
  • 00:21:54 component or in our service or in both
  • 00:21:56 places whatever we want and yeah that
  • 00:21:59 that's right really it to me it's not
  • 00:22:02 that difficult to be honest I hope you
  • 00:22:04 were a step further on your road to
  • 00:22:07 getting an angular 2 master and statute
  • 00:22:09 for the next videos if you like this
  • 00:22:11 video please leave a like or a comment
  • 00:22:13 please follow me on Facebook and remind
  • 00:22:15 space channel
  • 00:22:16 and hope to see you soon bye