Using Angular Dragula without RequireJS

问题:

I would love to implement Drag and Drop in my Angular project using the angular-dragula module (https://github.com/bevacqua/angular-dragula). However, it seems to be heavily dependent on RequireJS. I've not used Require for a while and only then for an example app or two. Is there an easy way to untangle Require from this module?

The author seems to think it is simple (https://github.com/bevacqua/angular-dragula/issues/23) and has shut down similar questions as well without a real explanation. I've looked at the code and don't see how to load the module without adding RequireJS to my project (which I don't want to do). Am I stuck with either not using this module or adding Require or is there a way to use this without Require?

回答1:

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.