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

问题描述

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

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

如果是，您能提供一些建议还是指向一些记录该任务的现有资源?

解决方案

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

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

这是构建针对移动应用的真正所需的全部内容.您可以通过运行ionic platform add android来安装Android的依赖项，然后运行ionic run android在Android上进行测试(将android插入已安装驱动程序或仿真器的运行方式为 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方面获得更多帮助，请随时与我联系.谢谢！ ^ _ ^

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.

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?

解决方案

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.

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>

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.

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();
        }
    });
});

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屋！