AngularJS - Am I missing something in this Factory injection?

Question

I'm using the $cacheFactory to save some data in my cache and everything was working very good until today that I've decided to separate my cacheFactory into a single class called MyFactory.js. Now I'm getting the error:

TypeError: tableCacheFactory is not a function

Because it's taking the injection as a simple method or something, does anybody know if I'm missing something here?

main.js

angular.module('main-component',
    ['my-component',
    'my-cache-factory'
    ]);

MyFactory.js

angular.module('my-cache-factory', [])

    .factory('tableCacheFactory', [
        '$cacheFactory', function ($cacheFactory) {
            return $cacheFactory('my-cache');
        }
    ]);

MyService.js

angular.module('my-component', [])

    .factory('my-component-service',
        ['$rootScope',
        '$http',
        '$q',
        'tableCacheFactory',
        function ($rootScope, $http, $q, tableCacheFactory) {

            function getMyData (prodNro) {

                var deferred = $q.defer();
                var promise = deferred.promise;

                var dataCache = tableCacheFactory.get('tablecache');

                if (!dataCache) {
                    dataCache = tableCacheFactory('tablecache');  // TypeError: tableCacheFactory is not a function
                }

                var summaryFromCache = dataCache.get('tablecache' + prodNro);

                if (summaryFromCache) {
                    deferred.resolve(summaryFromCache);

                } else { 

                    $http({
                        method: ...
                        data : ...
                        url: ...
                    }).success( function (data, status, headers, config) {

                        var objectResult = {
                            "data": data,
                            "status": status,
                            "headers": headers,
                            "config": config
                        }

                        if (data.response) {
                            // Save to cache
                            dataCache.put('tablecache'+prodNro, objectResult);
                        }

                        deferred.resolve(objectResult);

                    }).error(function (data, status, headers, config) {

                        ...
                    });

                }

                return promise;

            }

Answer 1

The tableCacheFactory was wrapped inside my-cache-factory module. So you need to inject the module first into your my-component module before using it. So it should be like this:

angular.module('my-component', ['my-cache-factory'])

Answer 2

you defined your cache factory in the module my-cache-factory, but then never injected that module to your main component-service module. Do angular.module('my-component', ['my-cache-factory']) instead.

Answer 3

You seem to have some misconception about how the $cacheFactory works.

In var dataCache = tableCacheFactory.get('tablecache'); you are using it like it was a initialized Cache object containing another Cache object.

On the other hand dataCache = tableCacheFactory('tablecache'); uses it like it was the $cacheFactory itself.

And both of them try to access record 'tablecache' in something that I think should already be the tableCache itself.

The error is exactly what it says it is. As per the docs , calling $cacheFactory('my-cache'); does not return a function to create more caches. It returns a $cacheFactory.Cache object which has methods like put(key, value) and get(key) . Use those instead.

I'd change the whole structure of the caching (note that the name of the factory is changed) :

.factory('tableCache', [
    '$cacheFactory', function ($cacheFactory) {
        //Return what the name of the factory implies
        return $cacheFactory('tablecache');
    }
]);

And then use that without needing to do more weird 'tablecache' namespacing

function getMyData (prodNro) {
    ...
    var summaryFromCache = tableCache.get(prodNro);
    ...
    tableCache.put(prodNro, objectResult);
}