Geek Answers Handbook

How to make ajax call using angular2 / http

I am using Angular 2.0.0-beta.0 with typescript. I was able to make an ajax call with the ['fetch'] window out of the box without any problems (and I did not need to use any workarounds required in earlier versions.)

But I could not make the same ajax call working with angular2 http.

Here is the code to demonstrate the problem. There are three files in the project folder, index.html and boot.ts and app.component.ts in a subfolder called app.

app.component.ts:

import {Http, HTTP_PROVIDERS} from 'angular2/http'; import {Component} from 'angular2/core'; @Component({ selector: 'my-app', providers: [HTTP_PROVIDERS], template: '<h1>My First Angular 2 App</h1><button (click)="getTasks()">click</button>{{tasks}}' }) export class AppComponent { http: Http; tasks = []; constructor(http: Http) { alert(http == null); this.http = http; } getTasks(): void { this.http.get('http://localhost:3000/tasks/norender'); //.map((res: Response) => res.json()) //it is important to have this subscribe call, since the //request is only made if there is a subscriber .subscribe(res => this.tasks = res); } }

boot.ts:

 import {bootstrap} from 'angular2/platform/browser' import {HTTP_PROVIDERS} from 'angular2/http'; import {AppComponent} from './app.component' bootstrap(AppComponent, [HTTP_PROVIDERS]);

index.html

 <!DOCTYPE html> <html> <head> <title>Angular 2 QuickStart</title> <!-- 1. Load libraries --> <script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script> <script src="https://code.angularjs.org/tools/typescript.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.0/http.dev.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.0/angular2.dev.js"></script> <!-- 2. Configure SystemJS --> <script> System.config({ transpiler: 'typescript', typescriptOptions: {emitDecoratorMetadata: true}, packages: {'app': {defaultExtension: 'ts'}} }); System.import('app/boot') .then(null, console.error.bind(console)); </script> </head> <!-- 3. Display the application --> <body> <my-app>Loading...</my-app> </body> </html>
+7
dependency-injection angular typescript
source share
2 answers

You must add an Http provider. You have two options:

  • In bootstrap:

import {HTTP_PROVIDERS} from 'angular2/http';

and

 ng.bootstrap(src.SomeComponent, [HTTP_PROVIDERS]);

  1. In a component using a service:

    import {HTTP_PROVIDERS} of 'angular2 / http';

    @Component ({

    ...

    Suppliers

    : [HTTP_PROVIDERS]

    ...
    })

+4
source

I had a similar problem when I used an old version of the TypeScript compiler. I fixed this by changing the constructor argument from http: Http to @Inject(Http) http: Http . Of course, you need to import Inject in order to use it.

I will try to use the SystemJS release at https://code.angularjs.org/tools/system.js instead of the release at rawgithub.com.

+1
source

More articles:


All Articles