再次将Phonegap Cordova移动应用程序代码用于Web应用程序

Question

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

Answer 1

是的，我已经开发了一些基于Ionic Framework的混合应用程序，还开发了相应的Web应用程序，这些应用程序最多可重复使用90％的代码库。

webapp项目与混合应用程序项目共享几乎所有Angular模块，特别是服务和指令。 一些功能和特定于移动设备的功能包装在一个模块中，该模块对于Hybrid和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;
}])
...

webapp项目的对应项是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;
    }
...

因此，您可以在Hybrid和Webapp中使用$myPopup服务。

关于HTML（索引和视图模板），情况更为复杂。 许多Ionic标签（指令和CSS）都是移动友好的，但并未针对可从桌面看到的web应用进行优化。 在这里，我同时使用了Ionic标签和UI Boostrap，但优先选择第二个。