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
– Index, Commented Jun 1, 2013 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 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
– Maarten, Commented Jun 1, 2013 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 — Dmytro Evseev
– Dmytro Evseev, Commented Jun 1, 2013 at 21:36
@Maarten Thanks, I wasn't aware of that. Guess I'll have to rewrite my application :) — Index
– Index, Commented Jun 2, 2013 at 14:05

Community · Accepted Answer · 2017-05-23 12:17:33Z

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, 2017 at 12:17

CommunityBot

11 silver badge

answered Jun 1, 2013 at 20:06

David Riccitelli

7,9125 gold badges47 silver badges59 bronze badges

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

4 Comments

Maarten Over a year ago

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

ade19 Over a year ago

Note that you must also

ZachB Over a year ago

Isn't this the factory syntax, not the service syntax? stackoverflow.com/questions/13762228/… (Your 3rd edit version looks like the service syntax.)

David Riccitelli Over a year ago

blog.thoughtram.io/angular/2015/07/07/…

Collectives™ on Stack Overflow

Service injection into controller with AngularJS

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related