Source Freeze

  • Home
  • iOS
  • Swift
  • Cross-Platform
  • About
  • Contact
Home » Cordova device plugin example using ionic framework

Cordova device plugin example using ionic framework

August 18, 2015 by Source Freeze 6 Comments

In the previous tutorial we have implemented the Cordova camera plugin example, now this tutorial we will learn about how to implement Cordova device plugin example.

Next create the ionic project using the below commands. Here we are creating the ionic blank project and name it is as “DevicePluginExample”

ionic start DevicePluginExample blank

cd DevicePluginExample

Then add the android and iOS platforms using the below ionic commands.

ionic platform add android

ionic platform add ios

Note:

You must need Mac to run the iOS applications.

Then integrate the ng-Cordova library into your project, if you are new to ng-Cordova framework here is the simple description.

What is ng-Cordova?

“ngCordova is a collection of AngularJS services and extensions created by Ionic and driven by the community. These services make it easier to integrate Cordova plugins into Ionic applications”

Then start download the latest ng-cordova library and place the ng-cordova.min.js file in your project’s www/js directory.

Add the ng-cordova.min.js reference above to the cordova.js file in the index.html as mentioned in the below.

<!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 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>
<script src="js/ng-cordova.min.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>
</head>
<body ng-app="starter">

ng-cordova integration is still not over. Open your app.js file and alter the angular.module line to look like the following.

angular.module('starter', ['ionic', 'ngCordova'])

Adding the Cordova Device Plugin

The next thing we want to do is add the Apache Cordova device plugin. This can be done by running the following command.

cordova plugin add org.apache.cordova.device

Now we are configured the application with Cordova device plugin.

Add get Device information button and create the div element to get the device information details.

<body ng-app="starter" ng-controller="DeviceController">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Device Information</h1>
</ion-header-bar>
<ion-content>
<div class="item item-text-wrap">
<ul class="list">
<li class="item">
Manufacturer : {{manufacturer}}
</li>
<li class="item">
Model : {{model}}
</li>
<li class="item">
Platform : {{platform}}
</li>
<li class="item">
UUID : {{uuid}}
</li>
</ul>
</div>
</ion-content>
</ion-pane>
</body>

Next create the controller for app.js file and add $ionicPlatform.ready function. Then get the device information using getDevice() function and assign the device detail values in respective list elements. Please find the full source code for app.js file in the below.

angular.module('starter', ['ionic','ngCordova'])

.run(function($ionicPlatform) {
$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.StatusBar) {
StatusBar.styleDefault();
}
});
})

.controller('DeviceController', function($ionicPlatform, $scope, $cordovaDevice) {
$ionicPlatform.ready(function() {
$scope.$apply(function() {
// sometimes binding does not work! :/
// getting device infor from $cordovaDevice
var device = $cordovaDevice.getDevice();
$scope.manufacturer = device.manufacturer;
$scope.model = device.model;
$scope.platform = device.platform;
$scope.uuid = device.uuid;
});
});
})

next we have to run the application using the below command lines. if you are running in emulator you can use emulate instead run.

ionic run ios

ionic run android

Once run the application it will get the device details in the ionic platform ready function. the output will looks like below and find the full source code for this application in this github link. 

cordova device plugin example output

Filed Under: cordova, cross-platform, ionic framework, phonegap

Comments

  1. JTD says

    November 10, 2015 at 8:45 am

    device is not defined…

    Reply
    • erik says

      March 14, 2016 at 3:49 pm

      Only gonna work in the devices, android/ios.
      In the browser the device is not defined.
      Here work 100%, android/ios. 🙂
      Sorry about the english haha

      Reply
  2. Senthil says

    April 2, 2016 at 6:02 am

    I tried this way. I get uuid from android mobile perfectly. But i can’t get in ios… I upload the code in ionic view, from this i check with ios. It doesn’t show anything.

    Reply
  3. Prathik says

    June 2, 2016 at 9:43 am

    Just showing,
    Manufacturer:
    Model:
    Platform:
    UUID:

    even tried downloading your code in github. still the same problem
    please help

    Reply
    • andreyshedko says

      July 8, 2016 at 1:29 am

      Did you tried it on device, emulator or browser?

      Reply
  4. Arjun G N says

    November 16, 2016 at 7:07 am

    how do you know the “cordovaDevice” is the provider name for this plugin ?

    Reply

Leave a Reply Cancel reply

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

Recent Posts

  • iOS UIPickerView Example using Swift
  • UITableView tutorial using Swift in iOS
  • UIActivityindicatorview example in ios using swift
  • UIStepper Example in Swift
  • MBProgressHUD example in Swift
  • UIWebView example using swift in ios

TAGS

cross-platform ionic iOS javascript mobile application development objective-c swift uiwebview Visual Studio plugin

Categories

  • cordova
  • cross-platform
  • Hybrid
  • Ionic 2
  • ionic framework
  • ios-tutorial
  • javascript
  • Mobile App Development
  • phonegap
  • react-native
  • swift
  • UIAlertController
  • uidatepicker
  • uipickerview
  • uislider
  • UISwitch
  • uitableview
  • uitextfield
  • uiwebview
  • visual studio – plugin
  • WKWebView

Recent Posts

  • iOS UIPickerView Example using Swift
  • UITableView tutorial using Swift in iOS
  • UIActivityindicatorview example in ios using swift
  • UIStepper Example in Swift
  • MBProgressHUD example in Swift
  • UIWebView example using swift in ios

Recent Comments

  • zulfi on iOS UIPickerView Example using Swift
  • Muhsin on Cordova InAppBrowser Plugin Example using ionic framework
  • SourceFreeze on Cordova InAppBrowser Plugin Example using ionic framework
  • Muhsin on Cordova InAppBrowser Plugin Example using ionic framework
  • SourceFreeze on Cordova InAppBrowser Plugin Example using ionic framework
  • Muhsin on Cordova InAppBrowser Plugin Example using ionic framework

Tags

cross-platform ionic iOS javascript mobile application development objective-c swift uiwebview Visual Studio plugin

Copyright © 2022 Source Freeze