Service injection into controller with AngularJS

Question

I have written a service in AngularJS, but I can't get it to work with the angular-seed way of doing things.

The controller code is as follows:

/*function PhotoCtrl($scope, Photo) {
    $scope.photos = Photo.query();
}*/

angular.module('myApp.controllers', []).
    controller('PhotoCtrl', [function($scope,Photo) {
    $scope.photos = Photo.query();
}])
.controller('MyCtrl2', [function() {

}]);

Note that the commented out section works fine, but I would like to handle it somewhat like the (recommended) second way.

The error I get is that Photo is undefined, so my guess would be my method of passing (injecting) it is wrong, but I can't find out how to do it correctly

As far as I know the first method is just fine, I believe that's what's shown in the official tutorial for example. Do you have any sources that indicate otherwise? — Index, Jun 01 '13 at 20:06
"NOTE: Many of the examples in the documentation show the creation of functions in the global scope. This is only for demonstration purposes ......." from http://docs.angularjs.org/guide/dev_guide.mvc.understanding_controller seems to say so. Don't get me wrong, I think the first is easier to read but I understand that the name spacing might be better — Maarten, Jun 01 '13 at 20:22
If you remove wrapping square braces around controller function definition `[function($scope,Photo) {}]` you'll also be fine, but don't do it if you plan to minify your code. More about [dependencies injection in angular here](http://docs.angularjs.org/guide/di) — Dmitry Evseev, Jun 01 '13 at 21:36
@Maarten Thanks, I wasn't aware of that. Guess I'll have to rewrite my application :) — Index, Jun 02 '13 at 14:05
@DmitryEvseev right, I read that somewhere indeed, thanks for reminding me — Maarten, Jun 02 '13 at 18:55

score 54 · Accepted Answer · edited May 23 '17 at 12:17

54

You need to define the Photo service:

angular.module('myApp.controllers', [])
    .service('Photo', ['$log', function ($log) {

        return {
            query: function() {
                // the query code here.
            }
        };

    }])
    .controller('PhotoCtrl', ['$scope', 'Photo', function ($scope, Photo) {
        $scope.photos = Photo.query();
    }])
    .controller('MyCtrl2', [function() {

    }]);

A couple of references:

In the above sample code I used parameters aliasing, which I suggest in order to avoid issues when minifying your code.

See also an example here: AngularJS multiple uses of Controller and rootScope

And a Plunker here: http://plnkr.co/edit/Bzjruq

edited May 23 '17 at 12:17

Community

1
1

answered Jun 01 '13 at 20:06

David Riccitelli

7,491
5
42
56

1

I had defined the service, but your answer fixed it because you gave the right syntax for the controller line, I didn't know I had to pass scope and Photo in there like that, compare it to my example to see my problem – Maarten Jun 01 '13 at 20:19
1

Note that you must also – ade19 Jul 11 '14 at 22:16
1

Isn't this the `factory` syntax, not the `service` syntax? http://stackoverflow.com/questions/13762228/confused-about-service-vs-factory/13763886#13763886 (Your 3rd edit version looks like the `service` syntax.) – ZachB Oct 21 '16 at 02:57
http://blog.thoughtram.io/angular/2015/07/07/service-vs-factory-once-and-for-all.html – David Riccitelli Oct 23 '16 at 06:26

Service injection into controller with AngularJS

1 Answers1

Linked