Installation
cordova plugins add https://github.com/wildabeast/BarcodeScanner.git
Start by downloading the latest ngCordova release and copying the ng-cordova.min.js file into your project’s www/js directory.
Then include it in your index.html
<script src="js/ng-cordova.min.js"></script>
After setting index.html, go to app.js and add this ngCordova like below
angular.module('starter', ['ionic','ngCordova'])
It is now time, Create a controller and include the following method to initialize the barcode scanner. For this example, I did the following:
Sample code
Barcorde.html
<ion-view view-title="Barcode Scanner">
<ion-content>
<div class="card">
<div class="item">
<button class="button button-block button-balanced" ng-click="scanBarcode()">
<i class="icon ion-qr-scanner"></i>
Scan Now
</button>
</div>
</div>
<div class="card">
<div class="item item-divider">
Scan Results
</div>
<div class="item item-text-wrap">
{{vm.scanResults}}
</div>
</div>
</ion-content>
<ion-footer>
<div class="tabs-striped tabs-color-assertive">
<div class="tabs">
<a class="tab-item active" href="#">
<i class="icon ion-home"></i> Test
</a>
<a class="tab-item" href="#/app/viewpost">
<i class="icon ion-star"></i> Favorites
</a>
<a class="tab-item" href="#">
<i class="icon ion-gear-a"></i> Settings
</a>
</div>
</div>
</ion-footer>
</ion-view>
Controller.js
.controller("BarcodeScanner", function($scope, $cordovaBarcodeScanner, $ionicPlatform) {
$scope.vm = [];
$scope.scanBarcode = function() {
$ionicPlatform.ready(function() {
$cordovaBarcodeScanner
.scan()
.then(function(result) {
// Success! Barcode data is here
$scope.vm.scanResults = "Barcode\n" +
"Result: " + result.text + "\n" +
"Format: " + result.format + "\n" +
"Cancelled: " + result.cancelled;
}, function(error) {
// An error occurred
$scope.vm.scanResults = 'Error: ' + error;
});
});
}
})
Change Snippet Background Color
No comments:
Post a Comment