Unable to inject `$http` using AngularJS explicit `app.controller` syntax?

Question

I have been told that I should be using the app.controller syntax, in order to support minification.

Rewriting the sample (tutorial) example, and I found that I couldn't get it to work:

use 'strict';

/* Minifiable solution; which doesn't work */
var app = angular.module('myApp', ['ngGrid']);

// phones.json: http://angular.github.io/angular-phonecat/step-5/app/phones/phones.json

app.controller('PhoneListCtrl', ['$scope', '$http', function ($scope, $http) {
    $http.get('phones/phones.json').success(function (data) {
        $scope.phones = data;
    });

    $scope.orderProp = 'age';
}]);

/* Alternate [textbook] solution; which works */
function PhoneListCtrl($scope, $http) {

    $http.get('phones/phones.json').success(function (data) {
        $scope.phones = data;
    });

    $scope.orderProp = 'age';
}

PhoneListCtrl.$inject = ['$scope', '$http'];

<body ng-app="myApp" ng-controller="PhoneListCtrl">
    {{phones | json}}
</body> <!-- Outputs just an echo of the above line, rather than content -->

What do I need to change?

As far as I know you can use the second version even for minimizing, because of the line .$inject - that tells angular.js the correct unchanged names of the two parameters. — flaschenpost
– flaschenpost, Commented May 21, 2013 at 7:38

Foo L · Accepted Answer · 2013-05-21 16:26:30Z

13

The way I did my controller layout is:

var app = angular.module('myApp', ['controllers', 'otherDependencies']);
var controllers = angular.module('controllers', []);
controllers.controller('PhoneListCtrl', ['$scope', '$http', function ($scope, $http) {
  // your code
  $http.get('phones/phones.json').success(function (data) {
    $scope.phones = data;
  });
}]);

edited May 21, 2013 at 16:26

answered May 21, 2013 at 11:38

Foo L

11.1k8 gold badges43 silver badges53 bronze badges

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

3 Comments

user2283066 Over a year ago

How to you reference it in the view?

Foo L Over a year ago

{{phones}} is correct, since the controller put data in $scope.phones

Foo L Over a year ago

You said the 2nd format works, so it must be how you laid out the modules.

Collectives™ on Stack Overflow

Unable to inject `$http` using AngularJS explicit `app.controller` syntax?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related