angular.module（'myapp'，['chart.js']）未捕獲的錯誤：[$ injector：modulerr]

Question

我是使用Angular.JS的新手。 想要使用chart.js制作圖表

我已經安裝了chart.js

npm install angular-chart.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：modulerr]

請以正確的方式幫助我，謝謝

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. 添加chart.js作為一個模塊依賴你的初始化時inspinia模塊，就像你在你的第一個代碼片斷一樣。

3. 使用模塊提供的指令，無需在控制器中注入任何東西。

Answer 3

確保將其導入app.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

我遇到了相同的問題，但頁面不同，因此我需要添加每個輕松頁面代碼段，錯誤消失了。 但是，我不明白我需要添加乳清的原因。

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

Answer 5

推桿

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

之前

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

解決了我的問題

我已經刪除了

（'myapp'，['chart.js']）