Проблемы с загрузкой модуля angularJS

Надеюсь, кто-то может мне помочь... Мы новичок в 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');}]);

А вот javascript для анализа приложений, который вы должны поместить в тег head файла 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>

К сожалению, мы постоянно получаем уродливый модуль angularrr, который, как я полагаю, говорит мне, что он не может загрузить этот модуль 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)

Может ли кто-нибудь помочь мне понять, чего нам здесь не хватает? Я не совсем понимаю, где в игру вступает ссылка на инсайтsProvider, поскольку я нигде не определил это и не вижу его определения в его библиотеку.

Любая помощь в этом будет очень признательна, это кажется довольно прямолинейным, но я просто недостаточно удобен с angularJS на данный момент, чтобы понять, где/почему это терпит неудачу...


person xinunix    schedule 12.02.2015    source источник
comment
Кстати, мы загрузили его пример приложения, и оно отлично работает. Так что очевидно, что это проблема с нашей стороны, я не могу понять, почему то, как он подключается, работает, а у нас нет...   -  person xinunix    schedule 12.02.2015
comment
InsightsProvider создается в его библиотеке с помощью .provider('insights'. Он использует некоторую магию инжектора, чтобы доставить это вам в качестве InsightsProvider. В примере приложения угловая версия — 1.2.18, а вы используете 1.2.16 — возможно, попробуйте обновить angular?Я не вижу ничего плохого в том, что вы делаете.   -  person Sperr    schedule 12.02.2015
comment
Спасибо, Сперр, на самом деле я, возможно, только что понял это, все еще тестирую, но... Я переместил предоставленный MS javascript из тега заголовка index.html в собственный файл .js и включил его чуть ниже включения application- инсайты.js (я заметил, что он сделал это таким образом в своем образце, хотя в его документах говорится, что он должен помещать его в тег заголовка), и похоже, что теперь он работает.   -  person xinunix    schedule 12.02.2015
comment
также спасибо за комментарий о магии инжектора, которая там происходит, это то, что я пытался понять, но я хорошо разбираюсь в магии, пока знаю, что это то, что происходит...   -  person xinunix    schedule 12.02.2015
comment
Приятно слышать, что это работает! Я предполагаю, что код в теге мог быть запущен до загрузки angular, что вызвало проблемы. Совет на следующий раз: если вы используете неминифицированную версию angular.js при разработке, вы получите гораздо более содержательные сообщения об ошибках.   -  person Sperr    schedule 12.02.2015
comment
Еще один отличный совет, спасибо, потому что отсутствие значимого сообщения об ошибке было предметом разногласий!   -  person xinunix    schedule 12.02.2015


Ответы (2)


Еще одна проблема, которую я обнаружил с «angular-appinsights.js», заключается в том, что если вы используете директиву ngRoute в своем приложении angular для маршрутизации, все должно быть в порядке. Но если вы используете ui.router для маршрутизации/состояний, то 'angular-appinsights.js' не будет работать правильно и выдаст ошибку. Я нашел исправление здесь Angular-AppInsights — Unknown Provider — FIX, и оно довольно простое. В функции .run модуля angular-appinsights.js вы обнаружите, что $route внедряется. Если вы удалите $route от внедрения в эту функцию, angular-appinsights будет работать.

person Calvin    schedule 22.04.2015

Оказывается, источником проблемы был то, что MS предоставила JS, которую они проинструктировали вас поместить в тег заголовка index.html. Сперр предположил, что, возможно, он был запущен до загрузки angular. Решение проблемы заключалось в том, чтобы вытащить этот js из тега head и поместить его в собственный файл .js, а затем включить его под ссылкой на angular-appinsights.js. С этим изменением все работает отлично.

person xinunix    schedule 12.02.2015