Jak dmahapatro powiedział, że najlepiej, aby aplikacja AngularJS została spakowana na urządzenia mobilne, należy użyć jonowego szkieletu. Ta migracja byłaby dość prosta. Ionic zawiera UI Framework, ale nie jest to wcale wymagane, każde kodowanie internetowe będzie działało, ponieważ twoja aplikacja jest właśnie uruchamiana w ramce chromowej. Narzędzie jonowej linii poleceń faktycznie wykonuje całą magię.
Zacznę od obrócenia standardowej aplikacji jonowej za pomocą polecenia ionic start APPNAME
. Następnie możesz po prostu umieścić swoją aplikację w katalogu APPNAME/www. Następnie edytuj plik index.html i dodaj ten tag skryptu w nagłówku. <script src="cordova.js"></script>
To wszystko, co jest wymagane do zbudowania aplikacji mobilnej. Możesz przetestować na Androidzie, uruchamiając ionic platform add android
, aby zainstalować zależności dla Androida, a następnie uruchomić ionic run android
(Czy twój android jest podłączony z zainstalowanymi sterownikami lub emulator działa jak Genymotion). Jeśli chcesz zbudować na iOS, będziesz musiał mieć Maca (eww ...), ale równie łatwo jest przeprowadzić ionic platform add ios
, a następnie uruchomić ionic run ios
, aby przetestować na Apple, choć wydaje mi się, że jest nieco więcej konfiguracji.
Aby uzyskać dodatkowe korzyści z dyrektyw Ionic i innych przydatnych narzędzi, możesz dodać zależność do głównego modułu jonowego, jak poniżej. Uwaga Dodałem także ngCordova i bardzo polecam to dla lepszej integracji urządzenia.
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();
}
});
});
W sumie masz prawie ustawiony skoro jesteś już na angularjs który jest podstawą (pun przeznaczone) jonowych. Możesz napotkać problemy związane z urządzeniem, jeśli chodzi o stylizację i takie, ale w przeważającej części powinno po prostu działać. Jeśli chcesz uzyskać pomoc w Ionic lub AngularJS, możesz w każdej chwili wysłać do mnie wiadomość. Dzięki!^_^
[** framework jonowy **] (http://ionicframework.com/) (który używa Angular i Cordova) może zaspokoić większość twoich wymagań. Używam go już od kilku dni i było świetnie. – dmahapatro
Tak, ale * jak *? Co więcej, widzę, że Ionic znajduje się w bloku UI stosu aplikacji, a moja aplikacja internetowa używa Bootstrapa: jak je zintegrować? – MarcoS
proszę zaktualizować tytuł pytania z angularjs na angular1, ponieważ ludzie mogą pomylić się z http://stackoverflow.com/questions/41781963/how-to-convert-an-existing-angularjs-2-web-app-to-a-cordova -app – ishandutta2007