{"id":846,"date":"2016-03-21T10:48:08","date_gmt":"2016-03-21T10:48:08","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=846"},"modified":"2023-07-18T11:48:47","modified_gmt":"2023-07-18T15:48:47","slug":"10-minutes-with-ionic-2-hello-world","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-hello-world","title":{"rendered":"10 Minutes with Ionic 2: Hello World"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" width=\"1400\" height=\"400\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/hello-world-ionic2.png\" alt=\"hello-world-ionic2\" class=\"aligncenter size-full wp-image-894 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/hello-world-ionic2.png 1400w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/hello-world-ionic2-300x86.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/hello-world-ionic2-1024x293.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\/400;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1400\" height=\"400\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/hello-world-ionic2.png\" alt=\"hello-world-ionic2\" class=\"aligncenter size-full wp-image-894\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/hello-world-ionic2.png 1400w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/hello-world-ionic2-300x86.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/hello-world-ionic2-1024x293.png 1024w\" sizes=\"auto, (max-width: 1400px) 100vw, 1400px\" \/><\/noscript><\/p>\n<p>Getting up and running with your first Ionic 2 app using the Ionic CLI is super simple for anyone with web development experience. As this post will show, you can get started very quickly and have a &#8220;Hello World&#8221; app within ten minutes.<\/p>\n<p>Using just a couple commands on the CLI, you can have a starting template and be well on your way to <a href=\"https:\/\/twitter.com\/Sworkit\/status\/700053197386354688\" target=\"_blank\" rel=\"noopener\">having your app on Shark Tank<\/a>.<br \/>\n<!--more--><\/p>\n<h3>Installing Ionic<\/h3>\n<p>The first thing you&#8217;ll want to do, if you haven&#8217;t already, is to install the Ionic 2 CLI, using the <a href=\"http:\/\/ionicframework.com\/docs\/v2\/getting-started\/installation\/\" target=\"_blank\" rel=\"noopener\">installation guide<\/a>. After installing node, you&#8217;ll use NPM to install <code>ionic@beta<\/code>.<\/p>\n<pre><code class=\"bash\">npm install -g ionic@beta\n<\/code><\/pre>\n<h3>Creating your First App<\/h3>\n<p>Using the CLI, wherever we want to create our app, we will run the <code>ionic start<\/code> command to create an app called <code>helloWorld<\/code>, using the <code>blank<\/code> template.<\/p>\n<pre><code>ionic start helloWorld blank --v2 --ts<\/code><\/pre>\n<p><a href=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/ionic-start-ts.png\"><img decoding=\"async\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/ionic-start-ts.png\" alt=\"ionic start\" 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=\"ionic start\"><\/noscript><\/a><\/p>\n<p>This will create a bunch of plumbing for you, including your first <code>@Page<\/code> of your app, inside <code>app\/pages\/home<\/code>, which will include the following files:<\/p>\n<ul>\n<li>home.html: The template for your page<\/li>\n<li>home.ts: The TypeScript for your page, where the <code>@Page<\/code> component is defined<\/li>\n<li>home.scss: a file to put any custom SASS styles for this page<\/li>\n<\/ul>\n<p><a href=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/files-ts.png\"><img decoding=\"async\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/files-ts.png\" alt=\"file structure of blank app\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" style=\"--smush-placeholder-width: 196px; --smush-placeholder-aspect-ratio: 196\/134;\"><noscript><img decoding=\"async\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/files-ts.png\" alt=\"file structure of blank app\"><\/noscript><\/a><\/p>\n<h3>Modifying a Page<\/h3>\n<p>Let&#8217;s modify the template (home.html) to just say &#8220;Hello World&#8221; in the navbar, and in the content, we will have the text say &#8220;Hello Andrew,&#8221; where &#8220;Andrew&#8221; will be a variable passed from our <code>@Page<\/code> component. By default, we&#8217;ve been given something like this:<\/p>\n<pre><code class=\"html\">&lt;ion-navbar *navbar&gt;\n  &lt;ion-title&gt;\n    Home\n  &lt;\/ion-title&gt;\n&lt;\/ion-navbar&gt;\n\n&lt;ion-content class=&quot;home&quot;&gt;\n  &lt;ion-card&gt;\n    &lt;ion-card-header&gt;\n      Card Header\n    &lt;\/ion-card-header&gt;\n    &lt;ion-card-content&gt;\n      Hello World\n    &lt;\/ion-card-content&gt;\n  &lt;\/ion-card&gt;\n&lt;\/ion-content&gt;<\/code><\/pre>\n<p>First, we&#8217;ll modify our <code>ion-title<\/code> to contain &#8220;Hello World&#8221;.<\/p>\n<pre><code class=\"html\">  &lt;ion-title&gt;\n    Hello World\n  &lt;\/ion-title&gt;<\/code><\/pre>\n<p>Next, let&#8217;s modify our <code>ion-content<\/code> to contain our hello text and bind a <code>name<\/code> variable that we will pass from our <code>@Page<\/code>.<\/p>\n<pre><code class=\"html\">&lt;ion-content class=&quot;home&quot;&gt;\n  &lt;ion-card&gt;\n    &lt;ion-card-content&gt;\n      Hello {{name}}\n    &lt;\/ion-card-content&gt;\n  &lt;\/ion-card&gt;\n&lt;\/ion-content&gt;<\/code><\/pre>\n<p>Finally, we&#8217;ll modify our <code>@Page<\/code> (home.ts) to assign a value to <code>name<\/code>. By default, we&#8217;ve been given something like this:<\/p>\n<pre><code class=\"javascript\">import {Page} from &#039;ionic-angular&#039;;\n\n\n@Page({\n  templateUrl: &#039;build\/pages\/home\/home.html&#039;\n})\nexport class HomePage {}<\/code><\/pre>\n<p>Let&#8217;s add a constructor and assign a value to <code>this.name<\/code> which will be bound to our template.<\/p>\n<pre><code class=\"javascript\">import {Page} from &#039;ionic-angular&#039;;\n\n\n@Page({\n  templateUrl: &#039;build\/pages\/home\/home.html&#039;\n})\nexport class HomePage {\n  public name;\n  \n  constructor(){\n    this.name = &quot;Andrew&quot;;\n  }\n}<\/code><\/pre>\n<h3>Serve<\/h3>\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<\/code><\/pre>\n<p>You should end up with something similar to the following in your browser:<\/p>\n<p><a href=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/output.png\"><img decoding=\"async\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/output.png\" alt=\"Hello World App Screenshot\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" style=\"--smush-placeholder-width: 372px; --smush-placeholder-aspect-ratio: 372\/116;\"><noscript><img decoding=\"async\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/output.png\" alt=\"Hello World App Screenshot\"><\/noscript><\/a><\/p>\n<h3>Conclusion<\/h3>\n<p>In under ten minutes, you can be up and running with Ionic version 2, using the CLI. In that short amount of time, we have the basic building blocks of your next big app!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Getting up and running with your first Ionic 2 app using the Ionic CLI is super simple for anyone with web development experience. As this post will show, you can get started very quickly and have a &#8220;Hello World&#8221; app within ten minutes. Using just a couple commands on the CLI, you can have a [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":0,"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-846","post","type-post","status-publish","format-standard","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: Hello World - Ionic Blog<\/title>\n<meta name=\"description\" content=\"As this post will show, you can get started very quickly and have a \u201cHello World\u201d app within ten minutes.\" \/>\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-hello-world\" \/>\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: Hello World\" \/>\n<meta property=\"og:description\" content=\"As this post will show, you can get started very quickly and have a \u201cHello World\u201d app within ten minutes.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-hello-world\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2016-03-21T10:48:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-18T15:48:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/hello-world-ionic2.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-hello-world#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-hello-world\"},\"author\":{\"name\":\"Andrew McGivery\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/f919a9d571424a39c0ec8ce6d44755e7\"},\"headline\":\"10 Minutes with Ionic 2: Hello World\",\"datePublished\":\"2016-03-21T10:48:08+00:00\",\"dateModified\":\"2023-07-18T15:48:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-hello-world\"},\"wordCount\":367,\"commentCount\":44,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-hello-world#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/hello-world-ionic2.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-hello-world#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-hello-world\",\"url\":\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-hello-world\",\"name\":\"10 Minutes with Ionic 2: Hello World - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-hello-world#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-hello-world#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/hello-world-ionic2.png\",\"datePublished\":\"2016-03-21T10:48:08+00:00\",\"dateModified\":\"2023-07-18T15:48:47+00:00\",\"description\":\"As this post will show, you can get started very quickly and have a \u201cHello World\u201d app within ten minutes.\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-hello-world#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-hello-world\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-hello-world#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/hello-world-ionic2.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/hello-world-ionic2.png\",\"width\":1400,\"height\":400},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-hello-world#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"10 Minutes with Ionic 2: Hello World\"}]},{\"@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: Hello World - Ionic Blog","description":"As this post will show, you can get started very quickly and have a \u201cHello World\u201d app within ten minutes.","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-hello-world","og_locale":"en_US","og_type":"article","og_title":"10 Minutes with Ionic 2: Hello World","og_description":"As this post will show, you can get started very quickly and have a \u201cHello World\u201d app within ten minutes.","og_url":"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-hello-world","og_site_name":"Ionic Blog","article_published_time":"2016-03-21T10:48:08+00:00","article_modified_time":"2023-07-18T15:48:47+00:00","og_image":[{"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/hello-world-ionic2.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-hello-world#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-hello-world"},"author":{"name":"Andrew McGivery","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/f919a9d571424a39c0ec8ce6d44755e7"},"headline":"10 Minutes with Ionic 2: Hello World","datePublished":"2016-03-21T10:48:08+00:00","dateModified":"2023-07-18T15:48:47+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-hello-world"},"wordCount":367,"commentCount":44,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-hello-world#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/hello-world-ionic2.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-hello-world#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-hello-world","url":"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-hello-world","name":"10 Minutes with Ionic 2: Hello World - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-hello-world#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-hello-world#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/hello-world-ionic2.png","datePublished":"2016-03-21T10:48:08+00:00","dateModified":"2023-07-18T15:48:47+00:00","description":"As this post will show, you can get started very quickly and have a \u201cHello World\u201d app within ten minutes.","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-hello-world#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-hello-world"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-hello-world#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/hello-world-ionic2.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/03\/hello-world-ionic2.png","width":1400,"height":400},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/10-minutes-with-ionic-2-hello-world#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"10 Minutes with Ionic 2: Hello World"}]},{"@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":"","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/846","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=846"}],"version-history":[{"count":1,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/846\/revisions"}],"predecessor-version":[{"id":5488,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/846\/revisions\/5488"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=846"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=846"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=846"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}