How to use Web Service in the Angular 2 Application?

How to use Web Service in the Angular Application?

Getting Web Service Data in the repository.ts File in the ClientApp/app/models Folder

import { Product } from "./product.model";

import { Injectable } from "@angular/core";

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

@Injectable()

export class Repository {

constructor(private http: Http) {

this.getProduct(1);

}

getProduct(id: number) {

this.http.get("/api/products/" + id)

.subscribe(response => this.product = response.json());

}

product: Product;

}

Understanding the Http Class

Support for making HTTP requests in Angular applications is provided by the Http class, which is defined in the @angular/http module. The new constructor for the Repository class declares a dependency on the

Http class like this:

...

constructor(private http: Http) {}

...

Angular will provide an Http object as the constructor argument when a new Repository object is created, which will be assigned to a private instance variable called http. The Http class provides methods for making HTTP requests, including the get method, which sends an HTTP GET request and which the

getProduct method uses, like this:

...

getProduct(id: number) {

this.http.get("/api/products/" + id)

.subscribe(response => this.product = response.json());

}

...

The get method accepts a URL as its argument. The URL specified in the listing is a relative URL, which will be requested from the same location that the application was loaded from. This means the request will be sent to http://localhost:5000/api/products/1, which is the same URL used to test the web service.

What is Observables?

The result of the Http.get method is an Observable<Response> object, which is an example of an observable. Observables are part of a library called Reactive Extensions, produced by Microsoft, which is used by Angular to connect different parts of the application. For the most part, you don’t work directly with observables in an Angular application because they are used behind the scenes, but one exception is when you need to introduce data into the application, such as from a web service.

An observable represents an item of work that will be performed asynchronously and produce a result at some point in the future, loosely equivalent to a .NET Task. The Observable<Response> result returned by the Http.get method, for example, represents an asynchronous activity that will produce a Response object when it is complete. The Response class is defined in the @angular/http module and is used by Angular to represent a response from an HTTP server.

The subscribe method is used to invoke a function when the work represented by the Observable has completed. The function receives the Observable result, which is a Response object in this case, and I use the Response.json method to parse the JSON data sent by the web service and assign it to the product property, like this:

...

getProduct(id: number) {

this.http.get("/api/products/" + id)

.subscribe(response => this.product = response.json());

}

...

The overall effect is that when a new instance of the Repository class is created, the constructor calls the getProduct method, which sends an HTTP request to the web service and uses the JSON data received in response to set the product property, which can be accessed by the rest of the application.

What is @Injectable Decorator?

You must apply the @Injectable decorator if you are defining a class that will be instantiated using the Angular dependency injection feature and that class’s constructor has its own dependencies. There is a dependency on an Http object, the @Injector decorator must be applied.

...

@Injectable()

export class Repository {

...

(Visited 2 times, 1 visits today)

Leave a Reply

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