Angular 1.5.11
我创建了一个仪表板应用。举个例子，我拿了this demo。
当我将gridster（angular-gridster）作为模块依赖项注入时，我收到以下错误。
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
如何注入gridster？
我的应用结构：
d- app
- app.js
d- templates
- widget_settings.html
d- style
- style.css
- index.html
Lib版本：
"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">
<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.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;
}
});
答案 0 :(得分：0)
我通过在Webpack 3的帮助下升级应用程序以使用ES6模块解决了这个问题。gridster已成功注入。
您可以在我的git存储库https://github.com/sergibondarenko/angular-dashboard
中找到更多详细信息App文件夹结构：
angular-dashboard
├── LICENSE
├── package.json
├── README.md
├── src
│ ├── app
│ │ ├── app.js
│ │ ├── controllers
│ │ │ ├── customWidgetController.js
│ │ │ ├── dashboardController.js
│ │ │ └── widgetSettingsController.js
│ │ ├── filters
│ │ │ └── object2Array.js
│ │ └── templates
│ │ └── widget_settings.html
│ ├── index.html
│ └── style
│ ├── style-common.css
│ └── style.css
└── webpack.config.js
<强> app.js
import 'angular';
import 'angular-ui-router';
import 'angular-gridster';
import 'angular-ui-bootstrap';
import 'javascript-detect-element-resize';
import '../style/style.css';
import '../style/style-common.css';
import 'bootstrap/dist/css/bootstrap.css';
import 'angular-gridster/dist/angular-gridster.min.css';
import { DashboardCtrl } from './controllers/dashboardController';
import { CustomWidgetCtrl } from './controllers/customWidgetController';
import { WidgetSettingsCtrl } from './controllers/widgetSettingsController';
import { Object2Array } from './filters/object2Array.js';
const app = angular.module('dashboardApp', [
'ui.router',
'ui.bootstrap',
'gridster'
])
.controller('DashboardCtrl', DashboardCtrl)
.controller('CustomWidgetCtrl', CustomWidgetCtrl)
.controller('WidgetSettingsCtrl', WidgetSettingsCtrl)
.filter('object2Array', Object2Array);
app.config(function ($urlRouterProvider) {
$urlRouterProvider.otherwise('/');
});