Ways to control the number of function invocations in an AngularJS controller

Question

Ways to control the number of function invocations in an AngularJS controller

I am facing a challenge where data is being fetched from multiple controllers, causing functions to hit the server more than fifty times until they receive a response. I am unsure how to handle this situation effectively and would appreciate some guidance.

mainControllers.controller('AddProductController', ['$scope', '$http', '$routeParams', '$cookies', '$rootScope', 'Upload', '$timeout', '$uibModal', '$log', '$document', '$window', 'variantsService', 'toaster', '$route', '$rootScope', 'Lightbox', function ($scope, $http, $routeParams, $cookies, $rootScope, Upload, $timeout, $uibModal, $log, $document, $window, variantsService, toaster, $route, $rootScope, Lightbox) {


    /*Currency dynamic*/
    $scope.currency = function () {
        $http.get('currencies',
                {headers:
                            {'Content-Type': 'application/x-www-form-urlencoded',
                                'Authorization': $rootScope.keyword_auth_token, 'Accept-Language': $cookies.get('type')}
                })
                .success(function (data) {
                    $scope.user_curr = data[0].code;
                })
                .error(function (data) {
                    console.log(data);
                });
    };

    /*Currency dynamic ends here*/
    $scope.currency();

}]);

Is there a way to limit the number of hits on the server in this scenario?

javascript angularjs controllers

Answer 1

Answer №1

It's not ideal to have multiple controllers for one partial. It's recommended to utilize angular factories to handle data in such scenarios. To simplify, you can remove the line $scope.currency(); from your controller (as it will trigger an api call upon initialization) and instead use ng-init built-in directive. In your partial with ng-controller="AddProductController", include ng-init="currency()" if you need to make an api call.

Answer 2

It's not ideal to have multiple controllers for one partial. It's recommended to utilize angular factories to handle data in such scenarios. To simplify, you can remove the line $scope.currency(); from your controller (as it will trigger an api call upon initialization) and instead use ng-init built-in directive. In your partial with ng-controller="AddProductController", include ng-init="currency()" if you need to make an api call.

Answer 3

Answer №2

To ensure full control over calls, I always incorporate them into a service. Here is an example of how you can do this:

app.service("currencyService", function($q, $http) {
    var _currencyPromise = null,
        _currencies = null;

    this.getCurrencies = function() {
        var deferred = $q.defer();

        if (_currencies) {
            deferred.resolve(_currencies);
        } else if (_currencyPromise) {
            _currencyPromise.then(function(response) {
                deferred.resolve(response.data);
            });
        } else {
            _currencyPromise = $http.get("..");
            _currencyPromise.then(function(response) {
                _currencies = response.data;
                deferred.resolve(_currencies);
            }, function(error) {
                _currencyPromise = null;
                deferred.reject();
            });
        }

        return deferred.promise;
    }
});

In your controllers, you can utilize this service to make the http call only once:

app.controller("myCtrl", ["$scope", "currencyService", function($scope, currencyService) {
    currencyService.getCurrencies().then(function(currencies) {
        $scope.user_curr = currencies[0].code;
    });
}]);

For further reference, please check out this jsfiddle. You will notice that the API is called only once in the console.

Answer 4

To ensure full control over calls, I always incorporate them into a service. Here is an example of how you can do this:

app.service("currencyService", function($q, $http) {
    var _currencyPromise = null,
        _currencies = null;

    this.getCurrencies = function() {
        var deferred = $q.defer();

        if (_currencies) {
            deferred.resolve(_currencies);
        } else if (_currencyPromise) {
            _currencyPromise.then(function(response) {
                deferred.resolve(response.data);
            });
        } else {
            _currencyPromise = $http.get("..");
            _currencyPromise.then(function(response) {
                _currencies = response.data;
                deferred.resolve(_currencies);
            }, function(error) {
                _currencyPromise = null;
                deferred.reject();
            });
        }

        return deferred.promise;
    }
});

In your controllers, you can utilize this service to make the http call only once:

app.controller("myCtrl", ["$scope", "currencyService", function($scope, currencyService) {
    currencyService.getCurrencies().then(function(currencies) {
        $scope.user_curr = currencies[0].code;
    });
}]);

For further reference, please check out this jsfiddle. You will notice that the API is called only once in the console.

Answer 5

Answer №3

My solution is straightforward. Let's say I have a view structured as follows:

<div ng-controller="HomeController">
<div class="active tab-pane" ng-controller="AddProductController" ng-init="subcategories_id();currency();">

<p>{{user_curr}}</p>

</div><!--ends here->
<p>first controller {{abc}}</p>
</div>

I am utilizing the nginit attribute and it functions perfectly.

Answer 6

My solution is straightforward. Let's say I have a view structured as follows:

<div ng-controller="HomeController">
<div class="active tab-pane" ng-controller="AddProductController" ng-init="subcategories_id();currency();">

<p>{{user_curr}}</p>

</div><!--ends here->
<p>first controller {{abc}}</p>
</div>

I am utilizing the nginit attribute and it functions perfectly.

Ways to control the number of function invocations in an AngularJS controller

Answer №1

Answer №2

Answer №3

Similar questions

PhantomJs is only providing partial responses

JavaScript: Reorder an array to alternate between largest and smallest elements, starting with the largest

javascript href clears Internet Explorer webpage

Using Moment.js to showcase historical information within a specified timeframe based on the user's timezone

Personalize Drop-Down Selection

Serve as a proxy for several hosts with identical URL structures

Encountering a Next.js installation error due to the inability to locate the module fs

Issue with Material-UI DataGrid Component: Unable to access property 'length' as it is undefined

Embed a javascript tag to print a PDF document

Modify a dropdown menu selection and process it using ajax technology

Click on a Marker to automatically zoom to its location using Leaflet mapping technology

How can I retrieve the value of a JavaScript variable using Ajax?

Concealing UI elements within the primary stack during navigation to a nested stack in React navigation

Transferring HTML variables to an Angular Component

``What are the steps to identify and retrieve variables from an Angular HTML template by utilizing Abstract Syntax Trees

Strategies for Synchronizing Multiple Asynchronous Calls in NodeJS

Error handling middleware delivering a response promptly

Does the method in the superclass "not exist" within this type....?

What is the best way to group/merge multiple objects that have the same name into a single object (Nesting)?

Incorporating JavaScript and Alpine.js to Monitor and Log Changes in Input Range Values