Using Angular.js to Make a $http.get Request from a Different Controller

Question

Using Angular.js to Make a $http.get Request from a Different Controller

I am utilizing an HTTP resource that provides a JSON list of top 10 entities from a database by calling it in this manner:

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 () {
        });
    }]);

This method works seamlessly!

However, I am now wondering how I can manipulate the filter variable to modify the query. Do I need to completely overhaul the controller for this adjustment?

Update

Apologies for the unclear nature of my initial question. At the time of asking, I had limited knowledge of AngularJS.

The main goal was to inject the variable $http without having to rely on creating a new controller solely for this purpose.

Thank you to everyone for their assistance.

javascript angularjs angularjs-scope

Answer 1

Answer №1

An improved approach to fetching data

If retrieving data outside of a controller is your preference, you can inject it into a recipe (such as provider, factory, or service): https://docs.angularjs.org/guide/providers

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

To obtain an instance of $http without being within an angular structure, follow the example below.

The method provided by Dennis functions correctly; however, calling it before angular bootstraps may cause issues. Also, Derek encountered errors with Dennis' method due to a missing jquery dependency.

The solution suggested by Exlord is more reliable and avoids such problems:

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

Explanation:

The angular injector is:

An object used for accessing services and performing dependency injection

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

The angular.injector function takes modules as input and returns an injector instance.

In this context, an injector for the ng module (angular's module) is retrieved, followed by retrieving the $http service.

Note: When using the injector in this manner, ensure that the necessary modules are included in order to retrieve the desired dependencies. For example:

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

Answer 2

An improved approach to fetching data

If retrieving data outside of a controller is your preference, you can inject it into a recipe (such as provider, factory, or service): https://docs.angularjs.org/guide/providers

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

To obtain an instance of $http without being within an angular structure, follow the example below.

The method provided by Dennis functions correctly; however, calling it before angular bootstraps may cause issues. Also, Derek encountered errors with Dennis' method due to a missing jquery dependency.

The solution suggested by Exlord is more reliable and avoids such problems:

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

Explanation:

The angular injector is:

An object used for accessing services and performing dependency injection

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

The angular.injector function takes modules as input and returns an injector instance.

In this context, an injector for the ng module (angular's module) is retrieved, followed by retrieving the $http service.

Note: When using the injector in this manner, ensure that the necessary modules are included in order to retrieve the desired dependencies. For example:

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

Answer 3

Answer №2

Answering your query on how to "execute $http.get from an external controller", you can implement the following approach:

... ANYWHERE IN YOUR CODE

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

ANYWHERE IN YOUR CODE ...

For more information, refer to the official Angular documentation: angular $injector docs : The get(name); method

Returns an instance of the service.

Answer 4

Answering your query on how to "execute $http.get from an external controller", you can implement the following approach:

... ANYWHERE IN YOUR CODE

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

ANYWHERE IN YOUR CODE ...

For more information, refer to the official Angular documentation: angular $injector docs : The get(name); method

Returns an instance of the service.

Using Angular.js to Make a $http.get Request from a Different Controller

Update

Answer №1

An improved approach to fetching data

To obtain an instance of $http without being within an angular structure, follow the example below.

Answer №2

Similar questions

Confirm Form using AngularJS Once Enter is Pressed

Tacking the progress bar onto an array of $.ajax() calls within a Promise.all

What is the best way to pass the setState value to the useEffect hook?

Is it possible that an issue with ui-router is causing Angular to crash Chrome on a local machine?

React-Router failing to properly unmount components when the location parameter changes

Issue: The variable THREE has not been defined within the FBXLoader code

What is the best way to assign specific codes to separate pages using a single JS file?

No data, response or issue received from the Internet API

Verify whether an option is chosen in CakePHP 3 form

Delete the content on a webpage using an Ajax jQuery request to transfer it elsewhere

How can the color of the <md-toolbar> be customized?

Struggling to run npm build in Next.js project due to webpack errors?

What is the best way to extract hover-box information from an ajax website with Python?

How can the checkers code be corrected due to a mistake?

The some() method in Javascript with an extra argument

Struggling with incorporating a button into a ReactJS table

Video not updating with new source URL

What is the procedure for extracting both the previous and updated values from the dynamic autocomplete feature when utilizing md-selected-item-change in Angular Material?

Utilize v-for to dynamically showcase a variety of images on your

Switching from an AJAX GET request to a POST request involves updating the