Home Carbon Ads Create a Mobile app using Intel XDK and Ionic Framework

Create a Mobile app using Intel XDK and Ionic Framework

ionic-xdk

This post is a part 50 of Intel XDK Complete Tutorial post series.

In this tutorial we will see how to build a cross-platform mobile app using Intel XDK platform and Ionic framework. Intel XDK is the best platform for building and testing cordova apps whereas Ionic is the only best AngularJS based front-end UI mobile framework.

Note: If you are using XDK App Designer then you can choose Ionic as the design framework while creating the project. If you want to learn the complete workflow of designing app using App Designer with Ionic as a framework and also if you are new to Ionic & XDK then check out Building Mobile APPs using Intel XDK and Ionic video course.

What is Intel XDK?

Intel XDK is basically a software to build cross-platform mobile apps using HTML5. It’s the best fit for web developers to build mobile apps. Intel XDK uses cordova framework to run HTML5 in mobile applications. Cordova is the same framework that is used by phonegap also. To learn about how to install Intel XDK and create HTML5 apps using it refer my Intel XDK introduction tutorial.

What is Ionic?

Ionic framework is a collection command line tools, UI designer, AngularJS extensions, CSS classes and many other things to let you build cordova apps.

Ionic provides lots of CSS classes for styling and AngularJS extensions for creating various UI components which can be used outside Ionic framework i.e. we can use them to design apps build with Intel XDK.

What is ngCordova Plugin?

A ngCordova plugin is same as a cordova plugin in many aspects the only difference is that a ngCordova plugins exposes its functionality as AngularJS extensions instead of normal JavaScript.

To use ngCordova plugins in Intel XDK app you need to load AngularJS but no need of Ionic framework.

Sample Ionic Framework and Intel XDK APP Template

Here is sample app code which uses Intel XDK and Ionic Framework.

<!DOCTYPE html>
<html ng-app="ionicApp">
<head>
    <title>Intel XDK and Ionic Framework</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <style>
        @-ms-viewport { width: 100vw ; zoom: 100% ; }                          
        @viewport { width: 100vw ; zoom: 100% ; }
        @-ms-viewport { user-zoom: fixed ; }                                    
        @viewport { user-zoom: fixed ; }
    </style>

   
    <link rel="stylesheet" href="css/app.css">
    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
</head>
<body ng-controller="MyCtrl">
   
    <ion-header-bar class="bar-positive">
      <h1 class="title">Hello World!!!</h1>
    </ion-header-bar>
   
    <script src="cordova.js"></script>
    <script src="cordova_plugins.js"></script>          

    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
   
    <script>
        angular.module('ionicApp', ['ionic']).controller('MyCtrl', function($scope) {});
    </script>
</body>
</html>

Here we are loading Ionic Framework from CDN.

Sample ngCordova and Intel XDK APP Template

If you want to use ngCordova plugins in your Intel XDK app then this is the starting template for your app

<!DOCTYPE html>
<html>
<head>
    <title>Intel XDK and ngCordova</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <style>
        @-ms-viewport { width: 100vw ; zoom: 100% ; }                          
        @viewport { width: 100vw ; zoom: 100% ; }
        @-ms-viewport { user-zoom: fixed ; }                                    
        @viewport { user-zoom: fixed ; }
    </style>

   
    <link rel="stylesheet" href="css/app.css">
</head>
<body>
   
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="https://cdn.rawgit.com/driftyco/ng-cordova/master/dist/ng-cordova.min.js"></script>
   
    <script src="cordova.js"></script>
    <script src="cordova_plugins.js"></script>          
   
    <script>
        angular.module('myApp', ['ngCordova']);
    </script>
</body>
</html>

Here we are loading AngularJS and ngCordova JavaScript File from CDN.

Now you can install any ngCordova plugin just like Cordova plugins in XDK and use them.

Sample Ionic Framework, ngCordova and Intel XDK APP Template

If you want to use all three of them together then this is the app template

<!DOCTYPE html>
<html ng-app="ionicApp">
<head>
    <title>Intel XDK and Ionic Framework</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <style>
        @-ms-viewport { width: 100vw ; zoom: 100% ; }                          
        @viewport { width: 100vw ; zoom: 100% ; }
        @-ms-viewport { user-zoom: fixed ; }                                    
        @viewport { user-zoom: fixed ; }
    </style>

   
    <link rel="stylesheet" href="css/app.css">
    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
</head>
<body ng-controller="MyCtrl">
   
    <ion-header-bar class="bar-positive">
      <h1 class="title">Hello World!!!</h1>
    </ion-header-bar>

    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
    <script src="https://cdn.rawgit.com/driftyco/ng-cordova/master/dist/ng-cordova.min.js"></script>
         
    <script src="cordova.js"></script>    
   
    <script>
        angular.module('ionicApp', ['ionic']).controller('MyCtrl', function($scope) {});
        angular.module('myApp', ['ngCordova']);
    </script>
</body>
</html>

Conclusion

We saw what Ionic Framework and ngCordova is. Although Ionic framework provides CSS classes for many of its components you will need to learn AngularJS if you want to use complete potential of Ionic framework. Intel XDK is the best platform for creating cordova apps and Ionic is the best frontend UI library for hybrid mobile apps.

Narayan Prusty
HTTP/2 for WordPress SitesWordPress Set HTML Editor as Default
Comments: 10
  1. 5 years ago

    Search Engine Marketing service providers create a nitty-gritty plan to analyze and scrutinize the website and its other aspects thoroughly.

    ReplyCancel
  2. 5 years ago

    Hi, I am using like this. Is this correct ? I am not sure :/

    angular.module('ioApp', ['ionic','ngCordova']).controller('MainCtrl', function($scope) {

    });

    ReplyCancel
  3. 6 years ago

    Vormodern ist für mich ein Lob. Dorfdepp trifft nur auf den zu, der sich nicht entblödet, so einen Begriff zu benutzen. Ich, für meinen Teil, bin Fränkin. Somit Angehörige einer unterdrückten “Nation”, nach Ihrem Veprsändnit…rostmodesn, oder? Im Ãœbrigen: Es GIBT weder Palästinenser, noch Palis. Nur judenhassende Araber.

    ReplyCancel
  4. Okafor Ikenna
    6 years ago

    What I did to get it started was to create a new XDK project from templates(I used the bluetooth template), then remove all the code that I do not need. That worked for me.

    ReplyCancel
  5. 7 years ago

    Greeting sir, im software engineerig final semester students. Now im doing my final year project with is about life broadcasting. so now im doing in weebly web site which is using html codes. so i dont know how to convert its to apps. so can i get any solution for that?

    ReplyCancel
  6. 7 years ago

    You can use this starter template to start your Ionic Framework/AngularJS/ngCordova projects in Intel XDK and you will still be able to use the Intel XDK designer to for your project. Index.html is basically the layout, and your pages are designed in views.js. In the $stateProvider you will be able to use $templateProvider to load the pages using page IDs. Quite simple and nice.enter link description here

    ReplyCancel
  7. 7 years ago

    Hi Narayan, how can I use cordova plugins with Ionic in Intel XDK?. Your examples do not explain how to inject the dependencies required to make them work. Can you provide a real example of using camera, geolocation or push notifications for instance?

    Regards

    ReplyCancel
  8. Starter App
    7 years ago

    Thank you for this guide. I am just learning how to use IntelXDK and Ionic Framework. I followed “Sample Ionic Framework, ngCordova and Intel XDK APP Template”

    with the following files below:

    <script src="js/ionic.bundle.js"></script>
    <script src="js/ng-cordova.min.js"></script>
    <script src="intelxdk.js"></script>
    <script src="cordova.js"></script>
    <script src="js/app.js"></script>
    <script src="js/init-app.js"></script>
    <script src="xdk/init-dev.js"></script> <!-- New directory location -->

    However, I cant seem to run angularjs with simple controller data binding. Please help. Thank you.

    ReplyCancel
  9. 7 years ago

    Is it normal the follow warning in main.js file?

    ‘angular’ is not defined. (W117) angular.module(‘ionicApp’, [‘ionic’]).controller(‘MyCtrl’, function($scope) {});

    ReplyCancel

Leave a Reply to Starter App Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

7 years ago 10 Comments Cordova
Share this
Related Articles