Hi,
Create the ionic project using the below commands. Here we are creating the ionic blank project and name it is as “DeviceInformaion”
ionic start DeviceInformaion blank
cd DeviceInformaion
Then add the platform android and ios
ionic platform add android
ionic platform add ios
Then integrate the ng-Cordova library into your project.
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'])
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
Add get Device information button.
Create the ionic project using the below commands. Here we are creating the ionic blank project and name it is as “DeviceInformaion”
ionic start DeviceInformaion blank
cd DeviceInformaion
Then add the platform android and ios
ionic platform add android
ionic platform add ios
Then integrate the ng-Cordova library into your project.
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'])
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
Add get Device information button.
Then index.html file will look like-
<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.
And it will display on index.html page.
Thanks...
No comments:
Post a Comment