Modern Web Apps With Angular

3.1 Fetching the Feed List

When I am working on a project, I like to focus on the functionality as opposed to the design. I mean, eventually I do get to the design, but I want things up and running. I want it working, before I even start thinking about layout and things like that. I mean, I might do something like what we've done so far and get the basics down. But like for our feed list. Well in my mind, we need a list of feeds before we can even think about the design of our feed list. And while we could emulate getting feeds. Well, there's no sense in doing that because we need the code and the functionality for fetching our feed list from the server. So, in this lesson we are going to write our service class that is going to interact with our API. To get our feeds so that then we can display those In our feed list component. So, the first thing that we need to do is fire up our server application. And we will use the no-auth script because for right now we don't need any authentication. We just need a service that we can hit to grab information and display them. But then we also need our service class. So let's generate one using the angular CLI, and we'll just call this Feed, and it's going to automatically append the name service to the end of this. So don't do Feed service because you'll end up with Feed service service, which doesn't make a whole lot of sense. And since we're going to be talking about the Feed list component, let's go ahead and generate that as well. And we'll just call that FeedList. All right, so with that out of the way. Let's jump into our code. And let's open up our feed service TypeScript file. Now, of course, this is going to be interacting with the HTTP client because we need to make requests to our server. So we need to import that module. Let's go to App module. Let's import the HttpClientModule in is called HttpClientModule and that can be found inside of @angular/common/http. So we have that module. Let's go ahead and import that to our application so that we have that. And then we can go back to our feed service and we need to go ahead and import, not the module. But we do need to import the client. So let's just copy and paste that code, let's get rid of the term module, and we can have this automatically injected into our service's constructor. So we'll have our http property that's going to be this HttpClient, so that we can use that in whatever method that we need. Like for example, we need a method that's going to fetch our feeds. So let's just call it fetchFeeds and we will return, this http will call the get method and then we will pass in the URL, which in our case is localhost port 3000. So that's the basis. We will be coming back to this to make some changes because well, we're going to be working with two different types of data. We will have a feed and then we will have the feed items as well. So let's go ahead and create those. Inside of our App folder, let's create a new file. Let's just call it feed.ts. And we will have two interfaces. The first will be Feed, the second will be FeedItem, and both of these are going to be very very simple. As far as the feed item is concerned, we'll have a title, we'll have content, and then we will have the URL. All of those are going to be strings. And then for the feed, you'll have an id, which will of course be a number. Then we will have a name, we'll have the url. Which both of those are strings. And then finally we will have the items which will be an array of FeedItem. So there we go, we have our interfaces, so let's go ahead and export them as well so that we can get access to. Whenever we need to, and really we need to do that inside of our feed service, because it's not enough to just fetch this information. We also want the HttpClient to go ahead and grab this data and essentially converted into these types of objects now, yes, they are already going to be those types of objects, but this is TypeScript. So, we're going to be explicit here and say that we are going to be working with these feed objects and we do need to import those. So let's go ahead and do that. Even though we aren't going to be doing anything with FeedItem right now, let's go ahead and bring that in. And so now, the decision needs to be made as to where we are going to fetch our feeds. Are we going to do it at the application level, so that we make it at the application level. And then pass it down to the feed list component, or do we do it at the panel component level, and then of course pass the feeds down to feed list or feed list going to be responsible for doing that? I mean I can think of arguments for and against each of those scenarios. So I really don't know what would be considered the quote unquote correct place to do that because, as I said. All of those are viable, but I think it makes sense for the FeedList component to be responsible. For fetching the feed list so that it can work with its own data. So let's first of all go to our panel container. And let's go ahead and use the feed-list selector here. Now, of course, we don't have the selector because if we look at our TypeScript code file for the feed list component. Selector is app-feed-list. So let's get rid of that prefix. And we are going to inject our feed service. But of course, we do need to import that first. So let's get our FeedService and that is going to be from, we're going to need to go back a directory, there is our feed.service. And this will be injected to our constructor. This will be private feedService, and we might just want to call it service. And that is of course going to be of type FeedService. So that's whenever this is initialized, we can work with our service and Fetch the Feeds. Now, if we hover over fetch feeds, we're going to see that this returns an observable of feed, which is not correct. Well, it it is because that's what we typed, but that should be an array of feeds. And that URL is wrong too. We need to hit the feeds end point, all right, so going back, if we have over fetch feeds, we see that we have an observable of a feed array. Now the HttpClient always returns an observable. And because we have an observable that means that we can subscribe to it to get the data for that observable, this is asynchronous programming. And so that means because we strongly typed our return type here. We can take the data that's coming from the request. And we can go ahead and say that is a feed array, so that then we could create a feeds property. And set that equal to our data. So very easy, very straightforward. Of course, we need to import those interfaces. So let's do that so that we don't have any compilation errors there, and there we go. And we can make sure that this works by changing our callback method here or function rather. And instead of just having a single statement, what we will do. Is we will write to the console our feeds, which will be an array. We of course need to define that. So we want private feeds, which is a Feed array, there we go. So now if we go to the browser, let's open up the console and we should see an array. There it is right there. We have our feed objects and the feed items as well. So that in the next lesson, we can take that information and we can display that inside of our feed list component, which should be pretty simple to do.