1

誰かがここで私を助けてくれることを願っています... angularJS は初めてですが、今後のプロジェクトで使用することを約束しています。最初から導入したいことの 1 つは、アプリ機能の使用状況の監視であり、Microsoft の Application Insights を使用してそれを行うことを計画しています。Microsoft の App Insights angular-appinsightsの開始ページで推奨されている、アプリの洞察を操作するために既に構築された angularJS モジュールがあることを発見して、とてもうれしく思いました。残念ながら、このモジュールをブートストラップするのは非常に困難です。

私たちがここで問題を抱えていることは間違いありません.angularJSについてもう少し知っていれば、これを理解できると思いますが、私たちはそれについて歯を磨いているだけなので、SOに助けを求めています!

したがって、すべてのスクリプトをロードしている index.html の部分は次のとおりです。

    <!-- 3rd party libraries -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.min.js"></script>
<script src="scripts/angular-local-storage.min.js"></script>
<script src="scripts/loading-bar.min.js"></script>
<script src="scripts/angular-appinsights.js"></script>
<!-- Load app main script -->
<script src="app/app.js"></script>

すべてが接続されている app.js の関連部分は次のとおりです。

var app = angular.module('MTCAPITester', ['ngRoute', 'LocalStorageModule', 'angular-loading-bar','angular-appinsights']);

app.config(['$routeProvider','insightsProvider',function ($routeProvider,insightsProvider) {

$routeProvider.when("/home", {
    controller: "homeController",
    templateUrl: "/app/views/home.html"
});

$routeProvider.when("/login", {
    controller: "loginController",
    templateUrl: "/app/views/login.html"
});

$routeProvider.otherwise({ redirectTo: "/home" });

insightsProvider.start('our app insights key here');}]);

そして、ここに、index.html の head タグに入れることになっているアプリ インサイト JavaScript があります。

        <script type="text/javascript">
        var appInsights = window.appInsights || function (config) {
            function s(config) { t[config] = function () { var i = arguments; t.queue.push(function () { t[config].apply(t, i) }) } } var t = { config: config }, r = document, f = window, e = "script", o = r.createElement(e), i, u; for (o.src = config.url || "//az416426.vo.msecnd.net/scripts/a/ai.0.js", r.getElementsByTagName(e)[0].parentNode.appendChild(o), t.cookie = r.cookie, t.queue = [], i = ["Event", "Exception", "Metric", "PageView", "Trace"]; i.length;) s("track" + i.pop()); return config.disableExceptionTracking || (i = "onerror", s("_" + i), u = f[i], f[i] = function (config, r, f, e, o) { var s = u && u(config, r, f, e, o); return s !== !0 && t["_" + i](config, r, f, e, o), s }), t
        };

    window.appInsights = appInsights;
    </script>

残念ながら、このモジュールに関連するコードを削除すると、このモジュール b/c をブートストラップできないことを示していると思われる醜い angular modulerr が一貫して取得されます。

キャッチされていないエラー: [$injector:modulerr] http://errors.angularjs.org/1.2.16/ $injector/modulerr?p0=MTCAPITester&p1=Er…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.16%2Fangular. min.js%3A32%3A445)

ここで何が欠けているかを理解してくれる人はいますか? どこにも定義されておらず、彼のライブラリにも定義されていないため、insightsProvider への参照がどこで機能するのかよくわかりません。

これについての助けをいただければ幸いです。これは非常に簡単に思えますが、現時点ではangularJSに十分に慣れていないため、これがどこで/なぜ失敗しているのかを理解できません...

4

2 に答える 2

2

「angular-appinsights.js」で見つけたもう 1 つの問題は、 Angular アプリケーションでルーティング用にngRouteディレクティブを使用している場合は、問題ないはずです。ただし、ルーティング/状態にui.routerを使用している場合、「angular-appinsights.js」は正しく機能せず、エラーがスローされます。ここでAngular-AppInsights – Unknown Provider – FIXの修正を見つけました。これは非常に簡単です。angular-appinsights.js モジュールの.run関数では、$route が挿入されていることがわかります。$routeをその関数に挿入しないようにすると、angular-appinsights が機能します。

于 2015-04-22T14:11:02.570 に答える
1

MSが提供した、index.htmlのheadタグに入れるように指示するJSが問題の原因だったことが判明しました。Sperr は、angular がロードされる前に実行された可能性があると推測しました。この問題の解決策は、その js を head タグから取り出して独自の .js ファイルに配置し、それを angular-appinsights.js への参照の下に含めることでした。その変更により、すべてがうまく機能しています。

于 2015-02-12T19:43:45.890 に答える