AngularJS 2.0 - 數據發佈到Laravel方法

Question

比方說，我建有Laravel的API，允許索引和存儲英雄在我的數據庫。

這是我的存儲方法看起來像在我laravel英雄控制器：

public function store(Request $request) 
    { 

     $hero = new Hero; 
     $hero->name = $request->name; 
     $hero->description = $request->description; 
     $hero->avatar = "None"; 
     $hero->save(); 

     $heroes = Hero::paginate(5); 
     return view('/heroes/index', [ 
     'heroes' => $heroes 
    ]); 
    } 

上述方法，請求數據發送到正確的領域在我的數據庫。

我的問題是：我該如何操作表單數據並將其發送到此方法並使用Angular 2.0獲取返回的結果？

換句話說：我該如何使用角2.0與我laravel API工作？

這是用我的angular2.0方法，以顯示英雄的名單：

getHeroes() { 
     this.http.get('http://127.0.0.1/heroWorld/public/api/v1/heroes') 
     .map((res:Response) => res.json()) 
     .subscribe(
     data => { this.heroes = data; 
     }, 
     err => console.error(err), 
     () => console.log('done'); 
    ); 
    } 

所以..如何創建一個從我的角度？

addHero() { 

     let headers = new Headers(); 
    headers.append('Content-type', 'application/x-www-form-urlencoded'); 

    let formPayload = new URLSearchParams(); 
    formPayload.set('name', name); 
    formPayload.set('description', description); 

     this.http.post('http://127.0.0.1/heroWorld/public/heroes', formPayload.toString(), { headers: headers }) 
    .map((res:Response) => res.json()) 
    .subscribe(
     data => { this.heroes = data; 
     }, 
     err => console.error(err), 
     () => console.log('done'); 
    ); 
    } 

錯誤：failed to load resource: the server responded with a status of 500 (Internal Server Error)

我的角形式：

<form method="post"> 
    Hero name: <input type="text" name="name" [ngModel]="name"><br/> 
    Hero description: <input type="text" name="description" [ngModel]="description"> 
    <button (click)="addHero()" class="btn btn-primary">Add this hero!</button> 
    </form> 

我laravel工作形式：

<!-- New Hero Form --> 
     <form action="http://127.0.0.1/heroWorld/public/heroes" method="POST" class="form-horizontal"> 
      <input type="hidden" name="_token" value="knUS8vUxihTj4YJhjVkqmRBJJkVDDCABIZaRwXhN"> 

      <!-- Hero Name --> 
      <div class="form-group"> 
       <label for="hero-name" class="col-sm-4 control-label">Hero Name</label> 

       <div class="col-sm-6"> 
        <input type="text" name="name" id="hero-name" class="form-control"> 
       </div> 
      </div> 

      <!-- Hero Description --> 
      <div class="form-group"> 
       <label for="hero-description" class="col-sm-4 control-label">Hero Description</label> 

       <div class="col-sm-6"> 
        <input type="text" name="description" id="hero-description" class="form-control"> 
       </div> 
      </div> 

      <!-- Add Hero Button --> 
      <div class="form-group"> 
       <div class="col-sm-offset-3 col-sm-6"> 
        <button type="submit" class="btn btn-default"> 
         <i class="fa fa-plus"></i> Add Hero 
        </button> 
       </div> 
      </div> 
     </form> 

Answer 1

先送你需要改變你的數據的角度來laravel請求發佈。

getHeroes() { 
    this.http.post('http://127.0.0.1/heroWorld/public/api/v1/heroes') 
    .map((res:Response) => res.json()) 
    .subscribe(
    data => { this.heroes = data; 
    }, 
    err => console.error(err), 
    () => console.log('done'); 
); 

}

在您需要發送一個JSON響應，因爲你是消費的JSON格式的API laravel存儲功能。

public function store(Request $request) 
{ 

    $hero = new Hero; 
    $hero->name = $request->name; 
    $hero->description = $request->description; 
    $hero->avatar = "None"; 
    $hero->save(); 

    $heroes = Hero::paginate(5)->toArray(); 
    return response()->json($heroes); 
]); 
} 

Answer 2

要發送一個JSON有效負載的請求：

var headers = new Headers(); 
headers.append('Content-Type', 'application/json'); 

var obj = { 
    name: this.name, 
    description: this.description, 
    '_token': this.token 
}; 

this.http.post('http://127.0.0.1/heroWorld/public/api/v1/heroes', JSON.stringify(obj), { headers: headers }) 
    .map((res:Response) => res.json()) 
    .subscribe(
    data => { 
     this.heroes = data; 
    }, 
    err => console.error(err), 
    () => console.log('done'); 
); 

不要忘了導入頭類的Http一個沿：

import { Http, Headers } from 'angular2/http'; 

編輯

如果你想發送的形式，使用以下命令：

let headers = new Headers(); 
headers.append('Content-Type', 'application/x-www-form-urlencoded'); 

let formPayload = new URLSearchParams(); 
formPayload.set('name', this.name); 
formPayload.set('description', this.description); 
formPayload.set('_token', this.token); 
this.http.post('http://127.0.0.1/heroWorld/public/api/v1/heroes', formPayload.toString(), { headers: headers }) 
    .map((res:Response) => res.json()) 
    .subscribe(...); 

和相應的形式：

<form> 
    <input type="hidden" name="_token" [ngModel]="token" 
     value="knUS8vUxihTj4YJhjVkqmRBJJkVDDCABIZaRwXhN"> 
    Hero name: <input type="text" name="name" [ngModel]="name"><br/> 
    Hero description: <input type="text" name="description" [ngModel]="description"> 
    <button (click)="addHero()" class="btn btn-primary">Add this hero!</button> 
</form>