This course has been updated! We now recommend you take the Angular 9 Fundamentals course.

Check out a free preview of the full Build Web Apps with Angular 2 course:
The "Challenge 10" Lesson is part of the full, Build Web Apps with Angular 2 course featured in this preview video. Here's what you'd learn in this lesson:

In this challenge, you will create a method inside the service that uses HTTP to get widgets.json.

Get Unlimited Access Now

Transcript from the "Challenge 10" Lesson

>> [MUSIC]

>> Scott Moss: For this challenge, you're gonna create a method inside the widget service to get widgets. It says widgets.json right there but I'll give you the URL where it is, it's actually the same URL for the items except for it's the widgets resource. So it's just 3001/widgets, that's the URL.

[00:00:21] And I'll put it up in a minute. And then kind of like what we just did, the method that you made, I need you to return it from that service and subscribe to it in the widget's component, or the widget's list component, or whatever component you're gonna be in.

[00:00:33] Subscribe to that, and get access to the data. And then if you want to, you don't have to, if you want to change it to a promise and check it out that, change it to a promise, make sure it's still working and go that way. And then for bonus because the Json serves does accept posts, create another method to post a new widget to the server.

[00:00:54] It's the same URL just a post for it. So before you get started what you have to do, if you go into your Repo and you go to db.json, just make sure, underneath this item's array or above it, just make a new entry called widgets and set it equal to an array.

>> Scott Moss: And you might have to restart your Webpack if that happens, to reinitialize the server. It actually might work without it. It might create the widgets if you try to post it but just to be safe, I would do this. So again, just add a new entry on this JSON file called widgets, set equal to empty array.

[00:01:38] The JSON server command line tool reads this file like a database. It's a live file that it writes to. If you issue a delete request to this JSON server, it will delete it from file. If it's a post request to the JSON server, it'll write to this file.

[00:01:51] So it's a live file. And once you have all that, like I said, you might have to restart and the URL is just port 3000/widgets. Just like it is for items, port 3001 I'm sorry. 3001. No, wait, it's 3000. Okay. Right, that's 3000?
>> Speaker 2: Yeah, 3000 for the database.

>> Scott Moss: [CROSSTALK] Yeah, so it's 3000 for the database, 3000 for the app. Sorry about that. Yeah, the URL's gonna be the 3000, or whatever port you're configured to be on, by default it's 3000 for the JSON server. The same URL that's in the item services. If you look in item services, it's that URL, but with the widgets.

[00:02:35] It's the resource name, it's whatever resource name you put in that db.json file that we just put. Because we put widgets, the JSON server exposed this as a resource, as a URL for us. Whatever you put in here, if you put cookies, you can now go to /cookies.