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 :<\/p>\n
app.factory('Country', function ($resource) {\n return $resource(\n \"\/api\/country\/:Id\",\n { Id: \"@Id\" },\n { \"update\": { method: \"PUT\" } }); \n});\n<\/code><\/pre>\nThis is my Controller :<\/p>\n
var UserAddController = function ($scope, $location, service, User) {\n\n $scope.action = \"Add\";\n $scope.countries = service.countries;\n\n};\n<\/code><\/pre>\nI am declaring and creating a service here :<\/p>\n
app.factory('CountryService', CountryService);\n\nfunction CountryService($resource) {\n return $resource(\n \"\/api\/country\/:Id\",\n { Id: \"@Id\" },\n { \"update\": { method: \"PUT\" } }); \n}\n<\/code><\/pre>\nI am using the same code as above just for testing purposes. I am injecting this service like this :<\/p>\n
UserAddController.$inject = ['$scope', 'CountryService'];\n<\/code><\/pre>\nThis 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?<\/p>\n
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?<\/p>\n
function CountryService($rootScope, $http) {\n var self = {};\n\n \/\/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\" }];\n\n $http({\n method: 'GET',\n url: '\/api\/country'\n }).success(function (data, status, headers, config) {\n self.countries = data;\n });\n alert(self.countries);\n return self;\n}\n<\/code><\/pre>\n\n- \n
You need to add other services\/dependencies.<\/p>\n
UserAddController.$inject = ['$scope', \n '$location', \n 'CountryService', \n 'UserService'];\n<\/code><\/pre>\nI have assumed that last dependency is a service with name ‘UserService’. It’s signature would be<\/p>\n
app.factory('UserService', UserService);\n<\/code><\/pre>\nEdit :<\/p>\n
You need to instantiate a new variable.<\/p>\n
\/\/Inside function body\n$scope.countries = service.countries;\n$scope.newCountry = $scope.countries.get({Id : someId},callbackFn);\n<\/code><\/pre>\nNow you have a counrtry with ‘someId’ in $scope.newCountry<\/p>\n<\/li>\n
- \n
Make sure you injected ngResource.<\/p>\n
app = angular.module(\"app\", ['ngResource']);\n<\/code><\/pre>\nYou need to inject the modules correcly<\/p>\n
UserAddController.$inject = ['$scope', '$location', 'CountryService', 'user'];\n<\/code><\/pre>\nThis is quoted the doc.<\/p>\n
\nYou 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<\/strong> match the corresponding service ID registered with angular. The order of the service IDs matters<\/strong>: the order of the services in the array will be used when calling the factory function with injected parameters.<\/p>\n<\/blockquote>\nI created a FIDDLE and you can try.<\/p>\n<\/li>\n<\/ol>\n
Originally posted 2013-12-02 01:37:25. <\/small><\/p>","protected":false},"excerpt":{"rendered":"
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” } }); […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1806","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1806","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=1806"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1806\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=1806"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=1806"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=1806"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}