We Keep Coding

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()
];
}]);

Global variable in angularjs

i'm looking for a way to use a global varable in a angularjs function.
I found this way, to use the global var as a angular var:
var AppSettings = angular.module('settingsApp', []);
AppSettings.controller('settingsCtrl', ['$scope', '$window', function($scope, $window) {
$scope.sessionUID = $window.sessionUID;
/** function to update user details after edit from list of user php **/
$scope.changefunction = function() {
alert("perfect");
};
}]);
var MyApp = angular.module('biqs_settings_app', ['settingsApp']);
But now I cant run the "changefunction".
Error:
TypeError: Cannot read property '0' of null
at $parseFunctionCall (angular.js:12346)
at callback (angular.js:21435)
at Scope.$eval (angular.js:14401)
at Scope.$apply (angular.js:14500)
at HTMLButtonElement.<anonymous> (angular.js:21440)
at HTMLButtonElement.eventHandler (angular.js:3014)
What am i doing wrong?

Everything will work, if you properly use the settingsCtrl controller in your HTML:
<div ng-app="biqs_settings_app" ng-controller="settingsCtrl">
<button ng-click="changefunction()">Test</button>
</div>

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) {
}
]);

Include AngularJS module and controller names in $log output?

I am investigating logging options and conventions in AngularJS. I would like my $log output to contain both the module and controller names (similar to loggers in Log4j). With the code below, I was able to inject the controller name into the $scope
var app = angular.module("demo", []);
app.config(['$provide', function ($provide) {
$provide.decorator('$controller', [
'$delegate',
function ($delegate) {
return function(constructor, locals) {
if (angular.isString(constructor)) {
locals.$scope.controllerName = constructor;
}
return $delegate(constructor, locals);
}
}]);
}]);
app.controller('SampleCtrl', ['$scope', '$log', function ($scope, $log) {
$log.log("[" + app.name + "." + $scope.controllerName +"] got here");
}]);
I would like to solve this a better way. Specifically:
Is there a better way to access the controller name that adding it to the $scope?
Is there a way to get the module name instead of fetching "demo" from the .name property of the module app ?
Similar to Enhancing $log in AngularJs the simple way, what is the best way to inject formatting like prepending "[module.controller]" into the $log.log() calls?