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

Question

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.

Answer 1

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.

Answer 2

Couple things:

1. myapp.controller(...) should be myApp.controller(...)
2. 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()
    ];
}]);