Android 如何将现有的 Angular1 Web 应用程序转换为 Cordova 应用程序？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25961013/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to convert an existing Angular1 web app to a Cordova app?
提问by MarcoS
I've found a lot of tutorials on the internet telling you how to builda newCordova app with AngularJS, and that's good.
我发现了很多互联网告诉你如何在教程 建立一个新的与AngularJS科尔多瓦的应用程序，这很好。
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?
但是，如果我的 AngularJS Web 应用程序确实存在并且正在运行，并且我想用它制作一个移动应用程序（Android/IOS）怎么办？这可能/可行/可取吗？
If it is, can you give some advise, or point to some existing resource documenting this task?
如果是，您能否提供一些建议，或指出一些记录此任务的现有资源？
回答by Popcorn245
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.
正如 dmahapatro 所说，为移动设备打包 AngularJS 应用程序的最佳选择是使用离子框架。这种迁移将相当简单。Ionic 包含一个 UI 框架，但完全不是必需的，任何 Web 编码都可以工作，因为您的应用程序只是在 chrome 框架中运行。离子命令行工具实际上完成了所有的魔法。
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 start APPNAME。然后您可以简单地将您的应用程序放入 APPNAME/www 目录。然后编辑您的 index.html 并在头部添加此脚本标记。
<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 androidto 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 iosand then run ionic run iosto test on Apple, though there is a bit more setup I believe.
这就是为移动设备构建应用程序所需的全部内容。您可以通过运行ionic platform add android来安装 Android 的依赖项，然后运行ionic run android（将您的 android 插入并安装驱动程序或像Genymotion一样运行的模拟器）在 Android 上进行测试。如果你想为 iOS 构建，你需要有一台 Mac (eww...)，但它同样简单ionic platform add ios，然后ionic run ios在 Apple 上运行测试，尽管我相信还有更多的设置。
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 ngCordovaand I highly recommend this for getting better device integration.
要获得 Ionic 指令和其他有用实用程序的额外好处，您可以将依赖项添加到您的主 ionic 模块，如下所示。注意我还添加了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();
}
});
});
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，它是 Ionic 的支柱（双关语）。就样式等而言，您可能会遇到设备特定的问题，但在大多数情况下，它应该可以正常工作。如果您需要有关 Ionic 或 AngularJS 的更多帮助，请随时给我留言。谢谢！^_^
回答by hfunes.com
I followed the steps mentioned by Popcorn245 and it has worked. It is very important to note that if the original Angular project uses bower libraries, you should merge the package.jsonand bower.jsonfiles of the Angular project with the new Ionic project. Henceforth, bower libraries will be installed within the www/libfolder(This is indicated in the .bowerrcfile), so It should be redirected in the index.htmland the app.jsfiles of the Angular project. I hope this information help You. Feel free to contact me by PM if you need help. Best regards!
我按照 Popcorn245 提到的步骤进行了操作，并且奏效了。需要特别注意的是，如果原来的 Angular 项目使用了 bower 库，你应该将Angular 项目的package.json和bower.json文件与新的 Ionic 项目合并。此后，bower 库将安装在www/lib文件夹中（这在.bowerrc文件中指示），因此应将其重定向到 Angular 项目的index.html和app.js文件中。我希望这些信息对您有所帮助。如果您需要帮助，请随时通过 PM 与我联系。此致！
回答by Abhishek Gupta
Follow the steps stated by Popcorn245 and if it doesn't work, try to make the build of your currently working Angular 1 project and copy all the files from "dist" folder (present in the root directory, which should include "index.html" file as well) to the "www" folder in the ionic app project and then try to do "ionic serve".
按照 Popcorn245 所述的步骤进行操作，如果它不起作用，请尝试构建当前工作的 Angular 1 项目，并从“dist”文件夹（存在于根目录中，其中应包含“index.html”）中复制所有文件" 文件）到 ionic app 项目中的 "www" 文件夹，然后尝试执行 "ionic serve"。
I tried the solution given by elmerDeVe but was unable to get the app working. Anyway, thanks elmerDeVe for the solution.
我尝试了 elmerDeVe 提供的解决方案，但无法使应用程序正常工作。无论如何，感谢 elmerDeVe 的解决方案。
