{"metadata":{"image":[],"title":"","description":""},"api":{"url":"","auth":"required","results":{"codes":[]},"settings":"","params":[]},"next":{"description":"","pages":[]},"title":"Angular Component","type":"basic","slug":"angular-directive","excerpt":"","body":"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**.\n\n```\nphp artisan ng:component create_post_form\n```\n[block:callout]\n{\n  \"type\": \"success\",\n  \"title\": \"Components encourage code reuse\",\n  \"body\": \"Aim to create a component for every feature so that you can reuse it later on.\"\n}\n[/block]\nOpen `angular/app/components/create_post_form/create_post_form.component.html` in your editor and add the relevant HTML form.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<form ng-submit=\\\"vm.submit()\\\">\\n  \\n  \\t<md-input-container>\\n      <label>Name</label>\\n  \\t\\t<input type=\\\"text\\\" ng-model=\\\"vm.name\\\">\\n    </md-input-container>\\n  \\n  \\t<md-input-container>\\n      <label>Topic</label>\\n    \\t<input type=\\\"text\\\" ng-model=\\\"vm.topic\\\">\\n     </md-input-container>\\n  \\n    <md-button type=\\\"submit\\\" class=\\\"md-primary md-raised\\\">Create post</md-button>\\n  \\n</form>\",\n      \"language\": \"html\",\n      \"name\": \"create_post_form.component.html\"\n    }\n  ]\n}\n[/block]\nAnd then update your `create_post_form.component.js` code to write the controller's logic\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"class CreatePostFormController{\\n    constructor(API, ToastService){\\n        'ngInject';\\n      \\n \\t     \\tthis.API = API;\\n  \\t    this.ToastService = ToastService;\\n    }\\n  \\n   submit(){\\n      var data = {\\n        name: this.name,\\n        topic: this.topic,\\n      };\\n      \\n     \\t this.API.all('posts').post(data).then((response) => {\\n         this.ToastService.show('Post added successfully');\\n       });\\n    }\\n}\\n\\nexport const CreatePostFormComponent = {\\n    templateUrl: './views/app/components/create_post_form/create_post_form.component.html',\\n    controller: CreatePostFormController,\\n    controllerAs: 'vm',\\n    bindings: {}\\n}\",\n      \"language\": \"javascript\",\n      \"name\": \"create_post_form.component.js\"\n    }\n  ]\n}\n[/block]\nThen you need to edit your angular/index.components.js to import this component\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"import {CreatePostFormComponent} from './app/components/create_post_form/create_post_form.component';\\n\\nangular.module('app.components')\\n  .component('createPostForm', CreatePostFormComponent);\\n\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"success\",\n  \"title\": \"EcmaScript 6\",\n  \"body\": \"We are writing in EcmaScript 6 which is the upcoming version of JavaScript (EcmaScript 5). Here's a good resource for [learning EcmaScript 6](https://babeljs.io/docs/learn-es2015/).\"\n}\n[/block]\n> Prefer a screencast?\n[block:html]\n{\n  \"html\": \"<iframe width=\\\"560\\\" height=\\\"315\\\" src=\\\"https://www.youtube.com/embed/_ZWV9KBK2N8\\\" frameborder=\\\"0\\\" allowfullscreen></iframe>\"\n}\n[/block]","updates":["56db93bad0772a0b00348b40","56df33ba775f5e200097acb2","57a7cea2077cf10e00ca4632"],"order":4,"isReference":false,"hidden":false,"sync_unique":"","link_url":"","link_external":false,"_id":"57ffd85f755a2e1700c2bb19","parentDoc":null,"project":"567083021dabd80d00b122ae","createdAt":"2015-12-18T23:09:53.539Z","user":"567082433a32d20d00c45cab","version":{"version":"3.4","version_clean":"3.4.0","codename":"","is_stable":true,"is_beta":false,"is_hidden":false,"is_deprecated":false,"categories":["57ffd85f755a2e1700c2bb06","57ffd85f755a2e1700c2bb07","57ffd85f755a2e1700c2bb08","57ffd85f755a2e1700c2bb09","57ffd85f755a2e1700c2bb0a","57ffd85f755a2e1700c2bb0b","57ffd85f755a2e1700c2bb0c","57ffd85f755a2e1700c2bb0d"],"_id":"57ffd85f755a2e1700c2bb05","project":"567083021dabd80d00b122ae","releaseDate":"2016-10-13T18:54:23.018Z","__v":1,"createdAt":"2016-10-13T18:54:23.018Z"},"__v":0,"category":{"sync":{"isSync":false,"url":""},"pages":[],"title":"Tutorial","slug":"tutorial","order":1,"from_sync":false,"reference":false,"_id":"57ffd85f755a2e1700c2bb07","createdAt":"2015-12-18T23:07:56.909Z","project":"567083021dabd80d00b122ae","__v":0,"version":"57ffd85f755a2e1700c2bb05"},"githubsync":""}