Angular.js с require.js, получающим сообщение об ошибке: [$ injector: modulerr]

Я пытаюсь использовать require.js с Main.js и получаю следующую ошибку:

Неиспользуемая ошибка: [$ injector: modulerr] http://errors.angularjs.org/1.2.0rc1/ $инжектор/модулятор? p0 = MyApp & p1 = Ошибка% 3... 3A8080 % 2FResults% 2Fresources% 2Fjs% 2Fvendor% 2Fangular.min.js% 3A31% 3A252)

My Main.js

 require.config({

    // alias libraries paths
    paths: {
        'angular': 'vendor/angular.min',
        'jquery': 'vendor/jquery-1.8.0-min',
        'angularroute': 'vendor/angular-route'          
    },

    // angular does not support AMD out of the box, put it in a shim
    shim: {
        'angular': {
            deps: ['jquery'],
            exports: 'angular'
        },
        'angularroute':{
            deps:['angular']
        }

    }
});
require([
         'angular',
         'angularroute',
         'app'
         ],
        function(angular, angularroute, app){
    'use strict';       
})

My app.js

define(['angular'], function(angular){
    return angular.module('MyApp',['ngRoute']);
});

У меня возникла ошибка, в которой говорилось, что мне нужно добавить angularroute в мое приложение, но я все еще получаю эту ошибку. Может ли кто-нибудь указать мне, что я могу делать неправильно?

Ответ 1

Я нашел решение здесь: https://github.com/tnajdek/angular-requirejs-seed/blob/master/app/js/main.js

из документов: http://code.angularjs.org/1.2.1/docs/guide/bootstrap#overview_deferred-bootstrap

window.name = "NG_DEFER_BOOTSTRAP!";
require(['angular', 'angularroute', 'app'], function(angular, angularroute, app){
    'use strict';

    //after you are done defining / augmenting 'MyApp' run this:

    angular.element().ready(function() {
        angular.resumeBootstrap([app['name']]);
    });
})

Ответ 2

Вот мой запрос config, в require_config.js:

var require = {
    baseUrl: '/js',
    paths: {
        'angular': 'lib/angular.min',
        'angular.route': 'lib/angular-route.min',
        'angular.resource': 'lib/angular-resource.min',
        'angular.animate': 'lib/angular-animate.min',
        'angular.ui.bootstrap': 'lib/ui-bootstrap-tpls-0.6.0.min',
        'angular.upload': 'lib/ng-upload.min',
        'jquery': 'lib/jquery-1.10.2.min'
    },
    shim: {
        'angular': ['jquery'],
        'angular.route': ['angular'],
        'angular.resource': ['angular'],
        'angular.animate': ['angular'],
        'angular.ui.bootstrap': ['angular'],
        'angular.upload': ['angular'],
        'my.angular': ['angular', 'angular.route', 'angular.resource', 'angular.animate', 'angular.ui.bootstrap', 'angular.upload']
    }
};

Мои теги script в HTML <head>:

<script src="/js/require-config.js"></script>
<script src="/js/lib/require.js"></script>

Страницы, которые поступают с серверной стороны, могут использовать Angular или jQuery, оба или ни одного... поэтому разметка HTML может содержать один простой тег, чтобы в конечном итоге активировать всю структуру Angular например:

<script>require(['myApp']);</script>

Теперь, при myApp.js, я просто полагаюсь на my.angular, который заботится о загрузке всего остального... на самом деле, у меня есть другие вкусы "my.angular", с разные подмножества, которые я использую в разных контекстах сайта:

define(['my.angular'], function() {
    var myApp = angular.module('myApp', ['ngRoute', 'ngResource', 'ngAnimate', 'ngUpload', 'ui.bootstrap']);
   // more app module stuff here, including bootstrap
    return myApp;
});

Ответ 3

angular определяется как глобальная переменная, и ваше объявление переопределяет ее. Файл angular.js не возвращает ничего, поэтому на уровне RequireJS ничего не нужно вводить. Попробуйте следующее:

define(['angular'], function(){
    return angular.module('MyApp',['ngRoute']);
});

Я боролся с RequireJS и AngularJS, поэтому я создал angularAMD, чтобы помочь мне:
http://marcoslin.github.io/angularAMD/

Ответ 4

Ваша настройка выглядит нормально, за исключением того, что вам нужно добавить angularroute в качестве зависимости в части define файла app.js. Вы упомянули об этом, но не отразили это в своем примере кода.

define(['angular', 'angularroute'], function(angular){
    return angular.module('MyApp',['ngRoute']);
});