將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忽略此字段，因為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 ： angularAMD