重新使用PhoneGap Cordova移动应用程序代码进行Web应用程序 [英] Re-use the Phonegap Cordova mobile app code for web application

问题描述

我们有一个使用Ionic和Rails作为API开发的移动应用程序。现在我们计划为Web应用程序重用PhoneGap代码和Ionic标签。我还不完全确定是否可能。有人试过这个吗？我看到在Lamp服务器放置Ionic代码（它在www /内部）使它工作在浏览器（我在本地尝试）打开。这是正确的方法吗？有人可以建议我一个更好的方法。

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.

推荐答案

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

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

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

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.

例如，我有一个 wrapper.ionic。 js 用于混合（Ionic）项目，其中包含例如此工厂：

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

针对webapp项目的对等项为 wrapper.bootstrap.js （基于 https：// angular-ui .github.io ）：

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

因此，您可以在hybrid和webapp服务 $ myPopup 。

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

对于HTML（索引和视图模板），情况更复杂。许多Ionic标签（指令和CSS）是移动友好的，但不能优化从桌面可以看到的webapps。
这里我使用了Ionic标签和UI Boostrap，但优先使用第二个。

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.

这篇关于重新使用PhoneGap Cordova移动应用程序代码进行Web应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！