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

我已经开始使用angularJS编写应用程序。几周后，我突然意识到我应该从一开始就使用requirejs来加载我的模块。是的，我知道，这很愚蠢。但事实就是这样。 因此，我现在尝试将代码转换为适合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;
    }

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

)

这是我的services.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;
    }

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

)

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

未捕获的TypeError:无法读取未定义指令的属性“module”。js:14

未捕获的TypeError:无法读取未定义服务的属性“module”。js:5

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

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

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

---

有什么想法吗，伙计们？需要快速帮助！谢谢

查看Angular的源代码，我看不到它调用RequireJS'

define

的任何地方，因此您需要一个垫片。将此添加到

垫片

配置中：

angular: {
    exports: "angular"
}

---

顺便说一下，配置中的

优先级

字段已过时。您可以使用RequireJS 2.x，它会忽略此字段，因为只有RequireJS 1.x才支持

优先级

。或者您使用RequireJS 1.x，它将尊重

优先级

，但会忽略

垫片

字段，因为

垫片

是在2.x中引入的。我的建议：使用RequireJS 2.x并删除

优先级
您的设置可能存在两个问题：

1.您正在
main.js中引导angular，然后加载依赖项。

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

定义([
“AngularApp/服务”，
“AngularApp/指令”，
“AngularApp/控制器”]，
函数（）
{
控制台日志（“sup”）；
var serviceContractModule=angular.module（'serviceContractModule'，['ngRoute'，'serviceContractModule.services'，'serviceContractModule.directives'，''）；
serviceContractModule.config（函数（$routeProvider，$locationProvider）{
$routeProvider.when（“/contractNumber/：contractNumber”{
控制器：“ContractController”，
templateUrl:“./contractSearchResult”，
重新加载搜索：真
}).when（'/serialNumber/：serialNumbers'{
控制器：“串行控制器”，
templateUrl:“./serialSearchResult”
}).when（“/QuoteManager”{
控制器：“QuoteManager控制器”，
templateUrl:“./QuoteManager视图”
}).when（“/QuoteManagerHome”{
控制器：“QuoteManager控制器”，
templateUrl:“./QuoteManager主页”
});
});
引导（文档，['ServiceContractModule']）；
});

查看我为帮助使用RequireJS和AngularJS而创建的
angularAMD
：
将angularUmm更改为$angularUmm，但我已将angular模块的别名定义为“angular”。我为什么要这么做？你有没有叫角度参考脚本？是的。在main.js中，我在路径中指定了angular:“angular”。角度文件的路径是js/angular.js。我已经将baseurl指定为js。此外，当我加载页面时，我可以看到angular.js文件在main.js.Hey之后加载，非常感谢。这很有道理。我删除了优先级并为angular添加了exports属性。现在我似乎得到了angularRoute和mainApp的超时错误。AngularRoute似乎没有在角度文件之后加载。我的依赖关系有问题吗？从你的问题中我看不出有什么问题。当您检查浏览器发出的网络请求时，是否下载了
angularRoute
和
mainApp
的正确内容？否。它加载main.js，然后加载angular.js并停止。我还为angularRoute添加了exports属性。不管怎样，我都试过了。两次错误都相同。如果作为
mainApp
加载的模块与“This is my app.js”引用的模块相同，则不需要为其配置
shim
，因为您使用
define
来定义它。这可以解释你正在经历的一些问题。是的，我做到了。但奇怪的事情发生了。App.js似乎是在加载之前加载的。这真的很奇怪，正如我在app.js中的define标签中提到的。对于angularRoute，同样的早期问题仍然存在。只是没有加载。不过，所有其他模块似乎都在加载。这是很奇怪的行为。可能其他一些文件被导入到其他地方，导致了一些问题。