0

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

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

4

1 に答える 1

0

具体的な答えにたどり着く前に、SeedStack にはすでにチャート用のアドオンがあることに注意してください。ライブラリを W20 に統合するには、主に次の 2 つのことを行う必要があります。

  • JS ファイルを読み込み、依存関係として挿入できるように RequireJS を構成します。
  • ライブラリを AngularJS フレームワークと統合します。これは、多くの場合、いくつかのディレクティブを記述することによって行われます。

幸いなことに、Angular -chart.js ライブラリのおかげで、Angular ディレクティブはすでに Chart.js で使用できます。RequireJS を構成してロードするだけです。requireConfigフラグメントの 1 つのマニフェストにセクションを追加します。

{
  "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ここでは、デフォルト値がhere の名前の変数を使用していることに注意してbower_componentsください。これは、 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)  
    }]);
});
于 2016-11-20T13:31:30.513 に答える