将angularJS与requireJS一起使用 - 无法读取未定义的属性"模块"

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;
    }

)

当我运行我的页面时,我得到的当前错误是

未捕获的TypeError:无法读取undefined directives.js的属性'module':14

未捕获的TypeError:无法读取未定义services.js的属性'module':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.