AngularJS: Throws Unknown Provider error - javascript

I have looked over many threads of this error, yet following the instructions on 2 of them, it still throws the same error, here is my service:
angular.module('sccateringApp')
.service('httpcalls', function ($scope, $http) {
var BackEndBaseURL = "methods/server.php";
return {
..
}
});
And here is my controller:
angular.module('sccateringApp')
.controller('newCategoryController', ['httpcalls', '$scope', function (httpcalls, $scope) {
$scope.submitForm = function(){
alert();
}
}]);
I can't really identify what the problem is, since I already included the service per se as a dependency of the controller. Any help will be much appreciated!

Update: Phil is right, the real provider error comes from the dependency on $scope, credits to him when he post it.
It looks like you are creating a factory and not a service.
You don't need to return anything from a service, but declare things in the this (it is a prototype instanciation, like a class).
sccateringApp.service('httpcalls', function ($scope, $http) {
var BackEndBaseURL = "methods/server.php";
this.someMethod = function() { ... }
this.someProperty = ...
});
Otherwise, just replace module.service by module.factory

Related

I have an empty function that's deregistering my controllers in Angularjs

Using Angularjs 1.6.3, I have a controller like this:
'use strict';
var ngnControllers = angular.module('ngnControllers');
ngnControllers.controller('TestCtrl', ['$scope', '$location', '$http',
function TestCtrl($scope, $location, $http) {
console.log("Before defining $scope.play()");
$scope.play() = function() {
};
console.log("After defining $scope.play()");
}
]);
I copied the $scope.play() function from another controller where it was having the same effect:
When it is not commented out, I get a message saying that the controller is not registered, but that's all. When it is commented out everything works fine.
I am at a loss. Any ideas?
Because your function declaration syntax is wrong and as a result is throwing an error. The error gets caught internally and simply causes the controller registration to fail
Change:
$scope.play() = function() {
To
$scope.play = function() {
You should have empty dependencies added to your module,
var ngnControllers = angular.module('ngnControllers',[]);

Angular doesn't work when defining a service and factory separately

I'm trying to write a simple angular service and a factory like below:
html:
<div ng-controller="mycontroller">
{{saycheese}}
</div>
Javascript
var myApp = angular.module('myApp', []);
myApp.service('myservice', function() {
this.sayHello = function() {
return "from service";
};
});
myApp.factory('myfactory', function() {
return {
sayHello: function() {
return "from factory!"
}
};
});
//defining a controller over here
myapp.controller("mycontroller", ["myfactory", "myservice", function(myfactory, myservice) {
$scope.saycheese = [
myfactory.sayHello(),
myservice.sayHello()
];
}]);
But the JSFiddle still just displays {{saycheese}} instead of angular mapping the function.
Link to my fiddle:
http://jsfiddle.net/PxdSP/3047/
Can you point me where am I going wrong in this case ? Thanks.
You have several syntax errors in your code, and checking the console would have helped without questioning the SO. Here's one possible way to write the controller (demo):
myApp.controller("mycontroller", ["$scope", "myfactory", "myservice",
function($scope, myfactory, myservice) {
$scope.saycheese = [
myfactory.sayHello(),
myservice.sayHello()
];
}]);
Apart from obvious fix myapp => myApp (variable names are case-sensitive in JavaScript), $scope should be passed into controller as an argument (and mentioned as its dependency if using arrayed - proper - form of controller definition, as you did) before you can access it. Otherwise you just get ReferenceError: $scope is not defined exception when controller code is invoked.
Couple things:
myapp.controller(...) should be myApp.controller(...)
You need to inject $scope in your controller.
Fixed controller:
myApp.controller("mycontroller", ["myfactory", "myservice", "$scope", function(myfactory, myservice, $scope) {
$scope.saycheese = [
myfactory.sayHello(),
myservice.sayHello()
];
}]);

Angular: Not able to access variables in controller using service

I am trying to share a variable between a controller and a function. But i get an error from the controller, saying this:
TypeError: Cannot read property 'getSet' of undefined
I have gone through numerous tutorials, but don't know where am I going wrong.
My service code is like this:
app.service('shareData', function() {
var selected = ["plz", "print", "something"];
var putSet = function(set) {
selected = set;
};
var getSet = function() {
return selected;
};
return {
putSet: putSet,
getSet: getSet
};
});
I am able to reach selected from my function defined like this:
setDisplay = function($scope, $mdDialog, shareData) {
console.log(shareData.getSet()); // this is working
$scope.selected = shareData.getSet();
$scope.hide = function() {
$mdDialog.hide();
};
$scope.cancel = function() {
$mdDialog.cancel();
};
$scope.answer = function(answer) {
$mdDialog.hide(answer);
};
};
My controller is like this:
app.controller('topicController', ['$scope', '$http', '$mdDialog', 'shareData',
function ($scope, $http, $mdDialog, $mdToast, shareData) {
console.log(shareData.getSet()); // NOT WORKING
}]);
You had extra $mdToast in your topicController controller's factory function, you need to remove it.
The reason behind it was not working is, currently you had 4 dependency mentioned in array like ['$scope', '$http', '$mdDialog', 'shareData', function & then you are using its instance inside the function next to DI array. Inside that function you had actually 5 dependencies where $mdToast extra. So behind the scene what happening is $scope of function hold an value of '$scope' DI array likewise you go right to left. But when it comes to $mdToast(in controller function) it was holding a value of 'shareData'(of DI array) & then the next parameter shareData get nothing.
app.controller('topicController', ['$scope', '$http', '$mdDialog', 'shareData',
function ($scope, $http, $mdDialog, shareData) { //<--removed $mdToast
console.log(shareData.getSet());
}
]);
NOTE: You are using DI inline array annotation, so the sequence in which dependency are injected in array, in same sequence you should
inject then in underlying factory function.

AngularJS Obfuscation

I am trying to obfuscate my angularjs app and it is breaking. I am aware that this is an issue with the framework and they have tried to remedy it via the $inject method.
http://docs.angularjs.org/tutorial/step_05 See the "Note on Minification" section.
To resolve this they recommend doing YourController.$inject = ['$scope', '$http'];
I went ahead and did that to match my application like so:
AventosController.$inject = ['$scope','$http','$q','controllerComm'];
VforumController.$inject = ['$scope','$http','$timeout','controllerComm'];
Well, it still isn't working. The error I receive in the console is:
Error: Unknown provider: cProvider <- c <- controllerComm
Anyway to remedy this?
EDIT
controllerComm
app.factory('controllerComm', ['$rootScope', function($rootScope)
{
var showVforum = {};
showVforum.result = false;
showVforum.prepBroadcast = function(val)
{
this.result = val;
this.broadcastVal();
}
showVforum.broadcastVal = function()
{
$rootScope.$broadcast('toggleVforum')
}
return showVforum;
}]);
EDIT 2 not working after obfuscation
$scope.launchVforum = function()
{
$scope.installationVideo = ($scope.installationVideo) ? false : true;
controllerComm.prepBroadcast($scope.installationVideo);
}
Try injecting at the controller definition.
app.controller('myCtrlr', ['$scope', '$http', '$q', 'controllerComm', function ($scope, $http, $q, controllerComm) {
...
}]); // end myCtrlr
Also is "controllerComm" defined?

AngularJS - understanding scopes

I'm confused, I have this module which routes to different controllers:
var mainModule = angular.module('lpConnect', []).
config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/home', {template:'views/home.html', controller:HomeCtrl}).
when('/admin', {template:'views/admin.html', controller:AdminCtrl}).
when('/connect', {template:'views/fb_connect.html', controller:MainAppCtrl}).
otherwise({redirectTo:'/connect'});
}]);
and a Common service like so:
mainModule.factory('Common', ['$rootScope', '$http', function (scope, http) {
var methods = {
changeLanguage:function (langID) {
http.get('JSON/langs/' + langID + '/captions.json').success(function (data) {
scope.lang = data;
});
},
initChat:function () {
console.log(scope); // full object
console.log(scope.settings); // undefined
}
};
//initiate
http.get('JSON/settings/settings.json').success(function (data) {
scope.settings = data;
methods.changeLanguage(scope.settings.lang);
});
return methods;
}]);
the app loads and gets (through XHR) the settings object, and I can see the settings reflects in my DOM. (captions for example)
Now when I call the initChat method from my HomeCtrl I get an undefined value when trying to access the scope.settings property ... what's strange is that when I log the scope I can see the settings object ... What am I missing?
Update: I found out that what I'm doing wrong is calling my method directly from the controller body:
function HomeCtrl($scope, $location, Common) {
...
Common.initChat()
...
}
if I change the call to be triggered by a click all works fine, but I do need this code to run when the page loads, What is the right approach?
It's a simple problem, I think: You're calling initChat in your scope before the $http call retrieves scope.settings.
Couple of things.
http is async and that is your main problem (as Andy astutely pointed out)
ng-init is not recommended for production code, initializing in controllers is better
initializing your scope.settings = {} or a decent default may help you, once xhr is done then your settings will be available.
hope this helps
--dan

Categories