如何将“Chart.js”注入我的模块?

时间:2018-01-25 09:23:40

标签: angularjs charts module chart.js

这是我的Html。我已经给出了这样的路径:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">

     <script type="text/javascript" href="/node_modules/angular-chart.js/dist/angular-chart.min.js"></script>
    <script type="text/javascript" href="/node_modules/chart.js/dist/Chart.min.js"></script>


    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" href="app/components/root/root.css">
    <link rel="stylesheet" type="text/css" href="app/components/imgComponent/imgComponent.css">
    <link rel="stylesheet" type="text/css" href="app/components/typesComponent/typesComponent.css">
    <link rel="stylesheet" type="text/css" href="app/components/sourceComponent/sourceComponent.css">
    <link rel="stylesheet" type="text/css" href="app/components/severitiesComponent/severitiesComponent.css">
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />

</head>
<body ng-app="appModule">
    <app-root></app-root>
</body>
</html>

在我的剧本中,我写道:

'use strict';

const appModule = angular.module('appModule',["chart.js"]);

appModule.component('appSeveritiesComponent', {
    templateUrl: '/app/components/severitiesComponent/severitiesComponent.html',
    controller: severitiesComponentController,
    bindings: {
    }
});

severitiesComponentController.$inject = [];

function severitiesComponentController() {
}

当我在我的应用程序中使用它时会出错

未捕捉错误:[$ injector:modulerr]

如何解决此错误?

2 个答案:

答案 0 :(得分:0)

您缺少angular.js的参考

上面添加angular.js的引用
  <script type="text/javascript" href="/node_modules/angular-chart.js/dist/angular-chart.min.js"></script>
    <script type="text/javascript" href="/node_modules/chart.js/dist/Chart.min.js"></script>

答案 1 :(得分:0)

你的剧本顺序很重要。如果您查看angular-chart.js上的安装部分,您会看到以下顺序:

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

Chart.js之前 angular-chart.js

此外,您还需要在这两个脚本之前插入angular.js脚本。