how to call function in ionic framework + angularjs?

Question

I am using ionic framework to make android app .I am having cordova 5.1 version .first I create a project using command line ionic start myApp tabs .The I add android platform .Now I need to Communicate java code to javascript code .Using google I found I need to make custom plugin .But I did not found any solution on google how we will create custom plugin .I found ng-cordova which give own plugin we can't make customize plugin .

I just need A button on UI .On click of that button I need to call java function having print some log on console .Then return success or error callback on JavaScript file

Could you please tell me how we will create a simple plugin in ionic ?

Answer 1

Yes, custom cordova plugins are painful because the official docs are not so great.

First of all we need to understand a custom plugin folder structure.

1. wrapper - Name you want to give to your plugin
2. src - folder where your source code goes
3. android - since you are looking for android, an android folder is required
4. www - it contains the javascript functions that calls the java code.(using cordova)
5. plugin.xml - the very heart of the plugin, this files configures the plugin (adding permissions, copying files to platforms etc)

In your android folder create a CustomPlugin.java file.

package com.example.myplugin;

import org.apache.cordova.CallbackContext;
import org.apache.cordova.CordovaPlugin;
import org.json.JSONObject;
import org.json.JSONArray;
import org.json.JSONException;

public class CustomPlugin extends CordovaPlugin {

   @Override
   public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
    if ("beep".equals(action)) {
        // print your log here... 
        callbackContext.success();
        return true;
    }
    return false;  // Returning false results in a "MethodNotFound" error.
    }
 }

Now we need to build a interface between javascript and java code.

Cordova provides a simple function for this.

exec(<successFunction>, <failFunction>, <service>, <action>, [<args>]); 

---

create a MycustomPlugin.js file in www folder.

cordova.exec( successCallback,  ErrorCallBack, "service","action", []);

It is worth to know that,

service -> Name of the java class

action -> action we want to call ( in this case "beep" see above code)

Your MycustomPlugin.js file should look like this:

var MyPlugin = {
  PrintLog: function (successCallback, errorCallback, action) {
    cordova.exec(
            successCallback, // success callback function
            errorCallback, // error callback function
            'CustomPlugin', // mapped to our native Java class called
            action, // with this action name , in this case 'beep'
            []  )// arguments, if needed
  }
}
module.exports = MyPlugin;

Lastly you need to configure your plugin.xml file

 <?xml version="1.0" encoding="utf-8"?>
    <plugin xmlns="http://www.phonegap.com/ns/plugins/1.0"
            id="com.example.plugin"
            version="0.0.1">        
      <name>Cordova Plugin</name> 

      <engines>
        <engine name="cordova" version=">=3.4.0"/>
      </engines> 

      <js-module src="www/MycustomPlugin.js" name="CustomPlugin">
        <clobbers target="window.MycustomPlugin" />
      </js-module>    
    <platform name="android">

        <config-file target="res/xml/config.xml" parent="/*">
           <feature name="CustomPlugin">
              <param name="android-package" value="com.example.myplugin.CustomPlugin"/>
           </feature>
        </config-file>

       <source-file src="src/android/CustomPlugin.java" target-dir="src/com/example/myplugin"/>     

   </platform>
</plugin>

now add this plugin to your project. myApp (the one you created) using cordova plugin add /path/to/your/custom/plugin

And in $ionicPlatform.ready function call your java code from javascript

   window.MycustomPlugin.PrintLog(function(res){
     //success
   }, function(err){
        //error
   }, "beep")