How cool it would be if you can make a mobile application with the web technologies you already know like HTML, JavaScript and AngularJS. Guess what? If you know web development then you already know how to build mobile apps. Building a mobile app is piece of cake if you are good at those web technologies and I’m not kidding.

Ionic framework provides the best web and native app components for building highly interactive native and progressive web apps with AngularJS. It’s a 100% free and  open source project. It gives you one code base to run everywhere. You can build apps for iOS, Android and Windows with the same code base. Ionic is built on top of AngularJS and Cordova. It’s available on npm and requires Node.js as Cordova requires Node.js .

You can install Ionic and Cordova from the terminal by following npm command :

npm install -g cordova ionic

Using Ionic is as simple as AngularJS

You can create your app with a simple command :

start a ionic app

“cronjApp” is your project name and also it’s a directory where all your code resides.

“tabs” is the type of app, inbuilt template by Ionic. You can start with an empty app too.

The directory structure looks like this

folder

Directory www contains all your web page like codes. File index.html will look like this

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>
    <link rel="manifest" href="manifest.json">
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->
    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>
    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>
  </head>
  <body ng-app="cronj">
    <!--
      The nav bar that will be updated as we navigate between views.
    -->
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>
    </ion-nav-bar>
    <!--
      The views will be rendered in the <ion-nav-view> directive below
      Templates are in the /templates folder (but you could also
      have templates inline in this html file if you'd like).
    -->
    <ion-nav-view></ion-nav-view>
  </body>
</html>

 

Tag ion-nav-view is just like ui-router’s ui-view tag.

Defining modules, writing controllers, services and routes are exactly like you do in an AngularJS project.

Here are some samples :

//  Register module and inject dependencies in an array
//  It is same as any angular web project
angular.module('cronj', ['ionic', 'MyControllers', 'MyServices'])

 

//  Define routes. Just like you do in angular projects
//  Ionic uses AngularUI Router which uses the concept of states
.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
    .state('parentRoute', {
    url: '/parentRoute',
    abstract: true,
    templateUrl: 'templates/parent.route.html'
  })
  .state('parentRoute.childOne', {
      url: '/childOne',
      views: {
        'parentRoute-childOne': {
          templateUrl: 'templates/child.one.html',
          controller: 'ChildOneCtrl'
        }
      }
    })

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/tab/dash');
});

 

//  Controller module that holds your controllers
angular.module('cronj.controllers', [])
.controller('ChildOneCtrl',['$scope', '$ionicPopup', '$state', function($scope,$ionicPopup,$state) {
  //  do you stuff here
})

 

What the heck is Cordova?

Ionic is actually a front-end framework, it needs a native wrapper like Cordova  in order to run as a native app. Cordova wraps low-level browser shell like iOS’s UIWebView or Android’s WebView , that’s where the hybrid app runs. It actually provides the facility to use HTML5, CSS3 and JavaScript to develop cross-platform mobile app development.

Cordova have 3 essential parts :

  • Web App : Where your web page like code resides. HTML5, CSS , JavaScript, images, or other files necessary to run it resides here.
  • WebView : WebView provides entire user interface to your app. Cordova applications are ordinarily implemented as a browser-based WebView within the native mobile platform.
  • Plugins : Plugins are the coolest part of Cordova. It makes your app to work like native app. They provide an interface for Cordova and native components to communicate your javascript code to the native APIs. This enables you to invoke native code from JavaScript.

 

Hybrid App doesn’t suck anymore

Hybrid apps don’t differ much in performance and user experience with native apps. Native apps offer fastest, most reliable and best user experience to users. And in most of the cases you don’t actually need a native app. In fact, in many cases hybrid apps can be more helpful than native apps.

  1. Hybrid apps Are super easy to build,
  2. run on multiple mobile platforms,
  3. built with web tech like HTML5 and JavaScript,
  4. faster development,
  5. cost effective.

So if you want to deliver your app to most of the users in less time and want to spend less money in development, Go hybrid.

Following links may be helpful  :

  1. Ionic :  http://ionicframework.com/
  2. Cordova : https://cordova.apache.org/

Looking for AngularJS Development Company, your search ends here!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This site uses Akismet to reduce spam. Learn how your comment data is processed.