Angularjs with JSON, GET works but POST doesn't

Question

I'm relatively new to angularjs. I'm trying to work with this some JSON and can't seem to figure out the issue with my post command. The get works just fine, but anything else throws a 404 url error though I checked and everything matches.

Here is my app.js code which calls the get command that works

angular
.module('app', [
    'ui.router'
    ])
.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider){
    $urlRouterProvider.otherwise('/');

    $stateProvider
        .state('home', {
            url: '/',
            templateUrl: 'templates/home.html',
            controller: 'homeCtrl',
            resolve: {
                friends: ['$http', function($http){
                    return $http.get('./api/friends.json').then(function(response ){
                        return response.data;
                    })
                }]
            }
        })
        .state('about', {
            url: '/about',
            templateUrl: 'templates/about.html',
            controller: 'aboutCtrl'
        })
        .state('contact', {
            url: '/contact',
            templateUrl: 'templates/contact.html'
        })
}])

Here is the homeCtrl.js file which loads stuff for the home page, where I want to edit the contents of the home page and post back to the JSON file.

Here I call the post and it gives me a 404 error.

angular
.module('app')
.controller('homeCtrl', ['$scope', 'friends', '$http', function($scope, friends, $http){
        $scope.title = "Home";
        $scope.friends = friends;
        $scope.items =['item1', 'item2','item3'];
        $scope.selectedValue = 'item1';

        $scope.save = function() {
            $http.post('./api/friends.json', friends);
        };
}]);

This is the home.html

<h1>{{title}}</h1>
<ul>
    <li ng-repeat = "friend in friends">
        <input type="text" ng-model="friend.name">
        <input type="text" ng-model="friend.age">
    </li>
</ul>
<button ng-click="save()" class="btn btn-primary">Save</button>

This is the code for friends.json

[
    {"name": "Will", "age": 30},
    {"name": "Laura", "age": 25}
]

Answer 1

You said "I want to edit the contents of the home page and post back to the JSON file."

You cant save to the local files with angular. "Get" request is working just because browser can load static file (its same with css or html).

You definitely run application just by clicking html and not in any http-server. If you run server (for example nodejs http-server) in the folder and connect browser to it. It will not provide 404 (but of course it will not update json file)

If you need data to be saved, you need real working application which will provide API and process request and store data.