如何将外部 JS 库注入到模块中？答案

【问题标题】：How to inject external JS library into a module?如何将外部 JS 库注入到模块中？
【发布时间】：2016-11-18 09:55:14
【问题描述】：

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

感谢您的帮助。

【问题讨论】：

标签： seedstack

【解决方案1】：

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

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

幸运的是，Angular 指令已经可用于 Chart.js，这要感谢 angular-chart.js library。你只需要配置 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)  
    }]);
});

【讨论】：