将Phonegap Cordova移动应用程序代码重新用于Web应用程序

Question

我们有一个使用Ionic和Rails作为API开发的移动应用程序。现在我们计划重复使用PhoneGap代码以及Web应用程序的Ionic标签。我仍然不完全确定是否有可能。有人试过这个吗？我发现将Ionic代码（位于www /中）放在Lamp服务器中，可以在浏览器中打开（我在本地尝试）。那是正确的方法吗？有人可以为我提供一个更好的方法。同样的指南或链接也非常感谢。

Answer 1

是的，我开发了一些基于Ionic Framework的混合应用程序，以及相应的网络应用程序可以重复使用高达90％的代码库。

webapp项目与混合应用程序项目共享几乎所有的Angular模块，特别是服务和指令。 一些功能和特定于移动设备的功能被封装在一个不同的模块中，用于混合和webapp项目。

例如我有一个wrapper.ionic.js混合动力车（离子）中使用，其例如包含此工厂项目：

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; 
}]) 
... 

用于web应用程序的项目相对应的是wrapper.bootstrap.js （基于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; 
    } 
... 

所以你既可以混合使用和Web应用程序的服务$myPopup。

关于HTML（索引和视图模板），情况更为复杂。许多Ionic标签（指令和CSS）都是移动友好的，但不能针对可从台式机上看到的webapps进行优化。 在这里，我已经使用了Ionic标签和UI Boostrap，但首选第二个。