Do not understand the controllers in Angular JS

Question

This is a question I am not used to ask, but I feel like this is the only way to understand what I am struggling with. As shown below, there are two functions app.controller() and app.factory(), to me both of them seems to be equal even though if I delete one part the function does not perform its intended task.

Link to plunker: click here (Relevant file is script.js)

What is the difference between these two functions, why cant I have only one of them? I know there must be a simple explanation.

    app.controller('MainCtrl', ['$scope', 'ItemsService', function ($scope, ItemsService) {
    $scope.newItem = { PlateNumber: '', Description: '', Price: 0 };
    $scope.currentItem = null;

    $scope.items = ItemsService.getItems();

    $scope.addItem = function () {
        ItemsService.addItem(angular.copy($scope.newItem));
        $scope.newItem = { PlateNumber: '', Description: '', Price: 0 };
    };

    $scope.updateItem = function (id) {
        ItemsService.updateItem(id);
    };

    $scope.removeItem = function (id) {
        ItemsService.removeItem(id);
    };
}]);

vs

app.factory('ItemsService', ['$firebase', 'FIREBASE_URI', function ($firebase, FIREBASE_URI) {
    var ref = new Firebase(FIREBASE_URI);
    var items = $firebase(ref);

    var getItems = function () {
        return items;
    };

    var addItem = function (item) {
        items.$add(item);
    };

    var updateItem = function (id) {
        items.$save(id);
    };

    var removeItem = function (id) {
        items.$remove(id);
    };

    return {
        getItems: getItems,
        addItem: addItem,
        updateItem: updateItem,
        removeItem: removeItem
    }
}]);

While the two seem similar they are not, did you try reading the angular docs? you must have a controller, you don't need a factory... https://docs.angularjs.org/guide/providers more links: http://stackoverflow.com/questions/14324451/angular-service-vs-angular-factory another: http://jsfiddle.net/k3phygpz/ — omarjmh, Apr 07 '16 at 21:36
Services are singletons, controllers are not. That is a start. — Rob, Apr 07 '16 at 21:49

score 1 · Accepted Answer · answered Apr 07 '16 at 21:51

Controllers are only instantiated when you need one, (you use ng-controller or controllerAs). So every time you switch to a different route or page, Angular instantiates a controller (it can be the same one that's cleaned up, for example if you refresh the page.)

Angular providers, of which there are a few main kinds - Factory being one of them, are a way to keep data around for the lifetime of the app or even used to pass data between different controllers. The scope of your question is more like: Provider vs Controller, not Factory(which is one type) vs Controller.

In your example above, you have ONE controller, what if you have many? How can you pass data or utility functions to many controllers without writing the same code over and over again? With Providers for one!

Here are some good links for you to check out:

Angular Provider Docs

Blog post by Tyler McGinnis explaining the above further

JSFiddle with Example of a Factory vs a Service

Do not understand the controllers in Angular JS

1 Answers1