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

我在网上find了很多教程,告诉你如何用AngularJS 创build一个新的 Cordova应用程序,这很好。

但是如果我的AngularJSnetworking应用程序还在运行,我想从中创build一个移动应用程序(Android / IOS)? 这是可行的/可行的/可取的?

如果是的话,你可以给一些build议,或指出一些现有资源logging这项任务?

Solutions Collecting From Web of "如何将现有的Angular1网页应用程序转换为Cordova应用程序?"

正如dmahapatro所说,最好的办法是让你的AngularJS应用程序打包进行移动,就是使用ionic framework。 这种迁移将相当简单。 Ionic包含一个UI框架,但并不是必需的,任何网页编码都可以工作,因为你的应用只是在一个铬框架中运行。 离子命令行工具实际上完成了所有的魔法。

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

这就是让您的应用程序为移动设备构build所需的全部function。 你可以通过运行ionic platform add androidtestingAndroid ionic platform add android安装Android的依赖关系,然后运行ionic run android (你的android插入安装驱动程序或像Genymotion运行的模拟器)。 如果你想为iOS构build,你将需要有一个Mac(e …),但它是一样简单的ionic platform add ios ,然后运行ionic run ios在苹果testing,虽然有更多的设置,我相信。

为了获得Ionic的指令和其他有用的工具的附加好处,你可以添加依赖到你的主要离子模块,如下所示。 注意我还添加了ngCordova ,我强烈build议这个更好的设备集成。

 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。 谢谢! ^ _ ^

我按照Popcorn245提到的步骤工作。 需要注意的是,如果原始的Angular项目使用了bower库,那么您应该将Angular项目的package.json和bower.json文件与新的离子项目合并。 此后,bower库将被安装在www / lib文件夹中(这在.bowerrc文件中指出),所以它应该被redirect到index.html和Angular项目的app.js文件中。 我希望这个信息对你有帮助。 如果您需要帮助,请随时通过PM与我联系。 最好的祝福!