Search code examples
angularjscordovaionic-frameworkuuidhybrid-mobile-app

How to get device id in ionic by using cordova plugin?

I am working on a hybrid ionic app.

I want to get the device id of a android device. I installed cordova plugin, included cordova.min.js file.

I tried by this code, still not displaying anything.

Is there any other way to get device id?

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() {

var device = $cordovaDevice.getDevice();
$scope.manufacturer = device.manufacturer;
$scope.model = device.model;
$scope.platform = device.platform;
$scope.uuid = device.uuid;
});
});
})
<!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-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>

</html>

Solution

  • Provided that you have installed the device plugin, just do window.device.uuid (after you've received the device ready event).

    EDIT

    Looking again at your code, you don't need the platform ready in the controller and I am not sure if it's going to fire like that. Also why do you call apply in there? How about this:

    .controller('DeviceController', function () {
    alert(window.device.uuid);
});