Caching internationalization JSON data in AngularJS

Question

Here i am created multi-language concept in my application its working fine, but language (.json) file loaded for every field, So application taking time to load, my requirement is i want to load .json only once to fetch all the data , how to do in angularJs, Thanks for your help in advance

please check the below link also

http://plnkr.co/edit/PYZxcI5yTNuA0fEern9s?p=preview

var language = 'en';

app.directive('telBasictext', ['$http', 'teli18nservice',
  function($http, teli18nservice) {
    return {
      restrict: 'AEC',
      require: 'ngModel',
      scope: {
        ngModel: '=',
      },
      template: '<div  class="form-group"  > ' +
        '<label  >  {{ setvalue }} </label> ' +
        '<div  > <input type="{{ textboxtype }}" ng-model="ngModel"  ></div></div>',

      link: function(scope, iElement, iAttrs, ngModelController) {
        var collecton = iAttrs.getString;
        var splitValues = collecton.split(",");
        var language = splitValues[0]; // Language EN or Fr
        var labelName = splitValues[1]; // Label Name
        var moduleName = splitValues[2]; // Module Name (global or local)
        teli18nservice.getdata(moduleName).success(function(data) {
            scope.setvalue = data[labelName];
          })
          .error(function(error) {
            scope.setvalue = "No Label";
          });
      }
    };
  }
]);

Answer 1

Store the result of a request for the JSON locally in your teli18nservice service and return that data for subsequent calls to getdata. It would look something like this:

// teli18nservice
var jsonData;
this.getData = function () {
    if (jsonData) {
        return $q.resolve(jsonData);
    }
    $http.get().then(function (res) {
        jsonData = res.data;
        return jsonData;
    });
}

Alternatively, take a look at caching $http responses.

Answer 2

May be you should use the cache of $http.

example taken from here:

var cache = $cacheFactory('myCache');
var data = cache.get(someKey);

if (!data) {
    $http.get(url).success(function(result) {
        data = result;
        cache.put(someKey, data);
    });
}