Angularjs CRUD applicatioan PUT method does not work - php

Question

i'm doing an angularjs CRUD application using php framework Slim as a backend, this application almost done but my PUT method does not work and i realy can't understand why.
Here is my Slim code:
<?php
require 'Slim/Slim.php';
\Slim\Slim::registerAutoloader();
// create new Slim instance
$app = new \Slim\Slim();
$app->get('/users', 'getUsers');
$app->post('/addUser', 'addUser');
$app->put('/edit/:id', 'updateUser');
$app->delete('/users/:id', 'deleteUser');
$app->run();
function getUsers() {
$sql = "select * FROM name ORDER BY id";
try {
$db = getConnection();
$stmt = $db->query($sql);
$wines = $stmt->fetchAll(PDO::FETCH_OBJ);
$db = null;
echo json_encode($wines);
} catch(PDOException $e) {
echo '{"error":{"text":'. $e->getMessage() .'}}';
}
}
function addUser() {
$request = \Slim\Slim::getInstance()->request();
$user = json_decode($request->getBody());
$sql = "INSERT INTO name (name) VALUES (:name)";
try {
$db = getConnection();
$stmt = $db->prepare($sql);
$stmt->bindParam("name", $user->name);
$stmt->execute();
$user->id = $db->lastInsertId();
$db = null;
echo json_encode($user);
} catch(PDOException $e) {
echo '{"error":{"text":'. $e->getMessage() .'}}';
}
}
function updateUser($id) {
$request = Slim::getInstance()->request();
$body = $request->getBody();
$user = json_decode($body);
$sql = "UPDATE name SET name=:name WHERE id=:id";
try {
$db = getConnection();
$stmt = $db->prepare($sql);
$stmt->bindParam("name", $user->name);
$stmt->bindParam("id", $id);
$stmt->execute();
$db = null;
echo json_encode($user);
} catch(PDOException $e) {
echo '{"error":{"text":'. $e->getMessage() .'}}';
}
}
function deleteUser($id) {
$sql = "DELETE FROM name WHERE id=:id";
try {
$db = getConnection();
$stmt = $db->prepare($sql);
$stmt->bindParam("id", $id);
$stmt->execute();
$db = null;
} catch(PDOException $e) {
echo '{"error":{"text":'. $e->getMessage() .'}}';
}
}
function getConnection() {
$dbhost="127.0.0.1";
$dbuser="root";
$dbpass="000000";
$dbname="users";
$dbh = new PDO("mysql:host=$dbhost;dbname=$dbname", $dbuser, $dbpass);
$dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
return $dbh;
}
?>
Here is my angularjs code:
'use strict';
var app = angular.module('mainApp', ['ngRoute', 'ngResource']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
controller: 'MainCtrl',
templateUrl: 'views/users.html'
})
.when('/addUser', {
controller: 'MainCtrl',
templateUrl: 'views/add.html'
})
.when('/edit/:id', {
controller: 'MainCtrl',
templateUrl: 'views/edit.html'
})
.otherwise({
redirectTo: '/'
});
});
app.controller('MainCtrl', ['$scope', '$http', '$location', '$routeParams' , function($scope, $http, $location, $routeParams) {
$scope.master = {};
$scope.activePath = null;
$http.get('api/users').success(function(data) {
$scope.users = data;
});
$scope.deleteUser = function (user) {
console.log('service delete ' + user.id);
$http.delete('api/users/' + user.id).success(function(){
$location.path('/adminlist')
});
}
$scope.addUser = function(user, AddNewForm) {
console.log(user);
$http.post('api/addUser', user).success(function(){
$scope.reset();
$scope.activePath = $location.path('/');
});
$scope.reset();
};
$scope.updateUser = function(user, AddNewForm) {
console.log(user);
$http.put('api/edit/' + $routeParams.id, {id:$routeParams.id, name:user.name}).success(function(){
$scope.reset();
$scope.activePath = $location.path('/');
});
$scope.reset();
};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
}]);
and finally my HTML code, this is a template where i display all users:
<!-- Show existing users. -->
<h2>Striped Rows</h2>
<p>The .table-striped class adds zebra-stripes to a table:</p>
<table class="table table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Delete</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
<td>{{user.id}}</td>
<td>
{{user.name}}
</td>
<td><a ng-click="deleteUser( user )">delete</a></td>
<td>( edit )</td>
</tr>
</tbody>
</table>
<!-- Add a new friend to the list. -->
And this is my page when i wanna update user:
<h2>Edit user</h2>
<form novalidate name="AddNewForm" id="add-new-form" method="post" action="">
<label for="user">Name:</label>
<input type="text" ng-model="user.name" required />
<br/>
<button class="btn btn-primary" ng-disabled="AddNewForm.$invalid || isUnchanged(user)" id="add-new-btn" ng-click="updateUser(user)">Edit!</button>
</form>
!
It is very strange because when i press edit button i enter some another name into this form, and when i click button i can see in Network what all works, but seems like i've got a mistake somewhere, you can see it on a picture
Maybe somebody can link me some examples how to do this?
Thank you for your attention:)

Answer 1

Rather than writing methods in every controller to get API data, I try to do all API interactions through a factory. You just call the method and pass parameters to it.
// Rest API data factory
function ApiData($http)
{
var query = '';
var domain = 'mydomain.com/';
return {
get: function (endpoint, params) {
return $http({
method: 'GET'
, url: domain + endpoint
, params: params
})
.then(function (response) {
return response.data;
});
},
post: function (endpoint, params) {
return $http({
method: 'POST'
, url: domain + endpoint
, params: params
})
.then(function (response) {
return response.data;
});
},
put: function (endpoint, params) {
return $http({
method: 'PUT'
, url: domain + endpoint
, params: params
})
.then(function (response) {
return response.data;
});
}
}
This makes calling the endpoint really easy and minimizes duplicate code.
// Get data from the API
ApiData.get('items', itemController.params)
.then(function(data) {
itemController.data = data;
}
);