Search code examples
jsonangularjsangularjs-scoperootscope

Use $rootScope to returns json in AngularJS ?


I have this function which returns json with $scope.product_owners = data

$http({
    url: "php/functions.php",
    method: "GET",
    params: { 
        action: "get_product_owners"
    }
}).success(function(data) {
    $scope.product_owners = data;
});  

Currently, I'm calling this function in all my controllers because it is used in them, but I'm wondering if it was possible to call once. For example, with the $rootScope or something like that.


Solution

  • The "Angular way" for sharing data across controllers is to use a service:

    app.factory('ProductOwners', function ($http) {
        var service = {
            data: []
        };
    
        $http({
            url: "php/functions.php",
            method: "GET",
            params: { 
                action: "get_product_owners"
            }
        }).success(function(data) {
            service.data = data;
        });
    
        return service;
    });
    

    Then inject the service in every controller:

    app.controller('someCtrl', function (ProductOwners) {
        $scope.product_owners = ProductOwners.data;
    });
    

    A different implementation with "lazy" evaluation (i.e. it only makes the call if it is needed and then serves the same data):

    app.factory('ProductOwners', function ($http, $q) {
        var data;
    
        function getDataIfNeeded() {
            if (data !== undefined) {
                return $q.when(data);
            }
    
            return $http({
                url: "php/functions.php",
                method: "GET",
                params: { 
                    action: "get_product_owners"
                }
            }).then(function(response) {
                data = response.data;
                return data;
            });
        }
    
        return {
            getData: getDataIfNeeded
        };
    });
    
    app.controller('someCtrl', function (ProductOwners) {
        ProductOwners.getData().then(function (data) {
            $scope.product_owners = data;
        });
    });
    

    UPDATE

    Yet another different implementation with "lazy" evaluation and supporting an argument passed to getData():

    app.factory('GenericService', function ($http, $q) {
        var data = {};
    
        function getDataIfNeeded(action) {
            action = action || 'default';
    
            if (data[action] !== undefined) {
                return $q.when(data[action]);
            }
    
            return $http({
                url: "php/functions.php",
                method: "GET",
                params: { 
                    action: action
                }
            }).then(function(response) {
                data[action] = response.data;
                return data[action];
            });
        }
    
        return {
            getData: getDataIfNeeded
        };
    });
    
    app.controller('someCtrl', function (GenericService) {
        GenericService.getData("get_product_owners").then(function (data) {
            $scope.product_owners = data;
        });
    });