AngularJS App: Load data from JSON once and use it in several controllers

Question

I'm working on a mobile app using AngularJS as a framework, currently I have a structure similar to this:

app.config(['$routeProvider', function($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl : 'pages/home.html',
            controller  : 'homeCtrl'
        })

        .when('/one', {
            templateUrl : 'pages/one.html',
            controller  : 'oneCtrl'
        })

        .when('/two', {
            templateUrl : 'pages/two.html',
            controller  : 'twoCtrl'
        });
}]);

app.controller('homeCtrl', ['$scope', function($scope) {

}]);

app.controller('oneCtrl', ['$scope', function($scope) {

}]);

app.controller('twoCtrl', ['$scope', function($scope) {

}]);

And then I'm displaying the content with an ng-view:

<div class="ng-view></div>

Things are working well but I need to load data from a JSON file to populate all the content of the app. What I want is to make and an AJAX call only once and then pass the data through all my different controllers. In my first attempt, I thought to create a Service with an $http.get() inside of it and include that in every controller, but it does not work because it makes a different ajax request everytime I inject and use the service. Since I'm new using angular I'm wondering what is the best way or the more "angular way" to achieve this without messing it up.

Edit: I'm adding the code of the service, which is just a simple $http.get request:

app.service('Data', ['$http', function($http) {
    this.get = function() {
        $http.get('data.json')
        .success(function(result) {
            return result;
        })
    }
});

Your service is missing from the example code, which would be the most useful thing to see here. — seanhodges, Jun 11 '15 at 15:15
@Didier I would suggest you to split the code files into different controllers, and use a service for this data fetch. see my answer for service code — Gurbakhshish Singh, Jun 11 '15 at 15:44

Dane Macaulay · Answer 1 · 2016-12-06T22:05:21.243

7

Initialize the promise once, and return a reference to it:

No need to initialize another promise. $http returns one.

Just tack a .then() call on your promise to modify the result

angular.module('app', [])
  .service('service', function($http){
    this.promise = null;
    function makeRequest() {
         return $http.get('http://jsonplaceholder.typicode.com/posts/1')
             .then(function(resp){
                  return resp.data;
             });
    }
    this.getPromise = function(update){
      if (update || !this.promise) {
         this.promise = makeRequest();
      }
      return this.promise;      
    }
  })

Codepen example

Edit: you may consider using $http cache instead. It can achieve the same results. From the docs:

If multiple identical requests are made using the same cache, which is not yet populated, one request will be made to the server and remaining requests will return the same response.

edited Dec 06 '16 at 22:05

answered Jun 11 '15 at 15:21

Dane Macaulay

814
8
11

This works fine if you don't need to modify/treat the data returned by the get response since this return the promise itself instead of the data, unfortunatelly it was not my case. Thanks for reply. – Didier Jun 11 '15 at 17:07
the example can be extended to do that :) – Dane Macaulay Jun 11 '15 at 19:06
Yes It can be extended, indeed this is a very good answer the only reason I didn't choose it as the "accepted answer" was because haw-i-'s answer already considered the fact the data could be treated. Thanks a lot, again. – Didier Jun 15 '15 at 17:42
1

I up-voted this answer because @DaneMacaulay went the extra mile and demonstrated the idea with a codepen example. Very clean and efficient approach. – Rod Hartzell Nov 12 '15 at 18:51
Worked perfectly! Yes, you can change the code to format the data. Simply put in the `return resp.data;` your call like so `return myFormatting(resp.data);`. AJAX is executed only once and data gets "cached" and reused in all of the controllers. – Nelson Rodriguez May 03 '16 at 15:25

score 5 · Accepted Answer · answered Jun 11 '15 at 15:42

Try this to get JSON Data from a GET Link:

(function (app) {
    'use strict';

    app.factory('myService', MyService);

    MyService.$inject = ['$q', '$http'];

    function MyService($q, $http) {
        var data;

        var service = {
            getData: getData
        };

        return service;

        //////////////////////////////////////

        function getData(refresh) {
            if (refresh || !data) {
                return $http.get('your_source').then(function(data){
                    this.data = data;
                    return data;
                })
            }
            else {
                var deferrer = $q.defer();
                deferrer.resolve(data);
                return deferrer.promise;
            }
        }
    }

}(angular.module('app')));

Now you can add this dependency in your controller file and use:

myService.getData().then(function(data){
    //use data here 
}, function(err){
    //Handle error here
});

This worked like a charm, I thougth to solve this problem in several ways but using a singleton pattern never crossed my mind. Thanks! — Didier, Jun 11 '15 at 17:08
I'm getting `this is undefined` for the line `this.data = data;` , and if I remove it then the GET request happens multiple times. Any idea? — bjesus, Aug 29 '15 at 18:37
initializing a new promise is not needed as $http returns a promise, you can return a reference to the promise instead, the answer is correct but it can be more concise — Dane Macaulay, Nov 13 '15 at 02:42

AngularJS App: Load data from JSON once and use it in several controllers

2 Answers2

Linked