Как преобразовать существующее веб-приложение Angular1 в приложение Cordova?

Я нашел много учебников в Интернете, рассказывающих вам, как создать новое приложение Кордовы с AngularJS, и это хорошо.

Но что, если у меня есть мое веб-приложение AngularJS вживую и ногами, и я хотел бы сделать из него мобильное приложение (Android / IOS)? Возможно ли это / целесообразно / целесообразно?

Если да, можете ли вы дать некоторые рекомендации или указать на какой-то существующий ресурс, документирующий эту задачу?

Solutions Collecting From Web of "Как преобразовать существующее веб-приложение Angular1 в приложение Cordova?"

Поскольку dmahapatro сказал, что ваш лучший выбор, чтобы получить ваше приложение AngularJS, упакованное для мобильных устройств, это использовать ионную инфраструктуру. Эта миграция будет довольно простой. Ionic включает UI Framework, но совсем не требуется, любое веб-кодирование будет работать, потому что ваше приложение просто запускается в хромированном кадре. Инструмент ионной командной строки фактически выполняет всю магию.

Я бы начал с создания стандартного ионного приложения, используя команду ionic start APPNAME . Затем вы можете просто добавить свое приложение в каталог APPNAME / www. Затем отредактируйте свой index.html и добавьте этот тег скрипта в голову. <script src="cordova.js"></script>

Это все, что действительно необходимо для создания вашего приложения для мобильных устройств. Вы можете протестировать на Android, запустив ionic platform add 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 или AngularJS. Благодаря! ^ _ ^

Я следовал шагам, упомянутым Popcorn245, и это сработало. Очень важно отметить, что если оригинальный проект Angular использует библиотеки bower, вы должны объединить файлы package.json и bower.json проекта Angular с новым ионным проектом. В дальнейшем библиотеки bower будут установлены в папке www / lib (это указано в файле .bowerrc), поэтому он должен быть перенаправлен int index.html и файлы app.js проекта Angular. Надеюсь, эта информация поможет вам. Не стесняйтесь связаться со мной по телефону, если вам нужна помощь. С наилучшими пожеланиями!