- Create a new blank Ionic project with:1ionic start ionicServerSendTest blank
- Copy the following code (you’ll already have the .run() part, the .controller() part is novelty here) in www/js/app.js file:12345678910111213141516171819202122232425262728293031// Ionic Starter App// angular.module is a global place for creating, registering and retrieving Angular modules// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)// the 2nd parameter is an array of 'requires'angular.module('starter', ['ionic']).run(function($ionicPlatform) {$ionicPlatform.ready(function() {// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard// for form inputs)if (window.cordova && window.cordova.plugins.Keyboard) {cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);}if (window.StatusBar) {StatusBar.styleDefault();}});}).controller('AppCtrl', function($scope, $http) {$scope.data = {};$scope.submit = function(){var link = 'http://nikola-breznjak.com/_testings/ionicPHP/api.php';$http.post(link, {username : $scope.data.username}).then(function (res){$scope.response = res.data;});};});
- On your server, create a api.php file with the following content:As you can see from the code, the first part is explained in detail in this StackOverflow question, and it basically solves the CORS issue that you would otherwise run into.1234567891011121314151617181920212223242526272829303132333435363738<?php//http://stackoverflow.com/questions/18382740/cors-not-working-phpif (isset($_SERVER['HTTP_ORIGIN'])) {header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");header('Access-Control-Allow-Credentials: true');header('Access-Control-Max-Age: 86400'); // cache for 1 day}// Access-Control headers are received during OPTIONS requestsif ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))header("Access-Control-Allow-Methods: GET, POST, OPTIONS");if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");exit(0);}//http://stackoverflow.com/questions/15485354/angular-http-post-to-php-and-undefined$postdata = file_get_contents("php://input");if (isset($postdata)) {$request = json_decode($postdata);$username = $request->username;if ($username != "") {echo "Server returns: " . $username;}else {echo "Empty username parameter!";}}else {echo "Not called properly with username parameter!";}?>The second part, explained in detail in this StackOverflow question, deals with the way you POST data from Ionic (basically an AngularJS app) to your PHP server. The gist is that AngularJS POSTs by default in a JSON format, and thus you have tojson_decode the data that comes to your PHP server.
- In www/js/app.js file adjust the link variable to point to the file on your server
- In www/index.html file copy the following content:Here you basically created a form with an username input field and with a submit button. Using AngularJS ng-submit you’re saying that once the submit button is clicked AngularJS should handle it within the submit() function which you defined in app.js file before. Input username uses the ng-model to bind to the variable on the $scope so that you can then use it in your submit() function.12345678910111213141516171819202122232425262728293031323334353637383940414243<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"><title></title><link href="lib/ionic/css/ionic.css" rel="stylesheet"><link href="css/style.css" rel="stylesheet"><!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above<link href="css/ionic.app.css" rel="stylesheet">--><!-- ionic/angularjs js --><script src="lib/ionic/js/ionic.bundle.js"></script><!-- cordova script (this will be a 404 during development) --><script src="cordova.js"></script><!-- your app's js --><script src="js/app.js"></script></head><body ng-app="starter" ng-controller="AppCtrl"><ion-pane><ion-header-bar class="bar-stable"><h1 class="title">Ionic Blank Starter</h1></ion-header-bar><ion-content padding="true"><form ng-submit="submit()"><label class="item item-input item-stacked-label"><span class="input-label">Username</span><input type="text" name="username" placeholder="enter username" ng-model="data.username"></label><input class="button button-block button-positive" type="submit" name="submit" value="Submit to server"></form><div class="card"><div class="item item-text-wrap">Response: <b ng-bind="response"></b></div></div></ion-content></ion-pane></body></html>
- Run ionic serve from the root directory of your Ionic app (I’m sure you know this, but just in case that’s where the folders like www, plugins, scss reside).
0 comments:
Post a Comment