service vs controller vs external js to put frequently used methods in angularjs

Question

I have an angularjs app, which has several controllers with several viewes. When I started coding the app there were few methods(of similar kind), which were used in more than places, initially it looked OK to me to put those methods where ever needed (two or three controllers). But as my application grew I started noticing the code redundancy issue, as the method was required at more places. Definitely this was my lack of experience which lead to this issue.

Now I decided to remove this redundant code from my app. I found the following options:

1. Service way: Remove the redundant code and put it in a new service and include the service all the places where I need the functionality.

2. External JS: Putting the redundant code in an external js file and just call the required method.

3. Leave the code as it is.

But here I want to mention that the redundant code I am talking is not very tight coupled and can be added and removed any where with a very little effort.

Now, what I want to know is from the above options, which one should I choose? OR are there much better options available for this issue(may be provided by angularJS itself).

Edit Basic examples of code:as I said

$scope.showSomething = function (show, ele) {
    //show or hide the ele (element) based on value of show 
}

Answer 1

You are using angular so surely you want to make your app structured according to MVC. what kind of MVC pattern your app will follow if your code is put anywhere in a js file like anything. I would recommend putting your code inside a service. that's the angular way of reducing redundancy. Also you have another option to set the function to the $rootscope here

Answer 2

I'm not sure about your case, but I had similar situation: I had a number of functions which provide validation functionality. I created service:

'use strict';


angular.module('myApp')
  .factory('UtilService', ['Env', 'IBANChecker', function(Env, IBANChecker) {

 var validateCallbacks = {
      checkAddress: function (address) {
        return address.action != 'delete';
      },
      validateIBAN: function (iban) {
        return !iban || IBANChecker.isValid(iban);
      },
.....
      validateYCode: function(id) {
        return YCodeChecker.isValid(id);
      }
    };

    return {
      /**
       * Factory with callbacks for 'validate' directive.
       * 0 arguments -- get all callbacks, over wise see @validateCallbacks object to get specific callbacks.
       * if wrong callback name requested -> it will be ignored
       * @returns {object} -- call requested callbacks.
       */
      getValidateCallbacks : function() {
        if(arguments.length) {
          var result = {};
          _.each(arguments, function(argument){
            if(validateCallbacks[argument]) {
              result[argument] = validateCallbacks[argument];
            }
          });
          return result;
        } else {
          return validateCallbacks;
        }
      }
    };

  }]);

And code in controller looks like:

      var validateCallbacks = UtilService.getValidateCallbacks('validateText', 'validateNumber');

      _.each(validateCallbacks, function(callback, key) {
        $scope[key] = callback;
      });

Answer 3

I tend to use factories, specifically because factories can depend on other factories and logical modules can be defined. Consider the psuedo code below.

.controller('HisController', function (UtilityService) {
    $scope.foo = UtilityService.foo;
})
.controller('HerController', function (UtilityService) {
    $scope.foo = UtilityService.foo;
})
.factory('UtilityService', function (SomeOtherService) {
     var service = {
        foo: foo,
        bar: bar,
     }
     return service
     ///////
     function foo(a) {
         return a.substring(0,1);
     }
     function bar(a) {
         return SomeOtherService.doStuff(service.foo(a)); 
     }
})