如何將外部JS庫注入模塊？

Question

我正在使用SeedStack創建一個Web應用程序。爲了做到這一點，我使用W20來開發我的前端。我需要特定的JavaScript庫到該項目中。我怎樣才能注入一個外部的JavaScript庫？我想使用Chart.js http://www.chartjs.org/將數據可視化爲圖表。爲此，我想我必須將ChartJS注入Angular中的依賴模塊。

謝謝你的幫助。

Answer 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依賴關係的期望路徑和實際路徑之間的映射。

然後，您可以根據其文檔中使用的角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) 
    }]); 
});