2

I follwed steps for drag-drop in angular JS on How to Create simple drag and Drop in angularjs but geting below error.

Please let me know what I am missing.

*

Error: [$injector:modulerr] http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=angular-starter&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.4.8%2F%24injector%2Fmodulerr%3Fp0%3Dui.router%26p1

*

My index.html is below:

*<html ng-app="angular-starter">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="angular-drag-and-drop-lists.js"></script>
<script src="app.js"></script>
<body>
<div class="row">
    <div ng-repeat="(listName, list) in models.lists" class="col-md-6">
        <ul dnd-list="list">
            <li ng-repeat="item in list" 
                dnd-draggable="item" 
                dnd-moved="list.splice($index, 1)" 
                dnd-effect-allowed="move" 
                dnd-selected="models.selected = item" 
                ng-class="{'selected': models.selected === item}" 
                draggable="true">{{item.label}}</li>
        </ul>
    </div>
</div>
</body>
</html>
*

and app.js is

*

var app = angular.module('angular-starter', [
    'ui.router',
    'dndLists' ]); app.controller('MainCtrl', function($scope){
    $scope.models = {
        selected: null,
        lists: {"A": [], "B": []}
    };
    // Generate initial model
    for (var i = 1; i <= 3; ++i) {
        $scope.models.lists.A.push({label: "Item A" + i});
        $scope.models.lists.B.push({label: "Item B" + i});
    }
    // Model to JSON for demo purpose
    $scope.$watch('models', function(model) {
        $scope.modelAsJson = angular.toJson(model, true);
    }, true); });

*

Community
  • 1
  • 1
Sunil Karwasra
  • 71
  • 6

2 Answers2

0

I think you didn't add a link to ui-router in your index.html, that might be where the error comes from.

Try to add :

<script src="your/path/to/angular-ui-router/release/angular-ui-router.min.js"></script>

just after this

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="angular-drag-and-drop-lists.js"></script>
<script src="app.js"></script>

I hope it'll help you.

derOtterDieb
  • 545
  • 4
  • 12
  • 35
  • Well you can try the same kind of thing with dndLists and angular-starter whichi I didn't see in your index.html either. I still think it's a module problem according to the error, but any help from someone else would be welcome here as I'm not really confident with modules yet myself :) – derOtterDieb Jul 27 '16 at 10:19
0

I found solution to this, it was not working while I was trying to run it from folder. I put it in MAMP and it worked. Maybe something to do with angular module that is involved in this.

Sunil Karwasra
  • 71
  • 6