{"metadata":{"image":[],"title":"","description":""},"api":{"url":"","auth":"required","settings":"","params":[],"results":{"codes":[]}},"next":{"description":"","pages":[]},"title":"Angular Page","type":"basic","slug":"angular-page","excerpt":"","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]","updates":[],"order":5,"isReference":false,"hidden":false,"sync_unique":"","link_url":"","link_external":false,"_id":"57ffd85f755a2e1700c2bb1a","user":"567082433a32d20d00c45cab","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"},"parentDoc":null,"__v":0,"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"},"createdAt":"2015-12-18T23:10:05.217Z","project":"567083021dabd80d00b122ae","githubsync":""}
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]