AngularJS - different ways to create controllers and services, why?

Question

I keep seeing different examples of creating controllers and services in AngularJS and I'm confused, can anyone explain to me the differences between the two approaches?

app.service('reverseService', function() {
    this.reverse = function(name) {
        return name.split("").reverse().join("");
    };
});

app.factory('reverseService', function() {
    return {
        reverse : function(name) {
            return name.split("").reverse().join("");
        }
    }
});

And also a controller example:

function ExampleCtrl($scope) {
    $scope.data = "some data";
}

app.controller("ExampleCtrl", function($scope) {
    $scope.data = "some data";
}

A question very similar to http://stackoverflow.com/q/13362921/1418796 — pkozlowski.opensource, Jan 06 '13 at 17:30
I couldn't find the answer, that's why I raised my own question, given the title of that question and my question, I believe my question should stand to aid others. — Neil, Jan 06 '13 at 17:57
See also http://stackoverflow.com/questions/13762228/confused-about-service-vs-factory — Mark Rajcok, Jan 08 '13 at 04:02

score 20 · Accepted Answer · edited May 23 '17 at 12:01

The first one will pollute the global namespace, which is not what you want in the long run.

function ExampleCtrl($scope){
    $scope.data = "some data";
}

The second one scopes the Controller to that module instance. It makes it also injectable. Better still is using the array notation (as below), since this will survive minification.

app.controller("ExampleCtrl", ['$scope', function($scope){
    $scope.data = "some data";
}]);

The difference between an (angular) service and factory seems quite small. A service wraps a factory, which uses $injector.instantiate to initialize the service.

How can you add Factories on the parameters? – Ej DEV Jan 16 '14 at 16:32 — Ej DEV, Jan 16 '14 at 16:32

score 0 · Answer 2 · answered Jan 12 '15 at 13:33

My preferred way of creating controllers and directives is as following:

/**
* SomeCoolModule.controller.js
*/

(function(){
'use strict';

    angular.module('app.modals.SomeCoolModule').controller('SomeCoolModuleController', SomeCoolModuleController);

    AddFlowCurveModalController.$inject =
        [
            '$scope',
            '$filter',
            '$log',
        ];

    function SomeCoolModuleController($scope, $filter, $log) {
        /* controller body goes here */
    }
})();

PS: no global namespace pollution is taking place above due to IIFE.

I do the same with services also :) – Dan Ochiana Jan 12 '15 at 13:42 — Dan Ochiana, Jan 12 '15 at 13:42

AngularJS - different ways to create controllers and services, why?

2 Answers2

Linked