Sharing ajax data between multiple controllers in angular using service

Question

Hi I have two controllers

pqsAppModule.controller('NotificationBoxController',function($scope,items) {
    $scope.list = items.list();
})

and

pqsAppModule.controller('NotificationController',function($scope,items) {
    $scope.list = items.list();
})

I need to create an "items" service that would do an ajax request and return data for any controller which would have it injected. And I want, that the query will be done only once, and items will be shared between all controllers.

pqsAppModule.factory('items', function($http) {
    var items = [];
    var itemsService = {};
    $http.get('api/notification').then(function(response){
        items = response.data;
    });

    itemsService.list = function() {
        return items;
    };

    return itemsService;
});

But I don't understand why angular makes the request, and receives data, but all items in controllers are empty.

deckerdev · Accepted Answer · 2016-03-27 01:26:47Z

1

It happens because the factory should be defined by different way.

(I took dummy URL only to load data by async way)

HTML

<div ng-controller="NotificationBoxController">
    <button ng-click="showMe();">press  me</button>
    <pre>NotificationBoxController: {{items.getList()|json}}</pre>
</div>

<div ng-controller="NotificationController">
    <pre>NotificationController: {{items.getList()|json}}</pre>
</div>

JS

var pqsAppModule = angular.module('myApp', []);
pqsAppModule.controller('NotificationBoxController',function($scope,items) {
    $scope.items = items;

    $scope.showMe= function(){
     items.query();   
    }
});

pqsAppModule.controller('NotificationController',function($scope,items) {
    $scope.items = items;
});


pqsAppModule.factory('items', function ($http) {

    var current = {};    

    var address = 'Singapore, SG, Singapore, 153 Bukit Batok Street 1';
    var URL = 'http://maps.googleapis.com/maps/api/geocode/json?address=' + address + '&sensor=true';

       var factory = {            
           query: function () {                
                var data = $http({method: 'GET', url:URL}).then(function (result) {
                           current = result.data.results[0];                            
                        }, function (result) {
                            alert("Error: No data returned");
                        });  
            },
            getList: function () {                
               return current;
            }
       }       
        return factory; 
  });

Demo Fiddle

From this example we call items.getList() from HTML for both controllers. But if we want to update the model through the controller, we need a listener like $watch

edited Mar 27, 2016 at 1:26

deckerdev

2,8122 gold badges23 silver badges23 bronze badges

answered Dec 11, 2013 at 7:54

Maxim Shoustin

78k29 gold badges212 silver badges229 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

m0rjjj Over a year ago

yes it works, but one more question. I must declare watch inside the service factory?

Maxim Shoustin Over a year ago

no, you don't. Factory is like singleton. has one instance and all controllers use the same service. you can add watch to controller and listen on change in service

Chandermani · Accepted Answer · 2013-12-11 09:12:44Z

0

Try this

  $http.get('api/notification').then(function(response){
        angular.foreach(response.data,function(item) {
            items.push(item);
        });
    });

Basically do not create a new array but fill the existing one.

answered Dec 11, 2013 at 9:12

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

Collectives™ on Stack Overflow

Sharing ajax data between multiple controllers in angular using service

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related