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

【问题标题】：Using angular-chart.js as a dependency in a custom mean.io package在自定义 mean.io 包中使用 angular-chart.js 作为依赖项
【发布时间】：2015-04-10 14:03:47
【问题描述】：

首先，我按照建议安装了 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-stack-packages-angular-modules-and-dependencies

在我模块的 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 is not defined 等。这太疯狂了我在我的应用程序视图中更改了一条线并且图表消失了。我无法让它以一致的方式工作。

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

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

【问题讨论】：

标签： javascript angularjs charts

【解决方案1】：

听起来 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 之前加载 angular-chart，我会收到与未定义 Chart 相同的错误。

另外，请查看 https://github.com/zingchart/ZingChart-AngularJS 以获取替代的 AngularJS 包装器。

【讨论】：

为什么chart.js没有包含在angular-chart.js中？

【解决方案2】：

我终于让它与另一个模块一起工作，即 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) {
    ....
});

【讨论】：

【解决方案3】：

我找到了避免“图表未定义”错误消息的解决方案。

使用bower_components 代替aggregateAsset 函数。将以与“js”部分相同的顺序将以下行放入您的config/assets.json 文件中：

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

并在您的 app.js 中定义所需的依赖项：

    Report.angularDependencies(['chart.js']);

【讨论】：