Published on August 8, 2017 by kudvenkat

angular 2 injectable example
angular 2 http calls
angular 2 http cors
angular 2 http example
angular 2 http observables
angular 2 http request
angular 2 http rest example
angular 2 http simple example
angular 2 http tutorial
angular 2 http typescript
angular observable example
angular http cross origin request
angular cross-origin request blocked
angular 2 cross domain request

Text version of the video


Angular 2 Tutorial playlist

Angular 2 Text articles and slides

All Dot Net and SQL Server Tutorials in English

All Dot Net and SQL Server Tutorials in Arabic

In this video we will discuss
1. How to call ASP.NET Web API service using Angular 2 http service. Though this example demonstrates calling ASP.NET Web API service, we can use this same approach to call any web service built using any server side technology.
2. We will also briefly discuss Observable pattern

In our previous video we have created ASP.NET EmployeeWebAPIService. Here are the steps to call the Web API service using the Angular builtin http service.

Step 1 – Import the angular HTTP module : The first step is to import HttpModule which is present in a separate javascript file – @angular/http. After the HttpModule is imported, include it in the imports array of the NgModule() decorator of our root module “AppModule” which is in “app.module.ts” file. With this change we can now start using the angular built-in http service throught our application to access web services over HTTP.

import { HttpModule } from ‘@angular/http’;

imports: [
declarations: [
bootstrap: [AppComponent]
export class AppModule { }

Step 2 – Modify angular EmployeeService to issue a GET request using the builtin http service :
1. The angular EmployeeService is in employee.service.ts file.

2. Use the EmployeeService class constructor to inject Angular Http service. The injected http service can then be used anywhere in this class to call a web service over http.

3. Since this Angular EmployeeService class has an injected dependency, @Injectable() decorator is required on this class. If there are no injectable dependencies then we may omit the @Injectable() decorator, but angular strongly recomends to use the @Injectable() decorator irrespective of there are injectible dependencies or not for consistency and future proof.

4. Notice in the getEmployees() method, we are using the get() method of the angular http service to issue a get request over http.

5. If you right click on get() method and go to it’s definition you will notice that this method return Observable[Response].

6. Observable[Response] is not that useful to us, so we have set the return type of getEmployees() method to Observable[IEmployee[]]

7. To convert Observable[Response] to Observable[IEmployee[]] we are using the map operator provided by rxjs.

At the moment, we are not handling exceptions. We will discuss how to handle exceptions in our upcoming videos.

What is an Observable
1. Observable is an asynchronous pattern. In the Observable pattern we have an Observable and an Observer. Observer observes the Observable. In many implementations an Observer is also called as a Subscriber.

2. An Observable can have many Observers (also called Subscribers).

3. Observable emits items or notifications over time to which an Observer (also called Subscriber) can subscribe.

4. When a subscriber subscribes to an Observable, the subscriber also specifies a callback function.

5. This subscriber callback function is notified as and when the Observable emits items or notifications.

6. Within this callback function we write code to handle data itmes or notifications received from the Observable.

Step 3 – Subscribe to the Observable returned by angular EmployeeService : EmployeeListComponent needs the employees data returned by the service. So in the ngOnInit() method of “employeeList.component.ts” use the subscribe method as shown below.

ngOnInit() {
.subscribe(employeesData =] this.employees = employeesData);

Leave a Reply

33 Comments on "Angular 2 http service tutorial"

Notify of

sangram kesari Dash
sangram kesari Dash
8 months 20 days ago

Awesome explanation…

Hai Nguyen
Hai Nguyen
8 months 21 days ago

excellent tutorial. Thanks

Tassawar Younas
Tassawar Younas
9 months 5 days ago

Yaar Http service Video ma aadhi files ka pata hi nahi lag raha 6 7 files haan sirf 3 4 btaen haan

rajesh battula
rajesh battula
9 months 10 days ago

Hi sir !!!. This videos are very useful to any new learner. Can you please upload video for CRUD operations in html table with edit button taking us to form with values already binded to form elements?

Mansoor Sheikh
Mansoor Sheikh
9 months 14 days ago

With I'm getting this error "Failed to load resource: the server responded with a status of 405 (Method Not Allowed)"Can anybody help to solve it?btw I've tried Cors package but it didn't work.

rahul nikhare
rahul nikhare
8 months 15 days ago

it seems like you didn't config your request body to JSON type or the type which your server accept

prabhu kadode
prabhu kadode
9 months 16 days ago

But http service in angular 2 has been ,made more complicated with all stupid concepts like observable and bla bla.. they could have made it easy…

9 months 22 days ago

Can you please include videos on how angular can be used with mvc

Tushar Kukreti
Tushar Kukreti
10 months 2 days ago

Hi can you also please explain how to post or put data using angular 2?

Tushar Kukreti
Tushar Kukreti
10 months 3 days ago

This is superb!! Great Explanation. Thank you so much

Sasikala Vijay
Sasikala Vijay
10 months 10 days ago

I am using Chrome ver 60. Most of the changes in code is not updated during page refresh. But I can see in Firefox… For eg. In this video error occurs in length fn. to get total length, then you are adding ngIf directive to delay, when u refresh another error occurs, but for me in chrome after making changes same error persist in chrome…. Any suggestion for this…..