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?

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

Solution 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!

Comments

[dmahapatro]

ionic framework (which uses Angular and Cordova) can address most of your requirements. I have been using it now for few days and it has been great.

[MarcoS]

Yes, but how? More, I see Ionic is in UI block of the app stack, and my web app uses Bootstrap: how to integrate them?

[ishandutta2007]

please update the question title from angularjs to angular1 as people may confuse with stackoverflow.com/questions/41781963/…

[MarcoS]

Thanks for your answer! A little bit late, but probably I'll refer to it for my next project... :-)

[Popcorn245]

@MarcoS Yeah sorry I just saw that you were left hanging and I figured better late then never. I have been using Ionic since they were in early beta and they just released their first stable version, really worth looking into. PM me if you want to talk shop. Thanks! ^_^

[MarcoS]

I was planning to wait for a stable AngularJS 2.0 (September ~ October 2015, I suppose) for a rewite of my app, and then I'll try your suggestion, for sure... How do I PM you? :-)

[Popcorn245]

@MarcoS Very wise. Angular 2 is coming soon and Ionic will be following shortly after with a huge update. It should almost level the field with web -vs- native apps. Feel free to add me via google popcorn245(at)gmail(dot)com.

[tryingtolearn]

@popcorn245 Hi there, I've been having issues with ionic and angular. Would it be alright if I added you and msged you some questions as well?

[Popcorn245]

@tryingtolearn Certainly, what good is knowledge without sharing it. You got my e-mail, thanks! ^_^

[Bryant James]

I don't get the pun. -1

[Popcorn245]

@BryantJackson Backbone.js is a javascript MVC that is an alternative to AngularJS. Thanks for the downvote tho...

[ishandutta2007]

I followed your steps, but when the app opens it shows 'Loading...' , How do I debug?

[Popcorn245]

Open chrome and in the browser URL go to "chrome://inspect". You should then see your phone listed with your web view app open on it. (Note: this assumes you are using an Android phone and it is in developer mode). Feel free to email me if you need further assistance, it's in the comments above. Thanks and happy hacking! ^_^

[ishandutta2007]

doesnt work for angular2 . can you answer this stackoverflow.com/questions/41781963/…