Модуль нагрузки AngularAMD в директиве (как подчеркивание)

Question

Я пытаюсь использовать модуль angularAMD с моим проектом, используя пользовательские директивы. В этих директивах я должен использовать внешние модули, такие как подчеркивание, но я не могу загрузить эти модули только в директиве.

main.js

require.config({
baseUrl: "app",
paths: {
    'angular': 'vendor/angular.min',
    'angular-ui-router': 'vendor/angular-ui-router.min',
    'angularAMD': 'vendor/angularAMD.min',
    'ngload': 'vendor/ngload.min',
    'underscore': 'vendor/angular-underscore-module',
    'ui-bootstrap': 'vendor/ui-bootstrap.min',
    "jqueryCli": "../assets/js/jquery.min",
    "bootstrapCli": "../assets/js/bootstrap",
    "bootstrapSideCli": "../assets/js/bootstrap-sidebar",
    "underscoreCli": "../assets/js/underscore",
    "mpGrid": "shared/mpGrid/mpGrid",
    "i18nService": "vendor/angular-locale_it-it"
},
shim: {
    'angularAMD': ['angular'],
    'angular-ui-router': ['angular'],
    'underscore': ['angular', 'underscoreCli'],
    'bootstrapCli': ['jqueryCli'],
    'bootstrapSideCli': ['bootstrapCli'],
    'i18nService': ['angular'],
    'mpGrid': ['angular', 'i18nService']
},
deps: ['app']
});

app.js

define(['angularAMD', 'angular-ui-router',
'jqueryCli', 'bootstrapCli', 'bootstrapSideCli', 'underscoreCli',
'shared/sideMenu/sideMenu',
'mpGrid'
], function (angularAMD) {
var app = angular.module("webapp", ['ui.router']);
app.config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise("/home");
    $stateProvider
        .state('home',angularAMD.route({
            url: '/home',
            templateUrl: 'home/homeView',
            controller: 'homeCtrl',
            controllerUrl: 'home/homeController'}))
        .state('menu',angularAMD.route({
            url: '/menu',
            templateUrl: 'menu/menuView',
            controller: 'menuCtrl',
            controllerUrl: 'menu/menuController'}));

});
app.constant('appConfig', {
    menu: [
        {value: 'Home', link: '#/home', icon: 'glyphicon-home'},
        {value: 'Menu', link: '#/menu', icon: 'glyphicon-th'}
    ],
    title: 'My Web App'
});
angularAMD.bootstrap(app);
return app;
});

mpGrid.js (моя пользовательская директива)

define(['angularAMD'], function (angularAMD) {
 angularAMD.directive('mpGrid', ['underscore', function (_) {
     var test = _;
 }]);
});

Когда я пытаюсь загрузить представление, использует директиву mp-grid, консоль показывает мне эту ошибку:

Error: [$injector:unpr] http://errors.angularjs.org/1.4.0/$injector/unpr?
p0=underscoreProvider%20%3C-%20underscore%20%3C-%20mpGridDirective

(то же самое с i18nService >,<)

Кто-нибудь может мне помочь, пожалуйста?

Я схожу с ума:(

Answer 1

Вам необходимо просмотреть устанавливаемые зависимости, начав с прочтения документации по shim.

Например, для вашего underscore в вашем main.js, Ты устанавливаешь:

shim: {
    ...
    'underscore': ['angular', 'underscoreCli'],
    ...
},

Вы говорите RequireJS что раньше underscore загружен, нужно загрузить angular а также underscoreCli,

Тогда в вашем app.jsзагружаешь underscoreCli, который не имеет зависимости:

define([..., 'underscoreCli', ... ], function (...) {

Кроме того, дважды проверьте, если underscore является angular JS пакет. Если это не так, вам нужно загрузить его так:

define(['angularAMD', 'underscore'], function (angularAMD, _) {
 angularAMD.directive('mpGrid', function () {
     var test = _;
 });
});