Integrating helper functions in AngularJS - angularjs

Question

So, I've just began learning Angular and my question is what ways (or the best practices) are there for injecting helper functions into AngularJS? I often need to include functions to assist my controller, but I have read online that the controller should hold as little logic as possible, which means they should be injected into the controller and declared in the module (fat module, skinny controller).
As such, I have been primarily injecting functions like this:
$provide.value
$provide.value('MySQLtoJS', function(datetimeString) {
var t = datetimeString.split(/[- :]/);
var d = new Date(t[0], t[1]-1, t[2], t[3], t[4], t[5]);
return d;
});
This uses the $provide service to create a value that can be injected in my controller. However, for more elaborate functions, such as those that require an injectable, I have been using this:
Factory provider
.factory('convertMySQLToJS', ['moment', function(moment) {
return function(arrayInput) {
if (Array.isArray(arrayInput)) {
for (var i = 0; i < arrayInput.length; i++) {
var t = arrayInput[i].begin_datetime.split(/[- :]/);
var start = new Date(t[0], t[1]-1, t[2], t[3], t[4], t[5]);
arrayInput[i].begin_datetime = start;
var t = arrayInput[i].end_datetime.split(/[- :]/);
var end = new Date(t[0], t[1]-1, t[2], t[3], t[4], t[5]);
arrayInput[i].end_datetime = end;
//Also create the moment message
if (arrayInput[i].begin_datetime >= new Date()) {
arrayInput[i].message = 'Begins at ' + moment(arrayInput[i].begin_datetime).format('MMMM Do YYYY, h:mm a') + ' and likely ends at ' + moment(arrayInput[i].end_datetime).format('MMMM Do YYYY, h:mm a');
}
else {
arrayInput[i].message = 'Began at ' + moment(arrayInput[i].begin_datetime).format('MMMM Do YYYY, h:mm a') + ' and likely ended at ' + moment(arrayInput[i].end_datetime).format('MMMM Do YYYY, h:mm a');
}
}
return arrayInput;
}
}
}])
However, factories are often used for their service and properties (like $http), or so I've been told. So I've been recently suggested by some people that I should be including them in the run configuration block (which seems a bit weird to me) by using $rootScope and giving it that property for the function I need. Since I'm new to Angular and I've found documentation rather lacking, I'm wondering how am I supposed to inject helper functions correctly into Angular, if there is a correct way?

Answer 1

The correct way in Angular is to wrap helpers into services and inject them when needed. It is a good idea to join several similarly themed methods into single helper service (think of it as of utility class).
It can be either factory, or value, or constant. The latter is preferable for such things because it can be also used within config blocks. They are interchangeable in other respects, as long as the factory function consists of return statement and doesn't use other dependencies. Since this one
app.factory('mysqlHelper', function (moment) {
return {
MySQLtoJS: function(datetimeString) { ... },
convertMySQLToJS: return function(arrayInput) { ... }
};
});
uses moment dependency, factory is the case for it.
Using globals (either on global JS scope or $rootScope) is considered bad practice:
Of course, global state sucks and you should use $rootScope sparingly,
like you would (hopefully) use with global variables in any language.
In particular, don't use it for code, only data. If you're tempted to
put a function on $rootScope, it's almost always better to put it in a
service that can be injected where it's needed, and more easily
tested.
And thus it provides a reasoning for that: testability. Services are testable. They can be unit-tested, they can be mocked. That is where Angular dependency injection shines.

Answer 2

Factories/services are certainly a way to do something like this. If it is always related to service activities such as sanitizing your data after retrieval, placing it in a service (or base service) works just fine. However, I find that always injecting services is a bit heavy when I have one-off helper functions that I need to pass around my app. I've ended up placing a special object on angular that holds my helper functions.
app.run([function() {
angular.UTIL = angular.UTIL || {};
var util = {
coolFunction: function(fieldName) {
return fieldName;
}
}
angular.extend(angular.UTIL, util);
}]);
This can then be called throughout your app:
var getField = angular.UTIL.coolFunction("fieldName");
As far as best practice goes with helpers such as these, it is best if you follow a few rules:
The helper functions are global and can easily be used throughout the codebase in a variety of applications and patterns
They cannot be easily translated into a directive and do not directly manipulate the DOM
They are helpers, not functionality or business logic
They replace utility functions that have been copied into multiple files
They are not bound to a specific scope