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

Question

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

但是,如果我确实让我的AngularJS网络应用程序活着并且踢了,我想从中制作一个移动应用程序(Android/IOS)？这可行/可行/可行吗？

如果是,您能提供一些建议,还是指出记录此任务的现有资源？

Answer 1

正如dmahapatro所说,让你的AngularJS应用程序打包移动的最佳选择是使用离子框架.这种迁移非常简单.Ionic包含一个UI框架,但根本不需要,任何网页编码都可以使用,因为你的应用程序只是在chrome框架中运行.离子命令行工具实际上完成了所有的魔法.

我将首先使用该命令启动标准离子应用程序ionic start APPNAME.然后,您只需将您的应用程序放入APPNAME/www目录即可.然后编辑index.html并在头部添加此脚本标记. <script src="cordova.js"></script>

这就是为移动设备构建应用程序所需的全部内容.您可以通过运行ionic platform add android安装Android的依赖项来测试Android,然后运行ionic run android(安装驱动程序时插入Android,或运行类似Genymotion的模拟器).如果你想为iOS构建你需要有一台Mac(eww ...),但它也很简单ionic platform add ios,然后ionic run ios在Apple上运行测试,尽管我相信还有一些设置.

为了获得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();
        }
    });
});

总而言之,因为你已经使用了AngularJS,这是Ionic的骨干(双关语).就样式等而言,您可能遇到特定于设备的问题,但在大多数情况下它应该可以正常工作.如果您想要更多有关Ionic或AngularJS的帮助,请随时给我发消息.谢谢!^ _ ^