Docs
Docs

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()"> <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?


Did this page help you?