How to use dependency in AngularJS controller

Question

I am making a MEANJS application. I have an AngularJS controller that I would like to use Snoocore in.

https://snoocore.readme.io/

'use strict';


angular.module('core').controller('HomeController', ['$scope', 'Authentication', 'snoocore',function($scope, Authentication, Snoocore) {
        // This provides Authentication context.
        $scope.authentication = Authentication;

        var reddit = new Snoocore({
            userAgent: 'test@documentation',
            oauth: {
                type: 'implicit', // required when using implicit OAuth
                mobile: true, // defaults to false.
                key: '', // Only requires the key! No secret needed.
                redirectUri: 'redirectUri set for your app',
                scope: [ 'read', 'flair', 'identity' ] // make sure to set all the scopes you need.
            }
        });
    }
]);

I have imported Snoocore via Bower. It is located in

public/lib/snoocore

The controller is located in

public/modules/core/controllers/home.client.controller.js

Right now what I am doing is not working. And I am at a bit of a loss. I'm still very new to Angular and the MEANJS system in general.

The console outputs the following

Error: [$injector:unpr] Unknown provider: snoocoreProvider <- snoocore
http://errors.angularjs.org/1.2.28/$injector/unpr?p0=snoocoreProvider%20%3C-<section data-ui-view="" class="ng-scope">noocore
    at http://localhost:3000/lib/angular/angular.js:78:12
    at http://localhost:3000/lib/angular/angular.js:3801:19
    at Object.getService [as get] (http://localhost:3000/lib/angular/angular.js:3929:39)
    at http://localhost:3000/lib/angular/angular.js:3806:45
    at getService (http://localhost:3000/lib/angular/angular.js:3929:39)
    at invoke (http://localhost:3000/lib/angular/angular.js:3956:13)
    at Object.instantiate (http://localhost:3000/lib/angular/angular.js:3976:23)
    at http://localhost:3000/lib/angular/angular.js:7315:28
    at chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:1544:22
    at http://localhost:3000/lib/angular/angular.js:6711:34

Answer 1

I added the tag

<script src="/lib/snoocore/dist/Snoocore-browser.min.js"></script>

to my HTML head and changed my controller to look like the following.

'use strict';


angular.module('core').controller('HomeController', ['$scope', 'Authentication' ,function($scope, Authentication) {
        // This provides Authentication context.
        $scope.authentication = Authentication;

        var reddit = new Snoocore({
            userAgent: 'test@documentation',
            oauth: {
                type: 'implicit', // required when using implicit OAuth
                mobile: true, // defaults to false.
                key: '', // Only requires the key! No secret needed.
                redirectUri: 'redirectUri set for your app',
                scope: [ 'read', 'flair', 'identity' ] // make sure to set all the scopes you need.
            }
        });

    }
]);

Answer 2

If you are using de oficial library, you can't inject the dependence as a normal AngularJS module because it does not have a AngularJS provider.

I think you should use the library like a normal JS library:

 var Snoocore = window.Snoocore;

'use strict';

angular.module('core').controller('HomeController', ['$scope', 'Authentication', function($scope, Authentication) {
        // This provides Authentication context.
        $scope.authentication = Authentication;

        var reddit = new Snoocore({
            userAgent: 'test@documentation',
            oauth: {
                type: 'implicit', // required when using implicit OAuth
                mobile: true, // defaults to false.
                key: '', // Only requires the key! No secret needed.
                redirectUri: 'redirectUri set for your app',
                scope: [ 'read', 'flair', 'identity' ] // make sure to set all the scopes you need.
            }
        });
    }
]);

Try this and I hope solve your problem.

Answer 3

Snoocore is not an angular module so that you cannot have it as an angular dependency. Either create an angular service/factory to wrap the Snoocore or use global variable window.Snoocore . Also make sure you included the Snoocore source file in your HTML.