1

私は JavaScript と AngularJS の両方が初めてです。建物管理システムと通信するアプリを構築しています。これには、BMS に接続してそこからデータを取得するサービスを含む「JaceMod」というモジュールがあります。Dygraphs を使用してデータをグラフ化する機能を追加し、グラフをインスタンス化してデータを入力するディレクティブを作成しました。

Dygraphs ディレクティブを「dygraphs」というモジュールの別のファイル「angular-dygraphs.js」に入れたいので、後で再利用でき、このモジュールを「JaceMod」の依存関係として必要とします。このような：

'use strict';
console.log('Loading angular-dygraphs.js');
angular.module('dygraphs', []);

angular.module('dygraphs').directive('mrhDygraph', function ($parse) {
    return {
...etc ...
    };
});

そしてメインファイル「app.js」:

'use strict';
console.log('Loading app.js');

angular.module('JaceMod', ['dygraphs']);

angular.module('JaceMod').factory('JaceData', function ($http, $timeout) {
    var JaceDataService = {};
...etc ...
    return JaceDataService;
});

angular.module('JaceMod').controller('myCtrl', function myCtrl($scope, JaceData) {
    JaceData.initialise($scope);
    JaceData.subscribe($scope);
});

html は次のようになります。

<html lang="en" ng-app="JaceMod">
<head>
    <meta charset="utf-8">
    <title>AngularJACE</title>
    <style type="text/css">
        body {font-family:  Trebuchet MS,Helvetica,Arial,sans-serif; }
    </style>
</head>
<body ng-controller="myCtrl">
    <div mrh-dygraph="graphData"
         mrh-dygraph-options="{xlabel: 'Local Time', legend: 'always',
                              showRangeSelector: true, labels: ['Time', 'Outside'],
                              ylabel: 'Temperature (ºC)', height: 420}"
         style="width: 100%; height 420px;"/>
    <script src="dygraph-combined.js"></script>
    <script src="angular.js"></script>
    <script src="angular-dygraphs.js"/>
    <script src="app.js"></script>
</body>

しかし、この html をロードすると、「Angular-dygraphs.js をロードしています」というコンソール メッセージに続いて、「エラー: モジュールがありません: JaceMod」というエラーが表示されます。にログ メッセージが表示されませんapp.js。最後の 2 つの JavaScript ファイル ラウンドの読み込み順序を切り替えると、app.js が読み込まれ、エラー メッセージが「エラー: モジュールがありません: dygraphs」であることがわかります。2 番目にリストされたファイルはロードされていないようです。

コードを angular-dygraphs.js から app.js にコピーし、ディレクティブを独自のモジュールに残すと、機能します。

なぜこうなった？モジュールを独自のファイルなどに入れることはできませんか? ドキュメントはあまり役に立ちませんでした...

追加するために編集

html と js ファイルは、dygraphs と angular ライブラリを含め、すべて同じディレクトリにあります。ファイルからhtmlをロードしています。サーバーは関係ありません。

アップデート

angular-dygraphs.js からすべてを app.js にコピーし、angular-dygraphs.js 全体をコメントアウトしました。まだ問題が発生していますが、app.js が読み込まれません。

4

1 に答える 1