I am getting a $save() not a function in Angular

Question

I am trying to build a relatively simple web application following tutorials from the book ProAngular. The book examples work fine, but when I try and build my own app, I am getting stuck on a strange error. Here is part of my code:

    $scope.dispositionsResource = $resource(dispositionUrl + ":id", { id: "@id" },
        { create: {method: "POST"}, save: {method: "PUT"}, delete: {method: "DELETE"}
    });

. . .

    $scope.updateDisposition = function (disposition) {
       alert("DISPOSITION: "+disposition.name);
        disposition.$save();
    }

The Create and Delete functions work fine. The updateDisposition method is being called form an HTML form and the correct disposition value is being passed (based on the Alert). But the error I am getting is:

    "Error: disposition.$save is not a function"

None of my example code separately defines a save function, the function should be part of the restful service ($resource). Shouldn't it?

Any pointers in the right direction would be greatly appreciated.

Ted

Answer 1

I am learning angular myself, but the first problem I can see with your code is that it doesn't look like you are defining $resource correctly ( fair warning, Angular has a ton of caveats and you may simply be delving into one I am not aware of).

I believe a more straight forward way of doing what you are trying to do is first creating an angular factory for the $resource, like so:

           angular.module('yourModuleName')
             .factory('disposition', function($resource) {
                return $resource('/whatever/url/youwant/:id', {
                  id: '@id'
                       })
                     });

And then from there, declare the factory as a dependency for your controller:

         angular.module('yourModuleName')
           .controller('yourControllerName', function($scope, disposition) {
             $scope.submitForm = function($scope)
               disposition.save($scope.nameOfYourModel);
           });

One thing to keep in mind is that $resource has all of the methods that you declared by default. From the docs at https://docs.angularjs.org/api/ngResource/service/$resource these are what are available out of the box:

            { 'get':    {method:'GET'},
               'save':   {method:'POST'},
               'query':  {method:'GET', isArray:true},
               'remove': {method:'DELETE'},
               'delete': {method:'DELETE'} };

Personally, I prefer to use the $http service myself. Yes, it is quite a bit more verbose than using $resource but I feel that it is much easier to understand $http when starting with angular than the $resource service. To save yourself from a world of headaches in the future, I highly recommend becoming familiar with the concept of promises in Angular as many of its services make use of them.

Good luck.

Answer 2

I did end up getting this working. Not totally sure why, but I renamed the Save function to 'Update' and associated it with the PUT functionality.

$scope.dispositionsResource = $resource(dispositionUrl+":id", { id: "@id" },
       { 'create': {method: "POST"}, 'update': {method: "PUT"}
       });

 $scope.updateDisposition = function (disposition) {
        $scope.dispositionsResource.update(disposition);
        $scope.editedDisposition = null;
    }

calling update rather than save worked. Something seemed to be interfering with using the term 'save'. Like I said, not sure what . . . yet. One of those head-scratchers for me. Thanks to those who tried to assist!