使用帶有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（）'。 所以最有可能的問題是角度開始得太早。