Question

我正在使用SeedStack来创建Web应用程序。为了做到这一点，我使用W20来开发我的前端。我需要特定的JavaScript库到该项目中。如何将外部JavaScript库注入其中？我想使用Chart.js http://www.chartjs.org/将数据可视化为图表。为此，我想我必须在Angular中将ChartJS作为依赖模块注入。

感谢您的帮助。

Answer 1

在得到具体答案之前，请注意SeedStack已经有add-on for charts。至于将库与W20集成，您有两个主要的事情要做：

配置RequireJS以加载JS文件，并能够将其作为依赖项注入。
将库与AngularJS框架集成，通常通过编写一些directive来完成。

幸运的是，由于angular-chart.js library，Angular指令已经可用于Chart.js。您只需配置RequireJS即可加载它。将requireConfig部分添加到您的某个片段的清单中：

{
  "id": "my-fragment",

  ...

  "requireConfig": {
    "paths": {
      "{angular-chart.js}": "${components-path:bower_components}/angular-chart.js/dist",
      "{chart.js}": "${components-path:bower_components}/chart.js/dist"
    },

    "map": {
      "{angular-chart.js}/angular-chart": {
        "angular": "{angular}/angular",
        "chart": "{chart.js}/Chart"
      }
    }
  }
}

paths部分声明了两个Chart.js库的位置。请注意，我们在此处使用名为components-path的变量，其默认值为bower_components。这在使用W20 bridge add-on时非常有用。

map部分声明了angular-chart.js的依赖关系的预期路径和实际路径之间的映射。

然后，您可以根据其文档使用angular-chart.js库：

define([
    '{angular}/angular',
    '{angular-chart.js}/angular-chart',
], function(angular) {
    var module = angular.module('myModule', ['ngResource', 'chart.js']); 

    module.controller('ContentController', [ '$scope', function($scope) {
        // your JS code here 
        // (with your markup in a corresponding angular template)  
    }]);
});

如何将外部JS库注入模块？

1 个答案: