AngularJs using javascript functions in whole app

Question

I have some main functions I use it here and there in my webApp. These functions are pure JS, no AngularJs related and I want to be able to use them everywhere in my app, because they are helper functions to execute simple tasks.

This is an example of a function I have:

function _removeArray(obj, id) { //Remove object from array
    for(d=0; d<obj.length;d++){
        if(obj[d].id == id){
            obj.splice(d,1);
            return obj;
        }
    };
};

I know we can have some main functions declared inside a service/factory, but is this the best way to declare/use this type of function? Is there a better/corret way to do it?

Answer 1

What I often do is create a global "helper" object:

var h = (function helpers(){
  var output = {};
  output.el = function(id){
    return document.getElementById(id);
  }
  return output;
}());

h.el("myElement");

If you have a whole bunch of functions and variables hanging out in the global scope then that's not a great idea -- but I think having one, with all the functions and variables nested inside it, is extremely useful.

Answer 2

If you don't use any module system with module bundler (like webpack, browserify) or module loader (like systemjs) then yes. For angular1 it is main way to work.

In my app I just created factories like arrayUtils, numberUtils, domUtils, dateUtils and inject them when I need any function from it.

Example:

date-utils-module.js

(function () {
  'use strict';

  /* @ngdoc object
   * @name components.dateUtils
   * @description
   *
   */
  angular
    .module('components.dateUtils', [
      'angularMoment'
    ]);
}());

date-utils-factory.js

(function () {
  'use strict';

  /**
   * @ngdoc service
   * @name components.dateUtils.factory:dateUtils
   *
   * @description
   *
   */
  angular
    .module('components.dateUtils')
    .factory('dateUtils', dateUtilsFactory);

  function dateUtilsFactory(moment) {
    var dateUtils = {
      range: range
    };

    return dateUtils;

    /**
     * Возвращает строку, содержащую текстовое представления диапазона дат.
     * Например (считая, что сейчас 2015 год):
     * <pre>
     * чт, 31 декабря, 17:30 – ∞
       ∞ – пт, 1 января 2016, 21:30
      чт, 31 декабря, 17:30 – пт, 1 января 2016, 09:00
      чт, 31 декабря, 17:30 – 21:30
    * </pre>
    * @param date1 первая дата
    * @param date2 вторая дата
    *
    * @returns строка с диапазоном дат.
    */
    function range(date1, date2) {
      var now = moment(),
          m1 = moment(date1 || null),
          m2 = moment(date2 || null),
          t1 = '∞',
          t2 = '∞';

      if (m1.isValid()) {
        // t1 = m1.calendar();
        t1 = m1.isSame(now, 'year') ? m1.format('dd, D MMMM, HH:mm') : m1.format('dd, D MMMM YYYY, HH:mm');
      }

      if (m2.isValid()) {
        // t2 = m1.isSame(m2, 'day') ? m2.format('HH:mm') : m2.calendar();
        t2 = m2.isSame(m1, 'day') ? m2.format('HH:mm') :
            m2.isSame(now, 'year') ? m2.format('dd, D MMMM, HH:mm') : m2.format('dd, D MMMM YYYY, HH:mm');
      }

      return t1 + ' – ' + t2;
    }

  }

}());

Answer 3

You could use a singleton, which is what many JS libraries (such as lodash and Angular itself) do, although this is basically what factories/services allow you to do.

Answer 4

It wasn't entirely clear if your application is a pure Angular app. If so I recommend you use the standard Angular service or factory pattern. If your application is some kind of hybrid and you are running parts of your app outside the Angular framework then you can just declare all your described functionality using one of the JavaScript module patterns.

var myModule = (function() {
  // private properties and functions
  var privateProperty;
  // public properties and functions
  return {
    publicProperty: ''
  };
})();

Yes you have created a global variable, but you have encapsulated all your functionality in a global object.