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

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',[]);

Related

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: Throws Unknown Provider error

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

Why does Angular say "Uncaught ReferenceError: $scope is not defined"?

I am not using scope outside of the controller so I am confused why I keep getting the error:
Uncaught ReferenceError: $scope is not defined
It is from line 5 which is the "pollApp.controller" line.
(app.js)
var pollApp = angular.module('myApp', ['ui.router']);
pollApp.controller('choiceCtrl', [$scope, function ($scope) {
$scope.choices = [{body: "test"}]; //just for testing
$scope.addChoice = function () {
//add new choice
if ($scope.choiceBody) {
$scope.choices.push({
body: $scope.choiceBody
});
$scope.choiceBody = null;
}
}
}]);
I also checked that Angular is loading fine. Any help would be awesome. Thanks.
While asking for dependency using in DI array annotation, you need to wrap it a quotes like '$scope' inside array and then you could have instance of those dependency inside factory function on controller like $scope
pollApp.controller('choiceCtrl', ['$scope', function ($scope) {
pollApp.controller('choiceCtrl', ['$scope',
missing quotes

Error: [$injector:nomod] Module is not available

I am trying to upload a file with progress bar but getting 2 errors constantly, no matter what i do
1)module not defined and 2nd is [$injector:nomod] module not available.
http://jsfiddle.net/3m75wqt1/
this is my controller
PageController.js
var PageController = function ($scope, fileUpload ) {
angular.module('app', ['ngProgress'])
angular.module('app')
.controller('PageController', function ($scope) {
//$scope.fileUpload = {};
});
PageController.$inject = ['$scope','ngProgress'];
};
I have done a lot of searching but unable to find the error.
any help would be appreciated... Thanks in advance
First at all the module method shoud not be called inside of a controller, so this:
var PageController = function ($scope, fileUpload) {
angular.module('app', ['ngProgress'])
angular.module('app')
.controller('PageController', function ($scope) {//I will replace this with PageController
//$scope.fileUpload = {};
});
PageController.$inject = ['$scope', 'ngProgress'];
};
shoud look more like this:
var PageController = function ($scope, fileUpload) {
};
PageController.$inject = ['$scope', 'ngProgress'];
angular.module('app', ['ngProgress'])
angular.module('app').controller('PageController', PageController);
i removed the function in your controller method and put your defined PageController at its place
The second thing is that you dont need to call the module method twice, the first one is already returning the module, so the best approach shoud look like this:
var PageController = function ($scope, fileUpload) {
};
PageController.$inject = ['$scope', 'ngProgress'];
angular.module('app', ['ngProgress']).controller('PageController', PageController);
And i personaly like the array notation more than this, so my favorite would look like this, but that is up to you:
angular.module('app', [
'ngProgress'//this is a module dependency (its also createt with angular.module)
]).controller('PageController', [
'$scope',
'fileUpload',//this is a dependency for the controller (probably a service)
function ($scope, fileUpload) {
}
]);

Categories