Question

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

但是如果我确实让我的AngularJS网络应用程序活着并且踢了，我想从它制作一个移动应用程序（Android / IOS）？这可行/可行/可行吗？

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

Answer 1

正如dmahapatro所说，让你的AngularJS应用程序打包移动的最佳选择是使用离子框架。这种迁移非常简单。 Ionic包含一个UI框架，但根本不需要，任何网页编码都可以使用，因为你的应用程序只是在chrome框架中运行。离子命令行工具实际上完成了所有的魔法。

我首先使用命令ionic start APPNAME启动标准离子应用程序。然后，您只需将您的应用程序放入APPNAME / www目录即可。然后编辑index.html并在头部添加此脚本标记。 <script src="cordova.js"></script>

这就是为移动设备构建应用程序所需的全部内容。您可以通过运行ionic platform add android来安装Android的依赖项，然后运行ionic run android（安装了驱动程序的Android插件或运行类似Genymotion的模拟器），从而在Android上进行测试。如果你想为iOS构建你需要一个Mac（eww ...）但它就像ionic platform add ios一样简单然后运行ionic run ios来测试Apple，尽管有更多的设置我相信。

要获得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的帮助，请随时给我发消息。谢谢！ ^ _ ^

Answer 2

我按照Popcorn245提到的步骤进行了操作。非常重要的是要注意，如果原始Angular项目使用bower库，您应该将Angular项目的package.json和bower.json文件与新的离子项目合并。此后，bower库将安装在www / lib文件夹中（这在.bowerrc文件中表示），因此应该将其重定向到index.html和Angular项目的app.js文件中。我希望这些信息可以帮到你。如果您需要帮助，请随时与PM联系。最好的问候！

Answer 3

按照Popcorn245所述的步骤进行操作，如果它不起作用，请尝试构建当前正在运行的Angular 1项目并复制来自＆＃34; dist＆＃34;的所有文件。文件夹（存在于根目录中，应包括＆＃34; index.html＆＃34;文件）到＆＃34; www＆＃34;离子应用程序项目中的文件夹然后尝试执行＆＃34; ionic serve＆＃34;。

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

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

3 个答案: