Hello,
Here is a way by which, we can use currency converter in Hybrid application.
So, now we will start with a blank app.
So, for using the currency converter, here we need to include money.js in our index.html file.
You can include it from money.js a small javascript library for currency conversion, maintained by Open Exchange Rates.
Now, we will include following lines of in our index.html file-
Now, we will include following lines of code in app.js file-
Thanks...
Here is a way by which, we can use currency converter in Hybrid application.
So, now we will start with a blank app.
ionic start MyConverterApp blank
cd MyConverterApp
So, for using the currency converter, here we need to include money.js in our index.html file.
You can include it from money.js a small javascript library for currency conversion, maintained by Open Exchange Rates.
Now, we will include following lines of in our index.html file-
<!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>
<script src="js/money.js"></script> <!-- your app's js --> <script src="js/app.js"></script> </head> <body ng-app="starter" ng-controller="realexchangeCtrl">
<ion-pane> <ion-header-bar class="bar-stable bar-calm"> <h1 class="title">Real Exchange Rate</h1> </ion-header-bar> <ion-content > <ion-refresher pulling-text="Pull to refresh..." on-refresh="doRefresh()"> </ion-refresher> <div class="list"> <label class="item item-input item-select"> <div class="input-label"> From Currency </div> <select ng-model="Data.fromCurrency" ng-change="getExchangeRate()"> <option value="">Select</option> <option ng-repeat="(key,value) in result.rates" value="{{key}}">{{key}}</option> </select> </label> </div> <div class="list">
<label class="item item-input item-select"> <div class="input-label"> To Currency </div> <select ng-model="Data.toCurrency" ng-change="getExchangeRate()"> <option value="">Select</option> <option ng-repeat="(key,value) in result.rates" value="{{key}}">{{key}}</option> </select> </label>
</div>
<div class="list"> <label class="item item-input"> <div class="input-label"> Amount </div> <input id="amount" type="number" placeholder="Amount" ng-model="Data.amount" ng-change="getExchangeRate()"> </label> </div> <label class="item item-input"> <span class="input-label">Date</span> <input id="rateDate" type="date" ng-model="Data.date" ng-change="getExchangeRate()"> </label> <div class="card" ng-show="exchangeRate"> <div class="item item-text-wrap" style="text-align:center;"> <h1>{{Data.amount}} {{Data.fromCurrency}} = {{exchangeRate}} {{Data.toCurrency}}</h1> </div> </div> </ion-content> </ion-pane> </body></html>
Now, we will include following lines of code in app.js file-
you need to create an account in OpenExchnageRates to get the api key and replace the text with your api Key and then just setting the url to request..controller('realexchangeCtrl',function($scope,$filter,$ionicLoading,$http,$ionicPopup){ $scope.Data={}; $scope.Data.amount=1; $scope.Data.currentDate=$filter("date")(Date.now(),'yyyy-MM-dd'); $scope.Data.date=$scope.Data.currentDate;
var apiKey="your api key"; var baseUrl="http://openexchangerates.org/api/";
$scope.url=baseUrl+"latest.json?app_id="+apiKey; $ionicLoading.show(); $http.get($scope.url) .success(function(response){ $scope.result=response; }) .error(function(response,status){ $scope.showAlert('Error!!!',response.message); }) .finally(function(){ $ionicLoading.hide(); });
$scope.getExchangeRate = function() {
if($scope.Data.date!=$scope.Data.currentDate) { $ionicLoading.show(); $scope.url=baseUrl+"historical/"+$scope.Data.date+".json?app_id="+apiKey;
$http.get($scope.url) .success(function(response) { $scope.historicalresult = response; fx.rates = response.rates; fx.base = response.base; $scope.exchangeRate=fx($scope.Data.amount).from($scope.Data.fromCurrency).to($scope.Data.toCurrency).toFixed(2); }) .error(function(response, status){ $scope.showAlert('Error!!!',response.message); }) .finally(function(){ $ionicLoading.hide(); }); } else{ fx.rates = $scope.result.rates; fx.base = $scope.result.base; $scope.exchangeRate=fx($scope.Data.amount).from($scope.Data.fromCurrency).to($scope.Data.toCurrency).toFixed(2); } }; $scope.doRefresh = function() { $http.get($scope.url) .success(function(response) { $scope.result = response; }) .finally(function() { // Stop the ion-refresher from spinning $scope.$broadcast('scroll.refreshComplete'); }); }; $scope.showAlert = function(alertTitle,alertTemplate) { var alertPopup = $ionicPopup.alert({ title: alertTitle, template: alertTemplate }); alertPopup.then(function(res) { console.log('Log Error'); }); };
})
Thanks...
I recently came across your blog and have been reading along. I thought I would leave my first comment. I don't know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often. convert money
ReplyDelete