How to inject a third party library to an angular.js service

Question

I am having trouble while trying to load the angular-cache library to my service. I used bower to add angular-cache to my project and it is successfully added. When I debug the service code on Chrome I see in the "Networks" tab that angular-cache is loaded:

Name: angular-cache.js
Method: GET
Status: 200
Type: script
Initiator: require.js:1901
Size: 6,5 kb
Time: 16 ms

There is a config.js file that I load all my libraries. This line is for angular-cache:

'angular-cache': '../bower_components/angular-cache/dist/angular-cache',

and this is the line inside shim:

'angular-cache': ['angular'],

And this is the service:

 define(
    [ 'angular', 'services-module'],
    function(angular, services) {
        services.factory(
          'MyService',
           [
            "$location",
            "$interval",
            "MyOtherService",
            "CacheFactory",
            function($location, $interval, otherService, cacheFactory) {

               var service = {
                    myCachingFunction : function(parameters){

                    }, 
                    getCache : function(cacheId) {

                    }
                }
                return service;
            } ]);
});

This is the error I get:

Error: [$injector:unpr] Unknown provider: CacheFactoryProvider

This is the github page of the angular-cache. What am I missing?

Is CacheFactoryProvider the right casing? Providers are case sensitive. — Wesley Skeen
– Wesley Skeen, Commented Jun 5, 2015 at 10:48
@WesleySkeen In angular-cache documentation they use it like that. — brainmassage
– brainmassage, Commented Jun 5, 2015 at 10:52
I believe that in addition to what Ioana Cucuruzan writes in her answer, you should also shim the angular-cache to depend on Angular, so that they are loaded in the correct order. If that doesn't work, you should probably add more details of your configuration in the question. You may also want to take a look at angular-require-lazy. — Nikos Paraskevopoulos
– Nikos Paraskevopoulos, Commented Jun 5, 2015 at 10:58
@NikosParaskevopoulos I updated my post with the line of shim. Although I am not sure I did it correctly — brainmassage
– brainmassage, Commented Jun 5, 2015 at 11:11
I believe the shim should be like: 'angular-cache': { deps: ['angular'] },... — Nikos Paraskevopoulos
– Nikos Paraskevopoulos, Commented Jun 5, 2015 at 11:15

Johnny Ha · Accepted Answer · 2015-06-05 11:40:48Z

1

Have you tried this, I guess that this is your service.js:

define(
['angular', 'services-module'],
function(angular, services) {
    services.factory(
      'MyService',
       [
        "$location",
        "$interval",
        "MyOtherService",
        "CacheFactory",
        function($location, $interval, otherService, cacheFactory) {

In your app.js:

define(
['angular', 'angular-cache'],
function(angular) {
    var myApp = angular.module('myApp', [ 'ngResource', 'app.controllers', 'app.directives', 'app.services', 'app.filters', 'app.routes', 'app.interceptors', 'angular-cache' ]);

In config.js:

    shim: {
      'angular-cache': {
         deps: ['angular']
       }
    }

I'm guessing that you are using Require with Angular.

edited Jun 5, 2015 at 11:40

answered Jun 5, 2015 at 11:09

Johnny Ha

6335 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

brainmassage Over a year ago

Yes. But this is not working: Unknown provider: angular-cacheProvider

Johnny Ha Over a year ago

This is yours service, but where is your app? Something like this: angular.module('', []) You need to load module: angular.module('myApp', ['angular-cache']) And use my code above. I have update the code

brainmassage Over a year ago

I have this line in another file called app.js: var myApp= angular.module('myApp', [ 'ngResource', 'app.controllers', 'app.directives', 'app.services', 'app.filters', 'app.routes', 'app.interceptors' ]);

Johnny Ha Over a year ago

You need to tell you application to use that module. In your app.js: var myApp = angular.module('myApp', [ 'ngResource', 'app.controllers', 'app.directives', 'app.services', 'app.filters', 'app.routes', 'app.interceptors', 'angular-cache' ]);

Ioana Cucuruzan · Accepted Answer · 2015-06-05 10:49:08Z

0

You want to include is as a module like this:

define(
    [ 'angular', 'services-module', 'angular-cache'],
    function(angular, services, cache) {
...

answered Jun 5, 2015 at 10:49

Ioana Cucuruzan

9231 gold badge10 silver badges21 bronze badges

Collectives™ on Stack Overflow

How to inject a third party library to an angular.js service

2 Answers 2

4 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Related