Gridster module error #492

sergibondarenko · 2017-09-08T10:49:48Z

Angular 1.5.11

I create a dashboard app. When I inject gridster as module dependency I receive the following error.

Failed to instantiate module dashboardApp due to:
Error: [$injector:modulerr] http://errors.angularjs.org/1.5.11/$injector/modulerr?p0=...)
    at file:///Users/sergibondarenko/dev/angular-dashboard/node_modules/angular/angular.min.js:6:426

How to inject gridster?

My app structure:

d- app
 - app.js
 d- templates
  - widget_settings.html
d- style
 - style.css
- index.html

Lib versions:

"angular": "^1.5.11",
"angular-gridster": "^0.13.14",
"angular-ui-bootstrap": "^0.12.1",
"@uirouter/angularjs": "^1.0.3",
"bootstrap": "^3.3.7",
"javascript-detect-element-resize": "^0.5.3"

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Angular Dashboard App</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
  <link rel="stylesheet" href="node_modules/angular-gridster/dist/angular-gridster.min.css" />
  <link rel="stylesheet" href="style/style.css" />
  <link rel="stylesheet" href="style/style-common.css" />
</head>

 <script src="node_modules/angular/angular.min.js"></script>
 <script src="node_modules/@uirouter/angularjs/release/angular-ui-router.min.js"></script>
 <script src="node_modules/angular-ui-bootstrap/ui-bootstrap-tpls.min.js"></script>
 <script src="node_modules/javascript-detect-element-resize/detect-element-resize.js"><script>
 <script src="node_modules/angular-gridster/dist/angular-gridster.min.js"></script>

  <body>
    <div ng-app="dashboardApp" ng-controller="DashboardCtrl">
      <div class="container" ui-view>
        <div class="page-header">
        	<a class="pull-right btn btn-primary" ng-click="addWidget()"><i class="glyphicon glyphicon-plus"></i> Add Widget</a>
        	<a class="pull-right btn btn-warning" ng-click="clear()"><i class="glyphicon glyphicon-trash"></i> Clear</a>
        	<h1 style="display: inline-block; width: 200px;">Dashboard</h1>
        	<select class="form-control" style="width: 150px; margin-bottom: 20px; display:inline-block;" ng-change="changeDashboard()" ng-model="selectedDashboardId" ng-options="d.id as d.name for d in dashboards | object2Array | orderBy:'id'">
        	</select>
        </div>

        <div gridster="gridsterOptions" class="gridster gridster-desktop gridster-loaded"">
        	<ul>
        		<li gridster-item="widget" ng-repeat="widget in dashboard.widgets">
        			<div class="box" ng-controller="CustomWidgetCtrl">
        				<div class="box-header">
        					<h3>{{ widget.name }}</h3>
        					<div class="box-header-btns pull-right">
        						<a title="settings" ng-click="openSettings(widget)"><i class="glyphicon glyphicon-cog"></i></a>
        						<a title="Remove widget" ng-click="remove(widget)"><i class="glyphicon glyphicon-trash"></i></a>
        					</div>
        				</div>
        				<div class="box-content">
        				</div>
        			</div>
        		</li>
        	</ul>
        </div>
      </div>

    </div>

    <script src="app/app.js"></script>

  </body>
</html>

app/app.js

var app = angular.module('dashboardApp', [
    'ui.router',
    'ui.bootstrap',
    'gridster'
]);

app.config(function ($urlRouterProvider) {
  $urlRouterProvider.otherwise('/');
});

app.controller('DashboardCtrl', ['$scope', '$timeout',
	function($scope, $timeout) {

		$scope.gridsterOptions = {
			margins: [20, 20],
			columns: 4,
			draggable: {
				handle: 'h3'
			}
		};

		$scope.dashboards = {
			'1': {
				id: '1',
				name: 'Home',
				widgets: [{
					col: 0,
					row: 0,
					sizeY: 1,
					sizeX: 1,
					name: "Widget 1"
				}, {
					col: 2,
					row: 1,
					sizeY: 1,
					sizeX: 1,
					name: "Widget 2"
				}]
			},
			'2': {
				id: '2',
				name: 'Other',
				widgets: [{
					col: 1,
					row: 1,
					sizeY: 1,
					sizeX: 2,
					name: "Other Widget 1"
				}, {
					col: 1,
					row: 3,
					sizeY: 1,
					sizeX: 1,
					name: "Other Widget 2"
				}]
			}
		};

		$scope.clear = function() {
			$scope.dashboard.widgets = [];
		};

		$scope.addWidget = function() {
			$scope.dashboard.widgets.push({
				name: "New Widget",
				sizeX: 1,
				sizeY: 1
			});
		};

		$scope.$watch('selectedDashboardId', function(newVal, oldVal) {
			if (newVal !== oldVal) {
				$scope.dashboard = $scope.dashboards[newVal];
			} else {
				$scope.dashboard = $scope.dashboards[1];
			}
		});

		// init dashboard
		$scope.selectedDashboardId = '1';

	}
]);

app.controller('CustomWidgetCtrl', ['$scope', '$modal',
	function($scope, $modal) {

		$scope.remove = function(widget) {
			$scope.dashboard.widgets.splice($scope.dashboard.widgets.indexOf(widget), 1);
		};

		$scope.openSettings = function(widget) {
			$modal.open({
				scope: $scope,
				templateUrl: 'templates/widget_settings.html',
				controller: 'WidgetSettingsCtrl',
				resolve: {
					widget: function() {
						return widget;
					}
				}
			});
		};

	}
]);

app.controller('WidgetSettingsCtrl', ['$scope', '$timeout', '$rootScope', '$modalInstance', 'widget',
	function($scope, $timeout, $rootScope, $modalInstance, widget) {
		$scope.widget = widget;

		$scope.form = {
			name: widget.name,
			sizeX: widget.sizeX,
			sizeY: widget.sizeY,
			col: widget.col,
			row: widget.row
		};

		$scope.sizeOptions = [{
			id: '1',
			name: '1'
		}, {
			id: '2',
			name: '2'
		}, {
			id: '3',
			name: '3'
		}, {
			id: '4',
			name: '4'
		}];

		$scope.dismiss = function() {
			$modalInstance.dismiss();
		};

		$scope.remove = function() {
			$scope.dashboard.widgets.splice($scope.dashboard.widgets.indexOf(widget), 1);
			$modalInstance.close();
		};

		$scope.submit = function() {
			angular.extend(widget, $scope.form);

			$modalInstance.close(widget);
		};

	}
]);

// helper code
app.filter('object2Array', function() {
	return function(input) {
		var out = [];
		for (i in input) {
			out.push(input[i]);
		}
		return out;
	}
});

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Gridster module error #492

Gridster module error #492

sergibondarenko commented Sep 8, 2017

Gridster module error #492

Gridster module error #492

Comments

sergibondarenko commented Sep 8, 2017