{"_id":"57ffd85f755a2e1700c2bb1a","user":"567082433a32d20d00c45cab","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"},"parentDoc":null,"__v":0,"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"},"project":"567083021dabd80d00b122ae","updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-12-18T23:10:05.217Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"settings":"","results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":5,"body":"Now that we have the component ready, we can create a new page. Pages are meant to hold up components together. Just like you would do with lego blocks. Every component is a lego block, and then your page would consist of one or more components.\n\n```\nphp artisan ng:page create_post\n```\n\nThen inside the `angular/app/pages/create_post.page.html` we need to call the createPostForm component.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<h1>Create Post</h1>\\n\\n<create-post-form></create-post-form>\",\n      \"language\": \"html\",\n      \"name\": \"create_post.html\"\n    }\n  ]\n}\n[/block]\nThis might feel repetitive, but we're actually benefiting of code reuse (for the create_post component). We can also add the relevant page title here, or even call other directives in more complex examples.\n\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-page","type":"basic","title":"Angular Page"}
Now that we have the component ready, we can create a new page. Pages are meant to hold up components together. Just like you would do with lego blocks. Every component is a lego block, and then your page would consist of one or more components. ``` php artisan ng:page create_post ``` Then inside the `angular/app/pages/create_post.page.html` we need to call the createPostForm component. [block:code] { "codes": [ { "code": "<h1>Create Post</h1>\n\n<create-post-form></create-post-form>", "language": "html", "name": "create_post.html" } ] } [/block] This might feel repetitive, but we're actually benefiting of code reuse (for the create_post component). We can also add the relevant page title here, or even call other directives in more complex examples. > Prefer a screencast? [block:html] { "html": "<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/_ZWV9KBK2N8\" frameborder=\"0\" allowfullscreen></iframe>" } [/block]