带有Angular.js的Laravel 4 RESTful API

时间:2013-09-20 11:11:49

标签: rest angularjs curl laravel laravel-4

我有一个基于 RESTful API 的应用程序 Laravel 4 Angular。 JS 即可。 应用程序的CRUD进程由angularjs $ http服务处理。

后端(Laravel 4):

路由:app / routes.php

//.....
Route::group(array('prefix' => 'api/v1', 'before' => 'auth.basic'), function()
{
    //....
    Route::resource('pages', 'PagesController');
    //....
});
//.....

控制器: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
        );
  }
  //......
}

致电:cURL

此更新功能也可以使用cURL方法访问。

curl -i -X PUT --user admin:admin -d 'title=Updated Title' localhost/laravel/index.php/api/v1/pages/2

前端: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 -->

客户端: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) {
            //
        });

  }
  //.........
}

问题:

  1. 如何将表单数据(多个值)传递给$ http.put请求 在这?
  2. 如何在Laravel 4 Controller中访问PUT请求数据?能够 我使用Input :: get()?

1 个答案:

答案 0 :(得分:1)

需要在html中进行一些更新才能获取要更新的页面ID。在表单中添加以下html。

<input type="hidden" ng-model="entry.id" value="entry.id"/>

然后将角度脚本更改为,

 $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) {
        //
     });
 }

在你的Laravel控制器中,

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