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

4 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’ });

Leave a Reply

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