Create a Mobile app using Intel XDK and Ionic Framework
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>
<scriptsrc="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script>
angular.module('ionicApp', ['ionic']).controller('MyCtrl', function($scope) {});
</script>
</body>
</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>
<scriptsrc="//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>
<scriptsrc="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>
<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>
<scriptsrc="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>
<scriptsrc="//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>
<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>
<scriptsrc="//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.
0 comments