Question

In my Angular app, I’ve setup “project” as a $resource. In my controller, I ask the server for the data over a GET request immediately when the page loads. I can edit the information in my browser using Angular’s two-way data binding, and then I can save the data back to the server via a POST request, like this:

(edited/simplified for brevity)

function ProjectCtrl($scope, $routeParams, Project) {
    $scope.project = Project.get({id: $routeParams.projectId},
        function(data) { //Successfully received data }, 
        function(data) { //Failed to receive data },
    );

    $scope.saveProject = function() {
        $scope.project.save();
    };
}

My Node server correctly receives the data, processes it and makes some changes, saves it to my database, and then responds with the newly updated “project” object via JSON. Angular does not display the new object until I refresh the page. Is there any way to make it display the new data? I’m assuming there’s a more automatic Angular way to do this than to manually call another GET request after $scope.project.save();

Answer 1

It looks like the server response comes back as the first argument to the callback to save, so as long as the server responds with the full object data, you should be able to use it to create a “new” Project object like this:

function ProjectCtrl($scope, $routeParams, Project) {
    $scope.project = Project.get({id: $routeParams.projectId},
        function(data) { /* Successfully received data */ }, 
        function(data) { /* Failed to receive data */ },
    );

    $scope.saveProject = function() {
        $scope.project.save(function(data) {
            $scope.project = new Project(data);
        });
    };
}