Отправка данных с углового на Laravel

Question

Итак, я снова застрял. Я делаю приложение списка дел, используя Laravel и Angular. Я могу получить данные из базы данных с помощью контроллеров Laravel и Angular, но когда я пытаюсь писать данные, я не могу заставить их работать.

Итак, у меня есть форма, whing использует ng-submit для размещения данных. Когда я - в Угловом контроллере - регистрирует данные на консоли, данные из формы верны. Но когда я пытаюсь передать его контроллеру Laravel, я застрял.

Я не могу понять, что не так, а бросить веб-ответы не помогло мне.

Laravel маршруты:

<?php 
Route::get('/', function() { 
    return view('index'); 
}); 
Route::get('/notes', 'NoteController@index'); 
Route::delete('/notes', 'NoteController@destroy'); 
Route::post('/notes', 'NoteController@store'); 
//Route::post('/notes', 'NoteController@update'); 
Route::get('/projects', 'ProjectController@index'); 
Route::get('/users', 'UserController@index'); 
Route::group(['middleware' => ['web']], function() { 
    // 
}); 
?> 

Laravel контроллеры:

<?php 
namespace App\Http\Controllers; 
use Illuminate\Http\Request; 
use App\Http\Requests; 
use App\Http\Controllers\Controller; 
use App\Note; 
use App\User; 
use App\Project; 
use Input; 
use Response; 
use Redirect; 
class NoteController extends Controller 
{ 
    public function index() 
    { 
     try { 
      $statusCode = 200; 
      $notes = Note::where('removed', 0)->get()->toArray(); 
      $response = []; 
      foreach ($notes as $note) { 
       $user = User::find($note['user_id']); 
       $project = Project::find($note['project_id']); 

       $this_row = array(
        'id' => $note['id'], 
        'user' => $user['uname'], 
        'project' => $project['pname'], 
        'content' => $note['content'], 
        'completed' => $note['completed'], 
        'removed' => $note['removed'], 
        'created' => $note['time_created'], 
        'deadline' => $note['time_deadline'] 
       ); 
       $response[] = $this_row; 
      } 
     } catch (Exception $e) { 
      $statusCode = 400; 
     } finally { 
      return Response::json($response, $statusCode); 
     } 
    } 

    public function store() 
    { 
     $note = Input::json()->get()->toArray(); 
     var_dump($note); 
     /* 
     $note->user_id = $note['user']; 
     $note->project_id = $note['project']; 
     $note->content = $note['content']; 
     $note->time_deadline = $note['deadline']; 
     $note->save();*/ 
    } 
} 

class ProjectController extends Controller 
{ 
    public function index() 
    { 
     try { 
      $statusCode = 200; 
      $projects = Project::orderBy('pname', 'asc')->get()->toArray(); 
      $response = []; 
      foreach ($projects as $project) { 
       $this_row = array(
        'id' => $project['id'], 
        'name' => $project['pname'], 
       ); 
       $response[] = $this_row; 
      } 
     } catch (Exception $e) { 
      $statusCode = 400; 
     } finally { 
      return Response::json($response, $statusCode); 
     } 
    } 
} 

class UserController extends Controller 
{ 
    public function index() 
    { 
     try { 
      $statusCode = 200; 
      $users = User::orderBy('uname', 'asc')->get()->toArray(); 
      $response = []; 
      foreach ($users as $user) { 
       $this_row = array(
        'id' => $user['id'], 
        'name' => $user['uname'], 
       ); 
       $response[] = $this_row; 
      } 
     } catch (Exception $e) { 
      $statusCode = 400; 
     } finally { 
      return Response::json($response, $statusCode); 
     } 
    } 
} 

Угловое Контроллер:

angular.module('todoApp', []).controller('MainController', function($scope, $http) { 
    var thisApp = this; 

    $http({method : 'GET', url : 'http://localhost:8000/notes'}) 
     .then (function(response) { 
      thisApp.todos = response.data; 
     }, function() { 
      alert("Error getting todo notes"); 
     }); 

    $http({method : 'GET',url : 'http://localhost:8000/users'}) 
     .then(function(response) { 
      thisApp.users = response.data; 
     }, function() { 
      alert("Error getting users"); 
     }); 
    $http({method : 'GET', url : 'http://localhost:8000/projects'}) 
     .then(function(response) { 
      thisApp.projects = response.data; 
     }, function() { 
      alert("Error getting projects"); 
     }); 
    thisApp.addTodo = function(note) { 
     console.log($scope.note); 
     $http({ 
      method : 'POST', 
      url : 'http://localhost:8000/notes', 
      data : $.param($scope.note), 
      headers : {'Content-Type': 'application/x-www-form-urlencoded'} 
     }); 
    }; 
}); 

HTML:

<!doctype html> 
<html ng-app="todoApp"> 
    <head> 
     <script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
     <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script> 
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
     <script src="/js/MainController.js"></script> 
    </head> 
    <body ng-controller="MainController as myControl"> 
     <h2>Todo</h2> 
     <div> 
      <table> 
       <tr> 
        <th>Note:</th> 
        <th>Author:</th> 
        <th>Project:</th> 
        <th>Created:</th> 
        <th>Deadline:</th> 
       </tr> 
       <tr ng-repeat="todo in myControl.todos"> 
        <td> {{ todo.content }} </td> 
        <td> {{ todo.user }} </td> 
        <td> {{ todo.project }} </td> 
        <td> {{ todo.created }} </td> 
        <td> {{ todo.deadline }} </td> 
        <td><button>Update</button></td> 
        <td><button>Delete</button></td> 
       </tr> 
      </table> 
     </div> 
     <h2>Add new:</h2> 
     <div> 
      <form ng-submit="myControl.addTodo()"> 
       User:<br/> 
       <select ng-model="note.user"> 
        <option ng-repeat="user in myControl.users" value="{{ user.id }}">{{ user.name }}</option> 
       </select><br/> 
       Project:<br/> 
       <select ng-model="note.project"> 
        <option ng-repeat="project in myControl.projects" value="{{ project.id }}">{{ project.name }}</option> 
       </select><br/> 
       Note:<br/> 
       <textarea rows="5" cols="30" ng-model="note.content"></textarea><br/> 
       Deadline (format YYYY-MM-DD HH:MM):<br/> 
       <input type="text" ng-model="note.deadline" /><br/> 
       <input type="submit" value="Add" /> 
      </form> 
     </div> 
    </body> 
</html> 

Результат можно увидеть на этом изображении: http://imgur.com/60hIzSb

Я понятия не имею, что я делаю неправильно. Я думаю, моя проблема заключается в угловом контроллере в функции addTodo, но я действительно не знаю. Какие-либо предложения?

Я также задаюсь вопросом, знает ли кто-нибудь, если мне нужно что-то сделать, кроме изменения method : 'POST' до method : 'PUT', если я хочу использовать метод PUT для создания новых заметок?

Answer 1

Я чувствую, что что-то делать с этим:

$note = Input::json()->get()->toArray(); 
var_dump($note); 

В Угловое вы отправляете форму кодированные данные не JSon. И я считаю, Laravel автоматически декодирует полученный JSON в любом случае, так что это должно работать:

$note = Input::all(); 
var_dump($note); 

Answer 2

Если это CSRF токен затем впрыснуть CSRF токен ваш взгляд

angular.module("todoApp").constant("CSRF_TOKEN", '{!! csrf_token() !!}'); 

и вашей функции addTodo в заголовки пропускают токен ....

thisApp.addTodo = function(note) { 
    console.log($scope.note); 
    $http({ 
     method : 'POST', 
     url : 'http://localhost:8000/notes', 
     data : $.param($scope.note), 
     headers : {'Content-Type': 'application/x-www-form-urlencoded', 
           'x-csrf-token': CSRF_TOKEN} 
    });