Using Angular services to hold commonly required data

Question

I am currently writing my first application in Angular and have been very much enjoying all the framework has to offer so far. Like most newbies I set off building everything into a main controller, copying the tutorials. I am now seeing the error of my ways and refactoring.

My question is about services holding data that is commonly required among controllers.

I've now taken the data out of the 'main controller' and placed it into a service that I have injected into both controllers requiring access. Now though neither controller sees the functionality I've defined in the new service:

varianceService is not defined

Being new to this approach i welcome all and any help, aswell as help with my current problem, any comments on the best way to apply this approach would also be highly appreciated.

Thanks in advance.

Here is an example of the code:

var app = angular.module(
    'VarianceAnalysis', ['ngRoute', 'ngAnimate', 'mgcrea.ngStrap', 'mgcrea.ngStrap.tooltip', 'mgcrea.ngStrap.helpers.dateParser', 'SharedServices']
    )
    .service('varianceService', function () {
        var variances = {};
        return {
            redirect: function (path) {
                $location.path(path);
            },
            getHttpVariances: function (month1, month2) {
                var url = "/Home/GetVariances?month_1=";
                url += month1;
                url += "&month_2="
                url += month2;
                url += "&forwardBilling=true"

                $http.get(url).success(function (data) {
                    variances = data;
                    return data;
                });
                return {};
            },
            getVariances: function () {
                return variances;
            }
        };
    })
    .config(['$routeProvider',
      function ($routeProvider) {
          $routeProvider.
              when('/MainPage', {
                  templateUrl: 'mainpage.html',
                  controller: 'MainPageCtrl'
              }).
              when('/Variance/:type', {
                  templateUrl: 'variance.html',
                  controller: 'VarianceCtrl'
              }).
              otherwise({
                  redirectTo: '/MainPage'
              });
      }])
    .controller('VarianceCtrl', ['$scope', 'varianceService', function ($scope, $http, $location, $routeParams) {
        $scope.variance_type = varianceService.getVariances();
    }])
    .controller('MainPageCtrl', ['$scope', 'varianceService', function ($scope, $http, $location) {
        $scope.go = function (month1, month 2) {
        $scope.variances = varianceService.getHttpVariances(month1, month2);
    }]);

Answer 1

Change this

.controller('VarianceCtrl', ['$scope', 'varianceService', function ($scope, $http, $location, $routeParams) {
    $scope.variance_type = varianceService.getVariances();
}])

to

.controller('VarianceCtrl', ['$scope', '$http', '$location', '$routeParams', 'varianceService', function ($scope, $http, $location, $routeParams, varianceService) {
    $scope.variance_type = varianceService.getVariances();
}])

Answer 2

The problems lies in the bracket notation of injecting services in your function..

What you inject in the bracket notation must also be present in the function definition..

e.g.

controller('MyCtrl', ['$scope', '$http', 'varianceService', function($scope, $http, varianceService) {

}]);

so in relation to your code above.. it should be like this..

.controller('VarianceCtrl', ['$scope', '$http', '$location', '$routeParams', 'varianceService', function ($scope, $http, $location, $routeParams, varianceService) {
        $scope.variance_type = varianceService.getVariances();
    }])
    .controller('MainPageCtrl', ['$scope', '$http', '$location', 'varianceService', function ($scope, $http, $location, varianceService) {
        $scope.go = function (month1, month 2) {
        $scope.variances = varianceService.getHttpVariances(month1, month2);
    }]);

just as how you have ordered the injected services in your bracket notation, it must also pertain the same order in your function definition.