Angularjs JavaScript to fast when using PUT in a CRUD SPA

Question

Looking at a RESTful CRUD SPA with angularjs for example.

When using the RESTful approach with Angularjs, I am running into cases where an update/delete/etc. isn't reflected in the list without a hard refresh (F5). It's occurring because the save/update/delete are taking longer than JavaScript takes to run the next command which should update the list.

app.controller('UserDetailCtrl', ['$scope', '$routeParams', 'UserFactory', '$location',
function ($scope, $routeParams, UserFactory, $location) {

    // callback for ng-click 'updateUser':
    $scope.updateUser = function () {
        UserFactory.update($scope.user);  // Before this is done
        $location.path('/user-list');     // this has already fetched the (outdated) list
    };

Coming from e.g. .NET MVC where in a situation like this I would return the List of items from the update (return value). The scaffolded Web API controller is RESTful, and it doesn't return anything from POST, PUT, or DELETE.

    // DELETE api/<controller>/5
    public **void** Delete(int id)
    {
        // delete...
    }

In Angularjs I could imagine a couple approaches to ensure that the List of users is always up to date. (For example maintain a list in the $scope and modify it simultaneously with the POST/PUT/DELETE calls but it seems cumbersome)

What is the best approach in Angularjs using RESTful style to ensure e.g. a list has the accurate up to date data? If there isn't a general approach, what would be the best way to handle it in this example app.

Since the Web API controller is RESTful, it doesn't return anything from POST, PUT, or DELETE - Being RESTful is no reason not to return anything. — a better oliver
– a better oliver, Commented Sep 28, 2014 at 19:05
Thanks for the clarification, I guess that's just a Web API scaffolding default. — lko
– lko, Commented Sep 28, 2014 at 19:13

Darin Dimitrov · Accepted Answer · 2014-09-28 18:59:36Z

2

You could wait for the AJAX request to complete before changing the path:

UserFactory.update($scope.user, function() {
    $location.path('/user-list');
});

answered Sep 28, 2014 at 18:59

Darin Dimitrov

1.0m277 gold badges3.3k silver badges3k bronze badges

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

1 Comment

lko Over a year ago

Ah, the callback. w3schools.com/jquery/jquery_callback.asp Fits perfectly!

bmlsoftware · Accepted Answer · 2014-09-29 16:05:25Z

0

In a scenario like this I have used the $http or $resource services.

Using $http you would redirect in the success callback

Using $resource you can redirect inside the promise .$promise.then

answered Sep 29, 2014 at 16:05

bmlsoftware

1315 bronze badges

Collectives™ on Stack Overflow

Angularjs JavaScript to fast when using PUT in a CRUD SPA

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related