TypeScript @angular/http Http.get Examples

Programming Language: TypeScript

Namespace/Package Name: @angular/http

Class/Type: Http

Method/Function: get

Examples at hotexamples.com: 30

The @angular/http module provides a way to access external APIs and web services using HTTP requests in an Angular application. It provides functions like get(), post(), put() and delete() for making requests and getting responses from the API.

Here are some code examples using Http get() method to retrieve data from an external API:

1. Using Observable and Subscribe:

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

@Injectable()
export class DataService {

constructor(private http: Http) { }

getData(): Observable {
return this.http.get('https://jsonplaceholder.typicode.com/posts')
.map(response => response.json());
}
}

//calling getData() method in component:

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
selector: 'app-root',
template: `

{{ post.title }}

`,
providers: [ DataService ]
})
export class AppComponent {
posts: any;

constructor(private dataService: DataService) { }

ngOnInit() {
this.dataService.getData().subscribe(posts => {
this.posts = posts;
});
}
}

2. Using Promises:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/toPromise';

@Injectable()
export class DataService {

constructor(private http: Http) { }

getData(): Promise {
return this.http.get('https://jsonplaceholder.typicode.com/posts')
.toPromise()
.then(response => response.json());
}
}

//calling getData() method in component:

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
selector: 'app-root',
template: `

{{ post.title }}

`,
providers: [ DataService ]
})
export class AppComponent {
posts: any;

constructor(private dataService: DataService) { }

ngOnInit() {
this.dataService.getData().then(posts => {
this.posts = posts;
});
}
}

Package library: @angular/http is a native module in Angular framework, we don't need to install any external package for it.

TypeScript Http.get - 30 examples found. These are the top rated real world TypeScript examples of @angular/http.Http.get extracted from open source projects. You can rate examples to help us improve the quality of examples.

Frequently Used Methods

Show Hide

delete(30)

get(30)

patch(30)

post(30)

put(30)

request(30)

head(16)

method(10)

options(3)

d(1)

Example #1

Show file

File: vnclass-service.service.ts Project: nguyenquan263/SMS_System_Final

 getVNClassAvailable(studentCode:string, year: string, semester: string) {
   return this.http.get(this.connectionLink.getConnection()+'/getVNclassAvailableREST/'+studentCode+'&'+year+'&'+semester,this.options)
   .toPromise()
   .then(res =>res.json())
   .then(resJson => resJson);
 }

Example #2

Show file

File: promotion.service.ts Project: sandy100/Coursera

 getFeaturedPromotion(): Observable<Promotion> { 
     return this.http.get(baseURL + 'promotions?featured=true') 
     .map(res => { return this.processHTTPMsgService.extractData (res)[0]; }) 
     .catch(error => { return this.processHTTPMsgService .handleError(error); }); 
 }

Example #3

Show file

File: nanadal.ts Project: templth/mockbackend-test

	getItems() {
		return this.http.get('http://localhost/service/126').map(res => res.json());
	}

Example #4

Show file

File: pending.transaction.service.ts Project: candyYMMA/skycoin

 getPendingTransactions(): Observable<PendingTxn[]> {
   return this._http
   .get('/pendingTxs', {headers: this.getHeaders()})
   .map((res:Response) => res.json())
   .catch((error:any) => Observable.throw(error.json().error || 'Server error'));
 }

Example #5

Show file

File: book-data-handler.service.ts Project: ObsidianCat/time_travel_vacation

 private getData(data_url): Promise<any> {
   return this.http.get(data_url)
     .toPromise()
     .then(this.extractData)
     .catch(this.handleError);
 }

Example #6

Show file

File: product-service.ts Project: AviFix/angular2typescript

 getProductByID(productID: string): Observable<any>{
     return this.http.get(`/products/${productID}`)
         .map(res => res.json());
  }

Example #7

Show file

File: userpermission-data.service.ts Project: PjMitchell/ConfigServer

 public getPermission(): Promise<IUserPermissions> {
     return this.http.get('Manager/Api/UserPermissions')
         .toPromise()
         .then((response) => response.json() as IUserPermissions)
         .catch(this.handleError);
 }

Example #8

Show file

File: user.service.ts Project: int32bit/harbor

 //Get the user list
 getUsers(): Promise<User[]> {
     return this.http.get(userMgmtEndpoint, HTTP_GET_OPTIONS).toPromise()
         .then(response => response.json() as User[])
         .catch(error => this.handleError(error));
 }

Example #9

Show file

File: baz.states.ts Project: jeffmccommas/quickstart-ng2

const bazList = (http: Http) =>
    http.get('/data/bazData.json').map(res => res.json()).toPromise();

Example #10

Show file

File: base-client.service.ts Project: cassilup/angular2workshop

 public get(url:string):Observable<any> {
     let headers = new Headers({ 'Accept': 'application/json' });
     let options = new RequestOptions({ headers: headers });
     return this.http.get(`${this.baseUrl}${url}`, options);
 }

Show more examples