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

description
Want much more Angular? Have a look at my bestselling course to learn the latest version of Angular: https://acad.link/angular Angular 2 Tutorial on how to use the Angular 2 HTTP Service to connect to a RESTful service and send GET and POST requests, as well as how to handle responses. You can follow me on Twitter (@maxedapps), Facebook (https://www.facebook.com/academindchannel/) or visit our Website (https://www.academind.com). Source code for complete series available here: https://github.com/mschwarzmueller/angular-2-introduction.git Source code for individual videos (repo created and maintained by a viewer): https://github.com/bapatel1/Learning-Angular-2.0 Get into developing Angular 2 applications instantly! Please share, like and comment if you like the video! This course will teach you all the fundamentals of the current Angular 2 Beta and will prepare you to write actual Angular 2 web applications. We will cover Directives, Components, Template Syntax, Two-Way-Data Binding, Services, HTTP (GET and POST) and much more! In order to get the most out of this course be sure to use my prepared GitHub Repository as a Boilerplate: https://github.com/mschwarzmueller/angular-2-beta-boilerplate.git Have fun and please leave a like or comment if you like (or dislike) this video or this series!

detail
{'title': 'Angular 2 Tutorial (2016) - HTTP (GET and POST to RESTful Service)', 'heatmap': [{'end': 1240.237, 'start': 1223.944, 'weight': 1}, {'end': 1280.807, 'start': 1264.611, 'weight': 0.743}], 'summary': "This tutorial delves into the significance of http in web development, demonstrating the use of chasontest.com's rest api for sending get and post requests, implementing angular service methods, using observables for http requests in angular 2, and subscribing to data and error notifications in javascript.", 'chapters': [{'end': 57.75, 'segs': [{'end': 35.649, 'src': 'embed', 'start': 3.507, 'weight': 0, 'content': [{'end': 3.928, 'text': 'Hey everyone!', 'start': 3.507, 'duration': 0.421}, {'end': 15.355, 'text': "So far into this course, we've covered a lot of topics, and one great topic has been missing as of now, and that is how we can connect to the web,", 'start': 4.811, 'duration': 10.544}, {'end': 21.919, 'text': 'how to use HTTP to get or manipulate data, for example, through a RESTful service.', 'start': 15.355, 'duration': 6.564}, {'end': 32.506, 'text': 'Now we got our service set up in this project or in this course because we were already using services, but we were fetching our data from.', 'start': 22.86, 'duration': 9.646}, {'end': 35.649, 'text': 'well, in the end, just a constant or a variable we defined right?', 'start': 32.506, 'duration': 3.143}], 'summary': 'The course has covered various topics, but has not covered how to connect to the web using http and restful services.', 'duration': 32.142, 'max_score': 3.507, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/L7xPwhwbcHE/pics/L7xPwhwbcHE3507.jpg'}], 'start': 3.507, 'title': 'Understanding http in web development', 'summary': 'Introduces the significance of http in web development and emphasizes the transition to accessing and manipulating data through a restful service, providing insights for real application development.', 'chapters': [{'end': 57.75, 'start': 3.507, 'title': 'Introduction to http in web development', 'summary': 'Discusses the importance of understanding http in web development and emphasizes the need to access and manipulate data, especially through a restful service, highlighting the transition from fetching data as a constant or variable to using http in real applications.', 'duration': 54.243, 'highlights': ['The importance of understanding HTTP in web development and the need to access and manipulate data, especially through a RESTful service, is emphasized.', 'The transition from fetching data as a constant or variable to using HTTP in real applications is highlighted.']}], 'duration': 54.243, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/L7xPwhwbcHE/pics/L7xPwhwbcHE3507.jpg', 'highlights': ['The importance of understanding HTTP in web development and the need to access and manipulate data, especially through a RESTful service, is emphasized.', 'The transition from fetching data as a constant or variable to using HTTP in real applications is highlighted.']}, {'end': 422.353, 'segs': [{'end': 88.514, 'src': 'embed', 'start': 57.75, 'weight': 0, 'content': [{'end': 68.867, 'text': "I'll use chasontest.com, where I basically have the chance to use their REST API to send GET and POST requests and get something back,", 'start': 57.75, 'duration': 11.117}, {'end': 71.031, 'text': 'so that I can just demonstrate how we do that.', 'start': 68.867, 'duration': 2.164}, {'end': 82.651, 'text': 'I also listened to some comments which complained that it was a little bit hard to read from time to time because of my font size.', 'start': 74.506, 'duration': 8.145}, {'end': 88.514, 'text': 'So I will try to take care about that and increase my font size appropriately.', 'start': 82.831, 'duration': 5.683}], 'summary': "Using chasontest.com's rest api to send get and post requests for demonstration. increasing font size for readability.", 'duration': 30.764, 'max_score': 57.75, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/L7xPwhwbcHE/pics/L7xPwhwbcHE57750.jpg'}, {'end': 256.459, 'src': 'embed', 'start': 230.849, 'weight': 2, 'content': [{'end': 237.094, 'text': 'And for that to work, we also have to add it as a directive in our directives area here.', 'start': 230.849, 'duration': 6.245}, {'end': 241.558, 'text': 'So the HTTP test component, save it.', 'start': 237.435, 'duration': 4.123}, {'end': 245.573, 'text': 'And now we get our component here.', 'start': 243.311, 'duration': 2.262}, {'end': 247.414, 'text': 'Nothing happening as of now, obviously.', 'start': 245.733, 'duration': 1.681}, {'end': 249.395, 'text': 'But that will change soon.', 'start': 248.034, 'duration': 1.361}, {'end': 253.158, 'text': 'Now I will define a new or create a new service.', 'start': 250.176, 'duration': 2.982}, {'end': 256.459, 'text': 'The service which will do that HTTP access.', 'start': 253.658, 'duration': 2.801}], 'summary': 'Adding directive for http test, creating new service for http access.', 'duration': 25.61, 'max_score': 230.849, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/L7xPwhwbcHE/pics/L7xPwhwbcHE230849.jpg'}, {'end': 381.045, 'src': 'embed', 'start': 313.066, 'weight': 1, 'content': [{'end': 317.528, 'text': "Good, so now that our service isn't doing that much as of now, let's change that.", 'start': 313.066, 'duration': 4.462}, {'end': 324.272, 'text': 'I will need my HTTP service to access the web.', 'start': 318.969, 'duration': 5.303}, {'end': 330.935, 'text': 'HTTP is a service already included in the Angular 2 package, so we can use that.', 'start': 324.752, 'duration': 6.183}, {'end': 337.161, 'text': 'But to be able to use that, there is one very important thing to do.', 'start': 333.519, 'duration': 3.642}, {'end': 347.905, 'text': 'But to be able to use the HTTP service, at least currently, as of beta 0, there is one very important thing to do.', 'start': 337.901, 'duration': 10.004}, {'end': 349.686, 'text': 'Otherwise, nothing will work there.', 'start': 348.005, 'duration': 1.681}, {'end': 356.749, 'text': 'In my index HTML, I have to add another import up here.', 'start': 351.487, 'duration': 5.262}, {'end': 360.451, 'text': "I'll add it right below the router here.", 'start': 357.97, 'duration': 2.481}, {'end': 367.557, 'text': 'And the import I need is the HTTP package.', 'start': 361.613, 'duration': 5.944}, {'end': 370.558, 'text': 'And you can get it from that URL here.', 'start': 368.457, 'duration': 2.101}, {'end': 375.021, 'text': 'Be sure to write that down or look that up.', 'start': 372.76, 'duration': 2.261}, {'end': 376.322, 'text': 'You can also Google for it.', 'start': 375.241, 'duration': 1.081}, {'end': 378.703, 'text': 'And this will import it.', 'start': 377.382, 'duration': 1.321}, {'end': 381.045, 'text': "Otherwise, we can't use HTTP.", 'start': 378.983, 'duration': 2.062}], 'summary': 'To enable http service in angular 2, import the http package from a specific url in the index html.', 'duration': 67.979, 'max_score': 313.066, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/L7xPwhwbcHE/pics/L7xPwhwbcHE313066.jpg'}], 'start': 57.75, 'title': 'Using chasontest rest api', 'summary': "Covers demonstrating the use of chasontest.com's rest api to send get and post requests, increasing font size, implementing an additional component for http requests, creating a new service for http access, and importing the http package in index html.", 'chapters': [{'end': 422.353, 'start': 57.75, 'title': 'Using chasontest rest api and implementing http requests', 'summary': "Covers demonstrating the use of chasontest.com's rest api to send get and post requests, increasing font size for better readability, implementing an additional component for http requests, creating a new service for http access, and importing the http package in index html.", 'duration': 364.603, 'highlights': ["Demonstrating the use of chasontest.com's REST API to send GET and POST requests The speaker demonstrates using chasontest.com's REST API to send GET and POST requests, providing practical application and usage examples.", 'Creating a new service for HTTP access The speaker emphasizes the creation of a new service for HTTP access, highlighting the standard and default way of managing data manipulation in Angular 2.', 'Increasing font size for better readability The speaker acknowledges the feedback about font size and commits to increasing it for better readability, demonstrating attentiveness to viewer feedback and improving user experience.', 'Importing the HTTP package in index HTML The speaker emphasizes the importance of importing the HTTP package in the index HTML to enable the use of the HTTP service, providing a necessary step for functionality.', 'Implementing an additional component for HTTP requests The speaker plans to implement an additional component for handling HTTP requests, aiming to provide a learning opportunity and exploring future integration into the contacts application.']}], 'duration': 364.603, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/L7xPwhwbcHE/pics/L7xPwhwbcHE57750.jpg', 'highlights': ["Demonstrating the use of chasontest.com's REST API to send GET and POST requests", 'Creating a new service for HTTP access', 'Implementing an additional component for HTTP requests', 'Importing the HTTP package in index HTML', 'Increasing font size for better readability']}, {'end': 574.731, 'segs': [{'end': 485.628, 'src': 'embed', 'start': 422.914, 'weight': 0, 'content': [{'end': 425.702, 'text': "It's importing it from Angular 2 slash http.", 'start': 422.914, 'duration': 2.788}, {'end': 429.975, 'text': 'Now I will have two methods in the service which I want to be able to use.', 'start': 426.593, 'duration': 3.382}, {'end': 438.421, 'text': "I'll have the getCurrentTime method because that is one of the things we can do here.", 'start': 430.436, 'duration': 7.985}, {'end': 447.747, 'text': 'Get this date and time API endpoint, which we can call, where we basically have to call date.jsonTest.com,', 'start': 439.041, 'duration': 8.706}, {'end': 453.051, 'text': "and we'll get back a JSON with the current time and date.", 'start': 447.747, 'duration': 5.304}, {'end': 456.253, 'text': "So that will be the get route we'll be using.", 'start': 453.891, 'duration': 2.362}, {'end': 459.983, 'text': 'and I want to be able to post data.', 'start': 457.583, 'duration': 2.4}, {'end': 472.386, 'text': "therefore, I'm using that validate endpoint here, where I can send a JavaScript object, a JSON element,", 'start': 459.983, 'duration': 12.403}, {'end': 477.367, 'text': "and it will give me back if it's a valid object, so to say, or what it is.", 'start': 472.386, 'duration': 4.981}, {'end': 485.628, 'text': 'Just like here an example, just a little JSON element it will give me back, which says something about the JSON I sent there.', 'start': 477.747, 'duration': 7.881}], 'summary': 'Service has getcurrenttime method to call date.jsontest.com for current date and time, and validate endpoint for posting and validating json objects.', 'duration': 62.714, 'max_score': 422.914, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/L7xPwhwbcHE/pics/L7xPwhwbcHE422914.jpg'}, {'end': 574.731, 'src': 'embed', 'start': 542.713, 'weight': 2, 'content': [{'end': 554.843, 'text': 'I do this by, or I will return it to my component, which called by calling the get method on this HTTP service we injected.', 'start': 542.713, 'duration': 12.13}, {'end': 562.284, 'text': 'By the way, all these methods this HTTP service has are very intuitive.', 'start': 556.36, 'duration': 5.924}, {'end': 564.365, 'text': "You've got delete, get, head, patch, post.", 'start': 562.324, 'duration': 2.041}, {'end': 566.946, 'text': 'So yeah, all your HTTP verbs here.', 'start': 564.385, 'duration': 2.561}, {'end': 569.408, 'text': 'In this case, as I said, get.', 'start': 568.087, 'duration': 1.321}, {'end': 572.71, 'text': 'And we will get it from this endpoint here.', 'start': 570.208, 'duration': 2.502}, {'end': 574.731, 'text': 'So let me just copy that.', 'start': 573.45, 'duration': 1.281}], 'summary': 'Demonstration of using http service with various methods for handling http verbs.', 'duration': 32.018, 'max_score': 542.713, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/L7xPwhwbcHE/pics/L7xPwhwbcHE542713.jpg'}], 'start': 422.914, 'title': 'Angular service methods', 'summary': 'Describes the implementation of getcurrenttime and validate service methods in angular 2 for retrieving date and time api endpoint and posting/validating json data.', 'chapters': [{'end': 574.731, 'start': 422.914, 'title': 'Angular service methods', 'summary': 'Describes the implementation of two service methods in angular 2, the getcurrenttime method for retrieving date and time api endpoint and the validate endpoint for posting and validating json data.', 'duration': 151.817, 'highlights': ['Implementing getCurrentTime method for retrieving date and time API endpoint The chapter discusses the implementation of the getCurrentTime method for retrieving the date and time API endpoint, demonstrating the usage of a GET request to fetch the current time and date in JSON format.', 'Implementing validate endpoint for posting and validating JSON data The chapter explains the implementation of the validate endpoint for posting a JavaScript object as JSON and receiving a response indicating the validity of the object, providing insights into the usage of a POST request to validate JSON data.', 'Usage of HTTP service methods in Angular 2 The chapter mentions the intuitive nature of the methods provided by the HTTP service in Angular 2, including the availability of various HTTP verbs such as delete, get, head, patch, and post.']}], 'duration': 151.817, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/L7xPwhwbcHE/pics/L7xPwhwbcHE422914.jpg', 'highlights': ['Implementing validate endpoint for posting and validating JSON data The chapter explains the implementation of the validate endpoint for posting a JavaScript object as JSON and receiving a response indicating the validity of the object, providing insights into the usage of a POST request to validate JSON data.', 'Implementing getCurrentTime method for retrieving date and time API endpoint The chapter discusses the implementation of the getCurrentTime method for retrieving the date and time API endpoint, demonstrating the usage of a GET request to fetch the current time and date in JSON format.', 'Usage of HTTP service methods in Angular 2 The chapter mentions the intuitive nature of the methods provided by the HTTP service in Angular 2, including the availability of various HTTP verbs such as delete, get, head, patch, and post.']}, {'end': 817.129, 'segs': [{'end': 611.282, 'src': 'embed', 'start': 577.453, 'weight': 0, 'content': [{'end': 583.096, 'text': 'And HTTP returns an observable.', 'start': 577.453, 'duration': 5.643}, {'end': 598.459, 'text': 'Observables are something Angular 2 uses instead of promises, as it did in Angular 1, to get something, in this case, from an HTTP request,', 'start': 584.528, 'duration': 13.931}, {'end': 605.461, 'text': 'and then we can subscribe Every component which wants which gets our observable.', 'start': 598.459, 'duration': 7.002}, {'end': 611.282, 'text': "basically, everything which gets this observable can subscribe to, let's say,", 'start': 605.461, 'duration': 5.821}], 'summary': 'Angular 2 uses observables instead of promises for http requests.', 'duration': 33.829, 'max_score': 577.453, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/L7xPwhwbcHE/pics/L7xPwhwbcHE577453.jpg'}, {'end': 698.561, 'src': 'embed', 'start': 660.022, 'weight': 1, 'content': [{'end': 669.792, 'text': 'And this allows me to map the response we get back to a variable or to transform the response, so to say.', 'start': 660.022, 'duration': 9.77}, {'end': 675.358, 'text': 'In this case, I know I get back a JSON formatted text.', 'start': 670.333, 'duration': 5.025}, {'end': 684.471, 'text': 'So I will map this, or I will extract it, so to say by using a fat arrow function here,', 'start': 676.445, 'duration': 8.026}, {'end': 698.561, 'text': 'where I pass the response in and then I call the JSON method on that passed in value or on this passed in object here.', 'start': 684.471, 'duration': 14.09}], 'summary': 'Transform response to json using fat arrow function.', 'duration': 38.539, 'max_score': 660.022, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/L7xPwhwbcHE/pics/L7xPwhwbcHE660022.jpg'}], 'start': 577.453, 'title': 'Angular 2 http and observables', 'summary': "Covers how angular 2 uses observables for http requests, allowing multiple components to subscribe to events, mapping json responses using fat arrow function, and using angular's http service to make a get request.", 'chapters': [{'end': 658.7, 'start': 577.453, 'title': 'Http and observables in angular 2', 'summary': 'Explains how angular 2 uses observables instead of promises for http requests, allowing multiple components to subscribe to all events fired by the observable, and that observables observe changes in the state of the object.', 'duration': 81.247, 'highlights': ['Observables in Angular 2 are used instead of promises for HTTP requests, allowing multiple components to subscribe to all events fired by the observable.', 'Observables observe changes in the state of the object, offering a more complex functionality than what is covered in the video.', 'The video focuses on the very basics of HTTP and observables in Angular 2, with potential for a future video diving deeper into observables.']}, {'end': 724.613, 'start': 660.022, 'title': 'Mapping json response', 'summary': 'Explains how to map a json response to a variable using a fat arrow function, allowing for the extraction and transformation of the data, ensuring proper data display and understanding the format of the data.', 'duration': 64.591, 'highlights': ['Using a fat arrow function to map the JSON response allows for the extraction and transformation of the data, ensuring proper data display and understanding the format of the data.', 'Subscribing to the observable enables the actual display of the data.']}, {'end': 817.129, 'start': 724.613, 'title': 'Angular http service tutorial', 'summary': "Covers how to use angular's http service to make a get request, including adding a provider, injecting it into a component, and using the subscribe method for handling observable changes.", 'duration': 92.516, 'highlights': ["Using Angular's HTTP service, we can make a GET request to retrieve data from an API.", "Adding a provider, such as the HTTP test service, and injecting it into the component's constructor allows us to use the HTTP service property.", 'The subscribe method is essential for handling observable changes, allowing us to react to any data emitted by the observable.']}], 'duration': 239.676, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/L7xPwhwbcHE/pics/L7xPwhwbcHE577453.jpg', 'highlights': ['Observables in Angular 2 are used instead of promises for HTTP requests, allowing multiple components to subscribe to all events fired by the observable.', 'Using a fat arrow function to map the JSON response allows for the extraction and transformation of the data, ensuring proper data display and understanding the format of the data.', "Using Angular's HTTP service, we can make a GET request to retrieve data from an API."]}, {'end': 948.065, 'segs': [{'end': 915.032, 'src': 'embed', 'start': 817.129, 'weight': 0, 'content': [{'end': 824.876, 'text': 'i want to be part of it and be able to to listen to, in this case, the data we get sent back or if we get an error back.', 'start': 817.129, 'duration': 7.747}, {'end': 829.76, 'text': 'so i want to receive that notification, if you want to say it that way.', 'start': 824.876, 'duration': 4.884}, {'end': 837.971, 'text': "So I'll subscribe to it and now I can enter three parameters or three arguments to this function.", 'start': 831.109, 'duration': 6.862}, {'end': 846.593, 'text': 'The first one is if I get back data, what will I do with this? So the success part of our request.', 'start': 838.551, 'duration': 8.042}, {'end': 851.875, 'text': 'In this case, I want to set my getData property here.', 'start': 847.794, 'duration': 4.081}, {'end': 854.135, 'text': 'Let me increase it maybe a little bit.', 'start': 852.815, 'duration': 1.32}, {'end': 862.489, 'text': 'I want to set the getData property to that JSON we get back, but as a string.', 'start': 854.535, 'duration': 7.954}, {'end': 868.834, 'text': 'So I will call JSON stringify and then data, which we pass in there.', 'start': 862.549, 'duration': 6.285}, {'end': 873.777, 'text': "If you're not familiar with that syntax, that's the fat error function.", 'start': 870.335, 'duration': 3.442}, {'end': 881.743, 'text': "It was added as of the ES6 specification and it's also available in TypeScript.", 'start': 874.097, 'duration': 7.646}, {'end': 892.29, 'text': 'And basically this is Just a function where we pass in that variable or that argument, and then this is our function body.', 'start': 882.483, 'duration': 9.807}, {'end': 904.641, 'text': 'We also got an error case where we say, okay, if we get an error, What should we do? Well, in this case, I would just send an alert.', 'start': 893.412, 'duration': 11.229}, {'end': 911.488, 'text': 'And the last argument is a complete function, which is execute.', 'start': 905.582, 'duration': 5.906}, {'end': 915.032, 'text': "So we're, as you can see, passing functions in all three arguments.", 'start': 911.508, 'duration': 3.524}], 'summary': 'Subscribe to data notifications, handle success and error cases, and execute functions.', 'duration': 97.903, 'max_score': 817.129, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/L7xPwhwbcHE/pics/L7xPwhwbcHE817129.jpg'}], 'start': 817.129, 'title': 'Handling data and error notifications in javascript', 'summary': 'Provides guidance on subscribing to data and error notifications in javascript, covering setting up functions for success, error, and completion cases for data requests. it includes using json stringify for successful data and sending alerts for errors.', 'chapters': [{'end': 948.065, 'start': 817.129, 'title': 'Handling data and error notifications in javascript', 'summary': 'Discusses how to subscribe to data and error notifications in javascript by setting up functions to handle success, error, and completion cases for data requests, including using json stringify for successful data and sending an alert for errors.', 'duration': 130.936, 'highlights': ['Setting up functions to handle success, error, and completion cases for data requests', 'Using JSON stringify to convert received JSON data into a string', 'Sending an alert in case of an error']}], 'duration': 130.936, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/L7xPwhwbcHE/pics/L7xPwhwbcHE817129.jpg', 'highlights': ['Setting up functions to handle success, error, and completion cases for data requests', 'Using JSON stringify to convert received JSON data into a string', 'Sending an alert in case of an error']}, {'end': 1339.553, 'segs': [{'end': 1041.273, 'src': 'embed', 'start': 983.344, 'weight': 0, 'content': [{'end': 991.451, 'text': "So somehow, how does Angular 2 know how to create such an HTTP object? The answer is, it doesn't.", 'start': 983.344, 'duration': 8.107}, {'end': 1000.758, 'text': 'We have to go to our bootstrap method here and, as we added our router providers to be able to use all that routing functionality,', 'start': 992.112, 'duration': 8.646}, {'end': 1005.121, 'text': 'we also have to check or provide our HTTP providers.', 'start': 1000.758, 'duration': 4.363}, {'end': 1012.726, 'text': "So that's one thing and there is one other thing which I'm pretty sure isn't clear or which is a bit surprising.", 'start': 1005.581, 'duration': 7.145}, {'end': 1020.813, 'text': "We have to add an import statement to our service because we're using that map function here.", 'start': 1014.144, 'duration': 6.669}, {'end': 1028.924, 'text': 'We have to use this import statement to add that map operator and to be able to use that.', 'start': 1021.694, 'duration': 7.23}, {'end': 1037.611, 'text': "Now I can't tell you if it will stay that way when Angular 2 is in its final form and released.", 'start': 1029.585, 'duration': 8.026}, {'end': 1041.273, 'text': 'Currently we have to do that, otherwise we will get an error.', 'start': 1038.012, 'duration': 3.261}], 'summary': 'In angular 2, http object creation requires bootstrap method setup and import of map function.', 'duration': 57.929, 'max_score': 983.344, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/L7xPwhwbcHE/pics/L7xPwhwbcHE983344.jpg'}, {'end': 1251.725, 'src': 'heatmap', 'start': 1223.944, 'weight': 1, 'content': [{'end': 1229.289, 'text': 'And I will, again, unwrap it as JSON, so to say.', 'start': 1223.944, 'duration': 5.345}, {'end': 1240.237, 'text': 'Now back in my test component, I now will create a click event here, which fires on test post.', 'start': 1230.109, 'duration': 10.128}, {'end': 1244.661, 'text': 'Now let me create that method here.', 'start': 1241.819, 'duration': 2.842}, {'end': 1251.725, 'text': 'And I will call my HTTP service the PostJSON method.', 'start': 1246.622, 'duration': 5.103}], 'summary': 'Creating a click event in a test component to call the postjson method of an http service.', 'duration': 27.781, 'max_score': 1223.944, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/L7xPwhwbcHE/pics/L7xPwhwbcHE1223944.jpg'}, {'end': 1333.792, 'src': 'heatmap', 'start': 1264.611, 'weight': 1, 'content': [{'end': 1267.492, 'text': 'The data will be bound to my postData property here.', 'start': 1264.611, 'duration': 2.881}, {'end': 1268.193, 'text': "That's important.", 'start': 1267.532, 'duration': 0.661}, {'end': 1270.643, 'text': 'and the rest can stay the same.', 'start': 1269.543, 'duration': 1.1}, {'end': 1273.624, 'text': 'Now let me save this and click test post request.', 'start': 1271.084, 'duration': 2.54}, {'end': 1280.807, 'text': 'Yeah, we get back the validation that we sent an object with two elements and so on and the get request.', 'start': 1274.325, 'duration': 6.482}, {'end': 1286.169, 'text': 'So that is everything that is to HTTP in Angular 2, to the basics at least.', 'start': 1281.587, 'duration': 4.582}, {'end': 1291.47, 'text': 'Obviously. we got more HTTP verbs and can configure requests in a different way,', 'start': 1286.309, 'duration': 5.161}, {'end': 1299.054, 'text': "and we haven't even talked about the methods or the functionality observables offer us.", 'start': 1291.47, 'duration': 7.584}, {'end': 1308.873, 'text': 'but that is basically how we use HTTP in Angular 2, how we can reach out to an REST API endpoint and get or post data,', 'start': 1299.054, 'duration': 9.819}, {'end': 1317.369, 'text': 'and then get that data and bind it to a property and use it in our component or in our service, or in both places, whatever we want.', 'start': 1308.873, 'duration': 8.496}, {'end': 1320.33, 'text': "And yeah, that's really it.", 'start': 1318.109, 'duration': 2.221}, {'end': 1323.15, 'text': "To me, it's not that difficult to be honest.", 'start': 1320.91, 'duration': 2.24}, {'end': 1330.611, 'text': "I hope you're a step further on your road to getting an Angular 2 master and stay tuned for the next videos.", 'start': 1323.89, 'duration': 6.721}, {'end': 1333.792, 'text': 'If you like this video, please leave a like or a comment.', 'start': 1331.212, 'duration': 2.58}], 'summary': 'Basic usage of http in angular 2, handling get and post requests, binding data to properties.', 'duration': 69.181, 'max_score': 1264.611, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/L7xPwhwbcHE/pics/L7xPwhwbcHE1264611.jpg'}], 'start': 948.916, 'title': 'Angular 2 http injection and usage', 'summary': 'Explains the process of injecting http in angular 2, including setting providers and importing statements, and covers the usage of http in angular 2, demonstrating how to perform get and post requests, handle response data, and bind it to a property.', 'chapters': [{'end': 1041.273, 'start': 948.916, 'title': 'Angular 2 http injection', 'summary': 'Explains the process of injecting http in angular 2, including setting providers and importing statements, and highlights the necessity of adding an import statement to use the map function to avoid errors.', 'duration': 92.357, 'highlights': ['We have to go to our bootstrap method and provide our HTTP providers, similar to adding router providers, to enable the use of HTTP functionality.', 'We need to add an import statement to our service to use the map function and avoid errors, highlighting the necessity of this action in the current state of Angular 2.']}, {'end': 1339.553, 'start': 1041.755, 'title': 'Using http in angular 2', 'summary': 'Covers the usage of http in angular 2, demonstrating how to perform get and post requests, handle response data, and bind it to a property, providing a basic understanding of http in angular 2.', 'duration': 297.798, 'highlights': ['The chapter covers the usage of HTTP in Angular 2 Demonstrating the usage of HTTP in Angular 2, focusing on GET and POST requests.', 'Performing GET and POST requests The demonstration includes performing both GET and POST requests in Angular 2.', 'Binding response data to a property Explaining how to bind response data to a property for further use in components or services.']}], 'duration': 390.637, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/L7xPwhwbcHE/pics/L7xPwhwbcHE948916.jpg', 'highlights': ['We have to go to our bootstrap method and provide our HTTP providers, similar to adding router providers, to enable the use of HTTP functionality.', 'The chapter covers the usage of HTTP in Angular 2 Demonstrating the usage of HTTP in Angular 2, focusing on GET and POST requests.', 'Binding response data to a property Explaining how to bind response data to a property for further use in components or services.', 'We need to add an import statement to our service to use the map function and avoid errors, highlighting the necessity of this action in the current state of Angular 2.', 'Performing GET and POST requests The demonstration includes performing both GET and POST requests in Angular 2.']}], 'highlights': ['The importance of understanding HTTP in web development and the need to access and manipulate data, especially through a RESTful service, is emphasized.', 'The transition from fetching data as a constant or variable to using HTTP in real applications is highlighted.', 'Observables in Angular 2 are used instead of promises for HTTP requests, allowing multiple components to subscribe to all events fired by the observable.', 'Using a fat arrow function to map the JSON response allows for the extraction and transformation of the data, ensuring proper data display and understanding the format of the data.', 'The chapter covers the usage of HTTP in Angular 2 Demonstrating the usage of HTTP in Angular 2, focusing on GET and POST requests.']}