Ionic Guru

Some time in angular we face a error with name Circular Dependency, actually angular/ionic throw this error when we inject factory-1/service-1 in factory-2/service-2 and in factory-2/service-2 inject factory-1/service-1 like :




We can resolve this error using $injector , like :

Add the following code in your config.xml, problem will solved : 

The bug can be easily illustrated using the following example code :

<div ng-init="letters='1'">
letters = {{'' + letters}}
<input type="text" ng-model="letters" ng-pattern="/^[a-zA-Z]*$/" />
</div>

for resolve the error just user ng-model-options="{ allowInvalid: true }"  like :

<input type="text" ng-model="letters" ng-pattern="/^[a-zA-Z]*$/" ng-model-options="{allowInvalid: true}" />

I thing you've installed new version of ionic(may be ionic-2)

Full Error :

ionic $ module.js:338
    throw err;
          ^
Error: Cannot find module 'bower'
    at Function.Module._resolveFilename (module.js:336:15)
    at Function.Module._load (module.js:278:25)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object. (/Users/jaswantdhayal/Desktop/Projects/Purpose it all/purposit/gulpfile.js:3:13)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)

Solution : => Go to the project directory

$rm -rf node_modules
$npm install

When we want to upload a image in on server in cordova/ionic some time we need to convert the image in base64 formate . I've write a function which will convert your image in base64.

function convertImgToBase64URL(url, callback, outputFormat) {
 var img = new Image();
 img.crossOrigin = 'Anonymous';
 img.onload = function() {
  var canvas = document.createElement('CANVAS'),
      ctx = canvas.getContext('2d'),
      dataURL;
  canvas.height = this.height;
  canvas.width = this.width;
  ctx.drawImage(this, 0, 0);
  dataURL = canvas.toDataURL(outputFormat);
  callback(dataURL);
  canvas = null;
 };
 img.src = url;
 return url;
}

How to use :

convertImgToBase64URL(img, function(base64Img) {
 console.log(base64Img);// this is your base64 converted image     
});

Post this image on server(IONIC)

$http.post(server_url,[base64Img])

Handel this image in PHP :

   
$params = json_decode(file_get_contents('php://input'), true); get the post image

$img = imageUploadByBase64($params[0]);// this is the saved image path with image name

function imageUploadByBase64($img) {
 $randomImgName = date('Y-m-d_H-i-s').'_'.rand(0, 6000).'.png';
 $image = base64_to_jpeg($img, 'uploads/' . $randomImgName);// you need to create a directory withh name 'uploads'
 return $image;
}

function base64_to_jpeg($base64_string, $output_file) {
 $ifp = fopen($output_file, "wb");
 $data = explode(',', $base64_string);
 fwrite($ifp, base64_decode($data[1]));
 fclose($ifp);
 return $output_file;
}

I've write a php file for send push notification to Android devices :

I've write a php file for send push notification to IOS devices

PHP Database Connection :


How to use :



Set Current timezone in PHP :


Get Current time in PHP :

When you creating APIs then the array contains Junk characters and this array will not convert into JSON so if you want to convert this into JSON then you've to remove the Junk characters first. You can use the following function :


How to use :

 $arr = clear_junk_data($arr);

If you are facing this issue when you are using IONIC(PhoneGap) and run the app on iPhone/iPad(IOS)

the add the following lines at the end of your info.plist file (It must be before the last  </dict> tag):

Manage Splash Screen in IONIC(PhoneGap) or Native Project



For Manage Orientation

If you want to count that how many time a string is appearing in a big string the you can count it by Javascript. I've made a prototype function for this :

You can Capitalise a string by core Javascript. I've write a function for this :

I've write a function for this :





You can use it like:

I've write a function for this :

I was notice that when you want to replace a string-1 to the another string-2 and the string-1 present on more the one place the the js replace function is not work properly, so here I've write a js prototype function for this :

I've a write some functions for this :

I've made a function for this, it'll return the array of hour and minute :

Use this code :

Write the following code :

<iframe width="100%" height="auto" ng-if="video_url" onerror="this.style.display = 'none'" src="{{video_url | VideoUrl}}"></iframe> 




.filter('VideoUrl', ['$sce', function($sce) {

    return function(val) {

        return $sce.trustAsResourceUrl(val);

    };

}])

For InAppBrowser You've to install the plugin 'cordova-plugin-inappbrowser' :

cordova plugin add cordova-plugin-inappbrowser

For Dialogs You've to install the plugin 'cordova-plugin-dialogs' :

cordova plugin add cordova-plugin-dialogs

Then write this code for open inappbrowser :

var ref = window.open(encodeURI('http://www.google.com', '_blank', 'location=yes');

ref.addEventListener('loadstart', inAppBrowserbLoadStart);
ref.addEventListener('loadstop', inAppBrowserbLoadStop);
ref.addEventListener('loaderror', inAppBrowserbLoadError);
ref.addEventListener('exit', inAppBrowserbClose);


function inAppBrowserbLoadStart(event) {
   navigator.notification.activityStart("Please Wait", "It'll only take a moment...");
}

function inAppBrowserbLoadStop(event) {
   navigator.notification.activityStop();
}

function inAppBrowserbLoadError(event) {
   navigator.notification.activityStop();
}

function inAppBrowserbClose(event) {
   navigator.notification.activityStop();
   ref.removeEventListener('loadstart', inAppBrowserbLoadStart);
   ref.removeEventListener('loadstop', inAppBrowserbLoadStop);
   ref.removeEventListener('loaderror', inAppBrowserbLoadError);
   ref.removeEventListener('exit', inAppBrowserbClose);
}

Fist you've to install the plugin https://github.com/dpa99c/cordova-diagnostic-plugin then simply execute this code after platform ready :

Check GPS state (on/off) in ionic/cordova

cordova.plugins.diagnostic.isLocationEnabled(function(enabled){
    console.log("Location is " + (enabled ? "enabled" : "disabled"));
}, function(error){
    console.error("The following error occurred: "+error);
});

Check WiFi is enable or not?

cordova.plugins.diagnostic.isWifiEnabled(function(enabled){
    console.log("WiFi is " + (enabled ? "enabled" : "disabled"));
}, function(error){
    console.error("The following error occurred: "+error);
});

Check device has a camera AND the application is authorized to use it. or not?

cordova.plugins.diagnostic.isCameraEnabled(function(exists){
    console.log("Device " + (exists ? "does" : "does not") + " have a camera");
}, function(error){
    console.error("The following error occurred: "+error);
});

Enables/disables WiFi on the device

cordova.plugins.diagnostic.setWifiState(function(){
    console.log("Wifi was enabled");
}, function(error){
    console.error("The following error occurred: "+error);
},
true);

Checks the device has Bluetooth capabilities and if it has then Bluetooth is on or off?

cordova.plugins.diagnostic.isBluetoothEnabled(function(enabled){
    console.log("Bluetooth is " + (enabled ? "enabled" : "disabled"));
}, function(error){
    console.error("The following error occurred: "+error);
});

Enables/disables Bluetooth on the device

cordova.plugins.diagnostic.setBluetoothState(function(){
    console.log("Bluetooth was enabled");
}, function(error){
    console.error("The following error occurred: "+error);
},
true);

When You want to publish your app on play store, First thing you have to do is 'create a keystore file'
(Make sure, when you've published app using a keystore then for publish this particular app next version, you must need the same keystore file, without will not able to publish the new version of this app)

1.) Create a keystore file by cmd :

keytool -genkey -v -keystore keystore_name.keystore -alias your_app_alias -keyalg RSA -keysize 2048 -validity 10000

After this you've to answer some question and then you keysore file will created in root folder of your   project.

2.) To sign the unsigned APK, run the jarsigner tool which is also included in the JDK:

jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore keystore_name.keystore android-release-unsigned.apk alias_name

3.) Finally, you need to run the zip align tool to optimise the APK file :

First you to go into the zipalign folder, eg.:
    For Windows :
             cd /path/to/Android/sdk/build-tools/VERSION
             zipalign -v 4 android-release-unsigned.apk android_store_apk.apk

    For OS X :
             cd Users/UserName/Library/Android/sdk/build-tools/VERSION
             ./zipalign -v 4 android-release-unsigned.apk android_store_apk.apk


Now You can Publish android_store_apk.apk on the play store.