Использование angularJS с requireJS - не может прочитать свойство 'module' из неопределенного

Question

Я начал писать приложение, используя angularJS. Через несколько недель я внезапно понял, что должен был использовать require JS с самого начала для загрузки своих модулей. Да, я знаю, это было глупо. Но что есть, то есть. Поэтому я попытался преобразовать свой код в соответствии с requireJS сейчас.

Это мой main.js

requirejs.config({
baseUrl: "js",
paths: {
    jquery:'jquery-1.7.min',
    angular: 'angular',
    angularRoute:'angular-route',
    mainApp:'AngularApp/app'

},
 priority:['angular'],
shim:{

    angularRoute:{
        deps:["angular"]
    },
    mainApp:{
        deps:['angularRoute']
    }
}});

require(['angular','angularRoute', 'mainApp'],
    function(angular, angularRoute, app)
    {
        angular.bootstrap(document, ['ServiceContractModule']);
    });

Это мой app.js

define(['angular',
    'angularRoute',
    'AngularApp/services',
    'AngularApp/directives',
    'AngularApp/controllers'],
    function(angular, angularRoute, services, directives, controllers)
    {
        console.log("sup");
        var serviceContractModule = angular.module('ServiceContractModule',[ 'ngRoute', services, directives, controllers ]);
        serviceContractModule.config(function($routeProvider,$locationProvider) {
            $routeProvider.when('/contractNumber/:contractNumbers', {
                controller : 'ContractController',
                templateUrl : './contractSearchResult',
                reloadOnSearch : true
            }).when('/serialNumber/:serialNumbers', {
                controller : 'SerialController',
                templateUrl : './serialSearchResult'
            }).when('/QuoteManager',{
                controller : 'QuoteManagerController',
                templateUrl: './quoteManagerView'
            }).when('/QuoteManagerHome',{
                controller : 'QuoteManagerController',
                templateUrl: './quoteManagerHome'
            });
        });

        return serviceContractModule;
    });

Это мой файл directives.js

define(['angular',
    'AngularApp/Directives/tableOperations',
    'AngularApp/Directives/line',
    'AngularApp/Directives/listOfValues'],
    function(
    angular,
    tableOperations,
    line,
    listOfValues)
    {
        var directiveModule = angular.module('ServiceContractModule.directives');
        directiveModule.directive('tableoperations', tableOperations);
        directiveModule.directive('line', line);
        directiveModule.directive('listOfValues', listOfValues);
        return directiveModule;
    }

)

И это мой файл services.js

define(['angular',
    'AngularApp/Services/quoteManagerSearch'],
    function(angular, quoteManagerSearch)
    {
        var serviceModule = angular.module('ServiceContractModule.services');
        serviceModule.factory('searchRequestHandler', quoteManagerSearch);
        return serviceModule;
    }

)

Когда я запускаю свою страницу, текущая ошибка, которую я получаю,

Uncaught TypeError: Невозможно прочитать свойство 'module' из неопределенных директив. Js: 14

Uncaught TypeError: Невозможно прочитать свойство 'module' из неопределенных services.js:5

Похоже, что это происходит на этой конкретной линии

var directiveModule = angular.module('ServiceContractModule.directives');

Я думаю, по какой-то причине угловой файл не загружается. Хотя, когда я запускаю страницу, я вижу все файлы js, загружаемые в правильном порядке в chrome.

Есть идеи, ребята? Нужна быстрая помощь! Спасибо!

Answer 1

Глядя на источники для Angular, я нигде не вижу, чтобы он называл RequireJS ' define поэтому вам нужна прокладка для этого. Добавьте это к вашему shim конфигурация:

angular: {
    exports: "angular"
}

Кстати, priority поле в вашей конфигурации устарело. Либо вы используете RequireJS 2.x, который игнорирует это поле, потому что priority поддерживается только RequireJS 1.x. Или вы используете RequireJS 1.x, который соблюдает priority но проигнорирует shim поле, потому что shim был введен в 2.x. Мое предложение: используйте RequireJS 2.x и удалите priority,

Answer 2

Есть 2 возможные проблемы с вашей настройкой:
1. Вы загружаете в свой угловой main.js а затем загрузка зависимостей.
2. Вы должны ссылаться на зависимость, используя строку

Итак, после удаления angular.bootstrap от твоего main.jsпопробуйте следующее:

app.js

define([
    'AngularApp/services',
    'AngularApp/directives',
    'AngularApp/controllers'],
    function()
    {
        console.log("sup");
        var serviceContractModule = angular.module('ServiceContractModule',[ 'ngRoute', 'ServiceContractModule.services', 'ServiceContractModule.directives', '<<Your Controller Module Name>>' ]);
        serviceContractModule.config(function($routeProvider,$locationProvider) {
            $routeProvider.when('/contractNumber/:contractNumbers', {
                controller : 'ContractController',
                templateUrl : './contractSearchResult',
                reloadOnSearch : true
            }).when('/serialNumber/:serialNumbers', {
                controller : 'SerialController',
                templateUrl : './serialSearchResult'
            }).when('/QuoteManager',{
                controller : 'QuoteManagerController',
                templateUrl: './quoteManagerView'
            }).when('/QuoteManagerHome',{
                controller : 'QuoteManagerController',
                templateUrl: './quoteManagerHome'
            });
        });

        angular.bootstrap(document, ['ServiceContractModule']);
    });

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