1

希望有人可以在这里帮助我...我们是 angularJS 的新手，但已承诺在即将到来的项目中使用它。我们希望从一开始就实施的一件事是应用功能使用监控，我们计划使用 Microsoft 的 Application Insights 来做到这一点。我很高兴地发现已经构建了一个 angularJS 模块，用于处理 Microsoft 的 App Insights angular-appinsights入门页面上推荐的应用洞察。不幸的是，我们很难引导这个模块。

很确定我们是这里的问题，我觉得如果我们对 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 一切正常。

未捕获的错误：[$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”中发现的另一个问题是，如果您在 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 提供了 JS，他们指示您放入 index.html 的 head 标签中是问题的根源。Sperr 推测它可能是在加载 angular 之前运行的。该问题的解决方案是将该 js 从 head 标签中拉出并将其放入自己的 .js 文件中，然后将其包含在对 angular-appinsights.js 的引用下方。随着这种变化，一切都很好。

于 2015-02-12T19:43:45.890 回答