How to add plain javascript functions to angular service the right way?

Question

I have created angular service where I store my older non-angular javascript functions:

myApp.service('utils', function() {
  return {
    fun1: function(a, b, c, d) {
      var x = a + b + c + d;
      return x;
    },
    fun2: function() {
      var x = fun1(1, 1, 1, 1);
      return x;
    }
  };
});

If I call utils.fun2() in controller:

myApp = angular.module('myApp', []);

myApp.controller('myController', ['$scope', 'utils', function($scope, utils) {
  $scope.someNumber = utils.fun2();
}]);

I get an error:

Error: fun1 is not defined

My question is, how to rewrite this that it will work (without polluting the global namespace)? What is the best approach for including existing Javascript functions to new angular app?

score 3 · Accepted Answer · edited May 23 '17 at 10:29

Try to use factory and understand difference between factory and service.

Your code will work with these modifications:

Live JSFiddle

angular.module('myModule', [])

.factory('utilsFactory', function() {
//function definition
var fun1 = function(a, b, c, d) {
    var x = a + b + c + d;
    return x;
};
//function definition
var fun2 = function() {
    var x = fun1(1, 1, 1, 1);
    return x;
};
//return functions after the injection
return {
    fun1: fun1,
    fun2: fun2
};
})

.controller('myController', ['$scope', 'utilsFactory', function($scope, utilsFactory) {
  $scope.someNumber = utilsFactory.fun2();
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app='myModule' ng-controller='myController'>
  someNumber  = {{ someNumber }}
</div>

Thanks! :) Code above does exactly what I was looking for! Now functions inside factory are behaving as they would in the normal "global" environment, that is, functions can freely call one another inside angular factory. I think your code is also an answer to a related stackoverflow question: http://stackoverflow.com/questions/16753825/angularjs-share-functions-inside-service — noviewpoint, Mar 17 '15 at 17:46

score 0 · Answer 2 · answered Mar 14 '15 at 10:01

You have the right idea.

The problem is that with services you are injecting the exact function passed to the definition. So you need to call the injected function first to see those methods. You could change the service definition as follows too:

myApp.service('utils', function() {
this.fun1 = function(a, b, c, d) {
  var x = a + b + c + d;
  return x;
};
this.fun2 = function() {
  var x = fun1(1, 1, 1, 1);
  return x;
};
});

Also, you could change utils from 'service' to 'factory' and your code would work.

Read up on the differences between services and factories in the angular docs.

With the above code I still get the same error. I will read up on the differences between services and factories, thank you. — noviewpoint, Mar 14 '15 at 10:30

score 0 · Answer 3 · answered Mar 14 '15 at 10:47

0

Try to set up your service like this:

myApp.service('utils', function() {

    var fun1 = function(a, b, c, d) {
        var x = a + b + c + d;
        return x;
    };

    var fun2 = function() {
        var x = fun1(1, 1, 1, 1);
        return x;
    };

    return {
        fun1: fun1,
        fun2: fun2
    };
});

answered Mar 14 '15 at 10:47

DonJuwe

4,477
3
34
59

This is incorrect, you should either use `factory` or attach the functions to `this` – Chandermani Mar 14 '15 at 12:01

How to add plain javascript functions to angular service the right way?

3 Answers3