CODEWITHSUNDEEP
angularjsangular-resource
joy
joy

Reputation: 3707

Angular $resource and use of Interceptor to check response/error/callback

Last few days I am working to invoke REST services and track the response, error, callback etc. I have gone through most of the posting however due to my limited understanding on Angular seems like I am not able to understand it. Following is my problem and understanding I got so far.

I am using Project.$update() service which returns only "project_id". This server doesn't return complete data again. Following is line of few line of code to share here.

//create Project factory
app.factory('Project', function ($resource) {
    return $resource('/api/projects/:projectid',
            {projectid:'@id'},
            {update: {method:'PUT', isArray:false}}    
    );

});

Following is code in directive I am using to update/create project.

//save project
            scope.saveProject = function (project) {
                //update modified by field
                project.modifiedby = scope.user._id;
                //change to view mode
                scope.projectView = 1;
                //call server to save the data                
                if (project._id == undefined || project._id == "") {

                    //Call server to create new and update projectID
                    project._id = project.$save()._id;
                }
                else {
                    //Call server to update the project data
                    project.$update({ projectid: project._id });
                }


            };

Following is service response for both save() and update().

{"_id":"52223481e4b0c4d1a050c25e"}

Problem here is; "project" object value is replaced by new response returned by server having only project_id and other fields are replaced.

I was going through detailed documentation on $resource however I am not able to grasp it. It will be great to get some guidance here to write code to detect error, response, callback.

Upvotes: 2

Views: 1185

Answers (2)

joy
joy

Reputation: 3707

As per suggestion made by jvandemo and BoxerBucks; I have used following approach for save/update by passing the callback method with copy of original data. However still I am looking for central approach to take care of error/success status. Please suggest.

//save project metadta
            scope.saveProjectMetadta = function (project) {

                //update modified by field
                project.modifiedby = scope.user._id;
                //change to view mode
                scope.projectView = 1;
                //keep original data to pass into callback
                var originalProjectObject = angular.copy(project);
                //call server to save the data                
                if (project._id == undefined || project._id == "") {                    
                    //Call server to create new and update projectID
                    project.$save(originalProjectObject, function (projectResponse) {
                        originalProjectObject._id = projectResponse._id;
                        //update scope
                        scope.project = originalProjectObject;
                        //invoke method to update controller project object state
                        scope.updateProjectScope(scope.project);
                    });

                }
                else {
                        //Call server to update the project data
                        project.$update({ projectid: project._id }, function (projectResponse) {

                        originalProjectObject._id = projectResponse._id;
                        //update scope
                        scope.project = originalProjectObject;
                        //invoke method to update controller project object state
                        scope.updateProjectScope(scope.project);

                    },originalProjectObject);

                }
            };

Upvotes: 0

jvandemo
jvandemo

Reputation: 13306

You can replace the original object by the one returned from the server in your success callback like this:

        //save project
        scope.saveProject = function (project) {

            //update modified by field
            project.modifiedby = scope.user._id;

            //change to view mode
            scope.projectView = 1;

            //call server to save the data                
            if (project._id == undefined || project._id == "") {

                //Call server to create new and update projectID
                project.$save(function(updatedProject, headers){

                    // Replace project by project returned by server
                    project = updatedProject;
                });
            }
            else {
                //Call server to update the project data
                project.$update(function(updatedProject, headers){

                    // Replace project by project returned by server
                    project = updatedProject;
                });
            }

        };

That will replace the original object by the one returned by the server as soon as the server response is received.

If your callback is identical for the $save and $update methods, you can further simplify your code like this:

        //save project
        scope.saveProject = function (project) {

            //update modified by field
            project.modifiedby = scope.user._id;

            //change to view mode
            scope.projectView = 1;

            var action = (angular.isDefined(project._id)) ? '$update' : '$save';

            //call server to save the data                
            project[action](function(updatedProject, headers){

                // Replace project by project returned by server
                project = updatedProject;
            });

        };

Hope that helps!

Upvotes: 0

Related Questions