Angular pass data between controller

Question

I have requirement where i need to share data between controllers,so i created factory

suppose i have url like: abc/123 (Note:123 is dynamic i need to pass it from controller)

MyCode

appServices.factory('classesService', function($http){
    return {
        getClasses: function(value) {
            return $http.get(urlprefix + 'orgs/' + value + '/classes?with-users=true');
        }
    };
});

In Controller

classesService.getClasses($scope.organization.id).then(function(data){});

now suppose i am using it in 3 contollers 3 calls will go to server. i dont want three calls i want only one call.

Note:value is same for all three controller

is there any way i can acheive this.

Thanks

Possible duplicate http://stackoverflow.com/questions/20181323/passing-data-between-controllers-in-angular-js?lq=1 — Matt M, Jun 09 '16 at 11:23
User services.Initially make your call and store that value in your service.And post that inject that service in your various controllers . — Rambler, Jun 09 '16 at 11:23
@Rambler how can i pass parameter in services appServices.service('classesService', ['$http', '$q', function($http, $q) { var defered = $q.defer(); $http.get(urlprefix + 'orgs/' + value + '/classes?with-users=true').then(function(data) { defered.resolve(data); }); this.getClasses = function(value) { return defered.promise; } ; } ]); — user7789076, Jun 09 '16 at 11:26

Martin · Answer 1 · 2016-06-09T11:34:08.170

The easiest solution is to just enable caching in your service. This way all your controllers can access the method and the request is made only once.

return $http.get(urlprefix + 'orgs/' + value + '/classes?with-users=true', {cache: true});

This is very basic caching. You may need a more advanced strategy -- but this is your first step.

UPDATE

You may run into a race condition with simple $http caching if your second or third request are made before the first request completes. We can overcome this easily.

appServices.factory('classesService', function($http) {

    var orgsPromise;    

    return {
        getClasses: function(value) {

            if (orgsPromise) return orgsPromise; 

            orgsPromise = $http.get(urlprefix + 'orgs/' + value + '/classes?with-users=true');

            return orgsPromise;
        }
    };
});

erolkaya84 · Answer 2 · 2016-06-09T11:48:38.090

I believe you can do something like this;

var yourApp = angular.module('yourApp',[]);

yourApp.factory('classesService', function($http){
    var classes;  
    return {            
        getClasses: function(value) {
            if (!classes) {
                classes= $http.get(urlprefix + 'orgs/' + value + '/classes?with-users=true');
            }
            return classes;
        }
    };
});

yourApp.factory('Classes', ['classesService',function(classesService){
    return classesService.getClasses();
}]);

function yourControllerA($scope, Classes) {
    $scope.value="Hello from Controller A"; 
    $scope.sharedValue=Classes;
    ....
}

function yourControllerB($scope, Classes) {
    $scope.value="Hello from Controller B"; 
    $scope.sharedValue=Classes;
    ....
}

function yourControllerC($scope, Classes) {
    $scope.value="Hello from Controller C"; 
    $scope.sharedValue=Classes;
    ....
}

score 0 · Answer 3 · answered Jun 09 '16 at 11:30

0

You can use UI-ROUTER-EXTRAS "https://christopherthielen.github.io/ui-router-extras/#/home"

answered Jun 09 '16 at 11:30

Sombir Kumar

1,841
1
17
30

Angular pass data between controller

3 Answers3

Linked