Angular.js Call $http.get from outside controller

Question

I have an HTTP resource that returns a JSON list of top 10 entities from a database. I call it this way:

var filter= "john";
var myApp = angular.module('myApp', []);
myApp.controller('SearchController', ['$scope','$http', function ($scope, $http) {
    $http.get('/api/Entity/Find/' + filter). //Get entities filtered
        success(function (data, status, headers, config) {
            $scope.entities = data;
        }).
        error(function () {
        });
    }]);

It works!

But... how can I change the filter variable in order to change the query? Should I rewrite the whole controller to get this to work?

Update

Sorry for the lack of clarity in my question. When I asked this I couldn't undertand anything of AngularJS.

My original intent was to get the variable $http injected, without relying on creating a controller for that.

Thanks for everyone.

Not really clear what you're trying to do generally speaking you want to use a service to handle communicating with your server most of the time. That said it's just not clear what you want to have happen. — shaunhusain
– shaunhusain, Commented Jun 5, 2014 at 3:55
I presume you are having restful call where you can add filters, based on actions in your page, you can write a function to modify the filter value and hence change the url to fetch . Explain complete scenario to get clear answer. maybe a jsfiddle or plunker — Vamshi
– Vamshi, Commented Jun 5, 2014 at 4:17

csga5000 · Accepted Answer · 2018-06-28 18:06:50Z

20

A likely better method

If you don't want to get it inside a controller, you could have it injected into a recipe (ex, provider, factory, service): https://docs.angularjs.org/guide/providers

myApp.factory('getStuff', ['filter', '$http', function (filter, $http) {
    //Blah
}]);

If you want to get an instance of $http outside of any angular struct, you can do what's shown below.

The method given by Dennis works; however, it does not work if called before angular has been bootstrapped. Also, it seems like Derek has an error with Dennis' method because he does not have jquery.

The solution that Exlord mentioned is better, as it does not have that problem, and is more proper:

$http = angular.injector(["ng"]).get("$http");

Explained:

The angular injector is an:

object that can be used for retrieving services as well as for dependency injection

https://docs.angularjs.org/api/ng/function/angular.injector

The function angular.injector takes the modules as a parameter and returns an instance of the injector.

So in this case you retrieve an injector for the ng module (angular's), and then retrieve the service $http.

Note: One thing to keep in mind when using injector like this is that in my own findings it seems you need to make sure you include modules in the inject which what you are "getting" will need. For example:

angular.injector(['ng', 'ngCordova']).get('$cordovaFileTransfer')

edited Jun 28, 2018 at 18:06

answered Jan 13, 2016 at 23:55

csga5000

4,1615 gold badges45 silver badges53 bronze badges

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

8 Comments

csga5000 Over a year ago

I love my original typo when I said "because he does not have javascript". I think Derek should have an error with my method as well, if he did not have JavaScript ;) I've since corrected to "he does not have jquery"

Lzh Over a year ago

I love how you apologize for a great answer :) +1

olfek Over a year ago

Getting modules this way seems to be really slow for me and causes my app to not load data until the next refresh.

csga5000 Over a year ago

@sudoman "Until the next refresh"? Perhaps it's an issue with the modules you're using. I just did a performance test, and I can call it 1000 times in about half a second: plnkr.co/edit/aXQiHENdb7Pp3VY8BhKe?p=preview

olfek Over a year ago

Getting it through a controller seems faster, I decided to pass it as a parameter to a function from the controller.

|

Dennis Ahaus · Accepted Answer · 2014-07-17 13:42:03Z

8

Regarding to your question "... call $http.get from outside controller" you can do the following:

... ANYWHERE IN YOUR CODE

var $http = angular.element('html').injector().get('$http');
$http.get(...).success(...);

ANYWHERE IN YOUR CODE ...

See official docs from angular: angular $injector docs : The get(name); method Returns an instance of the service.

answered Jul 17, 2014 at 13:42

Dennis Ahaus

9691 gold badge8 silver badges17 bronze badges

4 Comments

Exlord Over a year ago

this only works after the angular app has been bootstraped and not before that

Exlord Over a year ago

this is the correct way but this works var $http = angular.injector(["ng"]).get("$http");

Derek Kurth Over a year ago

My site does not use jQuery, so I got this error: "Looking up elements via selectors is not supported by jqLite!" Exlord's syntax worked, however.

csga5000 Over a year ago

@DerekKurth obviously a little late, but see my answer

Collectives™ on Stack Overflow

Angular.js Call $http.get from outside controller

Update

2 Answers 2

A likely better method

If you want to get an instance of $http outside of any angular struct, you can do what's shown below.

8 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Update

2 Answers 2

A likely better method

If you want to get an instance of $http outside of any angular struct, you can do what's shown below.

8 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related