CODEWITHSUNDEEP
javascriptangularjs
I Love Stackoverflow
I Love Stackoverflow

Reputation: 6868

Common JS file to share variable and methods between two controllers

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?

Upvotes: 1

Views: 99

Answers (2)

Raman Sahasi
Raman Sahasi

Reputation: 31851

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';
    }

Upvotes: 2

Jins Peter
Jins Peter

Reputation: 2469

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

Upvotes: 1

Related Questions