{"id":1315,"date":"2016-08-18T15:32:02","date_gmt":"2016-08-18T15:32:02","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=1315"},"modified":"2016-09-01T05:44:12","modified_gmt":"2016-09-01T05:44:12","slug":"one-mean-ionic-2-todo-app-on-heroku-part-2","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/one-mean-ionic-2-todo-app-on-heroku-part-2","title":{"rendered":"One MEAN Ionic 2 Todo App on Heroku, Part 2"},"content":{"rendered":"

In part 1 of this series<\/a>, we started building an end-to-end Ionic 2 app with a Node.js backend. If you\u2019re just joining us now, you\u2019ll probably want to stop and go back to the first post.<\/p>\n

Up to this point, we\u2019ve worked primarily in the server.js<\/code> file where we created an Express app and defined the api endpoints for the todos stored in a MongoDB database, provisioned by mLab via Heroku.<\/p>\n

In this next post, we\u2019ll write Angular 2 code using TypeScript to create the frame for our Ionic 2 todo app, communicate with our backend and display the todo that we added to the database.<\/p>\n

Sound good? Great, let\u2019s get going.<\/p>\n

<\/p>\n

Display all of the todos<\/h3>\n

Now that our backend server and database are super-hardcore, we can start building out the frontend todo app. Out of the box, when the Ionic CLI created our project, the app folder looks like this:<\/p>\n

\"app

From here, let\u2019s start adding the pieces to display our todos.<\/p>\n

The Todo Object<\/h3>\n

All of the todo data that will be sent from our API will be in a JSON format that we stealthily defined in the last post when we added a todo. If we specify what that data will look like as an object, we\u2019ll be able to take advantage of strong typing (type checking) in TypeScript to ensure each Todo<\/code> has the correct properties. In order to do this, create a file in your app\/<\/code> folder called todo.ts<\/code> and put the following code:<\/p>\n

  \/\/todo.ts\n  export class Todo {\n    _id: number;\n    description: string;\n    isComplete: boolean;\n  }\n<\/code><\/pre>\n
We\u2019ll use this object in other files shortly.<\/p>\n
The TodoService<\/h3>\n
In our Angular 2 app, we want to abstract HTTP services away from our view logic. In Angular we do this by creating a service, also known as a provider. We can use the Ionic CLI to generate a new provider:<\/p>\n
  $\/todo-ionic2-heroku > ionic g provider TodoService\n<\/code><\/pre>\n
The ionic g<\/code> command just created \/app\/providers\/todo-service\/todo-service.ts<\/code> for us. If you go into this new file, you\u2019ll see it generated a load() { \u2026 }<\/code> function for us. Let\u2019s update this file to get our todos:<\/p>\n
  \/\/todo-service.ts\n  import {Injectable} from '@angular\/core';\n  import {Http, Headers} from '@angular\/http';\n  import {Observable} from 'rxjs\/Observable';\n  import 'rxjs\/Rx';\n  import {Todo} from '..\/..\/todo.ts';\n\n  @Injectable()\n  export class TodoService {\n    todosUrl = "\/api\/todos"\n\n    constructor(public http: Http) {}\n\n    \/\/ Get all todos\n    load(): Observable<Todo[]> {\n      return this.http.get(this.todosUrl)\n                 .map(res => res.json())\n                 .catch(this.handleError);\n    }\n\n    handleError(error) {\n      console.error(error);\n      return Observable.throw(error.json().error || 'Server error');\n    }\n  }\n<\/code><\/pre>\n
Our load<\/code> function uses the HTTP module from Angular 2, made available as a class variable in our TodoService<\/code>\u2019s constructor. For http.get<\/code>, we\u2019ll get an Observable back with JSON data. We\u2019ll subscribe<\/code> to that data in our Component class in the next section.<\/p>\n
Note that we updated our import<\/code> statements to include Observables<\/a>, which we\u2019ll use instead of built-in ES6 Promises. Just know that you could have just as easily worked with Promises<\/a> instead. We also included the Todo<\/code> class to allow for type checking and HTTP headers<\/code> which we\u2019ll use in our other HTTP methods that we\u2019ll add in the next post.<\/p>\n
For now, let\u2019s go ahead and update our app\/pages\/home\/home.ts<\/code> file to load()<\/code> the Todo list using our awesome TodoService class.<\/p>\n
The HomePage Component<\/h3>\n
Head into your home.ts<\/code> file found in \/app\/pages\/home\/<\/code> and start by importing the TodoService:<\/p>\n
  import {TodoService} from '..\/..\/providers\/todo-service\/todo-service';\n<\/code><\/pre>\n
Then we update our @Component<\/code> decorator with metadata specifying our TodoService as a provider:<\/p>\n
  @Component({\n    templateUrl: 'build\/pages\/home\/home.html',\n    providers: [TodoService]\n  })\n<\/code><\/pre>\n
Now, we can update our empty constructor, create a todos property, import the TodoService<\/code>, and assign it to a property of the class.<\/p>\n
  public todos: Todo[];\n\n  constructor(public todoService: TodoService) {\n    this.loadTodos();\n  }\n<\/code><\/pre>\n
With our TodoService<\/code> ready to roll, let\u2019s add a loadTodos<\/code> method to use our TodoService<\/code> where we\u2019ll subscribe<\/code> to the Observable&lt;Todo[]&gt;<\/code> returned by our HTTP request and extract our todos into our class\u2019 todos parameter:<\/p>\n
  loadTodos() {\n    this.todoService.load()\n        .subscribe(data => {\n          this.todos = data;\n        })\n  }\n<\/code><\/pre>\n
If you don\u2019t subscribe to the Observable returned by the methods in our `TodoService, that \u201cobservable is cold<\/a>. This\u00a0means the request won’t go out until something subscribes to the Observable” (Angular 2 Docs<\/a>).<\/p>\n
Put this all together and we have the home.ts<\/code> file below (which also includes an additional import statement to include the Item Sliding component<\/a>).<\/p>\n
  \/\/home.ts\n  import {Component} from "@angular\/core";\n  import {ItemSliding, Item} from 'ionic-angular';\n  import {TodoService} from '..\/..\/providers\/todo-service\/todo-service';\n  import {Todo} from '..\/..\/todo.ts';\n\n  @Component({\n    templateUrl: 'build\/pages\/home\/home.html',\n    providers: [TodoService]\n  })\n  export class HomePage {\n  public todos: Todo[];\n\n  constructor(public todoService: TodoService) {\n    this.loadTodos();\n  }\n\n  loadTodos() {\n    this.todoService.load()\n        .subscribe(data => {\n          this.todos = data;\n        })\n    }\n  }\n<\/code><\/pre>\n
The HomePage Component\u2019s Template<\/h3>\n
The final step is to update the home.html<\/code> template to display the todos we stored in our todos array.<\/p>\n
To do this let\u2019s add the following markup:<\/p>\n
<!-- home.html -->\n  <ion-navbar primary *navbar>\n    <ion-title>\n      MEAN Ionic 2 Todo App\n    <\/ion-title>\n  <\/ion-navbar>\n  <ion-content class="home" padding>\n    <h2>Add a Todo<\/h2>\n    <ion-item no-lines>\n      <ion-input #newTodo (keyup.enter)="return;" type="text" placeholder="Add new todo..." ><\/ion-input>\n      <button clear large item-right (click)="return;">\n        <ion-icon name="add"> <\/ion-icon>\n      <\/button>\n    <\/ion-item>\n    <h2>Todo List <small>Swipe a todo to edit or delete<\/small><\/h2>\n    <ion-list no-lines>\n      <ion-item-sliding #slidingItem *ngFor="let todo of todos">\n        <ion-item>\n          <ion-checkbox (click)="return;" [checked]="todo.isComplete"><\/ion-checkbox>\n          <ion-item text-wrap item-left [class.completed]="todo.isComplete">\n            {{ todo.description }}\n          <\/ion-item>\n        <\/ion-item>\n        <ion-item-options (ionSwipe)="">\n          <button (click)="return;">Edit<\/button>\n          <button danger (click)="return;">\n            <ion-icon name="trash"><\/ion-icon>\n          <\/button>\n        <\/ion-item-options>\n      <\/ion-item-sliding>\n    <\/ion-list>\n  <\/ion-content>\n<\/code><\/pre>\n
While we\u2019ve added quite a bit into this file, the most important piece to notice is the *ngFor<\/code><\/a> directive we have on the ionic-item-sliding<\/code> component<\/a>.<\/p>\n
  *ngFor="let todo of todos"\n<\/code><\/pre>\n
Here we are defining a loop variable with let todo<\/code> that will receive a Todo<\/code> from our todos array defined in our Home Component class. Within this newly instantiated template for each Todo<\/code>, we\u2019ll access and alter the properties of each todo.<\/p>\n
Right off the bat, you can see us using todo.description<\/code> to render {{ }}<\/code> our Todo\u2019s description, and todo.isComplete<\/code> on several binding properties [ ]<\/code> to either add a class or check a checkbox. Finally, you will also notice several spots where we\u2019re handling events such as (click)<\/code> and (keyup.enter)<\/code>, but instead of making actual function calls,\u00a0we will just return;<\/code> for each event. We\u2019ll get those working in the next post.<\/p>\n
Styles to Make Things Purdy<\/h3>\n
Although the utilitarian among us may be shaking their heads, let\u2019s go ahead and add styles for our app to the app\/theme\/app.core.scss<\/code> file. Below the import<\/code> statement, add the following:<\/p>\n
  \/\/ app.core.scss\n  h2 {\n    color: color($colors, dark);\n    font-size: 1.7rem;\n    margin:10px 0 0;\n    small {\n      color: lighten(color($colors, dark), 20%);\n      font-weight: normal;\n    }\n  }\n\n  ion-list {\n    >ion-item-sliding {\n      border-bottom: 1px solid color($colors, light);\n\n      .item,\n      &:last-child .item {\n        border:none;\n        margin:0;\n      }\n\n      .completed {\n          text-decoration: line-through;\n          font-style: italic;\n      }\n    }\n  }\n\n  ion-textarea{\n    .text-input {\n      font-size: 1.6rem;\n      color: color($colors, dark);\n      margin:0;\n      padding:8px;\n      border:1px solid color($colors, light);\n      border-radius:3px;\n    }\n  }\n<\/code><\/pre>\n
You might notice some unused things in there — don\u2019t worry, we\u2019ll be adding more markup to our app in next post.<\/p>\n
Serve it Up<\/h3>\n
If you\u2019d like to see what things look like thus far, head over to your terminal and open up two tabs, one to run the ionic build server and one to run our backend server.<\/p>\n
  $\/todo-ionic2-heroku > ionic serve\n  $\/todo-ionic2-heroku > node server.js\n<\/code><\/pre>\n
Ionic will open up port 8100 for the build server, but if we want to see our Todos, open localhost:8080. Assuming you\u2019re also using a device viewer in your browser of choice, you should hopefully see something like this:<\/p>\n
\"todo
So awesome, right!? I just called my Grandma to tell her we just displayed real data using Ionic 2\/Angular 2. She\u2019s so proud!<\/p>\n
Concluding Thoughts<\/h3>\n
Literally nothing can stop you now. You\u2019re becoming a Pok\u00e9mon Master\u2026 I mean an Ionic 2 Wizard! In this post we wrote an HTTP service to collect todos from our MongoDB database, set up our view logic to utilize that service, and designed the front end of our simple app. We also learned a bit about Observables and did some type-checking with TypeScript.<\/p>\n
In the next and final post<\/a>, we\u2019ll flesh out the details to allow us to fully interact with our Ionic 2 app. Specifically, we\u2019ll flesh out the TodoService<\/code> to POST<\/code> (add), PUT<\/code> (update) and DELETE<\/code> (..um, well, delete) Todos. Then we\u2019ll link this up to the app\u2019s view. We\u2019ll also add another page to our app to isolate and edit todos.<\/p>\n","protected":false},"excerpt":{"rendered":"
In part 1 of this series, we started building an end-to-end Ionic 2 app with a Node.js backend. If you\u2019re just joining us now, you\u2019ll probably want to stop and go back to the first post. Up to this point, we\u2019ve worked primarily in the server.js file where we created an Express app and defined […]<\/p>\n","protected":false},"author":30,"featured_media":1322,"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":[23,13,25],"class_list":["post-1315","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-all","tag-framework","tag-ionic-2","tag-tutorials"],"acf":[],"yoast_head":"\nOne MEAN Ionic 2 Todo App on Heroku, Part 2 - Ionic Blog<\/title>\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\/one-mean-ionic-2-todo-app-on-heroku-part-2\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"One MEAN Ionic 2 Todo App on Heroku, Part 2\" \/>\n<meta property=\"og:description\" content=\"In part 1 of this series, we started building an end-to-end Ionic 2 app with a Node.js backend. If you\u2019re just joining us now, you\u2019ll probably want to stop and go back to the first post. Up to this point, we\u2019ve worked primarily in the server.js file where we created an Express app and defined […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/one-mean-ionic-2-todo-app-on-heroku-part-2\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2016-08-18T15:32:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-09-01T05:44:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/Ionic-2-Heroku-Left.png\" \/>\n\t<meta property=\"og:image:width\" content=\"241\" \/>\n\t<meta property=\"og:image:height\" content=\"428\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Justin Leatherwood\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Justin Leatherwood\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/one-mean-ionic-2-todo-app-on-heroku-part-2#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/one-mean-ionic-2-todo-app-on-heroku-part-2\"},\"author\":{\"name\":\"Justin Leatherwood\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/ebd8f9961dbecd11be74bf51d440689b\"},\"headline\":\"One MEAN Ionic 2 Todo App on Heroku, Part 2\",\"datePublished\":\"2016-08-18T15:32:02+00:00\",\"dateModified\":\"2016-09-01T05:44:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/one-mean-ionic-2-todo-app-on-heroku-part-2\"},\"wordCount\":1046,\"commentCount\":10,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/one-mean-ionic-2-todo-app-on-heroku-part-2#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/Ionic-2-Heroku-Left.png\",\"keywords\":[\"Framework\",\"Ionic 2\",\"Tutorials\"],\"articleSection\":[\"All\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/one-mean-ionic-2-todo-app-on-heroku-part-2#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/one-mean-ionic-2-todo-app-on-heroku-part-2\",\"url\":\"https:\/\/ionic.io\/blog\/one-mean-ionic-2-todo-app-on-heroku-part-2\",\"name\":\"One MEAN Ionic 2 Todo App on Heroku, Part 2 - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/one-mean-ionic-2-todo-app-on-heroku-part-2#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/one-mean-ionic-2-todo-app-on-heroku-part-2#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/Ionic-2-Heroku-Left.png\",\"datePublished\":\"2016-08-18T15:32:02+00:00\",\"dateModified\":\"2016-09-01T05:44:12+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/one-mean-ionic-2-todo-app-on-heroku-part-2#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/one-mean-ionic-2-todo-app-on-heroku-part-2\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/one-mean-ionic-2-todo-app-on-heroku-part-2#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/Ionic-2-Heroku-Left.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/Ionic-2-Heroku-Left.png\",\"width\":241,\"height\":428},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/one-mean-ionic-2-todo-app-on-heroku-part-2#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"One MEAN Ionic 2 Todo App on Heroku, Part 2\"}]},{\"@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\/ebd8f9961dbecd11be74bf51d440689b\",\"name\":\"Justin Leatherwood\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b618dcf46835261d07da1f0caf5847b8cf86ac4aae30f6073764ed6747e57544?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b618dcf46835261d07da1f0caf5847b8cf86ac4aae30f6073764ed6747e57544?s=96&d=mm&r=g\",\"caption\":\"Justin Leatherwood\"},\"url\":\"https:\/\/ionic.io\/blog\/author\/justin\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"One MEAN Ionic 2 Todo App on Heroku, Part 2 - Ionic Blog","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\/one-mean-ionic-2-todo-app-on-heroku-part-2","og_locale":"en_US","og_type":"article","og_title":"One MEAN Ionic 2 Todo App on Heroku, Part 2","og_description":"In part 1 of this series, we started building an end-to-end Ionic 2 app with a Node.js backend. If you\u2019re just joining us now, you\u2019ll probably want to stop and go back to the first post. Up to this point, we\u2019ve worked primarily in the server.js file where we created an Express app and defined […]","og_url":"https:\/\/ionic.io\/blog\/one-mean-ionic-2-todo-app-on-heroku-part-2","og_site_name":"Ionic Blog","article_published_time":"2016-08-18T15:32:02+00:00","article_modified_time":"2016-09-01T05:44:12+00:00","og_image":[{"width":241,"height":428,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/Ionic-2-Heroku-Left.png","type":"image\/png"}],"author":"Justin Leatherwood","twitter_card":"summary_large_image","twitter_creator":"@ionicframework","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Justin Leatherwood","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/one-mean-ionic-2-todo-app-on-heroku-part-2#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/one-mean-ionic-2-todo-app-on-heroku-part-2"},"author":{"name":"Justin Leatherwood","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/ebd8f9961dbecd11be74bf51d440689b"},"headline":"One MEAN Ionic 2 Todo App on Heroku, Part 2","datePublished":"2016-08-18T15:32:02+00:00","dateModified":"2016-09-01T05:44:12+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/one-mean-ionic-2-todo-app-on-heroku-part-2"},"wordCount":1046,"commentCount":10,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/one-mean-ionic-2-todo-app-on-heroku-part-2#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/Ionic-2-Heroku-Left.png","keywords":["Framework","Ionic 2","Tutorials"],"articleSection":["All"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/one-mean-ionic-2-todo-app-on-heroku-part-2#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/one-mean-ionic-2-todo-app-on-heroku-part-2","url":"https:\/\/ionic.io\/blog\/one-mean-ionic-2-todo-app-on-heroku-part-2","name":"One MEAN Ionic 2 Todo App on Heroku, Part 2 - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/one-mean-ionic-2-todo-app-on-heroku-part-2#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/one-mean-ionic-2-todo-app-on-heroku-part-2#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/Ionic-2-Heroku-Left.png","datePublished":"2016-08-18T15:32:02+00:00","dateModified":"2016-09-01T05:44:12+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/one-mean-ionic-2-todo-app-on-heroku-part-2#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/one-mean-ionic-2-todo-app-on-heroku-part-2"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/one-mean-ionic-2-todo-app-on-heroku-part-2#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/Ionic-2-Heroku-Left.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/Ionic-2-Heroku-Left.png","width":241,"height":428},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/one-mean-ionic-2-todo-app-on-heroku-part-2#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"One MEAN Ionic 2 Todo App on Heroku, Part 2"}]},{"@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\/ebd8f9961dbecd11be74bf51d440689b","name":"Justin Leatherwood","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b618dcf46835261d07da1f0caf5847b8cf86ac4aae30f6073764ed6747e57544?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b618dcf46835261d07da1f0caf5847b8cf86ac4aae30f6073764ed6747e57544?s=96&d=mm&r=g","caption":"Justin Leatherwood"},"url":"https:\/\/ionic.io\/blog\/author\/justin"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/Ionic-2-Heroku-Left.png","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/1315","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\/30"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=1315"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/1315\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/1322"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=1315"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=1315"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=1315"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}