在自定义mean.io包中使用angular-chart.js作为依赖项

Using angular-chart.js as a dependency in a custom mean.io package

本文关键字：js 依赖 angular-chart 自定义 mean io 包中使      更新时间：2023-09-26

首先，我按照建议安装了angular-chart.js。

http://jtblin.github.io/angular-chart.js/

从我的自定义平均包的目录中，我键入：

$ bower install angular-chart.js --save

这在我的自定义模块的public/assets文件夹中创建了几个文件夹。

/packages/custom/report/public/assets/lib/angular-chart.js/...
and
/packages/custom/report/public/assets/lib/Chart.js/...

我遵循了learn.mean.io中关于如何将角度依赖项添加到自定义均值包的说明。

http://learn.mean.io/#mean-堆叠封装角度模块和依赖

在我模块的app.js:中

// Aggregate CSS assets
Report.aggregateAsset('css', 'report.css');
Report.aggregateAsset('css', '../lib/angular-chart.js/dist/angular-chart.css');
// Aggregate JS assets
Report.aggregateAsset('js','../lib/Chart.js/Chart.js');
Report.aggregateAsset('js','../lib/angular-chart.js/dist/angular-chart.js');
// Add dependency to modules in the custom package
Report.angularDependencies(['chart.js']);

理论上，这等于这样定义我的模块，包括依赖项：

angular.module('mean.report', ['chart.js']);

我也试过了。

当我运行应用程序时，我可以看到JS和CSS文件被下载，CSS样式可以使用，但我看不到任何图表。

在mean.io文件中尝试了许多不同的配置方式我已经能够看到饼图，但每次我试图用真实数据输入它时，我都会遇到一些错误，比如图表没有定义等。我在应用程序的视图中更改了一行，图表就消失了，这太疯狂了。我无法让它以一致的方式工作。

因此，要么chart.js没有被注入到我的模块中，要么angular-chart.js和chart.js之间的依赖关系没有得到解决。

我和一个来自mean.io支持团队的人讨论了很长时间，他说一切都很好，我可能应该检查angular-chart.js

听起来Chart.js没有被正确包含或无序。您是否尝试过将脚本直接包含到视图中，而不是通过aggregateAsset方法？

<script src="https://rawgit.com/nnnick/Chart.js/master/Chart.min.js"></script>
<script src="https://rawgit.com/jtblin/angular-chart.js/master/dist/angular-chart.min.js"></script>

我在这里很容易地完成了演示：http://jsfiddle.net/uc25erpc/.如果你在chart.js之前加载角度图，我会得到与你在没有定义chart时相同的错误。

另一方面，请查看https://github.com/zingchart/ZingChart-AngularJS用于替代AngularJS包装器。

我终于使用了另一个模块，即googlechart模块。

模块安装：

$ bower install angular-google-chart --save

在我模块的app.js:中

// Add CSS dependencies
// Module's CSS
Report.aggregateAsset('css', 'report.css');
// Add angular module dependencies
// Dependency to 'googlechart' module adding directives for Google Chart
// See https://github.com/bouil/angular-google-chart
Report.aggregateAsset('js', '../lib/angular-google-chart/ng-google-chart.js');

自定义模块控制器：

angular.module('mean.report', ['googlechart'])
.controller('ReportController', ['$scope', 'Global', 
  function($scope, Global) {
    ....
});

我找到了一个解决方案来避免出现错误消息"Chart is not defined"。

使用bower_components而不是aggregateAsset函数。在config/assets.json文件中放入以下行，顺序与"js"部分相同：

    "bower_components/Chart.js/Chart.min.js",
    "bower_components/angular-chart.js/dist/angular-chart.min.js"

并在你的app.js:中定义所需的依赖项

    Report.angularDependencies(['chart.js']);
相关文章：