seedstack - 如何将外部 JS 库注入到模块中？

Question

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

谢谢您的帮助。

Answer 1

在得到具体答案之前，请注意 SeedStack 已经有一个图表插件。至于将库与 W20 集成，您主要有两件事要做：

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

幸运的是，Angular 指令已经可用于 Chart.js，这要归功于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_componentshere 的变量。这在使用W20 桥接插件时很有用。

该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)  
    }]);
});