ionic framework app development

ionic framework is one of the popular framework for creating mobile apps. Most frequently used command lines as reference .

Creating a blank application

ionic start Loyalty blank — V2 .

This command creates a new blank ionic application with home page.

Adding a new page into application

During application development , we create master detail pattern . Master page would be home page and detail page , we would add as we evolve our application .

ionic g page earnpoints

here page name is earnpoints .Ionic framework will create a folder earnpoints and create earnpoints.ts and earnpoints.html .It will also generate constructor for component earnpoints.

Running application into browser .

ionic serve .

Just typing ionic serve on the command line will start a http server and best part is that it will auto reload the application whenever you make any changes and save the application.

Running on the device .

Running on the device gives us the best feedback on the look and feel .commands are as following .

ionic build android

ionic run android

You may encounter heap memory error in the last step . If you are on windows 7 , set the following variable

_JAVA_OPTIONS with value -Xmx512M

Following is the complete path on windows machine — control panel > system and security > system > advanced system setting > environment variables.

Checking whether device is connected

While running on the device ,

• You need to check whether device is connected to your laptop. If you are working for android , you need to have android sdk installed .
• Check the path of android sdk and go to platform-tools folder .
• There would be tool called as adb . Execute the following command.

adb devices -l

Proxy set up for http api end points

In ionic application , many places we need to call http end point to get some data or update some data using rest api .

While doing local testing , your http server would be ionic server http://localhost:8100/ . However api host server would be say tomcat server http://localhost:8080/ . If you give end point request as follows

this.http.get(http://localhost:8080/coupons/balance).map(res => res.json()).subscribe
(data =>
{ 
   this.balance = data.balance;
   this.lastEarnedDate = data.lastEarnedDate;
}

You would following error .

XMLHttpRequest cannot load http://localhost:8080/coupons/balance. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:8100' is therefore not allowed access .

CORS issue would come only in local set up . There is simple way to handle CORS issue and that would be setting up proxy in ionic.config.json. With this entry you would be able to access http end point http://localhost:8080/coupons/balance

ionic.config.json

{
"name": "frontpage",
"app_id": "",
"v2": true,
"typescript": true,
"proxies": [
"path": "/partstable/coupons/balance",
"proxyUrl": "http://localhost:8080/partstable/coupons/balance"
} ]}