{"__v":0,"_id":"57ffd85f755a2e1700c2bb19","category":{"version":"57ffd85f755a2e1700c2bb05","project":"567083021dabd80d00b122ae","_id":"57ffd85f755a2e1700c2bb07","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-12-18T23:07:56.909Z","from_sync":false,"order":1,"slug":"tutorial","title":"Tutorial"},"parentDoc":null,"project":"567083021dabd80d00b122ae","user":"567082433a32d20d00c45cab","version":{"__v":1,"_id":"57ffd85f755a2e1700c2bb05","project":"567083021dabd80d00b122ae","createdAt":"2016-10-13T18:54:23.018Z","releaseDate":"2016-10-13T18:54:23.018Z","categories":["57ffd85f755a2e1700c2bb06","57ffd85f755a2e1700c2bb07","57ffd85f755a2e1700c2bb08","57ffd85f755a2e1700c2bb09","57ffd85f755a2e1700c2bb0a","57ffd85f755a2e1700c2bb0b","57ffd85f755a2e1700c2bb0c","57ffd85f755a2e1700c2bb0d"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"3.4.0","version":"3.4"},"updates":["56db93bad0772a0b00348b40","56df33ba775f5e200097acb2","57a7cea2077cf10e00ca4632"],"next":{"pages":[],"description":""},"createdAt":"2015-12-18T23:09:53.539Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":4,"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]","excerpt":"","slug":"angular-directive","type":"basic","title":"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 ``` [block:callout] { "type": "success", "title": "Components encourage code reuse", "body": "Aim to create a component for every feature so that you can reuse it later on." } [/block] Open `angular/app/components/create_post_form/create_post_form.component.html` in your editor and add the relevant HTML form. [block:code] { "codes": [ { "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>", "language": "html", "name": "create_post_form.component.html" } ] } [/block] And then update your `create_post_form.component.js` code to write the controller's logic [block:code] { "codes": [ { "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}", "language": "javascript", "name": "create_post_form.component.js" } ] } [/block] Then you need to edit your angular/index.components.js to import this component [block:code] { "codes": [ { "code": "import {CreatePostFormComponent} from './app/components/create_post_form/create_post_form.component';\n\nangular.module('app.components')\n .component('createPostForm', CreatePostFormComponent);\n", "language": "javascript" } ] } [/block] [block:callout] { "type": "success", "title": "EcmaScript 6", "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/)." } [/block] > Prefer a screencast? [block:html] { "html": "<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/_ZWV9KBK2N8\" frameborder=\"0\" allowfullscreen></iframe>" } [/block]