UsingOpenLayerswithRequireJSandAngularJS

3  

Sorry this answer will only contain text as your code is too big for a small example.

对不起,这个答案只包含文字,因为你的代码太大而不适用于一个小例子。

I would suggest to write a directive that utilizes head.js to load libraries you need at a specific context. One could also think of a directive that initializes openLayers this way.

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

I guess your error is a timing problem, because the require.js and angular.js module loading gets out of sync - more precisely there seems to be no sync at all between them.

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

update
To repeat my comment which lastly helped to lead the OP in the right direction:

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

You have to decide which framework gives the tone. If you go with requireJS, then require everything and bootstrap angular manually. (Remove ng-app="" from index.html) and do `angular.bootstrap()´ when requirejs has completed. So the problem most likely is, that angular starts too early.

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

5  

Well, just for reference my final solution. The comment by angabriel set me off in the right direction.

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

Like i said, I'm using the domReady module provided by RequireJS to bootstrap Angular. This is still being called to early, because OpenLayers isn't loaded yet when angular starts. RequireJS also provides a callback property in require.config. This is a function that is triggered when all the dependencies are loaded. So I used that function to require the angular bootstrap module. My config now looks like this:

就像我说的,我正在使用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']);
        }
    }
);

And the bootstrap module looks like this:

而bootstrap模块看起来像这样:

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

Thanks for the help. @angabriel: I upvoted your comment. It's not possible to accept a comment as an answer, is it? Your initial answer wasn't really the answer to my question, but the comment helped a lot...

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

Regards, Martijn