{"_id":"57ffd85f755a2e1700c2bb19","parentDoc":null,"project":"567083021dabd80d00b122ae","user":"567082433a32d20d00c45cab","version":{"_id":"57ffd85f755a2e1700c2bb05","project":"567083021dabd80d00b122ae","__v":1,"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"},"__v":0,"category":{"_id":"57ffd85f755a2e1700c2bb07","project":"567083021dabd80d00b122ae","__v":0,"version":"57ffd85f755a2e1700c2bb05","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-12-18T23:07:56.909Z","from_sync":false,"order":1,"slug":"tutorial","title":"Tutorial"},"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"}

Get Started

Tutorial

Angular Generators

Progressive Web App

REST API

JWT Auth

Testing

Extras

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]