Code stops working when I minimize it

Question

There is a working code:drag-and-drop

Code does not work when through the GULP uglify()

 'use strict';
 const gulp = require('gulp');
 const $ = require('gulp-load-plugins')();
 const uglifyes = require('uglify-es');
 const composer = require('gulp-uglify/composer');
 const uglify = composer(uglifyes, console);

 module.exports = function(options) {
   return function() {
     return gulp.src(options.from)
     .pipe($.if(!isDevelopment, uglify()))
     .pipe(gulp.dest(options.to))
   };
 };

Where is the mistake in the following code?

var app = angular.module('app', ['ui.sortable', 'Myanimate']);

angular.module('Myanimate', [])
    .factory('animate', function() {

    var time = 3000;
    var timeout = null;

    return {
        _hideAnimate: function(item) {      
            timeout = timeout || setTimeout(function() {
                this.removeBackground(item);

                timeout = null;
            }.bind(this), time);    
        },

        setBorder : function(item) {
            item.addClass('red-border');
            this.removeBorder(item);
            this._hideAnimate(item);
            return item;
        },
        setBackground: function(item) {
            item.addClass('red-border red-border-background');
            this._hideAnimate(item);
            return item;
        },
        removeBorder : function(item) {
            item.removeClass('red-border-background');
            return item;
        },
        removeBackground: function(item) {
            item.removeClass('red-border red-border-background');   
            return item;
        }
    }
});

app.controller('appController', function ($scope, animate) {

  $scope.list1 = ['A', 'B', 'C'];
  $scope.list2 = ['1', '2', '3'];
  $scope.list3 = ['X', 'Y', 'Z'];
  $scope.elemMoved = null;

  $scope.sortableOptions = {
    over : function(e,ui) {
    var $targetElem = $(e.target);

      if($targetElem.hasClass('second')) {
        animate.setBorder(ui.item);
      } else if($targetElem.hasClass('third')) {    
        animate.setBackground(ui.item);
      } else {
        animate.removeBackground(ui.item);  
      }
    },

    update: function(e, ui) {

    var moveItem =  $scope.elemMoved = ui.item.sortable.moved;
    var ngModel = $(ui.item.sortable.droptarget).attr('ng-model');

    if(typeof moveItem === 'undefined') {
        return;
    }

     if($(ui.item.sortable.droptarget).hasClass('third')) {   
      if($.inArray(moveItem, $scope.list1) === -1) {
          if(ui.item.sortable.droptarget || e.target != ui.item.sortable.droptarget[0]) {
                $scope.list1.push(moveItem);
          }
      } 
    }

    },
    stop: function(e, ui) {
        ui.item.removeClass('red-border red-border-background');      
    },
    connectWith: ".apps-container"
  };

});

Answer 1

You need to change the code and include an array with the stuff you want angular to inject into your controller

app.controller('appController', function ($scope, animate)

should be

app.controller('appController', ['$scope', 'animate', function ($scope, animate) {
    // ...
}]);

You could also use something like ng annotate which will do that automatically, so you could add

.pipe(ngAnnotate({
    // true helps add where @ngInject is not used. It infers.
    // Doesn't work with resolve, so we must be explicit there
    add: true
}))

to your gulp pipeline and simply use the annotation above the function

/* @ngInject */
app.controller('appController', function ($scope, animate)

Now angular will know what to inject even after the variables have been minified.