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

这是我的directions.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: Cannot read property 'module' of undefined directives.js:14

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

这似乎发生在这一行

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

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

有什么想法吗？需要快速帮助！谢谢！

Answer 1

查看 Angular 的源代码，我没有看到它调用 RequireJS'define 的任何地方，因此您需要一个 shim。将此添加到您的 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. 您应该使用字符串引用依赖项

因此，从您的 main.js 中删除 angular.bootstrap 后，请尝试以下操作：

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']);
    });

查看我为帮助使用 RequireJS 和 AngularJS 而创建的 angularAMD： http://marcoslin.github.io/angularAMD/