如何将现有的 Angular1 Web 应用程序转换为 Cordova 应用程序？

Posted 2023-02-19

【中文标题】如何将现有的 Angular1 Web 应用程序转换为 Cordova 应用程序？

【英文标题】：How to convert an existing Angular1 web app to a Cordova app?

【发布时间】：2014-11-15 15:32:54

【问题描述】：

我在互联网上找到了很多教程，告诉你如何 使用 AngularJS 构建 新 Cordova 应用程序，这很好。

但是，如果我的 AngularJS 网络应用程序是活跃的，并且我想用它制作一个移动应用程序（android/ios）怎么办？这可能/可行/可取吗？

如果是，您能否提供一些建议，或指出一些现有资源来记录此任务？

【问题讨论】：

ionic framework（使用 Angular 和 Cordova）可以满足您的大部分需求。我已经用了几天了，效果很好。

是的，但是如何？更多，我看到 Ionic 在应用程序堆栈的 UI 块中，我的网络应用程序使用 Bootstrap：如何集成它们？

请将问题标题从 angularjs 更新为 angular1，因为人们可能会与 ***.com/questions/41781963/… 混淆

【参考方案1】：

正如 dmahapatro 所说，为移动设备打包 AngularJS 应用程序的最佳选择是使用 ionic 框架。这种迁移将相当简单。 Ionic 包含一个 UI 框架，但根本不是必需的，任何 Web 编码都可以工作，因为您的应用程序只是在 chrome 框架中运行。 ionic 命令行工具实际上完成了所有的魔法。

我将首先使用命令ionic start APPNAME 启动一个标准离子应用程序。然后您可以简单地将您的应用程序放入 APPNAME/www 目录。然后编辑你的 index.html 并在头部添加这个脚本标签。 <script src="cordova.js"></script>

这就是为移动设备构建应用真正需要的一切。您可以通过运行ionic platform add android 在Android 上进行测试，以安装Android 的依赖项，然后运行ionic run android（插入您的android 并安装驱动程序或运行类似Genymotion 的模拟器）。如果你想为 iOS 构建，你需要有一台 Mac (eww...)，但它就像 ionic platform add ios 一样简单，然后运行 ​​ionic run ios 在 Apple 上进行测试，尽管我相信还有更多的设置。

要获得 Ionic 指令和其他有用实用程序的额外好处，您可以将依赖项添加到您的主要 ionic 模块，如下所示。请注意，我还添加了ngCordova，我强烈推荐此方法以获得更好的设备集成。

angular.module('APPNAME', ['ionic', 'ngCordova'])

.run(function($ionicPlatform, $cordovaSplashscreen) 
    $ionicPlatform.ready(function() 
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if (window.cordova && window.cordova.plugins.Keyboard) 
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        
        if(window.navigator && window.navigator.splashscreen) 
            window.plugins.orientationLock.unlock();
        
        if (window.StatusBar) 
            // org.apache.cordova.statusbar required
            StatusBar.styleDefault();
        
        if (window.cordova)
            // Hide Splash Screen when App is Loaded
            $cordovaSplashscreen.hide();
        
    );
);

总而言之，由于您已经使用 AngularJS，它是 Ionic 的主干（双关语）。就样式等而言，您可能会遇到特定于设备的问题，但在大多数情况下，它应该可以正常工作。如果您需要有关 Ionic 或 AngularJS 的更多帮助，请随时给我发消息。谢谢！ ^_^

【讨论】：

感谢您的回答！有点晚了，但我可能会在下一个项目中参考它...... :-)

@MarcoS 是的，对不起，我刚刚看到你被吊死了，我想迟到总比从不好。我一直在使用 Ionic，因为他们处于早期测试阶段，他们刚刚发布了他们的第一个稳定版本，非常值得研究。如果你想谈谈商店，请 PM 我。谢谢！ ^_^

我正计划等待一个稳定的 AngularJS 2.0（我想是 2015 年 9 月~2015 年 10 月）来重写我的应用程序，然后我会尝试你的建议，当然……如何我PM你？ :-)

@tryingtolearn 当然，不分享知识有什么好处。你收到了我的邮箱，谢谢！ ^_^

@BryantJackson Backbone.js 是一个 javascript MVC，它是 AngularJS 的替代品。感谢您的反对...

【参考方案2】：

我按照 Popcorn245 提到的步骤进行了操作，并且成功了。 需要注意的是，如果原来的 Angular 项目使用 bower 库，你应该将 Angular 项目的 package.json 和 bower.json 文件与新的 Ionic 合并项目。 此后，bower 库将安装在 www/lib 文件夹中（这在 .bowerrc 文件中有说明），因此应该在 index 中重定向。 html 和 Angular 项目的 app.js 文件。 我希望这些信息对您有所帮助。 如果您需要帮助，请随时通过 PM 与我联系。 最好的问候！

【参考方案3】：

按照 Popcorn245 所述的步骤，如果它不起作用，请尝试构建您当前工作的 Angular 1 项目并从“dist”文件夹中复制所有文件（位于根目录中，其中应包括“ index.html" 文件) 到 ionic 应用程序项目中的 "www" 文件夹，然后尝试执行 "ionic serve"。

我尝试了 elmerDeVe 提供的解决方案，但无法让应用正常运行。无论如何，感谢 elmerDeVe 的解决方案。