Mutualize Code

Response to http://stackoverflow.com/questions/33599353/how-to-reuse-functions-in-an-angularjs-factory/33599891#33599891

by Julien Roy

HTML

<div ng-app="app.datastore" ng-controller="StoreCtrl">Venues
    <ul>
        <li ng-repeat="v in venues">{{v.name}}</li>
    </ul>Prizes
    <ul>
        <li ng-repeat="p in prizes">{{p.name}}</li>
    </ul>
</div>

JavaScript

angular.module('app.datastore', [])
    .controller('StoreCtrl', function ($scope, DataStore) {
    var venueStore = DataStore.getStore('venue');

    venueStore.createItem({
        id: venueStore.list().length + 1,
        name: 'myVenue' + (venueStore.list().length + 1)
    });
    $scope.venues = venueStore.list();

    var prizeStore = DataStore.getStore('prize');

    prizeStore.createItem({
        id: prizeStore.list().length + 1,
        name: 'myPrize' + (prizeStore.list().length + 1)
    });
    $scope.prizes = prizeStore.list();
})
    .factory('DataStore', function () {

    var getStoreFunction = function (storeName) {
        var store = angular.fromJson(window.localStorage[storeName] || '[]');

        function persist() {
            window.localStorage[storeName] = angular.toJson(store);
        };

        return {
            list: function () {
                return store;
            },

            getItem: function (id) {
                return store.find(function (elem) {
                    return elem.id === id;
                });
            },

            createItem: function (item) {
                store.push(item);
                persist(store);
            }
        }
    };

    return {
        getStore: getStoreFunction
    };
});