angularjs app structure/ $scope

Question

I can't seem to wire this up properly. I'll list the appropriate pieces. My issue is accessing the injected resources. All of the dependent pieces are undefined when I try to reference them.

var app = angular.module('app', ['ngResource','ui.bootstrap', 'ngGrid','app.services', 'app.directives', 'app.controllers'
])
.config(['$routeProvider', function ($routeProvider) {
  return $routeProvider.
      when('/', { templateUrl: 'partials/transaction.view.html', controller: 'TransactionCtrl' }).
      when('/about', { templateUrl: 'partials/about.view.html', controller: 'AboutCtrl' }).
      when('/transaction', { templateUrl: 'partials/transaction.view.html', controller: 'TransactionCtrl' }).
      otherwise({ redirectTo: '/' });
}])
.config(['$httpProvider', function ($httpProvider) {
    return $httpProvider.responseInterceptors.push(['logger', '$rootScope', '$q',
        function (logger, $rootScope, $q) {
            var error, success;
            success = function (response) {
                $rootScope.$broadcast("success:" + response.status, response);
                logger.log("success:" + response.status);
                return response;
            };
            error = function (response) {
                var deferred;
                deferred = $q.defer();
                $rootScope.$broadcast("error:" + response.status, response);
                logger.log("error:" + response.status);
                return $q.reject(response);
            };
            return function (promise) {
                return promise.then(success, error);
            };
        }
    ]);
}])
.run(['$rootScope', 'logger', function ($rootScope, logger) {
  return $rootScope.$on('$routeChangeSuccess', function (event, currentRoute, priorRoute) {
      return $rootScope.$broadcast("" + currentRoute.controller + "$routeChangeSuccess", currentRoute, priorRoute);
        });
 }]);

...the controllers are here:

angular.module('pennyWatch.controllers', ['$scope', '$location','logger', 'ngGrid',     'transactionService']).
controller('TransactionCtrl', [function ($scope, logger, ngGrid, transactionService) {

//code here

}]).
controller('AboutCtrl',[function ($scope, logger) {
    $scope.logEntries = logger.logEntries;
}]);

So none of the resources I specified are available (all undefined): '$scope', '$location','logger', 'ngGrid', 'transactionService'

Any light shed on this would be greatly appreciated!

Thanks

probably you are using wrong syntax it should be like controller('AboutCtrl',['$scope','logger',function ($scope, logger) { $scope.logEntries = logger.logEntries; }]); — Ajay Singh Beniwal
– Ajay Singh Beniwal, Commented Jul 3, 2013 at 19:28
Thanks @Ajaybeniwal! I changed the controller definition to match as suggested. It appears I've taken a few steps back - now the TransactionCtrl breakpoints aren't hitting. I've put all the code in a jsfiddle (minus the views). Maybe this will help pinpoint my issues. :-) jsfiddle.net/willtx/8jdLh — Will Lopez
– Will Lopez, Commented Jul 5, 2013 at 19:41

Will M · Accepted Answer · 2013-07-03 19:39:11Z

1

I'm pretty sure the syntax for a controller is:

.controller('TransactionCtrl', ['$scope', 'logger', 'ngGrid', 'transactionService', function ($scope, logger, ngGrid, transactionService) {

//code here

}]);

You first list what to inject, then as the last element of the array to define a function with parameters that will represent what's injected.

For instance you could even have:

.controller('TransactionCtrl', ['$scope', 'logger', 'ngGrid', 'transactionService', function ($s, logr, ngGrid, transServ) {

//code here

}]);

This is to allow for easy minification.

The alternative controller syntax uses the parameter names when choosing what to inject. And since minification usually involves shortening variable names, it's suggested you use the syntax above.

Alternative syntax:

.controller('TransactionCtrl', function ($scope, logger, ngGrid, transactionService) {

//code here

});

edited Jul 3, 2013 at 19:39

answered Jul 3, 2013 at 19:32

Will M

2,1634 gold badges22 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Will Lopez Over a year ago

I've had more people point out my definition is incorrect but appears I have other issues as well. Thank you for your time and input.

tetotechy · Accepted Answer · 2013-09-13 13:21:19Z

0

I think you are swapping module-loading with service-injection

when declaring the pennywatch.controllers module, you should invoke the angular.module function passing the module dependencies in brackets, not the services. many of the services you cannot access are in the ng module, for instance

service injection is applied at the controller level

answered Sep 13, 2013 at 13:21

tetotechy

7451 gold badge7 silver badges16 bronze badges

Collectives™ on Stack Overflow

angularjs app structure/ $scope

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related