外部JSライブラリをモジュールに挿入するには？

Question

私はSeedStackを使ってWebアプリケーションを作成しています。そのために、W20を使用してフロントエンドを開発します。私はそのプロジェクトに特定のJavaScriptライブラリが必要です。どのように私はそれに外部のjavascriptライブラリを注入できますか？私はChart.js http://www.chartjs.org/を使ってデータをチャートに視覚化したいと思っています。そうするために、ChartJSをAngularの依存モジュールとして注入する必要があると思います。

ありがとうございました。

Answer 1

特定の回答に達する前に、SeedStackには既にadd-on for chartsがあることに注意してください。

• JSファイルを読み込み、それを依存関係として挿入できるようにRequireJSを設定します。
• ライブラリを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セクションでは、2つの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) 
    }]); 
});