Angular.JS share a single JSON object between controllers

Question

I´m trying to code a CRUD app with Angular.JS, and I need your help to move on. This is the scenario:

View 1 (index) gets JSONP data from a remote API and stores it.
View 2 (master) shows data filtered on a grid
View 3 (detail) shows an specific item selected on View 2

I did it already, but requesting the very same JSON object on each view, , but I think one only api call is enough.

I can´t figure out how to properly share this JSON object for all the controllers. I tried several tutorials on ngResource, $http, factories and services but still have not a clear path to go through.

How can I do this?

Any snippet or code sample you may share will be very useful to keep on tryin this thing...

Thanks in advance,

Ariel

you can use service for storing data. but i would rather suggest to just pass the id and make another api call to get latest data from server... that way you avoid stale data update/view problem... similar to @Jason's answer — harishr
– harishr, Commented Jul 18, 2014 at 5:30

Jason Watmore · Accepted Answer · 2014-07-18 05:29:41Z

You can implement a base controller to store common functionality that's shared between the controllers. I wrote a blog post about it recently, here's the code snippet showing how it works:

'use strict';

angular.module('Diary')

// base controller containing common functions for add/edit controllers
.controller('Diary.BaseAddEditController',
    ['$scope', 'DiaryService',
    function ($scope, DiaryService) {
        $scope.diaryEntry = {};

        $scope.saveDiaryEntry = function () {
            DiaryService.SaveDiaryEntry($scope.diaryEntry);
        };

        // add any other shared functionality here.
    }])

.controller('Diary.AddDiaryController',
    ['$scope', '$controller',
    function ($scope, $controller) {
        // instantiate base controller
        $controller('Diary.BaseAddEditController', { $scope: $scope });
    }])

.controller('Diary.EditDiaryController',
    ['$scope', '$routeParams', 'DiaryService', '$controller',
    function ($scope, $routeParams, DiaryService, $controller) {
        // instantiate base controller
        $controller('Diary.BaseAddEditController', { $scope: $scope });

        DiaryService.GetDiaryEntry($routeParams.id).success(function (data) {
            $scope.diaryEntry = data;
        });
    }]);

Chandermani · Accepted Answer · 2014-07-18 15:38:56Z

2

Using services to cache and share the data across controllers would be the way to go. Since services in angular are singleton, the same copy of data can be shared. A service such as

angular.module('myApp').factory('dataService', function($q, $resource) {
  var items=[];
  var service={};
  service.getItems=function() {
     var itemsDefer=$q.defer();
     if(items.length >0) 
        itemsDefer.resolve(data);
     else
     {
          $resource(url).query({},function(data) {
             items=data;
             itemsDefer.resolve(data)
          });        
     }
     return itemsDefer.promise;
  }
  return service;
});

Now in the controller you can inject the dataService and call the getItems method. This method returns a promise, which is either resolved using the cached data or by making remote request. And the controller code would look something like

angular.module('myApp').controller('MyCtrl', function($scope,dataService) {
    dataService.getItems().then(function(items) {
        $scope.items=items;
    }
});

edited Jul 18, 2014 at 15:38

answered Jul 18, 2014 at 4:56

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

2 Comments

ferroariel Over a year ago

Thanks @Chandermani ! Please, could you add the controller code, too? BTW Your service logic is clear as water!undefined"...

Chandermani Over a year ago

Added controller but there was a issue with the promise declaration, it had to be inside the getItems function.

Collectives™ on Stack Overflow

Angular.JS share a single JSON object between controllers

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related