angular.module('myapp'，['chart.js']) 未捕获的错误： [$injector：modulerr]

Question

我是使用 Angular 的新手.JS。想使用图表制作图表吗.js

我已经安装了图表.js

npm 安装角度图.js --保存

.state('index.dashboard', {
url: "/dashboard",
templateUrl: "modules/dashboard/dashboard.html",
controller: 'dashboardController',
data: { pageTitle: 'Dashboard' },
resolve: {
loadPlugin: function($ocLazyLoad) {
return $ocLazyLoad.load([{
serie: true,
files: ['css/plugins/c3/c3.min.css', 'js/plugins/chartJs/Chart.min.js', 'js/plugins/d3/d3.min.js', 'js/plugins/c3/c3.min.js']
}, {
serie: true,
name: 'gridshore.c3js.chart',
files: ['js/plugins/c3/c3-angular.min.js']
}, {
serie: true,
name: 'angular-dygraphs',
files: ['bower_components/angular-dygraphs/src/angular-dygraphs.js']
}, {
serie: true,
files: ['css/style_2.css', 'js/plugins/highcharts/highstock.src.js']
}, {
serie: true,
name: 'highcharts-ng',
files: ['js/plugins/highcharts/highcharts-ng.js']
},{
serie: true,
name:"chart.js",
files:['js/plugins/chartJs/angular-chart.js']
},
//               {
// name: 'chart.js',
//                   files: ['bower_components/Chart.Zoom.js/src/chart.zoom.js']
// //               },
//               {
//                   name: 'angles',
//                   files: ['js/plugins/chartJs/angles.js']
//               },
{
files: ['css/plugins/jsTree/style.min.css', 'js/plugins/jsTree/jstree.min.js', 'css/plugins/iCheck/custom.css', 'js/plugins/iCheck/icheck.min.js']
}, {
name: 'ngJsTree',
files: ['js/plugins/jsTree/ngJsTree.min.js']
}, {
name: 'cgNotify',
files: ['css/plugins/angular-notify/angular-notify.min.css', 'js/plugins/angular-notify/angular-notify.min.js']
}
]);
},
authenticated: authenticated
}
})

现在我正在将其添加到我的控制器中

angular.module('inspinia',['chart.js'])
.controller('dashboardController', ['$rootScope', '$scope', '$http',  function($rootScope, $scope, $http) {
var a = 0;
}]);  

我试过

angular.module('inspinia')
.controller('dashboardController', ['$rootScope', '$scope', '$http','chart.js',  function($rootScope, $scope, $http) {
var a = 0;
}]);

但得到相同的错误

未捕获的错误： [$injector：模块]

请帮助我正确的方法 感谢

Answer 1

您不必将 chart.js 注入控制器，

将其更改为，

angular.module('inspinia')
.controller('dashboardController', ['$rootScope', '$scope', '$http',  function($rootScope, $scope, $http) {
var a = 0;
}]);

演示

Answer 2

1. 按照 Tushar 的建议，在angular.js之后的index.html中包含angular-chart.js脚本标签。

2. 在初始化inspinia模块时，将chart.js添加为模块依赖项，就像在第一个代码段中所做的那样。

3. 使用模块提供的指令，无需在控制器中注入任何内容。

Answer 3

请务必将其导入到应用程序中.js例如：

"use strict";
angular.module("yourmodulename",
[
"ui.router",
"chart.js" //<-- import it
]);

并在您的控制器中使用它... 或者如果你使用 OcLazy (用于延迟加载 ) 像这样的东西：

.state("profile.index", {
url: "/profile",
templateUrl: "/app/view/template/profilo/profile.html",
controller: "ProfileController",
controllerAs: "profileCtrl",
resolve: {
loadPlugin: function ($ocLazyLoad) {
return $ocLazyLoad.load([
{
name: "chart.js",
serie: true,
files: ["/app/view/assets/lib/bower/Chart.js/Chart.min.js", "/app/view/assets/lib/bower/angular-chart.js/dist/angular-chart.js", "/app/view/assets/lib/bower/angular-chart.js/dist/angular-chart.css"]
}
]);
}
}
})

Answer 4

我遇到了同样的问题，但页面不同，所以我需要添加每个SIGLE页面的代码片段，错误就消失了。但是，我不明白我需要添加乳清的原因。

<script src="node_modules/Chart.min.js"></script>
<script src="node_modules/angular-chart.min.js"></script>

Answer 5

Put

<script src="lib/chart.js/dist/Chart.min.js"></script>

以前

<script src="lib/chart.js/dist/angular-chart.js"></script>

解决了我的问题

我已经删除了

("myapp"，["chart.js"])