Re-use the Phonegap Cordova mobile app code for web application

Question

We have a mobile app developed with Ionic and Rails as API. Now we are planning to reuse the PhoneGap code along with Ionic tags for the web application. I'm still not completely sure whether it's possible or not. Has someone tried this? I see that placing the Ionic code (which comes inside the www/) in Lamp server makes it work to open in the browser (which I tried locally). Is that correct way? Can someone suggest me a better way for this. A guide or links for the same is also much appreciated.

Answer 1

Yes, I've developed some hybrid apps based on Ionic Framework and also corresponding web apps reusing up to 90% of codebase.

The webapp projects share almost all the Angular modules, in particular services and directives, with hybrid app projects. Some functionalities and mobile-specific features are wrapped in a module different for hybridand for webapp projects.

For example I have a wrapper.ionic.js used in hybrid (Ionic) projects which contains for example this factory:

angular.module('components.wrapper', [])
.factory('$myPopup', ['$ionicPopup', function($ionicPopup) {
    var scope = {};

    scope.alert = function (params) {
        return $ionicPopup.alert(params);
    }

    scope.show = function (params) {
        return $ionicPopup.show(params);
    }

    scope.confirm = function (params) {
        return $ionicPopup.confirm(params);
    }

    return scope;
}])
...

The counterpart for webapp projects is wrapper.bootstrap.js (based on https://angular-ui.github.io):

angular.module('components.wrapper', [])
.factory('$myPopup', ['$modal', function($modal) {
    var scope = {};

    scope.animation = true;
    scope.size = 'sm';          // values: '', 'lg', 'sm'

    scope.alert = function (params) {
        var alert = $modal.open({
            animation: scope.animation,
            size: scope.size,
            backdrop: true,
            template:
              '<div class="modal-header"><h4 class="modal-title '+params.cssClass+'">'+params.title+'</h4></div>' +
              '<div class="modal-body '+params.cssClass+'">' +params.template + '</div>' +
              '<div class="modal-footer"><button class="button button-positive" type="button" ng-click="cancel()">Ok</button>' +
              '</div>',
            controller: ['$scope', '$modalInstance', function ($scope, $modalInstance) {
                $scope.cancel = function () {
                    $modalInstance.dismiss('cancel');
                };
            }],
            controllerAs: 'ctrl'
        });
        return alert;
    }
...

So you can use both in hybrid and webapp the service $myPopup.

Regarding HTML (index and view templates) the situation is more complex. Many of the Ionic tags (directives and CSS) are mobile friendly but not optimize for webapps which can be seen from desktops. Here I have used both Ionic tags and UI Boostrap, but with preference for the second one.