使用带有RequireJS和AngularJS的OpenLayers

Question

我正在尝试运行使用AngularJS和RequireJS的应用程序.我在让OpenLayers lib在此设置中工作时遇到问题.

我在main.js中设置了主要的AMD模块:

require.config(
    {
        baseUrl: 'scripts',
        paths: {
            // Vendor modules
            angular: 'vendor/angular/angular',
            openLayers: 'vendor/openlayers-debug',
            other modules.....
        },
        shim: {
            angular: {
                exports: 'angular'
            },
            openLayers: {
                exports: 'OpenLayers'
            },
            other modules....
        }
    }
);

require(['openLayers',
        'angular',
        'app',
        'controllers/olMapController',
        'directives/olMap',
        other modules...
    ], function(OpenLayers) {
        return OpenLayers;
    }
);

然后在我用于初始化OpenLayers的角度控制器中,我试着指出openlayers-debug.js是一个依赖:

define(['openLayers'],
    function(OpenLayers) {
        controllers.controller('olMapController', ['$scope', function(scope) {
            console.log('Loaded olMapController. OpenLayers version: ' + OpenLayers.VERSION_NUMBER);
        }]);
    }
);

嗯,这不起作用.有时执行olMapController函数,但大部分都没有.然后控制台只显示一个错误说明:

错误:[ng:areq]参数'olMapController'不是函数,未定义

所以,我认为OpenLayers尚未完成加载,但不知何故需要认为它已经并继续加载依赖于OpenLayers的代码,在本例中是olMapController.然后它无法找到它的依赖关系,于是Angular返回此错误消息.或类似的东西...？有时发生的事情会使OpenLayers加载得很快,因为当它作为依赖项加载时它会出现.那是什么,我说不出来.

我遗漏了其他库和模块需要并定义以保持代码可读.我希望这个例子仍然可以理解.

有什么想法可以让openlayers加载好吗？当我将['openLayers']依赖项从olMapController中删除时,错误消息消失.

在此先感谢您的帮助.

最好的问候,Martijn Senden

Answer 1

好吧,仅供参考我的最终解决方案.该意见由angabriel在正确的方向设置我送行.

就像我说的,我正在使用RequireJS提供的domReady模块来引导Angular.这仍然被提前调用,因为当角度开始时OpenLayers尚未加载.RequireJS还在require.config中提供了一个回调属性.这是在加载所有依赖项时触发的函数.所以我使用该函数来要求角度引导模块.我的配置现在看起来像这样:

require.config(
    {
        baseUrl: 'scripts',
        paths: {
            // Vendor modules
            angular: 'vendor/angular/angular',
            domReady: 'vendor/domReady',
            openLayers: 'vendor/openlayers-debug',
            etcetera....

        },
        shim: {
            angular: {
                deps: ['jquery'],
                exports: 'angular'
            },
            openLayers: {
                exports: 'OpenLayers'
            },
        },
        deps: ['angular',
            'openLayers',
            'app',
            'domReady',
            'controllers/rootController',
            'controllers/olMapController',
            'directives/olMap'
        ],
        callback: function() {
            require(['bootstrap']);
        }
    }
);

而bootstrap模块看起来像这样:

define(['angular', 'domReady', 'app'], function(angular, domReady) {
    domReady(function() {
        angular.bootstrap(document, ['GRVP']);
    });
});

谢谢您的帮助.@angabriel:我赞成你的评论.接受评论作为答案是不可能的,是吗？你最初的答案并不是我的问题的答案,但评论帮了很多...

此致,Martijn