The tutorial covering the Ionic version 2 can be found here<\/a>. The tutorial covering the Ionic version 3 can be found here<\/a>.<\/p>\n To see it in action:<\/p>\n If you want to make it work from your server:<\/p>\n By now you probably have heard that Ionic is in beta for its version 2<\/a>, which closely follows Angular 2<\/a>.<\/p>\n You can find a lot more Ionic 2 related tutorials on my friend Gajotres<\/a> site.<\/strong><\/p><\/blockquote>\n To install the Ionic SDK and create Ionic 2 projects, you need to install the latest beta release:<\/p>\n You don’t need to worry about this messing up your current ionic CLI since the beta release has all the functionality to work with both V1 and V2 projects.<\/p><\/blockquote>\n Here you basically created a form with an username<\/strong> input field and with a button which acts as a submit<\/strong> button.<\/p>\n As you can see, the syntax is a bit different since Ionic2 uses Angular2<\/a>. Once the button is clicked AngularJS should handle it within the submit()<\/strong> function which we will define in our app\/pages\/home\/home.js<\/strong> file (shown below).<\/p>\n Input username<\/strong> uses the new syntax for ng-model<\/strong> as well, and it binds to the variable data.username<\/strong>, so that you can then use it in your submit()<\/strong> function (shown below).<\/p>\n Also, components are a bit different in Ionic now, and I encourage you can take a look at the official documentation<\/a>.<\/li>\n As you can see from the code, the first part is explained in detail in this StackOverflow question<\/a>, and it basically solves the CORS<\/a> issue that you would otherwise run into.<\/p>\n The second part, explained in detail in this StackOverflow question<\/a>, deals with the way you POST data from Ionic to your PHP server. The gist is that since we POSTed in a JSON format, we have to json_decode<\/span> the data that comes to your PHP server.<\/li>\n Again, as I said, some (a lot) of things have changed in Angular 2, and at first glance you really may not like it (tbh, I know I didn’t). But, that will change with usage, so no worries.<\/p>\n First thing that we do here is we import Page<\/strong> and Http<\/strong> components from Ionic and Angular, respectively. Then we’re setting the Page templateUrl<\/strong> to our home.html<\/strong> file.<\/p>\n Inside the HomePage class we now have a constructor where we’re setting some default values. Important to note, see how we’re passing in Http <\/strong>via the constructor parameter. Again, I won’t go into details of using this, as I mentioned you can take a look at a lot more in depth tutorials on Gajotres<\/a>.<\/p>\n Inside the submit<\/strong> function we use the http service to post to our API endpoint with some data. Make note of how we use subscribe<\/strong> to handle data once it arrives.<\/li>\n TL;DR This is the simplest example which shows how to POST data from an Ionic 2 app to a PHP server. The tutorial covering the Ionic version 2 can be…<\/p>\n","protected":false},"author":1,"featured_media":2508,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[49],"tags":[],"class_list":["post-2501","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ionic2"],"_links":{"self":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/2501","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/comments?post=2501"}],"version-history":[{"count":4,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/2501\/revisions"}],"predecessor-version":[{"id":3450,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/2501\/revisions\/3450"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media\/2508"}],"wp:attachment":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media?parent=2501"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/categories?post=2501"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/tags?post=2501"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Quickstart<\/h3>\n
\n
\n
\n![\"ionic2ServerPost\"](\"http:\/\/www.nikola-breznjak.com\/blog\/wp-content\/uploads\/2016\/01\/ionic2ServerPost.jpg\")
<\/a><\/li>\n<\/ol>\n<\/ol>\n\n
Getting started with Ionic 2<\/h3>\n
npm install -g ionic@beta<\/pre>\n
Step by step on how to create this yourself from scratch<\/h3>\n
\n
ionic start Ionic2ServerSendTest blank --v2<\/pre>\n<\/li>\n
<ion-navbar *navbar>\n <ion-title>\n Home\n <\/ion-title>\n<\/ion-navbar>\n\n<ion-content padding>\n <ion-list>\n <ion-input floating-label>\n <ion-label>Username<\/ion-label>\n <input type=\"text\" name=\"username\" [(ngModel)]=\"data.username\">\n <\/ion-input>\n\n <button round block (click)=\"submit()\">Submit to server<\/button>\n <\/ion-list>\n\n <ion-card>\n <ion-card-header>\n Response\n <\/ion-card-header>\n \n <ion-card-content>\n <b>{{data.response}}<\/b>\n <\/ion-card-content>\n <\/ion-card>\n<\/ion-content>\n<\/pre>\n<?php\n \/\/http:\/\/stackoverflow.com\/questions\/18382740\/cors-not-working-php\n if (isset($_SERVER['HTTP_ORIGIN'])) {\n header(\"Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}\");\n header('Access-Control-Allow-Credentials: true');\n header('Access-Control-Max-Age: 86400'); \/\/ cache for 1 day\n }\n\n \/\/ Access-Control headers are received during OPTIONS requests\n if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {\n\n if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))\n header(\"Access-Control-Allow-Methods: GET, POST, OPTIONS\"); \n\n if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))\n header(\"Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}\");\n\n exit(0);\n }\n\n\n \/\/http:\/\/stackoverflow.com\/questions\/15485354\/angular-http-post-to-php-and-undefined\n $postdata = file_get_contents(\"php:\/\/input\");\n if (isset($postdata)) {\n $request = json_decode($postdata);\n $username = $request->username;\n\n if ($username != \"\") {\n echo \"Server returns: \" . $username;\n }\n else {\n echo \"Empty username parameter!\";\n }\n }\n else {\n echo \"Not called properly with username parameter!\";\n }\n?><\/pre>\nimport {Page} from 'ionic\/ionic';\nimport {Http} from 'angular2\/http';\n\n@Page({\n templateUrl: 'build\/pages\/home\/home.html',\n})\n\nexport class HomePage {\n constructor(http: Http) {\n this.data = {};\n this.data.username = '';\n this.data.response = '';\n\n this.http = http;\n }\n\n submit() {\n var link = 'http:\/\/nikola-breznjak.com\/_testings\/ionicPHP\/api.php';\n var data = JSON.stringify({username: this.data.username});\n \n this.http.post(link, data)\n .subscribe(data => {\n this.data.response = data._body;\n }, error => {\n console.log(\"Oooops!\");\n });\n }\n}<\/pre>\n