2014-09-21 7 views
29

Znalazłem wiele samouczków w Internecie, informujących o tym, jak zbudować a nowy Aplikacja Cordova z AngularJS, i to dobrze.Jak przekonwertować istniejącą aplikację internetową Angular1 do aplikacji Cordova?

Co jednak zrobić, jeśli moja aplikacja internetowa AngularJS będzie żyła i będzie kopać, a ja chciałbym stworzyć aplikację mobilną (Android/IOS)? Czy jest to możliwe/wykonalne/wskazane?

Jeśli tak, czy możesz udzielić porady lub wskazać istniejący zasób dokumentujący to zadanie?

+0

[** 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

+3

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

+0

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

Odpowiedz

37

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!^_^

+0

Dzięki za odpowiedź! Trochę za późno, ale prawdopodobnie powiem o tym na mój następny projekt ...:-) – MarcoS

+0

@MarcoS Tak, przepraszam, właśnie zobaczyłem, że zostałeś zawieszony i pomyślałem, że lepiej późno niż nigdy. Używam Ionic od wczesnej wersji beta i właśnie wydali swoją pierwszą stabilną wersję, naprawdę wartą zaglądania. Powiedz mi, jeśli chcesz rozmawiać w sklepie. Dzięki!^_^ – Popcorn245

+0

Zamierzałem poczekać na stabilny AngularJS 2.0 (wrzesień-październik 2015 r., Jak przypuszczam), aby przerobić moją aplikację, a potem spróbuję twojej sugestii, na pewno ... Jak mogę Ci powiedzieć? :-) – MarcoS

3

Wykonałem kroki wymienione przez Popcorn245 i zadziałało. Należy pamiętać, że jeśli oryginalny projekt Angular korzysta z bibliotek altanowych, należy scalić pliki package.json i bower.json projektu Angular z nowym projektem jonowym. Odtąd biblioteki altan zostaną zainstalowane w folderze www/lib (jest to wskazane w pliku .bowerrc), więc powinno być przekierowane do plików index.html i app.js projektu Angular. Mam nadzieję, że te informacje ci pomogą. Zapraszam do kontaktu ze mną przez PM, jeśli potrzebujesz pomocy. Pozdrawiam!

Powiązane problemy