Common JS file to share variable and methods between two controllers

Question

I have two pages where I have 1 common tab which contains some functionality. I have already code ready for that tab for 1 page and now I want to reuse all that code in my second page without duplicating the code.

For example, this is my code for page 1 of tab :

app.controller('myCtrl', ['$scope', '$window', 'myService', '$filter', function ($scope, $window, myService,$filter) {
 $scope.myObj = [
                          {id:1,location : null},
                          {id:2,location : null}
                ]

 //Lots of other variables here which are common and will be used in both the tabs and lots of methods which are also common 
}]);

$scope.myObj is heavily used in all methods which will be common in both the tabs so I would like to have 1 common js file in which I will keep all this common variables and methods so that I don't have to copy-paste all these methods in both the controller of 2 pages to avoid code duplication.

I found 1 example like below but I am not getting how to share methods and complex variables like my $scope.myObj:

How to share common logic between controllers?

You can use service and factory for re usability of the code. Refer to this link hope it helps: https://blog.thoughtram.io/angular/2015/07/07/service-vs-factory-once-and-for-all.html — Burhan, May 10 '17 at 06:30
Possible duplicate of http://stackoverflow.com/questions/21919962/share-data-between-angularjs-controllers — Sagar, May 10 '17 at 06:31
Possible duplicate of http://stackoverflow.com/questions/43693072/how-to-passing-data-from-one-controller-to-another-controller-using-angular-js-1 — Debug Diva, May 10 '17 at 08:59

Raman Sahasi · Answer 1 · 2017-05-10T06:44:49.897

You can simply use angular factory and use it among your controllers to get common variable values. This is one of many possible ways

Create a factory where you'll place common variable values

angular.module("commonmodule", [])
    .factory('sharedFactory', function () {
        var sharedVariable = 1;
        return {
            getSharedValue : function () {
                return sharedVariable;
            },
            setSharedValue : function (newValue) {
                sharedVariable =  newValue;
            }
        }   
}});

Just inject above factory in your controller and use them:

First Controller :

angular.module('maincontrollerone', ["commonmodule"])
    .controller('controllerone', ["$scope", "sharedFactory", function ($scope, sharedFactory) {
        sharedFactory.setSharedValue("someValueFromCtr1");
    }

Second Controller

angular.module('maincontrollertwo', ["commonmodule"])
    .controller('controllertwo', ["$scope", "sharedFactory", function ($scope, sharedFactory) {
        $scope.value1 = sharedFactory.getSharedValue();
        // value of $scope.value1 = 'someValueFromCtr1';
    }

Upvoted for your kind efforts towards helping me but can you show me in your factory how i would use my $scope.myObj? — I Love Stackoverflow, May 10 '17 at 06:36
@Learning that depends upon requirement. Why do you want to use $scope.myObj in factory? Do you just want to process value and get result or do you want to pass that data to another controller. In both the cases you can achieve that result using factory. — Raman Sahasi, May 10 '17 at 06:41

score 1 · Answer 2 · answered May 10 '17 at 06:31

Create an Angular Service service, maybe we can use myService. In the service, Make sure that you are not reseting the reference of the sharedObject by assigning new values to it. You have to change the value only.

Ex:in myService

app.service('myService', ['configService', '$http', '$log', '$q',
        function (configService, $http, $log, $q) {

  var self = this;
  var self.sharedObjects ={};
}

add all the objects that are shared as properties of myService.sharedObjects

DO NOT assign new value to myService.shareObjects, but u can set properties to myService.shareObjects like

 myService.shareObjects.prop1,myService.shareObjects.prop2

Common JS file to share variable and methods between two controllers

2 Answers2