将 angularJS 与 requireJS 一起使用 - 无法读取未定义的属性“模块" [英] Using angularJS with requireJS - cannot read property 'module' of undefined

问题描述

我已经开始使用 angularJS 编写应用程序.几周后，我突然意识到我应该从一开始就使用 require JS 来加载我的模块.是的，我知道，这很愚蠢.但是它就是这样啊.所以我现在尝试将我的代码转换为适合 requireJS.

I had started writing an app using angularJS. After a few weeks, I suddenly realized that I should have used require JS from the beginning to load my modules. Yes, I know, it was stupid. But it is what it is. So I've tried to convert my code to suit requireJS now.

这是我的 main.js

This is my 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

This is my 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;
    });

这是我的指令.js文件

This is my directives.js file

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 文件

And this is my services.js file

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

)

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

When I run my page, the current error I am getting is

未捕获的类型错误:无法读取未定义指令的属性模块".js:14

Uncaught TypeError: Cannot read property 'module' of undefined directives.js:14

未捕获的类型错误:无法读取未定义的 services.js:5 的属性模块"

Uncaught TypeError: Cannot read property 'module' of undefined services.js:5

这似乎发生在这条特定线上

This seems to be happening on this particular line

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

我认为由于某种原因，角度文件没有被加载.虽然当我运行页面时，我可以看到所有 js 文件在 chrome 中以正确的顺序加载.

I think for some reason, the angular file is not getting loaded. Although when I run the page, I can see all the js files being loaded in the correct order in chrome.

大家有什么想法吗?需要快速帮助！谢谢！

Any ideas guys? Need quick help! Thanks!

推荐答案

查看 Angular 的源代码，我没有看到它调用 RequireJS 的任何地方 define 所以你需要一个垫片.将此添加到您的 shim 配置中:

Looking at the sources for Angular, I do not see anywhere that it calls RequireJS' define so you need a shim for it. Add this to your shim configuration:

angular: {
    exports: "angular"
}

顺便说一下，您的配置中的 priority 字段已过时.要么使用 RequireJS 2.x，它会忽略此字段，因为 priority 仅由 RequireJS 1.x 支持.或者您使用 RequireJS 1.x，它会尊重 priority 但会忽略 shim 字段，因为 shim 是在 2.x 中引入的.我的建议:使用 RequireJS 2.x 并删除 priority.

By the way, the priority field in your configuration is obsolete. Either you use RequireJS 2.x which ignores this field because priority is supported only by RequireJS 1.x. Or you use RequireJS 1.x which would honor priority but would ignore the shim field because shim was introduced in 2.x. My suggestion: use RequireJS 2.x and remove priority.

这篇关于将 angularJS 与 requireJS 一起使用 - 无法读取未定义的属性“模块"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！