Search code examples
angularjscordovadependency-injectionionic-frameworkcordova-plugins

How to inject on Angular an ionic plugin that is not from ngCordova


in my ionic app I want to use cordova-plugin-video-editor plugin but I don't know how to inject it on my controller.

I added the plugin on the terminal like this:

ionic plugin add https://github.com/jbavari/cordova-plugin-video-editor.git 

And it is injected with the controller like this (last one):

.controller('VideoCtrl', ['$scope', '$ionicPlatform', '$ionicModal', '$cordovaDialogs', '$cordovaCapture', '$cordovaFileTransfer', '$sce', 'VideoService', '$q', '$http', '$ionicScrollDelegate', '$timeout', '$location', 'VideoEditor', function ($scope, $ionicPlatform, $ionicModal, $cordovaDialogs, $cordovaCapture, $cordovaFileTransfer, $sce, VideoService, $q, $http, $ionicScrollDelegate, $timeout, $location, VideoEditor) {

I get this error:

Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:modulerr] Failed to instantiate module starter.controllers due to:
Error: [$injector:modulerr] Failed to instantiate module VideoEditor due to:
Error: [$injector:nomod] Module 'VideoEditor' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

I am confused, I am using more plugins but all are official and I didn't have problems as I only had to do:

angular.module('starter.controllers', ['ngCordova'])

And in the html

<script src="lib/ngCordova/dist/ng-cordova.js"></script>

Inside plugin folder there is a js file that has:

var exec = require('cordova/exec'),
    pluginName = 'VideoEditor';

function VideoEditor() {
}

VideoEditor.prototype.transcodeVideo = function(success, error, options) {
    exec(success, error, pluginName, 'transcodeVideo', [options]);
};

VideoEditor.prototype.createThumbnail = function(success, error, options) {
    exec(success, error, pluginName, 'createThumbnail', [options]);
};

module.exports = new VideoEditor();

When I install the plugin should not this js content had gone somewhere in my www folder so then I can imported from html?


Solution

  • Remove the VideoEditor module in your controller configuration. because this VideoEditor have not any relation with angular.

    Also you need refer the github document. They use it just like a jquery plugins. not a angular plugins. Does make sense? let me know, if not.

    How do I implement it in Angular controller?

    You can use it just like a javascript library.