{"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":""}