title: AngularJS 2.0 - post data to Laravel method
body: <p>Let's say I built an API with Laravel that allows to index and store <strong>heroes</strong> in my database.</p>
  
  <p>This is how my store method looks like in my laravel hero controller:</p>
  
  <pre><code>public function store(Request $request)
      {
  
          $hero = new Hero;
          $hero-&gt;name = $request-&gt;name;
          $hero-&gt;description = $request-&gt;description;
          $hero-&gt;avatar = "None";
          $hero-&gt;save();
  
          $heroes = Hero::paginate(5);
          return view('/heroes/index', [
          'heroes' =&gt; $heroes
      ]);
      }
  </code></pre>
  
  <p>The method above sends the request data to the right field in my database.</p>
  
  <p><strong>My question is:</strong> how I can manipulate and send form data to this method and fetch the returned result using Angular 2.0?</p>
  
  <p>In other words: how I can use Angular 2.0 to work with my laravel API?</p>
  
  <p>This is my angular2.0 method used to show the list of heroes:</p>
  
  <pre><code>getHeroes() {
        this.http.get('http://127.0.0.1/heroWorld/public/api/v1/heroes')
        .map((res:Response) =&gt; res.json())
        .subscribe(
          data =&gt; { this.heroes = data;
          },
          err =&gt; console.error(err),
          () =&gt; console.log('done');
        );
    }
  </code></pre>
  
  <p>so.. how do I create one from my angular?</p>
  
  <pre><code>    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) =&gt; res.json())
    .subscribe(
          data =&gt; { this.heroes = data;
          },
          err =&gt; console.error(err),
          () =&gt; console.log('done');
        );
    }
  </code></pre>
  
  <p>Error: <code>failed to load resource: the server responded with a status of 500 (Internal Server Error)</code></p>
  
  <p>My angular form:</p>
  
  <pre><code>&lt;form method="post"&gt;
      Hero name: &lt;input type="text" name="name" [ngModel]="name"&gt;&lt;br/&gt;
      Hero description: &lt;input type="text" name="description" [ngModel]="description"&gt;
      &lt;button (click)="addHero()" class="btn btn-primary"&gt;Add this hero!&lt;/button&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p>My laravel working form:</p>
  
  <pre><code>&lt;!-- New Hero Form --&gt;
          &lt;form action="http://127.0.0.1/heroWorld/public/heroes" method="POST" class="form-horizontal"&gt;
              &lt;input type="hidden" name="_token" value="knUS8vUxihTj4YJhjVkqmRBJJkVDDCABIZaRwXhN"&gt;
  
              &lt;!-- Hero Name --&gt;
              &lt;div class="form-group"&gt;
                  &lt;label for="hero-name" class="col-sm-4 control-label"&gt;Hero Name&lt;/label&gt;
  
                  &lt;div class="col-sm-6"&gt;
                      &lt;input type="text" name="name" id="hero-name" class="form-control"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;!-- Hero Description --&gt;
              &lt;div class="form-group"&gt;
                  &lt;label for="hero-description" class="col-sm-4 control-label"&gt;Hero Description&lt;/label&gt;
  
                  &lt;div class="col-sm-6"&gt;
                      &lt;input type="text" name="description" id="hero-description" class="form-control"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;!-- Add Hero Button --&gt;
              &lt;div class="form-group"&gt;
                  &lt;div class="col-sm-offset-3 col-sm-6"&gt;
                      &lt;button type="submit" class="btn btn-default"&gt;
                          &lt;i class="fa fa-plus"&gt;&lt;/i&gt; Add Hero
                      &lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/form&gt;
  </code></pre>