php - Angularjs CRUD applicatioan PUT method does not work -
i'm doing angularjs crud application using php framework slim backend, application done put method not work , realy can't understand why.
here 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 * name order 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 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 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 name 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 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 html code, template display users:
<!-- show existing users. --> <h2>striped rows</h2> <p>the .table-striped class adds zebra-stripes 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>( <a href="#/edit/{{user.id}}">edit</a> )</td> </tr> </tbody> </table> <!-- add new friend list. -->and page when 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 strange because when press edit button enter name form, , when click button can see in network works, seems i've got mistake somewhere, can see on picture
maybe can link me examples how this? thank attention:)
rather writing methods in every controller api data, try api interactions through factory. call method , pass parameters 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 endpoint easy , minimizes duplicate code.
// data api apidata.get('items', itemcontroller.params) .then(function(data) { itemcontroller.data = data; } );
Comments
Post a Comment