Wie konvertiert man eine vorhandene Angular1 Web App in eine Cordova App?

Question

Ich habe eine Menge von Tutorials im Internet gefunden sagen Ihnen, wie zu build ein neuen Cordova App mit AngularJS, und das ist gut.

Aber was, wenn ich meine AngularJS Web App am Leben und Treten habe, und ich möchte daraus eine mobile App (Android/IOS) machen? Ist das möglich/möglich/ratsam?

Wenn ja, können Sie einen Rat geben oder auf eine vorhandene Ressource verweisen, die diese Aufgabe dokumentiert?

Answer 1

Wie dmahapatro sagte Ihre beste Wette, um Ihre AngularJS App für Handys verpackt zu bekommen, ist die Verwendung ionischen Rahmen. Diese Migration wäre ziemlich einfach. Ionic enthält ein UI-Framework, ist aber überhaupt nicht erforderlich. Jede Web-Codierung funktioniert, weil Ihre App gerade in einem Chromrahmen ausgeführt wird. Das ionische Befehlszeilen-Tool macht tatsächlich all die Magie.

Ich würde damit beginnen, eine Standard-ionic-App mit dem Befehl ionic start APPNAME zu starten. Dann können Sie Ihre App einfach in das APPNAME/www-Verzeichnis stellen. Bearbeiten Sie dann Ihre index.html und fügen Sie dieses Skript-Tag in den Kopf ein. <script src="cordova.js"></script>

Das ist alles, was wirklich benötigt wird, um Ihre App für Mobilgeräte zu erstellen. Sie können auf Android testen, indem Sie ionic platform add android ausführen, um die Abhängigkeiten für Android zu installieren, und dann ionic run android ausführen (Lassen Sie Ihren Android eingesteckt mit installierten Treibern oder einem Emulator, der wie Genymotion ausgeführt wird). Wenn Sie für iOS bauen möchten, müssen Sie einen Mac haben (Eww ...), aber es ist genauso einfach ionic platform add ios und dann ionic run ios auf Apple zu testen, obwohl es ein bisschen mehr Setup glaube ich.

Um die zusätzlichen Vorteile von Ionics Direktiven und anderen hilfreichen Dienstprogrammen zu erhalten, können Sie die Abhängigkeit zu Ihrem Haupt-Ionen-Modul wie unten hinzufügen. Hinweis: Ich habe auch hinzugefügt ngCordova und ich empfehle dies für eine bessere Geräteintegration.

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(); 
     } 
    }); 
}); 

Alles in allem Sie so ziemlich gesetzt sind, da Sie bereits auf AngularJS sind, die das Rückgrat ist (Wortspiel beabsichtigt) von Ionic. Sie können gerätespezifische Probleme hinsichtlich des Stylings und dergleichen feststellen, aber größtenteils sollte es einfach funktionieren. Fühlen Sie sich frei, mich jederzeit zu benachrichtigen, wenn Sie mehr Hilfe mit Ionic oder AngularJS wollen. Vielen Dank!^_^

Answer 2

Ich folgte den Schritten von Popcorn245 erwähnt und es hat funktioniert. Wenn das ursprüngliche Angular-Projekt Bower-Bibliotheken verwendet, sollten Sie beachten, dass Sie die Dateien package.json und bower.json des Angular-Projekts mit dem neuen ionischen Projekt zusammenführen sollten. Von nun an werden Bower-Bibliotheken im Ordner www/lib installiert (dies ist in der .bowerrc-Datei angegeben). Daher sollte es in die Dateien index.html und app.js des Angular-Projekts umgeleitet werden. Ich hoffe, diese Informationen helfen Ihnen. Fühlen Sie sich frei, mich per PM zu kontaktieren, wenn Sie Hilfe benötigen. Mit freundlichen Grüßen!