Using Angular Http Service

The following two tabs change content below.
Prasad Kharkar is a java enthusiast and always keen to explore and learn java technologies. He is SCJP,OCPWCD, OCEJPAD and aspires to be java architect.

Latest posts by Prasad Kharkar (see all)

We are using angular http service in this article. In real world scenario, we communicate with some remote server from which angular apps fetch data. In this article we are going to simulate such scenario. We will continue from our previous article which uses routing.

Using Angular Http Service:

You can get the code directly from https://github.com/theJavaGeek/angular and checkout branch angular-http

First of all, let us install angular-web-in-memory-api package using command.

npm install –save angular-in-memory-web-api

Above command will install angular-in-memory-web-api and save its entry in package.json.

We are going to

  • Modify our BikeService to make Http calls
  • Create a bikes database
  • Modify AppModule to include bikes database and BikeService in our app for using angular http service.

BikeService.ts:

  • constructor (private http: Http) : Injects Http service imported from ‘@angular/http’
  • getBikes():  invokes the “api/bikes” url and converts the response to a Promise. The response data will be a Bike array.
  • getBike(id: Number): does the same job as of getBikes() but for a specifid bike.

 

bike-database.service.ts:

  • InMemoryDbService creates a database from which values can be returned or updated. It is a class from package angular-in-memory-web-api
  • createDb(): This should return an object which holds the arrays. Implementing this method is mandatory.

app.module.ts:

We have to put InMemoryWebApiModule.forRoot(BikesDatabaseService) in imports so that app know from which class database needs to be created. Also we provide BikeService as provider.

Now simply modify our templates

bikes.component.html:

<md-list> and <md-list-item> are angular material component as seen in previous article.

bike-info.component.html:

again, <md-card>, <md-card-header> etc are all angular material components which display a card and its sub components.

We are done using angular http service. Jump to your command prompt and fire up server using npm start or ng serve. and open localhost:4200/bikes. You should be able to see a list of bikes.

I hope this helped you understand using angular http service. In next article we will see a CRUD app.

You can get the code directly from https://github.com/theJavaGeek/angular and checkout branch angular-http

Share Button

9 comments for “Using Angular Http Service

  1. Collin Smith
    August 22, 2017 at 1:43 am

    It might be nice to include the following step as well
    ng generate service bike-database

    In addition, I updated the app.module.ts & bike.service.ts to be BikeDatabaseService rather than BikesDatabaseService.

    • August 22, 2017 at 9:18 am

      the git repository has the necessary files. Am I still missing something? Please let me know if any more corrections need to be made

  2. Lucas
    August 27, 2017 at 1:32 am

    Hello, nice job !

    Why you create headers, but not use ?

    private headers = new Headers({ ‘Content-Type’: ‘application/json’ });

  3. Darryl Pierce
    October 29, 2017 at 11:24 pm

    I’m using your example as a guide, but it doesn’t work for me.

    I’m not using an in-memory HTTP API but instead am trying to connect Angular to a backend RoR server that provides JSON objects. I see the initial request from Angular to the RoR app, and know that it’s returning an array of objects. But the Angular app doesn’t output them, and as such I can’t then view individual elements.

    Any ideas?

    • October 30, 2017 at 1:54 pm

      If you are trying to connect to a server and using angular app as backend, then this link would be definitely useful. http://www.thejavageek.com/2017/06/14/full-stack-application-angular-4-spring-boot/

    • Darryl Pierce
      October 30, 2017 at 7:25 pm

      It seems the problem is directly related to the (in my case) note.component.html; i.e., I didn’t include the Material code since that’s deprecated so I’m just using simple Angular and HTML to output the list of notes as follows:

      {{title}}
      Nearby Notes

      {{ note.message }}

      If I remove the tag and just output simple HTML it renders well. But with the iterator it doesn’t render at all. Any ideas?

      • Darryl Pierce
        October 30, 2017 at 7:56 pm

        Ugh, I found the issue.

        In my service, I had used:

        return this.http.get(this.notesUrl)
        .toPromise()
        .then(response => response.json().data as Note[])
        .catch(this.handleError);

        per the above example code. But the problem is the .data call. Once I removed it and just dealt with the JSON directly then everything began to work.

        Thanks again for the series of tutorials. They’ve been quite useful to me!

        • October 31, 2017 at 9:30 am

          so your app is working now properly? Feel free to share any constructive feedback and I will do my best to improve the articles.

Leave a Reply

Your email address will not be published. Required fields are marked *