Where do I put the Angular code in this Mean.js app to make this list sortable?

Question

Following the advice of @Pavlo to use https://github.com/angular-ui/ui-sortable,

I have this repeating list that I want to make sortable.

<div ui-sortable ng-model="regions" class="list-group region-list">
    <a data-ng-repeat="region in regions" data-ng-href="#!/regions/{{region._id}}" class="list-group-item">
    <h4 class="list-group-item-heading" data-ng-bind="region.name"></h4>
    </a>
</div>

Following the advice of @nrodic and added 'ui.sortable' to config.js.

var applicationModuleVendorDependencies = ['ngResource', 'ngCookies',  'ngAnimate', 'ngTouch', 'ngSanitize',  'ui.router', 'ui.bootstrap', 'ui.utils', 'ui.sortable'];

However, when I add that I get the following message:

"ui.sortable: jQuery should be included before AngularJS!"

Any further help is appreciated.

Thank you.

Ideally, you'll need 'sortable' directive, e.g.: https://github.com/angular-ui/ui-sortable/blob/master/src/sortable.js — Pavlo, Aug 30 '14 at 20:24
@Pavlo, Thanks! That looks like exactly what I need! I added "angular-ui-sortable": "~0.12.10" to bower.json. I ran bower install angular-ui-sortable and I now see it in the public lib folder. I added the path to the sortable.js file in the config\env\all.js file. But I'm stuck on "Add the sortable module as a dependency to your application module." Where do I put that line? Thanks again! — user390480, Aug 30 '14 at 21:19

score 1 · Answer 1 · answered Aug 31 '14 at 01:25

The answer depends on your application's modules. To register dependency in main module you can edit public/config.js and add 'ui.sortable' to existing list:

var applicationModuleVendorDependencies = ['ngResource', 'ngAnimate',
    'ui.router', 'ui.bootstrap', 'ui.utils', 'ui.sortable'];

If you are registering your own module and want to enable ui.sortable there, then look for file public/modules/<my-module>/*module.js and add dependency there:

ApplicationConfiguration.registerModule('<my-module>', ['ui.sortable']);

Hope this helps.

Yes, this helps. Thank you! I am getting closer. Now I am getting "jQuery should be included before AngularJS". If I add the jquery path to the all.js file, above the sortable.js file, I get a jQuery error, "Uncaught ReferenceError: define is not defined". Thanks again! — user390480, Aug 31 '14 at 02:04

score 1 · Answer 2 · answered Nov 20 '14 at 05:32

I had the exact same problem. Try these steps:

bower install jquery --save
add 'public/lib/jquery/dist/jquery.min.js', 'public/lib/jquery-ui/jquery-ui.min.js, in front of angular.js in config\env\all.js
add 'ui.sortable' in applicationModuleVendorDependencies located in public/config.js

Following these steps should fix the problem.

Where do I put the Angular code in this Mean.js app to make this list sortable?

2 Answers2