Angular Component

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()">
        <input type="text" ng-model="">
        <input type="text" ng-model="vm.topic">
    <md-button type="submit" class="md-primary md-raised">Create post</md-button>

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

class CreatePostFormController{
    constructor(API, ToastService){
            this.API = API;
        this.ToastService = ToastService;
      var data = {
        topic: this.topic,
         this.API.all('posts').post(data).then((response) => {'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';

  .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?

Did this page help you?