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

我发现很多教程在互联网上告诉你如何构建 a 新科尔多瓦应用程序与AngularJS，这很好。如何将现有的Angular1网页应用程序转换为Cordova应用程序？

但是如果我有我的AngularJS的web应用程序活蹦乱跳的，我想从它使移动应用（Android/IOS）？这可能/可行/可取？

如果是，你可以给一些建议，或者点一些现有的资源记录这个任务？

2014-09-21 MarcoS

[**离子框架**]（http://ionicframework.com/）（使用Angular和Cordova）可以满足您的大部分要求。我现在已经使用了几天，而且效果很好。 – dmahapatro 2014-09-21 15:58:03

是的，但*如何*？更多，我看到Ionic是在应用程序堆栈的UI块中，而我的Web应用程序使用Bootstrap：如何将它们集成？ – MarcoS 2014-09-21 16:47:57

请将问题标题从angularjs更新为angular1，因为人们可能会混淆http://stackoverflow.com/questions/41781963/how-to-convert-an-existing-angularjs-2-web-app-to-a-cordova -app – ishandutta2007 2017-04-26 14:40:45

至于dmahapatro说让包装为您的移动应用AngularJS你最好的办法是使用离子型框架。这种迁移将非常简单。 Ionic包含一个UI框架，但根本不需要，任何网页编码都可以工作，因为您的应用只是在铬框架中运行。离子命令行工具实际上完成了所有的魔法。

我会通过旋转起来使用命令ionic start APPNAME基准离子应用程序启动。然后，您可以将您的应用程序放入APPNAME/www目录中。然后编辑你的index.html并在头部添加这个脚本标签。 <script src="cordova.js"></script>

这是真的需要让你的应用程序专为移动所有。您可以通过运行ionic platform add android来安装Android的依赖关系，然后运行ionic run android（安装驱动程序时是否安装了驱动程序或运行如Genymotion的仿真程序）来测试Android。如果你想为iOS构建，你将需要一个Mac（eww ...），但是它很容易ionic platform add ios，然后运行ionic run ios在Apple上进行测试，尽管我相信有更多的设置。

为了得到离子的指示和其他有用的实用工具的额外好处，你可以依赖添加到您的主离子模块像下面。注意我还添加了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或AngularJS。谢谢！^_^

来源

2015-05-08 14:43:09 Popcorn245

感谢您的回答！有点晚了，但可能我会参考它为我的下一个项目...:-) – MarcoS 2015-07-11 08:22:06

@MarcoS对不起，我刚刚看到你被遗忘了，我觉得晚了，然后永远不会。自从他们处于早期测试阶段以来，我一直在使用Ionic，他们刚刚发布了他们的第一个稳定版本，真的值得研究。下午我，如果你想谈商店。谢谢！^_^ – Popcorn245 2015-07-24 21:58:45

我打算等待一个稳定的AngularJS 2.0（2015年9月〜10月，我想是）重新编写我的应用程序，然后我会尝试您的建议，当然...我如何下午你？ :-) – MarcoS 2015-07-25 08:44:24

我按照Popcorn245提到的步骤工作。需要注意的是，如果原始的Angular项目使用了bower库，那么您应该将Angular项目的package.json和bower.json文件与新的离子项目合并。今后，bower库将被安装在www/lib文件夹内（这在.bowerrc文件中指出），所以它应该被重定向到index.html和Angular项目的app.js文件中。我希望这些信息对您有所帮助。如果您需要帮助，请随时通过PM与我联系。此致敬礼！

来源

2016-02-22 03:51:32 elmerDeVe

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

回答

相关问题