Docs

Angular Component

Suggest Edits

Now we need to create our first component which will contain the form that the user needs to fill in order to add a new Post.

php artisan ng:component create_post_form

👍

Components encourage code reuse

Aim to create a component for every feature so that you can reuse it later on.

Open angular/app/components/create_post_form/create_post_form.component.html in your editor and add the relevant HTML form.

<form ng-submit="vm.submit()">
  
    <md-input-container>
      <label>Name</label>
        <input type="text" ng-model="vm.name">
    </md-input-container>
  
    <md-input-container>
      <label>Topic</label>
        <input type="text" ng-model="vm.topic">
     </md-input-container>
  
    <md-button type="submit" class="md-primary md-raised">Create post</md-button>
  
</form>

And then update your create_post_form.component.js code to write the controller's logic

class CreatePostFormController{
    constructor(API, ToastService){
        'ngInject';
      
            this.API = API;
        this.ToastService = ToastService;
    }
  
   submit(){
      var data = {
        name: this.name,
        topic: this.topic,
      };
      
         this.API.all('posts').post(data).then((response) => {
         this.ToastService.show('Post added successfully');
       });
    }
}

export const CreatePostFormComponent = {
    templateUrl: './views/app/components/create_post_form/create_post_form.component.html',
    controller: CreatePostFormController,
    controllerAs: 'vm',
    bindings: {}
}

Then you need to edit your angular/index.components.js to import this component

import {CreatePostFormComponent} from './app/components/create_post_form/create_post_form.component';

angular.module('app.components')
  .component('createPostForm', CreatePostFormComponent);

👍

EcmaScript 6

We are writing in EcmaScript 6 which is the upcoming version of JavaScript (EcmaScript 5). Here's a good resource for learning EcmaScript 6.

Prefer a screencast?

Updated less than a minute ago