Angular Directive

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

php artisan ng:directive create_post_form

👍

Components/directives encourage code reuse

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

Open angular/directives/create_post_form/create_post_form.html in your editor and add the relevant HTML form.

create_post_form.html

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

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

create_post_form.directive.js

(function(){
	"use strict";

	angular.module('app.controllers').controller('CreatePostController', CreatePostController);

	function CreatePostController(API, ToastService){

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

})();

👍

Angular Style Guide

If the angular code looks a bit weird, take a look at John Papa's angular style guide.