Back

Build Hybrid Mobile Application using Angular 2 and PhoneGap


If you want to create hybrid mobile application using javascript frameworks, Phonegap is best option. Angularjs has been used to create mobile application with Phonegap so let's try with Angular 2.0.


About Angular 2

Angular 2.0 is new framework built by Google developers and open source community by keeping Mobile first approach as a primary target. It also uses ES6 standards and support for Typescript - a clean way of writing javascript.
If you are new to Angular 2, I would recommend you to go through their website and try developing hello world program first.
https://angular.io/

About PhoneGap

Well, there is everything written about Phonegap all over the internet. PhoneGap is Adobe's product for building hybrid mobile application using open source technology stack. PhoneGap cloud build allows developer to create build on the fly without requiring you to setup PhoneGap on your machine and maintaining application versions.
Go through their website to know more:
http://phonegap.com/

Angularjs with PhoneGap

Angularjs has been proven to be best open source javascript framework for building hybrid mobile applications using PhoneGap library. There is very good and detailed post by Brian Ford about creating one sample application.

Angular 2 with PhoneGap

Okay, so how to build with Angular 2? Well, very simple and similar to Angularjs 1.x.
We will try to create a simple web application for tracking goals. We will use LocalStorage for storing user login details and user's goals so that we don't need to have any database or service layer.
Here is the web application:
Steps:
1. Sign up
2. Login
3. Create goals
5. Track goals
So we will have goals with number of days remaining to achieve them in manage goal sections.

Demo



Source Code

You can find source code for above Angular 2 app in my git:
https://github.com/ultrasonicsoft/my-goal


Convert to Mobile application with PhoneGap

Finally!!! First you need to install PhoneGap desktop application based on your environment either for Windows or Mac:
http://phonegap.com/products/#desktop-app-section

PhoneGap desktop application makes it easy to create and manage your mobile applications. Once downloaded and installed, create new project. 

PhoneGap project's folder structure will looks like below:

Your web application content will go to "www" folder. So after pasting your website content to "www" folder it should look like this:


Linking PhoneGap library and Loading PhoneGap application

Last step is to link PhoneGap library in our web application. It's very simple step. You just need to link "cordova.js" file and include one script block to load PhoneGap application object.

<script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript">
        var phonegapApp = {
                initialize: function() {
                    this.bindEvents();
                },
                bindEvents: function() {
                    document.addEventListener('deviceready', this.onDeviceReady, false);
                },
                onDeviceReady: function() {
                  alert('onDeviceReady fired');
                            System.config({
                    packages: {        
                    app: {
                        format: 'register',
                        defaultExtension: 'js'
                    }
                    }
                });
                System.import('app/main')
                        .then(null, console.error.bind(console))
                        .catch(err => alert('bootstrap error: ' + err));
                }
            };
        phonegapApp.initialize();
    </script>


Building mobile application package using PhoneGap Build

Okay, we are all set to create installer for Android, iOS, Windows etc. PhoneGap Build is cloud service which allow you to upload your PhoneGap project created using PhoneGap Desktop application and generate packages.
Create your free account (limited for only 1 PhoneGap application)

Once registered, upload your code (zip your PhoneGap desktop project folder) by clicking "Upload Code" button.

 

After uploading code, press "Rebuild all" button to start creating packages for iOS, Android and Window platform. You may have to generate publisher key if required.  After successful build, you will see download option for each environment.


Conclusion

Yes, it is that easy to create hybrid application using Angular 2 and PhoneGap. Interesting, isn't it?
As you have seen throughout this post that, we haven't focused on neither Angular 2 nor PhoneGap but combining both of them. 

Hope you enjoyed this post.

Cheers!!!


Visitor count:

3d models free download