How to include Angular 2 HTTP bundle

  1. Home
  2. Computing
  3. Angular JS2

Introduction

In this section, we introduce how to include the Angular 2 HTTP and use it in your project.

Step 1: Add the HTTP bundle to <head>

Angular 2 has a module bundle for working with XHR and JSON API calls from the client, named the HTTP. Angular provides the HTTP bundle as a separate resource.

To start using this bundle, the first thing you need to do is update your html file, for example index.html, to include the bundle script. To do this, simply add another tag in the <head> tag that links to the path as the other angular 2 file.

<script src="/your_path/angular2/http.dev.js" type="text/javascript"><script>

The http.dev.js script is delivered as part of the Angular package. So when you pull that down you have the HTTP bundle script. It's just a matter of including it based on the module loading strategy you are on. The HTTP module works with observables and RxJS. So you need to make sure that the RxJS bundle is being included as well. You should include a script tag for Rx.js in <head>

<script src="/your_path/angular2/Rx.js" type="text/javascript"><script>

After that, your project is good to go.

Step 2: Include HTTP_PROVIDERS in bootstrap() call

The last thing to do to get start using Angular's HTTP code is to include HTTP_PROVIDERS in the bootstrap() call.

So for example in the main.ts file, you need to add a new import statement and import HTTP_PROVIDERS from angular2/http

import {HTTP_PROVIDERS} from 'angular2/http'

Then, add it to the providers array in the bootstrap() call, this will make Angular class like HTTP available to the app from constructor injection.

bootstrap(AppComponent, [HTTP_PROVIDERS]);

Latest Post