AngularJS Architecture: Using $http to load JSON data
Now let's learn how use the $http service to make requests to remote servers. In our case, we will load the data from JSON files and then make them available in our controllers. We will see a few techniques that I frequently use to make working with $http data a lot more convenient.
[00:01] In this lesson, we are going to learn how to use the http service to fetch remote data. The http service is a core AngularJS service that uses the browser's xml, http request object or JSONP to communicate with remote servers.
[00:20] In our case, we are going to use it to load a JSON file that has the categories collection that we've been working with, as well as load a separate JSON file for the bookmarks collection. We are also going to see a few tricks that I've picked up that makes working with the http service and a model a bit more convenient.
[00:45] If we hop into our categories model, the first thing that we need to do is inject the $http service. We can also get rid of the local categories collection. Now, one thing that I like to do when I am working with remote services is to create an endpoint map for the possible endpoints that I would need to call.
[01:12] In this case, it is just a single endpoint. I'm going to create a URLS object and create a property under called fetch that we're going to point towards data/categories.json. Then, we'll replace this return object with an actual call using the http service.
[01:40] The nice thing about the http service is that it has convenience methods baked into it that match restful verbs. In our case, we want to call get. This takes a single argument which is a configuration object that constructs the http call itself. We're just going to pass in the url like so.
[02:10] Let's hop into the controller. We are going to switch this up just a little bit. We're going to call getCategories immediately. Because this returns a promise, we are going to use then to handle that. After we've made the call and the result has come back, then we can do something. This would take one argument, a function that represents the success handler of this call and that takes one argument which is the result of that call.
[02:45] From here, we are going to say categoriesListCtrl.categories = result. There's going to be a problem with this. I will show you in just a moment. Let's go ahead and dump this result and see what it looks like in the browser.
[03:05] Let's refresh the page. You can see in the console that it's an object with data on that object that has the array that we actually want. From here, I can actually go back into my controller. I could say = result.data. This would work. Let's refresh the page.
[03:34] We have categories. The problem with this is that I prefer for my controllers not to know about the implementation details of how my data is being returned from the server. I like to use a trick to extract this data before I actually send it to the controller.
[03:59] What we will do here is create a method called extract that takes the result and it just returns result.data. I'm going to create another method here called cacheCategories, because as it stands now, we're not actually storing the result of categories. It's actually stateless, but I want to actually store a reference to the server result so I can use it a bit later.
[04:38] We will go categories = extract result, return categories. From here, instead of returning just the call itself, we can return a promise that has the result of cacheCategories. Let's refresh the page. You can see that it's still working, but we are now extracting out that data and then storing a reference to categories.
[05:19] Let's go ahead and do this real quick for the bookmarks. Let's inject $http. I'm going to delete the local collection here, create my endpoint map. We'll create the extract method, the cacheBookmarks method, $http.get and fetch, cacheBookmarks.
[05:53] We'll go into our bookmarksCtrl. We'll just shuffle this around a bit. There we go. Let's refresh the page. You can see now, we have categories and bookmarks coming in to our page as it was before but now, we're pulling it from the JSON files.
[07:08] In the next lesson, we will extend this idea by creating promises and manually resolving them, giving us even more control over how we handle the data when it comes back from the server. See you in the next lesson.