We can jump to our app component here, get our people service. We obviously need to import that observable here from the RxJS observable package. For the sake of the simplicity, let's simply use here the object. The assets folder/data/people/notJSON.įinally, we need to return our result here from the HTTP service, which will return an observable. In order to issue a so-called GET request or endpoint, we can use directly the GetExtension method here on our HTTP instance - which we got, so we are on our HTTP client - and then use the URL, which we have seen before. Once we have the instance of the HTTP client, we can, here, create a method in our people class - let's call it fetchPeople - and then directly refer to that new HTTP instance, which we get here in the constructor.

We can get it injected directly into the constructor of our people service here. The HTTP client lives as well in the package. To now use our people service, especially to invoke the HTTP calls or API, the first step is to import the so-called HTTP client. Let's import people service here from our people service file, and reference here, and a provider section. We need to go in our app module again and register that people service data in order that it works. That should rather be delegated to some arbitrary service.įor our purpose, let's create here a people service, and let me paste in here some default implementation of such a people service. As a rule of thumb, our components - in this case, the app component - should never contain the HTTP or logic. We can now start implementing our HTTP calls. As you can see, it returns as the JSON file. The CLI is nice, and shows us that API are the assess data people of JSON. In this setup here, I have used Angular CLI, and as its folder, I have created a data folder which contains a sample JSON structure of people names. Normally, you have an endpoint or some backend API where you can fetch your data. Next, we need to have some data which we can fetch and actually invoke. Also, you need to make sure that in the package JSON, you have imported the Angular common package, which is most often the case. Make sure to import the HTTP client module, and then in the import section, to declare it accordingly. Before, it was simply in the HTTP package of Angular. Starting from Angular version 4.3.1, the new HTTP client, which is called HTTP client module, lives in the namespace. In order to start using the HTTP client in Angular, the first step is to go to the app module and import the proper module.

Angular http client