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

Question

我发现了很多互联网告诉你如何在教程 建立 一个 新的 与AngularJS科尔多瓦的应用程序，这很好。

但是，如果我的AngularJS网络应用程序还可以正常运行并且又想从中创建一个移动应用程序（Android / IOS），该怎么办？这可能/可行/明智吗？

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

Answer 1

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

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

这就是构建适用于移动设备的应用程序真正需要的全部内容。您可以在Android上ionic platform add 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方面获得更多帮助，请随时与我联系。谢谢！^ _ ^