0

i have a project that consists of modular angularjs sub apps. Sub apps reside in their own folders relative the root app folder. The problem is that i want to include an external module (satellizer) via bower. The module has downloaded correctly and the bower components get injected to the html via gulp/wiredep. All good so far.

The structure of an app with a controller is as follows:

(function () {
'use strict';

angular
    .module('foo.bar')
    .filter('orderObjectBy', function () {
        return function (input, attribute) {
            if (!angular.isObject(input)) return input;

            var array = [];
            for (var objectKey in input) {
                array.push(input[objectKey]);
            }

            array.sort(function (a, b) {
                a = parseInt(a[attribute]);
                b = parseInt(b[attribute]);
                return a - b;
            });
            return array;
        }
    })
    .controller('FoobarController', FoobarController);

FoobarController.$inject = ['logger', '$q', 'dataservice', '$stateParams', 'fooBarHandler', '$location', 'satellizer'];
/* @ngInject */
function FoobarController(logger, $q, dataservice, $stateParams, fooBarHandler, $location, $authProvider) {
    var vm = this;
    fooBarHandler.includeIn(vm, dataservice);

    vm.authorize = authorize;


    }        
}

Problem is that angular keeps saying that satellizer is an unknown provider (Unknown provider: satellizerProvider <- satellizer <- FooBarController) for the sake of brevity i omitted a lot of code from the controller implementation.

i also tried to wire up the dependency via array dependency like so:

 angular
    .module('foo.bar', ['satellizer'])
    .filter('orderObjectBy', function () {
        return function (input, attribute) {
            if (!angular.isObject(input)) return input;

            var array = [];
            for (var objectKey in input) {
                array.push(input[objectKey]);
            }

            array.sort(function (a, b) {
                a = parseInt(a[attribute]);
                b = parseInt(b[attribute]);
                return a - b;
            });
            return array;
        }
    })

but still no luck.

5
  • try this one angular.module('foo.bar', ['satellizer']) Commented Feb 10, 2016 at 11:53
  • I hope you imported satellizer in your html file as well. Commented Feb 10, 2016 at 11:56
  • yes i imported satellizer in my html file. Gets wired up via gulp build based on bower.json. i also tried including satellizer via array dependency but then the satellizer variable is undefined Commented Feb 10, 2016 at 11:58
  • Did you config it? As in angular.module('foo.bar', ['satellizer']).config($authProvider){ $authProvider.provider({ })}. Then use it in your controller. Like $auth.authenticate(provider) Commented Feb 10, 2016 at 12:05
  • No i didn't config it before but i tried it based on your comment, still no luck. The $auth varaible still is undefined. Commented Feb 10, 2016 at 12:17

1 Answer 1

2

Got it working. After digging trough the source of satellizer i realized i needed to inject from a provider. Satellizer has defined it's provider as '$auth'. So after i changed the line

FooBarController.$inject = ['logger', '$q', 'dataservice', '$stateParams', 'fooBarHandler', '$location', 'satellizer];

to

FooBarController.$inject = ['logger', '$q', 'dataservice', '$stateParams', 'fooBarHandler', '$location', '$auth];

it worked

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.