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.
angular.module('foo.bar', ['satellizer'])angular.module('foo.bar', ['satellizer']).config($authProvider){ $authProvider.provider({ })}. Then use it in your controller. Like$auth.authenticate(provider)