Я нашел много уроков в Интернете, рассказывающих вам, как построить приложение new Кордовы с AngularJS, и это хорошо.
Но что, если у меня есть мое веб-приложение AngularJS вживую и ногами, и я хотел бы сделать из него мобильное приложение (Android/IOS)? Возможно ли это/возможно/целесообразно?
Если да, можете ли вы дать некоторые рекомендации или указать на какой-то существующий ресурс, документирующий эту задачу?
Как сказал dmahapatro, ваш лучший выбор для того, чтобы ваше приложение AngularJS, упакованное для мобильных устройств, использовало ионную инфраструктуру. Эта миграция была бы довольно простой. Ionic включает в себя UI Framework, но совсем не требуется, любое веб-кодирование будет работать, потому что ваше приложение просто запускается в хромированном фрейме. Инструмент ионной командной строки действительно выполняет всю магию.
Я бы начал с вращения стандартного ионного приложения с помощью команды ionic start APPNAME. Затем вы можете просто добавить свое приложение в каталог APPNAME/www. Затем отредактируйте свой index.html и добавьте этот тег script в голову.
<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. Вы можете столкнуться с конкретными проблемами устройства в отношении стиля и т.д., Но по большей части он должен работать. Не стесняйтесь сообщать мне в любое время, если вам нужна дополнительная помощь с Ionic или AngularJS. Благодарю! ^ _ ^
Я выполнил шаги, упомянутые Popcorn245, и это сработало. Очень важно отметить, что если исходный проект Angular использует библиотеки bower, вы должны объединить файлы package.json и bower.json проекта Angular с новым проектом Ionic. Отныне библиотеки bower будут устанавливаться в папке www/lib (это указано в файле .bowerrc), поэтому его следует перенаправить в index.html и app.js файлы проекта Angular. Я надеюсь, что эта информация поможет Вам. Не стесняйтесь обращаться ко мне в личку, если вам нужна помощь. С уважением!
Выполните действия, указанные в Popcorn245, и, если он не работает, попробуйте выполнить сборку вашего текущего работающего проекта Angular 1 и скопируйте все файлы из папки "dist" (присутствующей в корневом каталоге, которая должна включать "index.html"). также) в папку "www" в проекте приложения ionic и попробуйте выполнить "ionic serve".
Я попробовал решение, данное elmerDeVe, но не смог заставить приложение работать. В любом случае, спасибо elmerDeVe за решение.