CODEWITHSUNDEEP
angularjshttp-post
Reverend Bubbles
Reverend Bubbles

Reputation: 1393

$http.post not acting as expected in AngularJS

I've seen this topic discussed several times, but I'm still confused after reading every answer I've seen on this topic.

As many have before me, I'm trying to create this basic To Do app with CRUD features. I have the following (abridged to show relevant parts) code:

HTML:

        <div ng-repeat="item in items | orderObjectBy:sortby" ng-if="complete == 'N'">
            <strong>{{item.title}}</strong><br/>
            <em>{{item.details}}</em><br/>
            {{item.due}}<br/>
            <form>Mark Complete? <input type="checkbox" ng-model="item.complete" value="Y"></form>
            <a href="#/item/edit/{{item.id}}">Edit this item</a>
            <br/>
            <hr/>           
        </div>

    <button ng-click="save()">Save changes</button>

JS in controller:

    $scope.save = function() {
    $http.post('js/services/items.json', $scope.items).success(function(data) {
        $scope.msg = 'Data saved' + JSON.stringify($scope.items);
    });
};

When I check a "Completed" box, and then "Save Changes", I get the data dump of the updated JSON but it never actually updated the JSON file on the server. That path is the same exact path I use to get the JSON in the first place. There are no errors thrown. It simply doesn't do it.

What am I missing here?

Upvotes: 0

Views: 109

Answers (2)

Pylyp Lebediev
Pylyp Lebediev

Reputation: 2121

Angular service to call service side

(function () {
    'use strict';

    angular
        .module('app')
        .factory('service', service);

    function service($http) {
        var url = 'api/todo';

        var service = {
            update: update
        };

        return service;

        function update(id, data, callback, errorCallback) {
            if (id) {
                $http({
                    method: 'PUT',
                    url: url + '/' + id,
                    data: data
                })
                .success(function (data, status, headers, config) {
                    if (callback) {
                        callback(status);
                    }
                })
                .error(function (data, status, headers, config) {
                });
            }
        };
    }
})();

Angular controller that uses service

(function () {
    'use strict';

    angular.module('app')
           .controller('controller', controller);

    function controller($scope, service) {

        $scope.save = function () {
            var person = {
                Id: $scope.item.id,
                Name: $scope.item.name
            };

            service.update(personId, person, function (status) {
                $scope.msg = 'Data saved';
            });
        };
    }
})();

In case you are using .NET infrastructure, your service can look like.

namespace App.Controllers.Api
{
    [Route("api/[controller]")]
    public class TodoController : Controller
    {
        [FromServices]
        public ITodoRepository Repository { get; set; }

        [HttpPut("{id}")]
        public IActionResult Update(int id, [FromBodyModels.TodoModel data)
        {
            if (data == null || data.Id != id)
            {
                return this.HttpBadRequest();
            }

            this.Repository.Update(data);

            return new NoContentResult();
        }
    }
}

*For update methods you need to use PUT method instead of POST

For more information about ASP.NET 5 (next version of ASP.NET) you can refer to http://docs.asp.net/en/latest/tutorials/your-first-aspnet-application.html

Upvotes: 0

mehring
mehring

Reputation: 11

javascript is a client side language and doesn't have access to the server's file system, so angular itself can not update that file on the web server.

to do server side file manipulation, you need to use a server side language such as php or .net

Upvotes: 1

Related Questions