AngularJS Services - using in Controller

Question

I'm building a pretty simple app where I have a GlobalController (on body element), and will have another sub-controller below. This is a templated site with multiple, physical pages such that the sub-controller will be different, but at most there will only be a top-level Global one and a single sub-one.

I'm trying to make global functions that any sub-controller can use to run code that each needs to run without having to duplicate the functionality in each sub-controller.

One way I could do this would be to include $rootScope and then emit() messages to the GlobalController who is listening for them using $on().

I gather this is not a "good" way to do this. Rather, I've learned that it's better to use a service for this. I'm now stuck on how to implement this service.

I currently have a Global Controller like so:

var globalModule = angular.module('DoSquareStuff', ["ngRoute","list", "savings-video"]); 
        // there will be a long list of modules that will be added after "savings-video"


globalModule.factory('squareMgr', function() {
    var squares = SUYS.squares;  // global obj with earned[] and placed[]

    return {
        getSquaresEarned: function() {
            return squares.earned;
        },
        getSquaresPlaced: function() {
            return squares.placed;
        },
        setThisSquareEarned: function(value) {
            squares.earned.push(value);
        },
        setThisSquarePlaced: function(value) {
            squares.placed.push(value);
        },
        earnedThisSquare: function(squareNum) {
            return ~squares.earned.indexOf(squareNum);
        },
        placedThisSquare: function(squareNum) {
            return ~squares.placed.indexOf(squareNum);
        }
    }
});

globalModule.controller('GlobalController', function($scope, $squareMgr){ 
     // this would be easy... but it doesn't work


     //  $rootScope.$on('signal.missionComplete', function (event, missionId) {
     //       console.log("parentScope receive notice that mission " + missionId + " is complete.");
     //  });

     log('GlobalController loaded');
     //  log($squareMgr.getSquaresEarned()); //broken
});

Then, reading the docs, I tried:

globalModule.controller('GlobalController', ['squareMgr', function($squareMgr){  

    // but then how do I get $scope in there?

    log('GlobalController loaded');
    //  log($squareMgr.getSquaresEarned());

}]);

Answer 1

In your last code block, you need to inject $scope as well. You can inject any number of services that you need:

globalModule.controller('GlobalController', ['squareMgr', '$scope', 
    function($squareMgr, scope){  

    // but then how do I get $scope in there?

    log('GlobalController loaded');
    //  log($squareMgr.getSquaresEarned());

}]);

And a minor point, I wouldn't put a $ in front of squareMgr, the $ implies it is a built in angular service.

Answer 2

Try

globalModule.controller('GlobalController', ['squareMgr', '$scope', function($scope, squareMgr){ .....

The $ sign is used to differentiate between Angular services and your own