How to build ionic mobile app? Part 3 Services, Factory and Promises

 

In our last section on how to build ionic mobile app part 2 , we saw how we could send data from a page to controller and how we could access the scope variables and how we could set them from the controller.

 

In this section we will cover three main aspects:

Services in ionic

Factory

Promises

 

Now we will design the second tab of our screen where we will have the asset details, lets say we have a truck and we want to fetch the details of this asset from the remote system.

 

 

How to build mobile app using ionic ? Part 2 The Architecture

 

Last tutorial on How to build an ionic app part 1, we learnt how to quick start and get the components installed.In this part we will learn the architecture and map it with the code.

Please note we are talking about ionic base version here which is V1.

 

Lets map the architecture with the code base.

 

Debug ionic app with visual code

If you are using visual code and don’t know how to debug the mobile app code, you are missing on a versatile feature of visual code.

Some of the developers use visual code to only debug the mobile code, but a very few actually know how to attach the debugger to the live code and debug, it will also do a live reload of the application and will simulate in the browser also, in case you don’t want to debug in the real device or the android emulator.

 

Lets download the debugger for visual code, available for cordova.

https://marketplace.visualstudio.com/items?itemName=vsmobile.cordova-tools

Ionic app development on virtual machine with Android SDK

If you have planned to use virtual machine for mobile development and you have used VMware or virtual box to emulate the android device from ionic, this post is for you.

If your app is ready and working via the ionic serve, its right time to bundle and see if it can be deployed to the android device. There can be other reasons like you may want to test the Bar code or the GPS of your phone inside your app. In both the cases you will need to build the app for android via ionic and render it inside the android emulator.

In this section we will see how to quickly setup the android device emulator.
First you need to download the android sdk and run the installation.
https://developer.android.com/studio/index.html
Download and run the setup with Admin access.
If PATH and ANDROID_HOME are not updated after the install is complete, do that manually.
PATH – /sdk/tools
ANDROID_HOME – /sdk

Open new windows command prompts and test the path command by typing android, it should work.

Now its time to build our ionic app
> ionic build android

You might face an error on the build, about some license crap.
Follow the solution below.

======================================================
Can't accept license agreement Android SDK Platform 24
======================================================
Follow this
http://stackoverflow.com/questions/40383323/cant-accept-license-agreement-android-sdk-platform-24

If the build is successful proceed, else keep debugging it.


It should build the app, lets test if ionic is connected to the emulator.
> ionic emulate android

If android emulator doesn’t turn up, it could be a problem with your AVD(android virtual device) or the hardware virtualization is not enabled for your VM, I mentioned enabling the Intel Vtx setting of the processor on the vmware settings in the tutorial (How to build a hybrid mobile app using ionic ?)

Deploy ionic app on a real android device via USB on a virtual Machine

In case you are ready with your ionic app and you want to push your app to the virtual machine either vm ware or the virtual box, this article is for you keep reading.

 

This article will help in following situations:

• You are not able to run the ionic app on your android device as a target and the live reload of your android app is not working.
• If  your virtual machine is not able to load or list the devices and its not found on the system.

 

I am assuming you are done with your ionic app creation and you have your real android phone and your virtual machine, vm ware in our case is ready.

How to build a hybrid mobile app using ionic ? Part 1 Quickstart

 

This will be  quick start where we will be setting up the components and understanding how ionic framework works and how to get started.I am using a Windows 8x 64 bit VM for this experiment and I have assigned 4 GB RAM and 60 Gb hard disk to it, I have also enabled the Intel Vt-x support for the two processors I allocated to this VM, we will discuss the advantage of assign the VT-x based processor to my VM later.