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：无法读取属性＆＃39;模块＆＃39; of undefined directives.js：14

未捕获的TypeError：无法读取属性＆＃39;模块＆＃39; of undefined services.js：5

这似乎发生在这个特定的行

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

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

任何想法的家伙？需要快速帮助！谢谢！

Answer 1

查看Angular的来源，我没有看到它调用RequireJS'define的任何地方所以你需要一个垫片。将其添加到shim配置中：

angular: {
    exports: "angular"
}

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

Answer 2

您的设置可能存在两个问题：
1.您在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/

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

2 个答案: