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 29 times, 1 visits today)

Leave a Reply

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