TypeScript @angular/http Http Examples

Programming Language: TypeScript

Namespace/Package Name: @angular/http

Class/Type: Http

Examples at hotexamples.com: 30

The typescript @angular.http Http is a package library that provides a way to communicate with a server using HTTP requests. It allows a developer to make GET, POST, PUT, DELETE requests and handle responses.

Example 1: Making a GET request using Http:

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

export class MyComponent {
  constructor(private http: Http) {}

  fetchData(): Observable {
    const url = 'https://jsonplaceholder.typicode.com/users';
    return this.http.get(url).map(res => res.json());
  }
}

This example shows how to make a GET request to the JSONPlaceholder API to fetch user data. The Http service is injected into the constructor of the component and then used to make the request. The response is then converted to a JSON object using the map operator from the RxJS library.

Example 2: Making a POST request using Http:

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

export class MyComponent {
  constructor(private http: Http) {}

  saveData() {
    const url = 'https://jsonplaceholder.typicode.com/users';
    const body = { name: 'John Doe', email: 'johndoe@example.com' };
    const headers = new Headers({ 'Content-Type': 'application/json' });
    return this.http.post(url, JSON.stringify(body), { headers })
      .map(res => res.json());
  }
}

This example shows how to make a POST request to the JSONPlaceholder API to create a new user. The Http service is injected into the constructor of the component and then used to make the request. The body of the request is a JSON object, which is converted to a string using the `JSON.stringify()` method. The HttpHeaders class is used to set the Content-Type header to application/json. The response is then converted to a JSON object using the map operator from the RxJS library.

TypeScript Http - 30 examples found. These are the top rated real world TypeScript examples of @angular/http.Http 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: data.service.ts Project: Ir1sh/gcDashboardsFrontEnd

 getResults(collegeId) {
   return this.http.get('http://gcDashboardService:9000/collegeinfo/' + collegeId).map(res => res.json());
 }

Example #2

Show file

File: teachers.service_20190108153030.ts Project: nauman555/schoolapp

  getSingleTeacherF(id){
    return this.http.get('http://localhost:3000/get-teacher/'+id)
    .map(res => res.json());

  }

Example #3

Show file

File: get-schedule.ts Project: Derek-Mauldin/railrunnerSchedule

	getSchedule() :  Observable<ScheduleData[]>   {

		return this.http.get('../railrunnerschedule.json').map(this.extractData).catch(this.handleError);

	}

Example #4

Show file

File: conference.service.ts Project: rightincode/speakerregister

 getConferenceById(id: number): Observable<Conference> {
     return this.http.get(this.constants.conferenceApi + '/' + id, this.httpHelperService.getAuthRequestOptionsArg())
         .map(this.extractConferenceData)
         .catch(this.handleConferenceError);
 }

Example #5

Show file

File: name-list.service.ts Project: kamilsherco/stock-exchange-predictor

 /**
  * Returns an Observable for the HTTP GET request for the JSON resource.
  * @return {string[]} The Observable for the HTTP request.
  */
 get(): Observable<string[]> {
   return this.http.get(`${Config.API}/api/name-list/static`)
                   .map((res: Response) => res.json())
                   .catch(this.handleError);
 }

Example #6

Show file

File: contactService.ts Project: hoangphucvu/AngularJS-and-MVC-6-Web-API

 getAll(): void {
     this.http.get(this.configuration.config.rootUrl + "api/persons").subscribe(
         (result: Response) => {
             this.contacts.next(result.json());
         }, this.handleError);
 }

Example #7

Show file

File: book.service.ts Project: PWAckerman/electron-angular2-app-skeleton

	searchBooks(queryTitle: string): Observable<BookModel[]> {
		return this.http.get(`${this.API_PATH}?q=${queryTitle}`)
			.map(res => res.json().items);
	}

Example #8

Show file

File: group.service.ts Project: SocialMovieNetwork/SMP-Final

 //Liefert alle Gruppen in denen der User Mitglied ist
 getGroupsOfUser(userId:string){
   return this.http.get(Path[0]+"/getgroupsofuser?uid=" +userId)
   .map(res => res.json());
 }

Example #9

Show file

File: group.service.ts Project: SocialMovieNetwork/SMP-Final

 //Liefert Gruppe mit spezieller Id
 getSpecificGroup(groupId:string) {
   return this.http.get(Path[0]+"/getspecificgroup?gid=" +groupId)
   .map(res => res.json());
 }

Example #10

Show file

File: baz.states.ts Project: ui-router/quickstart-ng2

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

Show more examples