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

Я начал писать приложение с использованием 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']);
    });

Это мое приложение.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: не удается прочитать «модуль» свойства неопределенных директив.js: 14

Uncaught TypeError: не удается прочитать «модуль» свойства неопределенных services.js: 5

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

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

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

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


person Kaushik Lakshmikanth    schedule 26.02.2014    source источник
comment
Изменить угловой на $ угловой   -  person Ramesh Rajendran    schedule 26.02.2014
comment
Хм, но я определил псевдоним для углового модуля как «угловой». Зачем мне это делать?   -  person Kaushik Lakshmikanth    schedule 26.02.2014
comment
Вы вызвали угловой эталонный скрипт?   -  person Ramesh Rajendran    schedule 26.02.2014
comment
Да. В main.js я указал пути angular:'angular'. Путь к угловому файлу — js/angular.js. Я указал baseurl как js. Кроме того, когда я загружаю страницу, я вижу, что файл angular.js загружается после файла main.js.   -  person Kaushik Lakshmikanth    schedule 26.02.2014


Ответы (2)


Глядя на исходники 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.

person Louis    schedule 26.02.2014
comment
Эй, большое спасибо. Это имеет большой смысл. Я удалил приоритет и добавил свойство экспорта для angular. Теперь я, кажется, получаю ошибку тайм-аута для angularRoute и mainApp. AngularRoute, похоже, не загружается после файла angular. Есть ли проблема с моими зависимостями? - person Kaushik Lakshmikanth; 26.02.2014
comment
Из того, что я вижу в вашем вопросе, меня ничего не пугает. Когда вы проверяете сетевые запросы, которые делает ваш браузер, загружает ли он нужные данные для angularRoute и mainApp? - person Louis; 26.02.2014
comment
Неа. Он загружает main.js, затем angular.js и останавливается. Я также добавил свойство экспорта для angularRoute. Так или иначе, я пробовал это с и без. Оба раза одна и та же ошибка. - person Kaushik Lakshmikanth; 26.02.2014
comment
Если модуль, который вы загружаете как mainApp, является тем же модулем, на который вы ссылаетесь с помощью This is my app.js, то вам не нужна для него конфигурация shim, потому что вы используете define для его определения. Это может объяснить некоторые проблемы, с которыми вы сталкиваетесь. - person Louis; 26.02.2014
comment
Да, я сделал это. Но случилось что-то странное. App.js, кажется, загружается раньше angular. Это действительно странно, поскольку я упомянул об этом в моем теге определения в app.js. И та же более ранняя проблема сохраняется для angularRoute. Просто не загружается. Все остальные модули, похоже, загружаются. Это довольно странное поведение. Возможно, какие-то другие файлы импортируются куда-то еще и вызывают некоторые проблемы. - person Kaushik Lakshmikanth; 26.02.2014
comment
Ничего страшного, если app.js загрузится раньше angular. RequireJS загружает его, выполняет define, видит, что ему нужно angular (и другие вещи), загружает angular и другие зависимости и затем выполняет фабричную функцию (обратный вызов передается define). Что не нормально, так это то, что фабричная функция, переданная define, выполняется до загрузки angular. Что касается angularRoute, есть ли в нем вызов define? Если да, то шайба не нужна. - person Louis; 26.02.2014
comment
Ох, ладно. angular-route.js — это библиотечный файл, как и angular.js. Но он должен быть загружен после angular. - person Kaushik Lakshmikanth; 26.02.2014

Возможны 2 проблемы с вашей настройкой:
1. Вы загружаете angular в свой 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/

person marcoseu    schedule 27.02.2014