將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，但首選第二個。