web-dev-qa-db-fra.com

Comment convertir une application Web Angular1 existante en une application Cordova?

J'ai trouvé de nombreux tutoriels sur Internet qui vous expliquaient comment construire a nouveau application Cordova avec AngularJS, et c'est bien.

Mais que se passe-t-il si mon application Web AngularJS est en vie et que je souhaite en faire une application mobile (Android/IOS)? Est-ce possible/réalisable/souhaitable?

Si tel est le cas, pouvez-vous donner un conseil ou indiquer une ressource existante documentant cette tâche?

androidiosangularjscordova
30
MarcoS

Comme le dit dmahapatro, votre meilleur pari pour obtenir votre application AngularJS pour le mobile est d’utiliser un cadre ionique. Cette migration serait assez simple. Ionic inclut un cadre d'interface utilisateur, mais n'est pas du tout requis, tout codage Web fonctionnera, car votre application est en cours d'exécution dans un cadre chromé. L'outil de ligne de commande ionique fait toute la magie.

Je commencerais par lancer une application ionique standard à l'aide de la commande ionic start APPNAME. Ensuite, vous pouvez simplement mettre votre application dans le répertoire APPNAME/www. Ensuite, éditez votre index.html et ajoutez cette balise de script dans l'en-tête .<script src="cordova.js"></script>

C'est tout ce qui est vraiment nécessaire pour que votre application soit conçue pour les mobiles. Vous pouvez tester sur Android en exécutant ionic platform add Android pour installer les dépendances pour Android, puis en exécutant ionic run Android (connectez votre Android à des pilotes installés ou à un émulateur fonctionnant comme Genymotion ). Si vous voulez créer pour iOS, vous aurez besoin d'un Mac (eww ...) mais c'est tout aussi simple ionic platform add ios, puis exécutez ionic run ios pour tester sur Apple, bien qu'il y ait un peu plus de configuration, je crois.

Pour obtenir les avantages supplémentaires des directives Ionic et d'autres utilitaires utiles, vous pouvez ajouter la dépendance à votre module ionique principal, comme ci-dessous. Remarque J'ai également ajouté ngCordova et je le recommande vivement pour une meilleure intégration des périphériques.

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

Dans l’ensemble, vous êtes à peu près au point puisque vous êtes déjà sur AngularJS, l’épine dorsale (jeu de mots) de Ionic. Vous pouvez rencontrer des problèmes spécifiques à l’appareil en ce qui concerne le style, etc., mais dans l’ensemble, cela devrait fonctionner. N'hésitez pas à m'envoyer un message à tout moment si vous souhaitez davantage d'aide avec Ionic ou AngularJS. Merci! ^ _ ^ 

37
Popcorn245

J'ai suivi les étapes mentionnées par Popcorn245 et cela a fonctionné. Il est très important de noter que si le projet Angular d'origine utilise des bibliothèques Bower, vous devez fusionner les fichiers package.json et bower.json du projet Angular avec le nouveau projet ionic. Désormais, les bibliothèques Bower seront installées dans le dossier www/lib (Ceci est indiqué dans le fichier .bowerrc), il devrait donc être redirigé vers les fichiers index.html et app.js du projet Angular .. .J'espère que cette information vous aidera ... ... N'hésitez pas à me contacter avant le PM si vous avez besoin d'aide . Cordialement!

3
hfunescom

Suivez les étapes indiquées par Popcorn245 et si cela ne fonctionne pas, essayez de construire votre projet Angular 1 en cours de travail et copiez tous les fichiers du dossier "dist" (présent dans le répertoire racine, qui devrait inclure "index.html "fichier également) dans le dossier" www "du projet d'application ionique, puis essayez de" servir ionique ".

J'ai essayé la solution proposée par elmerDeVe mais je n'ai pas réussi à faire fonctionner l'application. Quoi qu'il en soit, merci ElmerDeVe pour la solution.

0
Abhishek Gupta