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.

 

 

Here we will create a new service in the services.js and this module is also included at runtime in app.js as discussed in earlier tutorial

 

This is how my services.js looks like, here I am creating a factory and defining a service(assetService which will use the $rootScope, $http is for making the http call inside the service and $rootScope is for accessing the root variables across the controllers and are global.

 

Please note that a service can have multiple methods and they all can return whatever they like but, services.js module won’t be included and give runtime error if the service main function call is not returning any thing.

angular.module(‘app.services’,[],

.factory(‘assetService’,function($http){

return{

getAsset : function(bla bla){return bla;}

getItem: function(bla2 bla2){return bla2;}

}

}));

 

As you can see above the assetService will need a main return from the service and in my case i had to call multiple methods inside the service, so my best shot is to wrap them in a return.

Now to call our service in controller, this needs to be included inside the controller and the first line of the controller.js need to include the services module else your contoller won’t recognize the service.The assetService also need to go as a parameter inside the controller function which is going to utilize it.

Lets have a look.

You need to include the services module here and at one more place, else you will get errors while using the service in the controller.

 

Two main things to note here, else your controller won’t be able to initiate the assetService.

Your controllers should be in a chain, starting the angular.module and only the last one should have the ;

Your methods in a controller signature and function signature as shown above need to be in line else you will get undefined for variables.

 

You can define methods also at $rootscope level and they will be available across the app.

Now we all know , most of the apps will be talking to the REST or the HTTP based services running on remote hosts.So lets understand how to wait for an HTTP response from a remote service.

Calling a remote http from an ionic app via a service will be an asynchronous call and by the time we try to return the value in the success method we get an undefined value, lets understand it better.

You remember we created an assetservice which had a return wrapped, it was calling an http call and whenever we call that from a controller it was returning undefined, if we don’t use the promise object.

 

Normal http call without a promise in the service and if we call it from our controller the method name always returns undefined.

.controller(‘controllername’,[$scope,$http],

function($scope){

var methodName = http.get();

});

 

There is a concept of defer which can be called from the $q object, which helps to resolve the data which is expected from the http call and return a promise object for http call. But in our case we don’t need to use the defer because $http has this inbuilt and it returns a promise object by default.

 

If you can see here, the method getMaximoData is defined inside the service and returning an http get response and returning the promise object to assetDetails, can be seen in visual code debugger.

Now if we put a .then it resolves the promise and the payload in if condition has the response data.

If we don’t use then here, the value of the assetDetails is always undefined.

I wasted lot of time in using the defer object from q and i tried to return the defer.promise but in this case it wasn’t required. To read more on the defer and q for ionic click here- very interesting article with pictures on promise in ionic

 

I think that is it for now, in case you want to develop using visual code and you want to deploy it to a real android device on a virtual machine, road might be a little bumpy.

Read out my other tutorials on the deployment to android via ionic, it might help.

Deploy your ionic app to android device

Build and run your app in emulator

 

Thanks, keep reading !