Using Angular Dragula without RequireJS Using Angular Dragula without RequireJS angularjs angularjs

Using Angular Dragula without RequireJS


OK, after help from those who commented (thanks everyone!), I was able to get this to work. There are a couple things that you need to do. First, I was bundling this module with the rest of my modules and trying to call it. That will not work because it needs to initialize with a parameter (angular). Therefore, you need to do the following:

  1. Add a reference to angular-dragula.js (or the min version) to your index.html page below the declaration for angular but above where you create your app.
  2. When you declare the dependencies for your app, specify angularDragula(angular) (not in quotes).
  3. Use dragula as you normally would. If you need to access the service, the name would be angularDragula.

For example, here is my declaration of app:

var app = angular.module('app', [  'ngRoute',  angularDragula(angular)]);

And then to get a simple list to be drag and drop capable, this is my html:

<div dragula='"bag-one"' dragula-model="vm.items">    <div ng-repeat="item in vm.items">{{ item }}</div></div>

Note that I do not declare angularDragula anywhere, unlike the examples. In the example the author gives, he requires angular and creates the angular variable and then he requires angular-dragula and creates the angularDragula variable. This is not needed if you are not using RequireJS as long as you load the scripts in the right order.