Using Angular2 HTTP Service in ES5 code

Question

How to use the HTTP service provided by Angular2 in ES5 code? Here is the TypeScript example.

I basically need examples of GET and POST requests.

The example shown here is not working. get seems to be undefined.

Here is an example that doesn't work:

    var SearchResultComponent = ng.core.Component({
        selector: "search-result",
        viewProviders: [ng.http.HTTP_PROVIDERS],
        templateUrl: "componentTemplates/SearchResult.html"
    }).Class({
        constructor: [ng.http.HTTP_PROVIDERS, function(http) {
            this.params = params;
            this.http = http;
        }],
        ngOnInit: function(){

            console.log(this.http.get); //undefined
        }
    })

You could make it a valid question by adding the code that demonstrates what you tried and the exact error message you got. A Plunker that demonstrates the issue wouldn't hurt either. — Günter Zöchbauer
– Günter Zöchbauer, Commented May 9, 2016 at 7:18

Thierry Templier · Accepted Answer · 2016-05-09 08:30:41Z

0

In the constructor of your SearchResultComponent component, you need use ng.http.Http and not HTTP providers:

var SearchResultComponent = ng.core.Component({
    selector: "search-result",
    viewProviders: [ng.http.HTTP_PROVIDERS],
    templateUrl: "componentTemplates/SearchResult.html"
}).Class({
    constructor: [ng.http.Http, function(http) { // <-----
        this.params = params;
        this.http = http;
    }],
    ngOnInit: function(){

        console.log(this.http.get); //undefined
    }
});

In your case, it wasn't the Http object that was injected...

Providers can be specified when boostrapping your application, in the providers attribute or the viewProviders attribute (like you did).

See this plunkr for a use of HTTP with Angular2 and ES5: https://plnkr.co/edit/oM4gTgW5Q7gpR8Qderjj.

answered May 9, 2016 at 8:30

Thierry Templier

203k44 gold badges407 silver badges366 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Narayan Prusty Over a year ago

what is the difference between viewProviders and the array values assigned to the constructor. I mean difference between HTTP_PROVIDERS and ng.http.Http?

Thierry Templier Over a year ago

viewProviders / providers allow you to define providers (entities responsible of creating instances of something) and constuctor parameters to what you want to inject (i.e. objects created by providers)

Thierry Templier Over a year ago

HTTP_PROVIDERS are the providers for HTTP and ng.http.Http the type of the object you want to inject. One of providers knows how to create an instance of this type...

Collectives™ on Stack Overflow

Using Angular2 HTTP Service in ES5 code

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related