Laravel 4 RESTful API with Angular.js - rest

Question

I have a RESTful API based application with Laravel 4 and Angular.js.
The application's CRUD processes are handled by angularjs $http service.
The Backend Side (Laravel 4):
Routing : app/routes.php
//.....
Route::group(array('prefix' => 'api/v1', 'before' => 'auth.basic'), function()
{
//....
Route::resource('pages', 'PagesController');
//....
});
//.....
Controller : app/controllers/api/PageController.php
<?php
//.....
class PagesController extends BaseController {
//......
public function update($id) {
$page = Page::find($id);
if ( Request::get('title') )
{
$page->title = Request::get('title');
}
if ( Request::get('slug') )
{
$page->slug = Request::get('slug');
}
$page->save();
return Response::json(array(
'error' => false,
'message' => 'Page Updated'),
200
);
}
//......
}
Calling : cURL
This update function can be accessed using cURL method also.
curl -i -X PUT --user admin:admin -d 'title=Updated Title' localhost/laravel/index.php/api/v1/pages/2
Front-end : HTML
<!-- Top Code -->
<!-- From to Add/Edit Pages -->
<form class="form-horizontal" role="form" ng-show="edit" ng-submit="updatePage(entry)">
<!-- Page Title -->
<div class="form-group">
<label class="col-lg-2 control-label">Page Title</label>
<div class="col-lg-4">
<input type="text" class="form-control" value="{{entry.title}}" ng-model="entry.title">
</div>
</div>
<!-- Slug -->
<div class="form-group">
<label class="col-lg-2 control-label">Slug</label>
<div class="col-lg-4">
<input type="text" class="form-control" value="{{entry.slug}}" ng-model="entry.slug">
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-primary">Update</button>
</div>
</div>
</form>
<!-- Bottom Code -->
Client-side : angularjs
// ......
function pageCtrl($scope, $http, Data) {
//.........
$scope.updatePage = function(entry) {
$http({method: 'PUT', url: Data.root_path + 'api/v1/pages/'+id}).
success(function(data, status, headers, config) {
//
}).
error(function(data, status, headers, config) {
//
});
}
//.........
}
Question:
How can I pass my form data(more than one values) to the $http.put request
here ?
How can I access the PUT request data in Laravel 4 Controller ? Can
I use Input::get() ?

Answer 1

Need some update in your html to get page id to update. Add the following html inside form.
<input type="hidden" ng-model="entry.id" value="entry.id"/>
Then change angular script to,
$scope.updatePage = function(entry) {
$http.put(Data.root_path + 'api/v1/pages/' + entry.id, entry)
.success(function(data, status, headers, config) {
//
})
.error(function(data, status, headers, config) {
//
});
}
And in your Laravel Controller,
public function update($id) {
$page = Page::find($id);
$input = $input = Input::all();
if ( $input['title'] )
{
$page->title = $input['title'];
}
if ( $input['slug'] )
{
$page->slug = $input['slug'];
}
$page->save();
return Response::json(array(
'error' => false,
'message' => 'Page Updated'),
200
);
}