Angularjs first attempt at dependency injection

Question

I have a UserAddController and I want to be able to access a list of countries returned by a Web API. The Web API returns data fine. Here is my app.js where I get the data :

app.factory('Country', function ($resource) {
    return $resource(
        "/api/country/:Id",
        { Id: "@Id" },
        { "update": { method: "PUT" } });  
});

This is my Controller :

var UserAddController = function ($scope, $location, service, User) {

    $scope.action = "Add";
    $scope.countries = service.countries;

};

I am declaring and creating a service here :

app.factory('CountryService', CountryService);

function CountryService($resource) {
    return $resource(
       "/api/country/:Id",
       { Id: "@Id" },
       { "update": { method: "PUT" } });  
}

I am using the same code as above just for testing purposes. I am injecting this service like this :

UserAddController.$inject = ['$scope', 'CountryService'];

This is my first attempt at dependency injection and I cannot figure out where I am going wrong. The error I currently get is 'service is undefined'. I have tried passing both the service and the Country object to the Controller with the same results. Can anybody give any advice?

EDIT : In my Controller, this populates successfully with an alert in the code, but without the alert does not populate. Any reason why this is?

function CountryService($rootScope, $http) {
    var self = {};

    //self.countries = [{ "$id": "1", "CountryId": 1, "CountryName": "United Kingdom" }, { "$id": "2", "CountryId": 2, "CountryName": "Republic of Ireland" }, { "$id": "3", "CountryId": 3, "CountryName": "Australia" }, { "$id": "4", "CountryId": 4, "CountryName": "New Zealand" }, { "$id": "5", "CountryId": 5, "CountryName": "United States" }, { "$id": "6", "CountryId": 6, "CountryName": "France" }, { "$id": "7", "CountryId": 7, "CountryName": "Germany" }, { "$id": "8", "CountryId": 8, "CountryName": "Finland" }];

    $http({
        method: 'GET',
        url: '/api/country'
    }).success(function (data, status, headers, config) {
        self.countries = data;
    });
    alert(self.countries);
    return self;
}

From where the service should be coming from? Where do you define it? Most importantly, you are only listing 2 dependencies in UserAddController.$inject while your controller expects 4 dependencies... — pkozlowski.opensource
– pkozlowski.opensource, Commented Jul 27, 2013 at 12:29
The only dependency it is currently using is $scope, so at this stage I should only need to add a dependency to CountryService, which is what I have done? — user517406
– user517406, Commented Jul 27, 2013 at 12:45

Rishabh Singhal · Accepted Answer · 2013-07-27 13:21:06Z

1

You need to add other services/dependencies.

UserAddController.$inject = ['$scope', 
                             '$location', 
                             'CountryService', 
                             'UserService'];

I have assumed that last dependency is a service with name 'UserService'. It's signature would be

app.factory('UserService', UserService);

Edit :

You need to instantiate a new variable.

//Inside function body
$scope.countries = service.countries;
$scope.newCountry = $scope.countries.get({Id : someId},callbackFn);

Now you have a counrtry with 'someId' in $scope.newCountry

edited Jul 27, 2013 at 13:21

answered Jul 27, 2013 at 12:29

Rishabh Singhal

1,17310 silver badges22 bronze badges

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

5 Comments

user517406 Over a year ago

The only dependency it is currently using is $scope, so at this stage I should only need to add a dependency to CountryService?

Rishabh Singhal Over a year ago

Edit your controller function. var UserAddController = function($scope, service){/*function body*/}

user517406 Over a year ago

Progress....no error message now, but no populating of the data either. Do I have my syntax wrong anywhere?

user517406 Over a year ago

It looks like no call is made to api/Country in firebug

Rishabh Singhal Over a year ago

Just edited to tackle your new problem. I think you should first try credit card example from Angularjs documentation.

zs2020 · Accepted Answer · 2013-07-27 13:05:49Z

0

Make sure you injected ngResource.

app = angular.module("app", ['ngResource']);

You need to inject the modules correcly

UserAddController.$inject = ['$scope', '$location', 'CountryService', 'user'];

This is quoted the doc.

You can specify the service name by using the $inject property, which is an array containing strings with names of services to be injected. The name must match the corresponding service ID registered with angular. The order of the service IDs matters: the order of the services in the array will be used when calling the factory function with injected parameters.

I created a FIDDLE and you can try.

edited Jul 27, 2013 at 13:05

answered Jul 27, 2013 at 12:58

zs2020

54.7k30 gold badges157 silver badges223 bronze badges

3 Comments

user517406 Over a year ago

Do I need to inject ngResource into the service as well?

zs2020 Over a year ago

@user517406 Please take a look at the doc docs.angularjs.org/api/ngResource.$resource. You should be ok just load it with your app.

user517406 Over a year ago

It looks like no call is made to api/Country in firebug

Collectives™ on Stack Overflow

Angularjs first attempt at dependency injection

2 Answers 2

5 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related