Search code examples
httpangularjscontrollers

how to use factory/service for sharing information between multiple controllers in angularjs?


Im trying to load a JSON when app starts, and spread the data between all my controllers. I know this is not very hard to do, but Im confused from all articles/answers I've read because they use different syntax than I do, can someone Please direct me on how to to that?

Im currently making the controller make the $http.get :

myApp = angular.module("myApp", [])

myApp.controller "HomeCtrl", ($scope, $http, $routeParams) ->
 $http.get('gethome.php').success (data) ->
  $scope.home = data

But I have to repeat myself in each and every controller I want to have access to that Data


Solution

  • I will recommend you using Memoization pattern along with service and reuse the service in the controller

    Pls check the below sample code

      var app = angular.module('plunker', []);
    
              app.service('cache', function ($http,$q) {
                  var mycache={};
                  return {
                      getdata: function (key) {
                          var deferred = $q.defer();
                          if (mycache[key]) {
                              deferred.resolve(mycache[key]);
                          }
                          else {
                              $http.get('TextFile.txt').then(function (data) {
                                  mycache[key] = data.data;
                                  deferred.resolve(mycache[key]);
                              });
                          }
                          return deferred.promise;
                      }
                  }
              });
    
    
              app.controller('test', function ($scope, cache) {
                  cache.getdata('cache').then(function (data) {
                      $scope.data = data;
                  });
             });
    
               app.controller('test1', function ($scope, cache) {
                  //since data is already cached now it will server the cached data
                  cache.getdata('cache').then(function (data) {
                      $scope.data = data;
                  });
             });