Using Ionic/AngularJS with Convertigo



 

How does it work ?

As Convertigo client side is based on HTML5 / PhoneGap technology, using AngularJS is easy. To demonstrate that, we provide attached, a sample projects based on Ionic’s/AngularJS seed project. To help AngularJS integration, we developed a standard AngularJS service providing a helper to access Convertigo server’s resources.

This service is provided in the c8o.angular.js file delivered in the project.

Convertigo’s AngularJS service is a standard service you can use as any other in your AngularJS controllers:

Var ctlr = angular.module('starter.controllers', ['c8o.services']);

Within you controller you will be able to use the Convertigo services with the c8oService.call() function:

c8oService.call(
	  ".GetPets"
).then(function (data) {
	  $scope.pets = data.pets;
});

The first argument of the call() function is the Convertigo requestable (A Sequence or a Transaction reference) in the standard notation :

‹project›.‹sequence›

or

‹project›.‹connector›.‹transaction›

 

If project is omitted, the default Convertigo project will be used. This is why in our sample project we use the “.GetPets” requestable to call our project’s GetPets sequence. The GetPets sequence will run in the Convertigo Server and return a simple list of pets to be displayed by the Ionic/AngularJS framework.

In the same way, the GetPetsDetail will return details on a pet according to the provided pet id. See Convertigo documentation on how Convertigo sequences work.

http://help.convertigo.com/latest/index.jsp?topic=%2Fcom.twinsoft.convertigo.studio.help%2Fhelp%2FhelpRefManual%2F22Sequencer.html

The second argument of the call() function is the data to be sent to Convertigo server as an object. Each field of the object will be automatically mapped to the sequence or the transaction variables, for example:

c8oService.call(
  		".GetPetDetails",
		{"id": $stateParams.petId }
	).then(function (data) {
		$scope.pet = data.pet;
});

The “id” field will be mapped to the GetPetDetails’s id variable.

As you see, the call() function returns a promise that you can use to populate AngularJS $scope with the data returned by the Convertigo Server

.then(function (data) {
	$scope.pet = data.pet;
});

Conclusion

Using Ionic and AngularJS with Convertigo is really easy and widens the scope of Convertigo developers with those that already know and master Ionic and AngularJS. For those that want to use a simpler, more mobile oriented, less coding framework, the built-in Convertigo Templating framework (CTF) will do the job just as well, and will provide the benefit of faster coding.

Check out the Convertigo Ionic AngularJS sample project template_angular.car . And import it in Your Convertigo studio (File->Import->Convertigo->Convertigo Project)

Deploy the project on our free trial cloud (https://trial.convertigo.net) and enjoy!


Leave a comment