No data returned in consuming REStful web service using Angularjs

Question

enter image description here I am beginner learning Angularjs .Please help me with examples for following

script added

javascript -

var app = angular.module('myapp', []);

app.controller('MyCtrl1', ['$scope', 'UserFactory', function ($scope, UserFactory) {
UserFactory.get({}, function (userFactory) {
    $scope.time = userFactory.time;
})
}]);
var service = angular.module('apiService', ['ngResource']);

service.factory('UserFactory', function ($resource) {
return $resource('http://time.jsontest.com', {}, {
    query: {
        method: 'GET',
        params: {},
        isArray: true
    }
})
});

.html file

<body ng-app="myapp">
<divng-controller="MyCtrl1" >
<p>
    Result from RESTful service is: {{ time }}
</p>
</div>
</body>

above snippet gives the out put as

Result from RESTful service is : {{time}}

and not the value i am expecting ..Reference : http://draptik.github.io/blog/2013/07/13/angularjs-example-using-a-java-restful-web-service/

I want to write CRUD methods (GET/POST/PUT/DELETE) and I have started with GET.

Thanks

Could you possibly put a plnkr together (plnkr.co)? Or at least a more complete code sample. I suspect something is wrong with code you haven't posted here, otherwise the javascript looks fine — mbroadst
– mbroadst, Commented May 4, 2014 at 20:27

mbroadst · Accepted Answer · 2014-05-04 20:59:23Z

1

You need to make sure that your main app module injects your service. In your plnkr you have:

var app = angular.module('myapp', []);

where you should really have:

var app = angular.module('myapp', ['apiService']);

This ensures that the service module is injected into your app module, and you can use the UserFactory that you define in that module. For this simple case you could have also simply defined the UserFactory factory on the 'myapp' module as well

answered May 4, 2014 at 20:59

mbroadst

8887 silver badges8 bronze badges

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

1 Comment

Priyanka Over a year ago

Can you please send link for a good tutorial for CRUD methods for the same?

dmcqu314 · Accepted Answer · 2014-05-05 04:41:51Z

It's very close but you have a slight mistake in your app instantiation. It should be the following:

var app = angular.module('myapp', [ 'apiService' ]);

There's a couple other issues I see as well but one thing is I usually do the following for async requests

var promise = UserFactory.get({}).$promise; 
promise
   .then( function(response) {
     $scope.time = userFactory.time;
   });

EDIT: Here's an example for named methods for a given ReST service:

return $resource('/api/v2.0/user/lists/:listId',
    {},
    {

        // POST - list create/product addition to list
        'addProduct': {
            method: 'POST',
            isArray: false,
            params: {
                listId: '@listId',
                productId: '@productId'
            }
        },
        'createList': {
            method: 'POST',
            isArray: false,
            params: {
                listName: '@listName'
            }
        },

        // GET - list of user lists/list details
        'readLists': {
            method: 'GET',
            isArray: false,
            params: {}
        },
        'readListsWithProductId': {
            method: 'GET',
            isArray: false,
            params: {
                productId: '@productId'
            }
        },
        'readListById': {
            method: 'GET',
            isArray: false,
            params: {
                listId: '@listId',
                sort: '@sort',
                flags: true,
                extendedInfo: true,
                rows: '@rows',
                start: '@start'
            }
        },

        // PUT - list renaming
        'renameList': {
            method: 'PUT',
            isArray: false,
            params: {
                newName: '@listName',
                listId: '@listId'
            }
        },

        // DELETE - list deletion/clear/product removal
        'removeProduct': {
            method: 'DELETE',
            isArray: false,
            params: {
                listId: '@listId',
                productId: '@productId'
            }
        },
        'clearList': {
            method: 'DELETE',
            isArray: false,
            params: {
                listId: '@listId',
                clear: true
            }
        },
        'deleteList': {
            method: 'DELETE',
            isArray: false,
            params: {
                listId: '@listId'
            }
        }
    });

You could access it like the following:

Factory.[methodName](payload)

And how does controller changes as per each methods? Can you please post a good tutorial link for the same?
@Priyanka This site has a lot of good video tutorials(most of which are free). Here's one on controllers and factories that looks decent: egghead.io/lessons/angularjs-using-resource-for-data-models

Collectives™ on Stack Overflow

No data returned in consuming REStful web service using Angularjs

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related