In this tutorial, we are going to use the hybrid mobile development framework Ionic with ng-Cordova and a Cordova plugins to build a flashlight mobile app for Android & Ios both. So just follow my step to make it.
To create this app, you need to install ionic in your machine. If you haven’t installed it then just visit this link “http://datainflow.com/how-to-install-ionic/“. Now we can start our project.
Step 1:-
I have already told that we need a Cordova plugin to create this app. So, first of all, we have to install it by using this command.
cordova plugin add https://github.com/EddyVerbruggen/Flashlight-PhoneGap-Plugin.git
Step 2:-
We have to create a template view in HTML where we can so our app front page. I have already created it, & if you want to use this template then just copy and past it. Here is my code.
view.html
<ion-view view-title="Flash Light"> <ion-content> <ion-list> <ion-toggle ng-model="settings.enableFlashLight" ng-change="toggleChange()"> {{lightstate}} Flash Light </ion-toggle> <div> <img style="height: 100%;width:100%" src="img/choose your image path"> </div> </ion-list> </ion-content> </ion-view>
Here I use ionic toggle for the switch on & off to the flash light. And also add an image into this page. You just put the right path for this image.
Step 3:-
Now we need to make controller relative with this view.html. So just create a controller in app.js or you can create a separated js for this controller. I have already created a controller & you can use it.
LightCtrl.js
.controller('LightCtrl', function($scope,$cordovaFlashlight) { $scope.settings = {enableFlashLight: false}; $scope.lightstate = "Enable"; $scope.toggleChange = function(){ if($scope.settings.enableFlashLight == true){ $cordovaFlashlight.switchOn() .then( function (success) {$scope.lightstate = "Disable";}); } else{ $cordovaFlashlight.switchOff() .then( function (success) {$scope.lightstate = "Enable";}); } } });
Now your project is ready and you can build the app. If every thing is right then you will get the output. If any error occurs then please inform me by just putting a comment in the below.