Sharing Top Content from the Angular-sphere.

Making HTTP Calls Using Angular

Making HTTP Calls Using Angular  #AngularJS #Angular2 #javascript #programming #DevOps

  • In our previous tutorial, we covered how to get started with Angular2 using amazing angular command line tool.
  • In this tutorial, we are going to follow up on the previous tutorial and learn how to make HTTP calls using Angular 2.
  • To use the Angular 2 Http module in our components, we have to first import the Http module.
  • Angular 2 introduces new annotation to declare the class as Injectable.
  • To consume the Service, import it in component and module file and call the HTTP Services function from the component.

HTTP Calls are very important and essential part of any application. In our previous tutorial, we covered how to get started with Angular2 using amazing an

@K0YCHEV: Making HTTP Calls Using Angular #AngularJS #Angular2 #javascript #programming #DevOps

HTTP Calls are very important and essential part of any application. In our previous tutorial, we covered how to get started with Angular2 using amazing angular command line tool.

In this tutorial, we are going to follow up on the previous tutorial and learn how to make HTTP calls using Angular 2.

If you haven’t already read the previous Angular 2 tutorial, click here to read ( It’s important ).

You need to have angular 2 command line tool installed along with Node.js and NPM. If it’s new to you, read this tutorial.

Create new Angular 2 project using the following command.

Switch to the project folder and run the application.

Visit localhost:4200 to view the app. You should see a similar screen as shown below.

Moving on!

To use the Angular 2 Http module in our components, we have to first import the Http module.

After that, we can just inject it via Dependency Injection in the constructor.

To do so, create new file inside the /src/app/ folder called app.service.ts and paste the code shown below.

Now let’s add some function to perform HTTP calls.

Angular 2 introduces new annotation to declare the class as Injectable. To read more about it in depth, visit the official documentation here.

In a nutshell, @Injectable annotation indicates that the class has dependencies that should be injected into the constructor when creating an instance of the class.

Another thing is that we are not using callbacks or promises in the HTTP calls. Instead what we are using is called Observables.

You can learn more about the Observables here.

To consume the Service, import it in component and module file and call the HTTP Services function from the component.

To do so, edit the /src/app/app.component.ts file. First import the Services class.

Then, call the Services.

Next, you need to edit the /app/src/app.module.ts file.

First import the following modules.

Then, add the Services in the providers array.

This way you can call and consume HTTP Apis in Angular 2.

To make HTTP Calls with the POST method, use this function.

Similarly, you can call PUT and DELETE method.

Angular2 HTTP calls with observables is really amazing enhancement. You can also convert the observables to promise, just to make things more clearer. We are coming up with more tutorials on Angular2, so make sure you have signup for our email newsletter.

Making HTTP Calls Using Angular

Comments are closed, but trackbacks and pingbacks are open.