{"id":899,"date":"2016-04-13T14:29:20","date_gmt":"2016-04-13T14:29:20","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=899"},"modified":"2023-07-18T11:47:42","modified_gmt":"2023-07-18T15:47:42","slug":"10-minutes-with-ionic-2-adding-pages-and-navigation","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-adding-pages-and-navigation","title":{"rendered":"10 Minutes with Ionic 2: Adding Pages and Navigation"},"content":{"rendered":"<p><a href=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/navigation-push-pop.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1400\" height=\"800\" class=\"aligncenter size-full wp-image-922 lazyload\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/navigation-push-pop.png\" alt=\"navigation push pop\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/navigation-push-pop.png 1400w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/navigation-push-pop-300x171.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/navigation-push-pop-1024x585.png 1024w\" data-sizes=\"auto, (max-width: 1400px) 100vw, 1400px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1400px; --smush-placeholder-aspect-ratio: 1400\/800;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1400\" height=\"800\" class=\"aligncenter size-full wp-image-922\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/navigation-push-pop.png\" alt=\"navigation push pop\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/navigation-push-pop.png 1400w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/navigation-push-pop-300x171.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/navigation-push-pop-1024x585.png 1024w\" sizes=\"auto, (max-width: 1400px) 100vw, 1400px\" \/><\/noscript><\/a><\/p>\n<p>Getting up and running with Ionic 2 using the Ionic CLI is super simple for anyone with web development experience. In our first article <a href=\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-hello-world\/\">10 Minutes with Ionic 2: Hello World<\/a>, we looked at the basics of creating your first app. In this article, we&#8217;ll build on what we learned there and add multiple pages with navigation between them.<br \/>\n<!--more--><\/p>\n<h3>Ionic Start<\/h3>\n<p>We&#8217;ll start by creating an app with the blank template using <code>ionic start<\/code>.<\/p>\n<pre><code>ionic start navigationApp blank --v2 --ts\n<\/code><\/pre>\n<p>As described in the first post of this series, we now have some basic plumbing, including a <code>home<\/code> page.<\/p>\n<p><img decoding=\"async\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/ionic-start-ts.png\" alt=\"Default File Structure\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" style=\"--smush-placeholder-width: 483px; --smush-placeholder-aspect-ratio: 483\/88;\" \/><noscript><img decoding=\"async\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/ionic-start-ts.png\" alt=\"Default File Structure\" \/><\/noscript><\/p>\n<h3>Creating a New Page<\/h3>\n<p>Let&#8217;s look at adding a new page. While we could create all the structure and files manually to create our new page, the CLI makes this significantly easier by providing automatic page generation using <code>ionic g<\/code>. After changing into the project directory (<code>cd navigationApp<\/code>), let&#8217;s create a new page called <code>about<\/code> using the CLI.<\/p>\n<pre><code>ionic g page about\n<\/code><\/pre>\n<p>The CLI will generate the HTML, TypeScript, and SCSS files for your new page in a new directory under <code>app\\pages<\/code>.<\/p>\n<p><img decoding=\"async\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/04\/generate-page-ts.png\" alt=\"Ionic Generate\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" style=\"--smush-placeholder-width: 479px; --smush-placeholder-aspect-ratio: 479\/124;\" \/><noscript><img decoding=\"async\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/04\/generate-page-ts.png\" alt=\"Ionic Generate\" \/><\/noscript><br \/>\n<img decoding=\"async\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/04\/about-structure-ts.png\" alt=\"New project structure with about page\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" style=\"--smush-placeholder-width: 194px; --smush-placeholder-aspect-ratio: 194\/263;\" \/><noscript><img decoding=\"async\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/04\/about-structure-ts.png\" alt=\"New project structure with about page\" \/><\/noscript><\/p>\n<h3>Navigating From Home to About<\/h3>\n<p>To navigate from our <code>home<\/code> page to our <code>about<\/code> page, we will need to import our <code>AboutPage<\/code> class into our <code>home.ts<\/code> file for use in our <code>HomePage<\/code> class.<\/p>\n<pre><code>import {AboutPage} from &#039;..\/about\/about&#039;;\n<\/code><\/pre>\n<p>Next, we should add a constructor to our <code>HomePage<\/code> class and assign our <code>AboutPage<\/code> to a property so we can use it in our template.<\/p>\n<pre><code>import {Page} from &#039;ionic-angular&#039;;\nimport {AboutPage} from &#039;..\/about\/about&#039;;\n\n@Page({\n  templateUrl: &#039;build\/pages\/home\/home.html&#039;\n})\nexport class HomePage {\n  aboutPage = AboutPage;\n\n  constructor(){\n\n  }\n}\n<\/code><\/pre>\n<p>Next in our <code>home<\/code> template, we can add a button with <code>NavPush<\/code> and pass our <code>aboutPage<\/code> property.<\/p>\n<pre><code>&lt;ion-card-content&gt;\n  Hello World&lt;br \/&gt;\n\n  &lt;button [navPush]=&quot;aboutPage&quot;&gt;Go To About&lt;\/button&gt;\n&lt;\/ion-card-content&gt;\n<\/code><\/pre>\n<p>And we&#8217;ll add some content to our <code>about<\/code> template:<\/p>\n<pre><code>&lt;ion-content padding class=&quot;about&quot;&gt;\n  This is my super awesome about page.\n&lt;\/ion-content&gt;\n<\/code><\/pre>\n<h2>Serve<\/h2>\n<p>Next, in the CLI, we&#8217;ll run <code>ionic serve<\/code> to view our app in the browser:<\/p>\n<pre><code>ionic serve\n<\/code><\/pre>\n<p>You should end up with something similar to the following in your browser:<\/p>\n<p><img decoding=\"async\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/output1.png\" alt=\"Screenshot of Browser Output\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" style=\"--smush-placeholder-width: 813px; --smush-placeholder-aspect-ratio: 813\/220;\" \/><noscript><img decoding=\"async\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/output1.png\" alt=\"Screenshot of Browser Output\" \/><\/noscript><\/p>\n<h2>Conclusion<\/h2>\n<p>In under ten minutes, you can add new pages and navigation incredibly easily, using the power of the Ionic CLI. These patterns allow us to rapidly develop and add new components to our next big app!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Getting up and running with Ionic 2 using the Ionic CLI is super simple for anyone with web development experience. In our first article 10 Minutes with Ionic 2: Hello World, we looked at the basics of creating your first app. In this article, we&#8217;ll build on what we learned there and add multiple pages [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":901,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"","publish_post_category":"","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"","discourse_permalink":"","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[3,13,25],"class_list":["post-899","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-all","tag-ionic","tag-ionic-2","tag-tutorials"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.0 (Yoast SEO v23.0) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>10 Minutes with Ionic 2: Adding Pages and Navigation - Ionic Blog<\/title>\n<meta name=\"description\" content=\"In this article, we\u2019ll build on what we learned in previous articles and add multiple pages with navigation between them.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-adding-pages-and-navigation\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"10 Minutes with Ionic 2: Adding Pages and Navigation\" \/>\n<meta property=\"og:description\" content=\"In this article, we\u2019ll build on what we learned in previous articles and add multiple pages with navigation between them.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-adding-pages-and-navigation\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2016-04-13T14:29:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-18T15:47:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/generate-page.png\" \/>\n\t<meta property=\"og:image:width\" content=\"476\" \/>\n\t<meta property=\"og:image:height\" content=\"109\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Andrew McGivery\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@andrewmcgivery\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Andrew McGivery\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-adding-pages-and-navigation#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-adding-pages-and-navigation\"},\"author\":{\"name\":\"Andrew McGivery\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/f919a9d571424a39c0ec8ce6d44755e7\"},\"headline\":\"10 Minutes with Ionic 2: Adding Pages and Navigation\",\"datePublished\":\"2016-04-13T14:29:20+00:00\",\"dateModified\":\"2023-07-18T15:47:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-adding-pages-and-navigation\"},\"wordCount\":309,\"commentCount\":41,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-adding-pages-and-navigation#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/generate-page.png\",\"keywords\":[\"Ionic\",\"Ionic 2\",\"Tutorials\"],\"articleSection\":[\"All\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-adding-pages-and-navigation#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-adding-pages-and-navigation\",\"url\":\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-adding-pages-and-navigation\",\"name\":\"10 Minutes with Ionic 2: Adding Pages and Navigation - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-adding-pages-and-navigation#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-adding-pages-and-navigation#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/generate-page.png\",\"datePublished\":\"2016-04-13T14:29:20+00:00\",\"dateModified\":\"2023-07-18T15:47:42+00:00\",\"description\":\"In this article, we\u2019ll build on what we learned in previous articles and add multiple pages with navigation between them.\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-adding-pages-and-navigation#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-adding-pages-and-navigation\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-adding-pages-and-navigation#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/generate-page.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/generate-page.png\",\"width\":476,\"height\":109},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-adding-pages-and-navigation#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"10 Minutes with Ionic 2: Adding Pages and Navigation\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/f919a9d571424a39c0ec8ce6d44755e7\",\"name\":\"Andrew McGivery\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/30cc07af4f34ecef53282a28baa6b213feb275e5abbd28b62d197851aff4ca7e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/30cc07af4f34ecef53282a28baa6b213feb275e5abbd28b62d197851aff4ca7e?s=96&d=mm&r=g\",\"caption\":\"Andrew McGivery\"},\"description\":\"My name is Andrew McGivery. I currently work full time as an application developer at Manulife Financial in Canada.\",\"sameAs\":[\"http:\/\/www.mcgivery.com\/\",\"https:\/\/x.com\/andrewmcgivery\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/andrewmcgivery\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"10 Minutes with Ionic 2: Adding Pages and Navigation - Ionic Blog","description":"In this article, we\u2019ll build on what we learned in previous articles and add multiple pages with navigation between them.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-adding-pages-and-navigation","og_locale":"en_US","og_type":"article","og_title":"10 Minutes with Ionic 2: Adding Pages and Navigation","og_description":"In this article, we\u2019ll build on what we learned in previous articles and add multiple pages with navigation between them.","og_url":"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-adding-pages-and-navigation","og_site_name":"Ionic Blog","article_published_time":"2016-04-13T14:29:20+00:00","article_modified_time":"2023-07-18T15:47:42+00:00","og_image":[{"width":476,"height":109,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/generate-page.png","type":"image\/png"}],"author":"Andrew McGivery","twitter_card":"summary_large_image","twitter_creator":"@andrewmcgivery","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Andrew McGivery","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-adding-pages-and-navigation#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-adding-pages-and-navigation"},"author":{"name":"Andrew McGivery","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/f919a9d571424a39c0ec8ce6d44755e7"},"headline":"10 Minutes with Ionic 2: Adding Pages and Navigation","datePublished":"2016-04-13T14:29:20+00:00","dateModified":"2023-07-18T15:47:42+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-adding-pages-and-navigation"},"wordCount":309,"commentCount":41,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-adding-pages-and-navigation#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/generate-page.png","keywords":["Ionic","Ionic 2","Tutorials"],"articleSection":["All"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-adding-pages-and-navigation#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-adding-pages-and-navigation","url":"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-adding-pages-and-navigation","name":"10 Minutes with Ionic 2: Adding Pages and Navigation - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-adding-pages-and-navigation#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-adding-pages-and-navigation#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/generate-page.png","datePublished":"2016-04-13T14:29:20+00:00","dateModified":"2023-07-18T15:47:42+00:00","description":"In this article, we\u2019ll build on what we learned in previous articles and add multiple pages with navigation between them.","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-adding-pages-and-navigation#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-adding-pages-and-navigation"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-adding-pages-and-navigation#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/generate-page.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/generate-page.png","width":476,"height":109},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-adding-pages-and-navigation#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"10 Minutes with Ionic 2: Adding Pages and Navigation"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/f919a9d571424a39c0ec8ce6d44755e7","name":"Andrew McGivery","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/30cc07af4f34ecef53282a28baa6b213feb275e5abbd28b62d197851aff4ca7e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/30cc07af4f34ecef53282a28baa6b213feb275e5abbd28b62d197851aff4ca7e?s=96&d=mm&r=g","caption":"Andrew McGivery"},"description":"My name is Andrew McGivery. I currently work full time as an application developer at Manulife Financial in Canada.","sameAs":["http:\/\/www.mcgivery.com\/","https:\/\/x.com\/andrewmcgivery"],"url":"https:\/\/ionic.io\/blog\/author\/andrewmcgivery"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/generate-page.png","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/899","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=899"}],"version-history":[{"count":1,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/899\/revisions"}],"predecessor-version":[{"id":5486,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/899\/revisions\/5486"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/901"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=899"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=899"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=899"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}