How does AngularJS $resource send updated data?

Question

I've just started trying to learn AngularJS and am trying to get a simple app working which just displays and updates items from a MySQL database.

I have a PHP rest API that is handling the requests from the app.

So far, the API successfully passes back all the items in the database in a JSON-encoded array. It also passes back a single record, but I can't get it to update the record.

I can't see how the changed data is passed from the app to the API when I hit the save button on the form. Is it supposed to be passed as $_POST variables?

Here it the JS code I have in my app:

angular.module('starter.services', []).factory('List', function ($resource) {
    return $resource('http://example.com/restAPI/:id', { id: '@id' }, {
        update: {
            method: 'PUT'
        }
    });
});

angular.module('starter', ['ionic', 'ngResource', 'starter.controllers', 'starter.services'])
.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider

    .state('list', {
        url: '/',
        templateUrl: 'templates/list.html',
        controller: 'ListController'
    })

    .state('editItem', {
        url: '/items/:id/edit',
        templateUrl: 'templates/item-edit.html',
        controller: 'EditController'
    })

    $urlRouterProvider.otherwise('/');
});

angular.module('starter.controllers', [])
.controller('ListController', function ($scope, $state, $stateParams, List) {
    $scope.items = List.query();
})

.controller('EditController', function ($scope, $state, $stateParams, List) {
    $scope.updateItem=function(){
        $scope.item.$update(function(){
            $state.go('list');
        });
    };

    $scope.loadItem=function(){
        $scope.item=List.get({id:$stateParams.id});
    };

    $scope.loadItem();
});

Here is the form code:

<form class="form-horizontal" role="form" ng-submit="updateItem()">
<div class="form-group">
    <label for="title" class="col-sm-2 control-label">Title</label>
    <div class="col-sm-10">
        <input type="text" ng-model="item.title" class="form-control" id="title" placeholder="Title Here"/>
    </div>
</div>

<div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
        <input type="submit" class="btn btn-primary" value="Save"/>
    </div>
</div>
</form>

When the app loads, the initial state is 'list' and all the items from the database are visible on the page.

Each item in the list has an edit button. When I click an edit button, the state changes to 'editItem' and the new page is loaded with the single item. So far, so good.

When I make a change to the data and hit the save button, function updateItem is called with ng-submit="updateItem()" .

This calls the API, but I cant see how it passes the updated data. When I try error_log($_POST["title"]); in the API, I see 'PHP Notice: Undefined index: title' in the error log. How do I access the changed data in the API so I can update the database?

This is the .htaccess I'm using - could it be a problem with this? It is one I found on the internet, so I know very little about how it works.

<IfModule mod_rewrite.c>
RewriteEngine On

RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-s
RewriteRule ^(.*)$ api.php?id=$1 [QSA,NC,L]

RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^(.*)$ api.php [QSA,NC,L]

RewriteCond %{REQUEST_FILENAME} -s
RewriteRule ^(.*)$ api.php [QSA,NC,L]
</IfModule>

Answer 1

Thanks for the responses guys.

@georgeawg - you put me on the right path. I have only ever used GET and POST before whereas the update method uses PUT as you pointed out.

Once I realised that, I found the answer here... REST request data can't be read in 'put' method

This code is what works for me....

$data = json_decode(file_get_contents("php://input"), true);
error_log($data['title']);