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
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