如何将现有的 Angular1 Web 应用程序转换为 Cordova 应用程序? [英] How to convert an existing Angular1 web app to a Cordova app?

问题描述

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

I've found a lot of tutorials on the internet telling you how to build a new Cordova app with AngularJS, and that's good.

但是，如果我的 AngularJS 网络应用程序还活着并且可以运行，并且我想用它制作一个移动应用程序(Android/IOS)怎么办?这可能/可行/可取吗?

But what if I do have my AngularJS web app alive and kicking, and I would like to make a mobile app (Android/IOS) from it? Is this possible / feasible / advisable?

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

If it is, can you give some advise, or point to some existing resource documenting this task?

推荐答案

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

As dmahapatro said your best bet to get your AngularJS app packaged for mobile is to use ionic framework. This migration would be fairly simple. Ionic includes a UI Framework, but isn't at all required, any web coding will work because your app is just being run in a chrome frame. The ionic command line tool actually does all of the magic.

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

I would start by spinning up a standard ionic app using the command ionic start APPNAME. Then you can simply put your app into the APPNAME/www directory. Then edit your index.html and add this script tag in the head. <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 上进行测试，不过我相信还有更多设置.

That is all that is really required to get your app built for mobile. You can test on Android by running ionic platform add android to install the dependencies for Android and then run ionic run android (Have your android plugged in with drivers installed or an emulator running like Genymotion). If you want to build for iOS you will need to have a Mac (eww...) but it's just as easy ionic platform add ios and then run ionic run ios to test on Apple, though there is a bit more setup I believe.

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

To get the added benefits of Ionic's directives and other helpful utilities you can add the dependency to your main ionic module like below. Note I also added ngCordova and I highly recommend this for getting better device integration.

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 的更多帮助，请随时给我留言.谢谢！^_^

All in all you are pretty much set since you are already on AngularJS which is the backbone (pun intended) of Ionic. You may run into device specific issues as far as styling and such, but for the most part it should just work. Feel free to message me anytime if you want more help with Ionic or AngularJS. Thanks! ^_^

这篇关于如何将现有的 Angular1 Web 应用程序转换为 Cordova 应用程序?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！