Angularjs [$injector:unpr] Unknown provider external module - angularjs

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.

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

Related

Trying to test a factory and I am having injection issues

I am rather new to angular and testing in general. I am trying to set up a basic test where I see if the object is defined before I start trying to test anything else.
I am getting this error:
Error: [$injector:unpr] Unknown provider: $stateParamsProvider <-
$stateParams <- Form
However when I try and do this basic test on other test files this error does not show up.
Factory
angular.module('omnibyte_inspect_web.objects')
.factory('CommonQuestions', ['common_questions_factory', 'Form', '$rootScope',
function (common_questions_factory, Form, $rootScope) {
// Ctor
function CommonQuestions(data) {
var keys = Object.keys(data);
for (var i = 0; i < keys.length; i++) {
this[keys[i]] = data[keys[i]];
}
};
CommonQuestions.prototype.Select = function () {
this.Id = guid();
Form.CurrentForm().AddCommonQuestion(angular.copy(this));
};
CommonQuestions.prototype.Remove = function () {
common_questions_factory.delete(this.Id).then(function () {
window.location.reload();
});
};
// Static Methods
CommonQuestions.Current = function () {
return $rootScope.config_info;
};
CommonQuestions.GetAll = function (callback) {
common_questions_factory.get().then(function (data) {
var collection = [];
for (var i = 0; i < data.length; i++) {
collection.push(new CommonQuestions(data[i]));
}
callback(collection);
});
};
return CommonQuestions;
}]);
Test File
describe('CommonQuestions Test', function () {
beforeEach(module('omnibyte_inspect_web.objects'));
var common_questions_factory, $rootScope, CommonQuestions, Form;
beforeEach(inject(function (_common_questions_factory_, _Form_, _$rootScope_, _CommonQuestions_) {
common_questions_factory = _common_questions_factory_;
Form = _Form_;
$rootScope = _$rootScope_;
CommonQuestions = _CommonQuestions_;
spyOn(CommonQuestions, 'GetAll');
spyOn(common_questions_factory, 'get');
spyOn(CommonQuestions, 'Current');
}));
it('should have CommonQuestions be defined', function () {
expect(CommonQuestions).toBeDefined();
});
});
Edit
Having the same issue on multiple files, but it seems to be coming from my Form file. Which is:
Form
angular.module('omnibyte_inspect_web.objects')
.factory('Form', ['forms_factory', 'authentication_service', 'common_questions_factory', 'formdata_factory', 'missinginformation_factory', '$stateParams', 'Question', 'LocationContact', '$rootScope', '$ionicPopup', '$state',
function (forms_factory, authentication_service, common_questions_factory, formdata_factory, missinginformation_factory, $stateParams, Question, LocationContact, $rootScope, $ionicPopup, $state) {
Second Edit
After putting this module beforeEach(module('ui.router')); in my test file I get:
Error: [$injector:unpr] Unknown provider: $ionicPopupProvider <-
$ionicPopup <- Form
After putting this module beforeEach(module('$ionic')); in my test file I get the errors to go away; however, I get Expected undefined to be defined. This test has worked in all of my other files.
$stateParams is a service in angular-ui/ui-router. make sure ui-router is included in your karma.conf.js files.
Found the solution. I needed to add these modules to the test file:
beforeEach(module('omnibyte_inspect_web.objects'));
beforeEach(module('ui.router'));
beforeEach(module('ionic'));
And in my karma.conf.js file this was commented out:
'www/lib/ionic/js/ionic.bundle.js',
After making those changes it was fixed.

Unknown provider error while injecting service

I am trying to inject a custom service to a controller but it give the error that unknown provider. I have attached the relevant code below kindly look in to it as its been a while I am stuck in this problem.I am following coursera's course they are also doing it in the same way but for me its not working.
var app = angular.module('tutorial', ['ngRoute','ngMaterial'])
app.service('myService',
function myService(data) {
var service = this;
service.validator = function(data) {
if (data.name.$valid)
return true
else
return false
}
// return service
}
)
app.controller('myCtrl',['$scope', '$http', '$location', 'myService', myCtrl])
function myCtrl($scope, $http, $location, myService) {
$scope.editorEnabled = false;
myService = this;
$scope.insertemployee = function(empinfo) {
if (myservice.validator(empinfo)) {
console.log(empinfo.name)
console.log(empinfo.email)
console.log(empinfo.address)
$http.post('insertEmp.php',{'name':empinfo.name, 'email': empinfo.email, 'address':empinfo.address}).then(function(data) {
console.log(data)
})
}
}

Passing value between controllers in AngularJS

As stated in the title, I'm trying to pass a value (ID) from one controller (PerksApprovalController) going to another controller (PerksDetailsController). Please find below image for visual reference.
What I want to do is, when I click the "Show Details" button, it will redirect me to another page to display the details of the Control Number that I pass.
Below is my implementation.
Show Details Button Code
<button class="btn btn-xs" ng-click="vm.showDetails(p.ControlNumber)">Show Details</button>
PerksApprovalCtrl.js
(function () {
'use strict';
var app = angular.module('app');
PerksApprovalController.$inject = ['$window', 'app.perksService', 'app.sharedValuesFactory'];
app.controller('app.perksApprovalController', PerksApprovalController);
function PerksApprovalController($window, PerksService, SharedValuesFactory) {
/* jshint validthis:true */
var vm = this;
vm.showDetails = function (controlNo) {
SharedValuesFactory.setControlNo(controlNo);
$window.location = '/PerksDetails/PerksView';
}
}
})();
PerksDetailCtrl.js
(function () {
'use strict';
var app = angular.module('app');
PerksDetailController.$inject = ['$scope', '$http', '$q', '$window', 'app.perksService', 'app.sharedValuesFactory'];
app.controller('app.perksDetailController', PerksDetailController);
function PerksDetailController($scope, $http, $q, $window, PerksService, SharedValuesFactory) {
var vm = this;
PerksService.getPerksItems(SharedValuesFactory.getControlNo()).then(function (response) {
vm.perksItemDetails = response.data;
});
}
})();
I have created a service just like what they suggested in some topics here.
sharedValuesFactory.js
(function () {
'use strict';
var app = angular.module('app');
// SharedValuesFactory.$inject = ['$http'];
app.factory('app.sharedValuesFactory', SharedValuesFactory);
function SharedValuesFactory() {
var controlNoShared;
return {
setControlNo: function (c) {
this.controlNoShared = c;
},
getControlNo: function () {
return this.controlNoShared;
}
}
}
})();
My problem now is, everytime the details page is loaded, SharedValuesFactory.getControlNo() returns undefined. Looks like SharedValuesFactory is reset after the redirect or page load.
Any idea on how to properly pass a value from one controller to another?
TIA
I have a specific way of passing value in between Controllers. Hope it does the trick!
Note:
Not Sure what sharedValuesFactory.js is being used for! Assumming You are using this service to pass Data in between Controllers only. According to me only One service suites your requirement i.e PerksService.
The button passes the value (ID) of "ControlNumber".
<button class="btn btn-xs" ng-click="vm.showDetails(p.ControlNumber)">Show Details</button>
In PerksApprovalCtrl.js pass the controlNo you are getting on button click to the url of the page as in of a different view
PerksApprovalCtrl.js
(function () {
'use strict';
var app = angular.module('app');
PerksApprovalController.$inject = ['$window', 'app.perksService'];
app.controller('app.perksApprovalController', PerksApprovalController);
function PerksApprovalController($window, PerksService) {
/* jshint validthis:true */
var vm = this;
vm.showDetails = function (controlNo) {
$window.location = ;
$location.path('/PerksDetails/PerksView'+controlNo);
}
}
})();
In Routes.js or the place where you define the routes of your angular application add the following lines:
.when('/PerksDetails/PerksView/:controlNo', {
templateUrl: '<YOU DEFINE THE TEMPLATE>',
controller: 'PerksDetailController',
reloadOnSearch: false })
Here ":controlNo" is used to pass the value you are passing in the url from PerksApprovalController.
In PerksDetailController we get the controlNo from routeParams and pass it to your PerksService to get the details from it.
PerksDetailCtrl.js
(function () {
'use strict';
var app = angular.module('app');
PerksDetailController.$inject = ['$scope', '$http', '$q', '$window', '$routeParams', 'app.perksService'];
app.controller('app.perksDetailController', PerksDetailController);
function PerksDetailController($scope, $http, $q, $window, $routeParams, PerksService) {
var vm = this;
PerksService.getPerksItems($routeParams.controlNo).then(function (response) {
vm.perksItemDetails = response.data;
});
}
})();
Hope it Solves your problem! Thank You!

Angular-service TypeError: Cannot read property 'saveURL' of undefined

I am trying to write a service to store query string of a URL. I am doing so by storing it in a cookie and then retrieving it. But when i try to access the saveURL method from the controller to add the query string, I am getting this error:
TypeError: Cannot read property 'saveURL' of undefined
controller.js
angular
.module("app.alerts.alertView")
.controller("AlertViewsController", AlertViewsController);
AlertViewsController.$inject = [
"$scope", "$location", "alertHistory"
];
function AlertViewsController($scope, $location, alertHistory) {
alertHistory.saveURL($location.search());
}
service.js
(function () {
"use strict";
angular
.module("app.alerts.alertView")
.service("alertHistory", alertHistory);
alertHistory.$inject = [
"$cookieStore"];
function alertHistory ($cookieStore) {
return {
saveURL: function (urlObj) {
var array = $cookieStore.get("key");
array.push(urlObj);
$cookieStore.put("key", array);
}
};
}
})();
I have injected the service correctly. What else can i correct to solve the error. Please help
What it looks like is happening is that you are not returning what you think you are returning because the return object is not concrete enough for JS to hang on to. Also, you forgot to inject the $location service. I would try rewriting it as follows:
angular
.module("app.alerts.alertView")
.service("alertHistory", [ '$cookieStore', function ($cookieStore) {
var x = {};
x.saveURL = function (urlObj) {
var array = $cookieStore.get("key");
array.push(urlObj);
$cookieStore.put("key", array);
};
return x;
}]).controller('AlertViewsController', [ '$scope', '$location', 'alertHistory', function ($scope, $location, alertHistory) {
alertHistory.saveURL($location.search());
}]);

Can't figure out how to use angularFireCollection in my service

I must be missing something very simple. I've seen a bunch of examples of angularFireCollection but no examples using in the way i'm using it in a service (perhaps that's the issue?). here's my code which is getting an angular injection error unknown provider:
angular.module('CommentBoxService', [])
.service('CommentBoxSvc', ['$rootScope', '$stateParams', '$http', '$location','angularFireCollection',
function ($rootScope, $stateParams, $http, $location, $firebase, angularFireCollection) {
var commentFireBase = null;
var user; var type;
var getFireBaseRef = function () {
user = ($location.absUrl().split('/'))[4].replace('#', '');
getType();
commentFireBase = angularFireCollection('https://XXX/users/' + user + '/comment-boxes/' + type);
return commentFireBase;
}
return {
getFireBaseRef : getFireBaseRef
}
}]);
am i missing something with the injection method?

Resources