如何在angular-2中进行服务器api调用？

Question

I am new to angular2. i want to make server call to get the data from my server. actually i know how to do this in angular1.x , but I am not able to find out how it can be done in angular-2.

This is how I tried in angular1.x

controller:

var pageId = 0;
$scope.getProducts = function () {
    NewProducts.query({
      pageId: pageId,
      activeFilter: 1
    }).$promise.then(function (res) {
      $scope.products= res;
      pageId++;
    }).catch(function (err) {
      console.log('Error happened : ' + JSON.stringify(err));
    });
  };

service:

.constant('API_HOST', 'http://www.myproductssite.com')
.factory('NewProducts', function ($resource, API_HOST) {
  return $resource(API_HOST + '/prods/page/:pageId/:activeFilter', {
    pageId: '@pageId',
    activeFilter: '@activeFilter'
  }, {
    'query': {
      method: 'GET',
      isArray: true,
      timeout: 20000
    }
  } );
})

html

<div ng-init="getProducts();">
Res->{{products | json}}
</div>

this is how i build an angular1.x app to make server call using $resource Get method. i have no idea how to do this in angular-2. is there any ways to do this in angular-2. please help me on how to do this? THANKS.

Answer 1

AJAX calls in Angular are done using the Http service, like so:

import { Http } from '@angular/http';

// ... code ...
let memberInfo;
http.get(url)
    .map(x => x.json()).
    subscribe(result => this.memberInfo = result);

This performs an async HTTP GET call that puts the return value in the memberInfo variable.

Answer 2

For best practice create a new file (service). and do as follows.

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

@Injectable()
export class Api{

constructor(private http: Http){}
  request(){
     return this.http.get(baseUrl);
   }
}

Inside your component you do this.

this.service.request().subscribe((res)=>{
  console.log('response',res');
},(err)=>{
 console.log(err)
}
)

reference link

Answer 3

In angular2, you can use Http service, like:

// inject get instance of Http service.
http.post(API_HOST + '/prods/page/' + pageId + '/' + activeFilter', {
  'query': {
    method: 'GET',
    isArray: true,
    timeout: 20000
  }
} ).subscribe((result) => {
   // handle result
})

Answer 4

I personally prefer to make a common call service. From any component, I will just call this getCall method by passing the params.

  public getCall(baseUrl:string, url:string, queryParams ?:any) {
    let _url = baseUrl + url;
    if (queryParams) {
      _url = this.appendQueryParams(_url, queryParams);
    }
    let options = new RequestOptions({
      headers: new Headers();
    });
    return this._http.get(_url, options);
  }



 public appendQueryParams(url:string, queryParams:any) {
     let queryParamString:string = "";
     _.forEach(queryParams, function (value, key) {
        queryParamString += key.trim() + "=" + value + "&";
     });
     queryParamString = queryParamString.slice(0, -1);
     queryParamString = encodeURI(queryParamString);
     url += "?" + queryParamString;
     return url;
}

In Service:

  getProducts(queryParams){
    return this._callService.getCall("http://www.myproductssite.com",'/prods/page/'+pageId+'/'+activeFilter, queryParams).map(res => res.json());
  }