Hoping someone can help me out here... We are new to angularJS but have committed to using it on an upcoming project. One of the things we want to get in place from the start is app feature usage monitoring and we are planning to use Microsoft's Application Insights to do that. I was very happy to discover that there is an angularJS module already built for working with app insights recommended on Microsoft's getting started page for App Insights angular-appinsights. Unfortunately we are having a very difficult time bootstrapping this module.
Pretty sure we are the problem here, I feel that if we knew a little more about angularJS we could figure this out but since we are just cutting our teeth on it I am turning to SO for help!
So here is the portion of index.html where we are loading all of our scripts:
<!-- 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>
Here is the relevant portion of app.js where everything is wired up:
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');}]);
And here is the app insights javascript that you are supposed to put in the head tag of index.html:
<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>
Unfortunately we consistently get the ugly angular modulerr which I assume is telling me it can't bootstrap this module b/c if I remove the code related to this module everything works fine.
Uncaught Error: [$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)
Can anyone help me understand what we are missing here? I don't quite understand where the reference to insightsProvider is coming into play as I don't have that defined anywhere and I don't see it defined in his library either.
Any help with this would be greatly appreciated, this seems pretty straight forward but I am just not comfortable enough with angularJS at this point to understand where/why this is failing...
