Lesson 300

HTTP

This Lesson’s Focus

• Learn how to get data from an external API

At CoderGirl

• ABC Lesson 300

In your videos project in VS Code

• Delete the JavaScript array of video data from the VideoListComponent
• Use HttpClient to load the video data from https://api.angularbootcamp.com/videos:
  • Add HttpClientModule to the imports array in your AppModule
  • Inject HttpClient into your video list component (pass http: HttpClient as a parameter to the constructor function)
  • Call the get method on the http service to retrieve the video list from the API
  • Call the subscribe method and pass a callback function to assign the data to the videos property on the class
  • You will need to remove the date from the template if you added that (the data from the API doesn’t have a date property)
  • Check that the video list shows up in the browser. Look at the network tab to see that the data is coming from the API

Do On Your Own

• Use ng new to create a new Angular application for your LaunchCode project (refer to Lesson 200) (on the command line)
  • Be sure to give it a descriptive project name (not codergirl-app) and a 2- or 3-character prefix
• Get routing set up (refer to Lesson 105) (in VS Code)
• Get your homepage set up
• Get a “component works!” message on your page

Home