Требуется конфигурация JS shim для ngRoute и Underscore.js

Question

Требуется конфигурация JS shim для ngRoute и Underscore.js

0

Я пытаюсь загрузить зависимости для различных угловых модулей, используя require.js. После настройки зависимостей в файле dependencies.js, я получаю сообщение об ошибке при загрузке приложения, в котором говорится, что "Модуль недоступен". Я попробовал 2 варианта файла, приведенных ниже, и приложение не работает в обоих экземплярах:

Вариант 1 - Dependencies.js

require.config({
paths: {
    angular: '../lib/dependencies/bower_components/angular/angular',
    angularRoute: '../lib/dependencies/bower_components/angular-route/angular-route',
    angularMessages: '../lib/dependencies/bower_components/angular-messages/angular-messages',
    lodash: "../lib/dependencies/bower_components/lodash/dist/lodash",
    jQuery: "../script/datetimepicker/jquery.min", // needed only by the date time picker
    datetimepicker: '../script/datetimepicker/jquery.datetimepicker',
    underscore: '../lib/dependencies/bower_components/underscore/underscore',
    frontendServices: 'frontend-services',
    myApp: "test-app"
},
shim: {
    jQuery: {
        exports: "jQuery"
    },
    angular: {
        exports: "angular"
    },
    angularRoute: {
        exports: "ngRoute"
    },
    angularRoute: {
      deps: ['angular']
    },
    underscore: {
        exports: "_"
    },
    underscore: {
        deps: ['jQuery']
    },
    datetimepicker: {
        deps: ['jQuery']
    },
    angularMessages: {
        deps: ['angular']
    },
    frontendServices: {
        deps: ['angular', 'lodash']
    },
    myApp: {
        deps: [ 'lodash', 'angular', 'angularMessages', 'frontendServices', 'underscore']
    }
}
});

require(['myApp'], function () {

angular.bootstrap(document.getElementById('myApp'), ['myApp']);

});

Вариант 2 - Dependencies.js

    require.config({
paths: {
    angular: '../lib/dependencies/bower_components/angular/angular',
    angularRoute: '../lib/dependencies/bower_components/angular-route/angular-route',
    angularMessages: '../lib/dependencies/bower_components/angular-messages/angular-messages',
    lodash: "../lib/dependencies/bower_components/lodash/dist/lodash",
    jQuery: "../script/datetimepicker/jquery.min", // needed only by the date time picker
    datetimepicker: '../script/datetimepicker/jquery.datetimepicker',
    underscore: '../lib/dependencies/bower_components/underscore/underscore',
    frontendServices: 'frontend-services',
    myApp: "test-app"
},
shim: {
    jQuery: {
        exports: "jQuery"
    },
    angular: {
        exports: "angular"
    },
    angularRoute: {
        exports: "ngRoute"
    },
    angularRoute: {
      deps: ['angular']
    },
    underscore: {
        deps: ['jQuery']
    },
    datetimepicker: {
        deps: ['jQuery']
    },
    angularMessages: {
        deps: ['angular']
    },
    frontendServices: {
        deps: ['angular', 'lodash']
    },
    myApp: {
        deps: [ 'lodash', 'angular', 'angularMessages', 'frontendServices', 'underscore']
    }
}});

require(['myApp'], function () {

angular.bootstrap(document.getElementById('myApp'), ['myApp']);

});

Мой файл контроллера:

angular.module('myApp', [ 'frontendServices', 'underscore', 'angularRoute']).controller(
    'TableCtrl',
    [       '$http',
            '$scope',
            function($scope, $timeout) {

            // contents

            } ]);

После загрузки приложения я получаю такие ошибки, как:

Ошибка: [$ injector: nomod] Модуль "underscore" недоступен! Вы либо ошибочно написали имя модуля, либо забыли загрузить его. Если регистрация модуля гарантирует, что вы укажете зависимости в качестве второго аргумента. http://errors.angularjs.org/1.3.8/ $ инжектор /nomod? p0 = подчеркивание

Может ли кто-нибудь помочь мне установить правильный способ настройки подчеркивания и ngRoute с использованием require.js????

leo_roar_001 17 авг. 2016, в 22:50

Источник

Теги:

javascript

jquery

angularjs

underscore.js

requirejs

1 ответ

Ещё вопросы

Louis · Accepted Answer · 2016-08-17T19-17-00.000Z

С кодом есть несколько проблем:

Если вы не используете древние версии jQuery, jQuery не нуждается в shim. То же самое для Underscore.
вы должны ссылаться на jQuery как на модуль в нижнем регистре: jquery. Он по-прежнему экспортирует jQuery в глобальное пространство, но имя модуля (которое вы помещаете в списки зависимостей, переданные для require или define) должно быть все в нижнем регистре.
Вы не можете дублировать записи в shim. У вас есть это, например:
```
angularRoute: {
    exports: "ngRoute"
},
angularRoute: {
  deps: ['angular']
},
```
Только второй будет действовать, 1-й будет проигнорирован. Объедините две записи в одну, которая имеет как exports и deps.
Похоже, вы пытаетесь заставить Angular загружать модули RequireJS с помощью angular.module('myApp', [ 'frontendServices', 'underscore',...

Я не понимаю, как это будет работать. Модуль RequireJS не является автоматически Угловым модулем. Если модуль RequireJS содержит модуль с угловым модулем, вы должны сначала загрузить RequireJS для загрузки модуля.

todomvc содержит хороший пример:
```
require([
    'controllers/todo', 
    'directives/todoFocus', 
    'directives/todoEscape',
    'services/todoStorage'
], function (todoCtrl, todoFocusDir, todoEscapeDir, todoStorageSrv) {
    angular
        .module('todomvc', [todoFocusDir, todoEscapeDir, todoStorageSrv])
        .controller('TodoController', todoCtrl);
    angular.bootstrap(document, ['todomvc']);           
}); 
```
Они загружают модули через require вызова, а затем передать их в angular.module. Они решили использовать require из-за того, как они организовали свой код. Ввод зависимостей в списке зависимостей прошли верхний уровень define модуля будет делать так же хорошо.

@ Луис, спасибо, что указал мне, Луис. Я смог заставить это работать :)