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

问题描述

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

但是如果我有我的AngularJS网络应用程序活着和踢，我想从它做一个移动应用程序（Android / IOS）？这是否可行/可行/建议？

如果是，您能给出一些建议，还是指出一些现有的资源记录这项任务？

解决方案

正如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 的模拟器。如果你想为iOS构建你需要有一个Mac（eww ...），但它是很容易离子平台添加ios 然后运行 ion run ios 来测试苹果，虽然我相信有更多的设置。

为了获得Ionic的指令和其他有用的实用程序，你可以添加依赖关系到你的主离子模块，如下所示。注意，我也添加了 ngCordova ，我强烈推荐这样做以获得更好的设备集成。

  angular.module（'APPNAME'，['ionic'，'ngCordova']）
 
 .run（function（$ ionicPlatform，$ cordovaSplashscreen）{
 $ ionicPlatform.ready（function（）{
 //默认情况下隐藏附件栏（删除此项以显示键盘上方的辅助栏
 //表单输入）
 if .cordova&&&& window.cordova.plugins.Keyboard）{
 cordova.plugins.Keyboard.hideKeyboardAccessoryBar（true）; 
} 
 if（window.navigator&& navigator.splashscreen）{
 window.plugins.orientationLock.unlock（）; 
} 
 if（window.StatusBar）{
 // org.apache.cordova.statusbar required 
 StatusBar.styleDefault（）; 
} 
 if（window.cordova）{
 //加载应用程序时隐藏Splash屏幕
 $ cordovaSplashscreen.hide 
} 
}）; 
}）; 
  

总而言之，你已经在AngularJS ）的离子。你可能遇到设备特定的问题，就样式等，但在大多数情况下它应该是工作。如果你想要更多的帮助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! ^_^

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