where should I add module dependencies in mean.js (for ng-sortable)

Question

I am trying to add ng-sortable to my mean.js based app. https://github.com/a5hik/ng-sortable

Following the install instructions and adapting them to mean.js I included the js and css files (which are loading correctly), but where I fall down is adding module dependencies:

And Inject the sortable module as dependency.

angular.module('xyzApp', ['ui.sortable', '....']);

My angularjs controller looks like this:

var listers_mod = angular.module('listers');
listers_mod.controller('PagesController', ['$scope', '$http', '$stateParams', '$location',  'Authentication',
    function($scope, $http, $stateParams, $location, Authentication) { ... }
]);

My first attempt was to add the ui.sortable in the controller file above:

var listers_mod = angular.module('listers', ['ui.sortable']);

Obviously this did not work. As you can probably tell I am very new to mean.js and the MEAN stack in general so I am stumbling around blind on this one. I tried googling around and of course searching here, but I didn't find any answers that made any sense to me.

Any help welcome.

Answer 1

When I add a new Angular module to a mean.js based application, I add the module to the config.js file within the public directory. There is a list of module dependencies which you can add to as you add more modules to your project:

Link to source:
https://github.com/meanjs/mean/blob/f4b62ca8199227c6791d535bbf67bba5d2db91f0/public/config.js#L7

Example:

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

Try adding it there instead of using the var listers_mod = angular.module('listers'); line you have in your controller. You may not need to inject it into your controller at all -- looking at the documentation you could just try accessing it in the HTML code after you've added it to your application's module list.