Topics
Published on August 8, 2017 by kudvenkat

Tags
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
csharp-video-tutorials.blogspot.com/2017/08/angular-2-http-service-tutorial.html

Slides
csharp-video-tutorials.blogspot.com/2017/08/angular-2-http-service-tutorial_8.html

Angular 2 Tutorial playlist

Angular 2 Text articles and slides
csharp-video-tutorials.blogspot.com/2017/06/angular-2-tutorial-for-beginners_12.html

All Dot Net and SQL Server Tutorials in English
www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd

All Dot Net and SQL Server Tutorials in Arabic
www.youtube.com/c/KudvenkatArabic/playlists

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’;

@NgModule({
imports: [
HttpModule],
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() {
this._employeeService.getEmployees()
.subscribe(employeesData =] this.employees = employeesData);
}

Leave a Reply

12 Comments on "Angular 2 http service tutorial"

Notify of
avatar

Chandan Kumar
Guest
Chandan Kumar
7 days 18 hours ago

Excellent explanation.

One minor issue – I had applied *ngIf="employees" still I am getting length error. Please suggest why this is happening?

Chandan Kumar
Guest
Chandan Kumar
6 days 23 hours ago

mitesh vora thanks for reply, I have tested with mozila browser working perfectly. Will try with chrome as you suggested.

mitesh vora
Guest
mitesh vora
7 days 15 hours ago

Had the same issue, its the issue in chorme due to cors implementation in google chrome and happens only in case of localhost, you can solve this by downloading chrome extension from chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi, be sure to turn it off when not using the app, you can read more at stackoverflow.com/questions/28547288/no-access-control-allow-origin-header-is-present-on-the-requested-resource-err.

Juan Carlos Oropeza
Guest
Juan Carlos Oropeza
9 days 12 hours ago

at 17:30 he said talk about this in another video, but I cant understand what video is. Can anyone tell me? I understand 14 or 15 but not the series.

Mohanraj Periasamy
Guest
Mohanraj Periasamy
9 days 1 hour ago

He is talking about WebAPI… videos part 14 and 15..there he discussed cross origin related

Adir Zoari
Guest
Adir Zoari
10 days 2 hours ago

Hey, how did you create the xml file? is there any online tool to do that?

TheSilent333
Guest
TheSilent333
8 days 22 hours ago

That XML file was just the result of the WebAPI method call. See the previous video in the series. 🙂

Jaya Babu Thumati
Guest
Jaya Babu Thumati
10 days 15 hours ago

Boss jsut think about NodeJs also, you only can teach better

RAQIBUL ALAM RASHED
Guest
RAQIBUL ALAM RASHED
10 days 22 hours ago

Thanks a Billions.

pitchai pillai
Guest
pitchai pillai
11 days 6 hours ago

thank you sir.. expecting more videos..

ExcitingMonkey
Guest
ExcitingMonkey
11 days 11 hours ago

Thanks

Srinivas Varma
Guest
Srinivas Varma
10 days 13 hours ago

Hi sir can you please make a video of how to send post request with body parameters to Webapi post method and similarly put and delete methods.

wpDiscuz