使用带有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

好吧，仅供参考我的最终解决方案。 安格布里尔的评论 让我朝着正确的方向前进。

就像我说的 ，我正在使用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

Answer 2

对不起，这个答案只会包含文字，因为你的代码对于一个小例子来说太大了。

我建议编写一个使用head.js来加载特定上下文所需库的指令。 人们还可以想到一个openLayers这种方式初始化openLayers的指令。

我猜你的错误是一个计时问题，因为require.js和angular.js模块加载不同步 - 更确切地说，它们之间似乎根本没有同步。

更新
重复我的评论，这最终有助于领导OP朝着正确的方向发展：

你必须决定哪个框架给出基调。 如果您使用requireJS，则需要手动执行所有操作和引导角度。 （从index.html中删除ng-app =“”）并在requirejs完成后执行`angular.bootstrap（）'。 所以最有可能的问题是角度开始得太早。