Interest in //Web //Win //Mobile //Database & //Life

Hybrid Application Development using Ionic, AngularJs, Cordova – Part 3

After completing all the necessary steps described in Part 1 and Part 2 of this series tutorial, you will see the following folder structure in your application directory.

RealExchangeRate-FolderStructure

I will work with the www folder. inside the folder you will get the index.html and js/app.js, these are the two main files you have to work with. Use any of your favorite text editor to open up the files.

As we are going to use AngularJs for the development, first finish up the js/app.js file. You will see the template generated code like this.

after the we will add our controller code. I will do step by step explanation but first let me show you the code.

 

realexchangeCtrl is the name of our controller and in the function we are adding our dependencies for the controller,then I am just defining some variables in scope. 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.

Now going to make a GET request to the api using the url, just before that I am calling the $ionicLoading.show(); this will show a nice loading until it finishes the GET request. If the GET request completes successfully I am keeping the response of the request in $scope.result.

Now I will explain the getExchangeRates funciton. First I am checking whether the date selected by user is current date or not, if it is not current date then I have to call the api for historical exchange rate. So I am changing the url to the historical api and making a http GET request.

Then assigning the response.rates and response.base (rates contains all the exchange rate of currency’s against the base currency value, the base currency is in USD for free API)value from the response to the fx.rates and fx.base. oh! what are these two?  The fx.rates and fx.base are from money.js a small javascript library for currency conversion, maintained by Open Exchange Rates. we will include this in our index.html. If any error occurs showing the error as alert using the $scope.showAlert() method that uses $ionicPopup and finally hiding the loader. Open Exchange Rates api also provides a list of currency in this url http://openexchangerates.org/api/currencies.json but I will use currency names from the response.rates here.

this line of code is converting the currency exchange rate and keeping it in two decimal places, which is pretty self explanatory.

And last of all the doRefresh and showAlert method. The doRefresh method is used to implement the pull to refresh functionality using this directive and for alert popups you can check this one.

Now we will see the index.html file, inside the head tag I have added the money.js reference and in body tag I am setting the ng-app and ng-controller.

for the pull down refresher functionality we need this part of code and it has to be the first child of <ion-content></ion-content>

I am taking select list that will show the currency list from which currency user want to convert to which currency, on changing the currency it will call the getExchangeRate() method in our controller. Binding the currency list to select element using ng-repeat to the $scope.Data.result.rates

for amount and date change I am also calling the getExchangeRate() method and at the bottom of the application I am showing the result. I am using ng-show directive to the $scope.exchangeRate because I want to show the result only if there is a valid result. When the user selects only from currency and there is not to currency that time there is no valid exchange rate.

And that is all, if you want to download the source code click here to download it from github repository.

For publishing your hybrid application to the app market built with Ionic Framework, please follow this link as your guideline.

I wish I could make a video tutorial for this, but I am not getting enough time. hope in near future I will be able to do it. I have just started blogging, for any mistakes please help me with your valuable suggestions.

AngularJsCordovaHybrid AppicationIonic

Md Shiefuzzaman • October 24, 2014


Previous Post

Next Post

Shares