Http calls in Angular app

In our previous demo, we have already learn about the basic app creation and routing in angular2. So now we are going to create a demo which will fetch data from server using http calls.

Since we all know that data over content of dynamic sites are stored somewhere in the database. So http calls are used in angular application or any other frontend technology to fetch data from server. So http calls plays a very important role any application.

Here we will continue ahead of the task which we have already discussed in the previous demo. So ahead in this demo we will discuss mainly over http calls part within the app. So we will create a basic app which will show the list of some user on the very first page.

Http Calls

To use the Angular 2 Http module in our components, Http module is import with in the app.

After that, we can just inject it via Dependency Injection in the constructor.

So now I am going the create a service file within app/ folder named user.service.ts.


 import { Injectable } from '@angular/core';
  import {Router} from '@angular/router';
  import {Headers, RequestOptions,Http,Response} from '@angular/http';
  import { Observable } from 'rxjs/Observable';
  import 'rxjs/add/operator/map';
  import 'rxjs/add/operator/catch';
  import 'rxjs/add/operator/toPromise';
  import 'rxjs/Rx';
  @Injectable()
  export class UserService {

    constructor(private http: Http, private _router: Router) {
    }
    /* retreive user list */
    fetchUsers() {
      return this.http.get(`http://localhost:3000/user/user-list`)
        .map((response: Response) =>  {
          return response.json();
        });
    }


  }

Angular 2 introduces new annotation to declare the class as Injectable. You can read in depth from the official site.

In the above file we have imported needed class of angular and then defined a function fetchcUsers(). In which we are calling a restful api to get the user list from the server.Another thing is that we are not using callbacks or promises in the HTTP calls. Instead what we are using is called Observables.

You can learn more about the Observables from the officail sites.

Using HTTP Services in component

so lets move to next file inside component home/home.component.ts


import { Component, OnInit } from '@angular/core';

import { UserService } from '../user.service'
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
  providers: [UserService]
})
export class HomeComponent implements OnInit {
public users;
  constructor(public _userService:UserService) { }

  ngOnInit() {

    this._userService.fetchUsers()
    .subscribe(userList => {
        this.users = userList.result; 
    });      

  }

}

In the above file, At top call the user service and inside class on ngOnInit() call the fetchUsers() method. Similarly we can call multiple service method.

For node server end task, start node server using node server.js from from the root folder.