How to convert an existing Angular1 web app to a Cordova app?

Question

I've found a lot of tutorials on the internet telling you how to build a new Cordova app with AngularJS, and that's good.

But what if I do have my AngularJS web app alive and kicking, and I would like to make a mobile app (Android/IOS) from it? Is this possible / feasible / advisable?

If it is, can you give some advise, or point to some existing resource documenting this task?

Answer 1

As dmahapatro said your best bet to get your AngularJS app packaged for mobile is to use ionic framework. This migration would be fairly simple. Ionic includes a UI Framework, but isn't at all required, any web coding will work because your app is just being run in a chrome frame. The ionic command line tool actually does all of the magic.

I would start by spinning up a standard ionic app using the command ionic start APPNAME. Then you can simply put your app into the APPNAME/www directory. Then edit your index.html and add this script tag in the head. <script src="cordova.js"></script>

That is all that is really required to get your app built for mobile. You can test on Android by running ionic platform add android to install the dependencies for Android and then run ionic run android (Have your android plugged in with drivers installed or an emulator running like Genymotion). If you want to build for iOS you will need to have a Mac (eww...) but it's just as easy ionic platform add ios and then run ionic run ios to test on Apple, though there is a bit more setup I believe.

To get the added benefits of Ionic's directives and other helpful utilities you can add the dependency to your main ionic module like below. Note I also added ngCordova and I highly recommend this for getting better device integration.

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

All in all you are pretty much set since you are already on AngularJS which is the backbone (pun intended) of Ionic. You may run into device specific issues as far as styling and such, but for the most part it should just work. Feel free to message me anytime if you want more help with Ionic or AngularJS. Thanks! ^_^

Answer 2

I followed the steps mentioned by Popcorn245 and it has worked. It is very important to note that if the original Angular project uses bower libraries, you should merge the package.json and bower.json files of the Angular project with the new Ionic project. Henceforth, bower libraries will be installed within the www/lib folder(This is indicated in the .bowerrc file), so It should be redirected in the index.html and the app.js files of the Angular project. I hope this information help You. Feel free to contact me by PM if you need help. Best regards!