Laravel 4 RESTful API with Angular.js

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() ?

Nitish Kumar · Accepted Answer · 2013-09-20 11:46:55Z

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
  );
}

edited Sep 20, 2013 at 11:46

answered Sep 20, 2013 at 11:16

Nitish Kumar

4,8503 gold badges22 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Laravel 4 RESTful API with Angular.js

The Backend Side (Laravel 4):

Routing : app/routes.php

Controller : app/controllers/api/PageController.php

Calling : cURL

Front-end : HTML

Client-side : angularjs

Question:

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

The Backend Side (Laravel 4):

Routing : app/routes.php

Controller : app/controllers/api/PageController.php

Calling : cURL

Front-end : HTML

Client-side : angularjs

Question:

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related