AngularJS加载OpenLayers指令时出现$injector:modulerr模块错误

兄弟，我太懂这种$injector:modulerr的崩溃感了——这种错误90%都是模块依赖的加载环节出了问题，咱们对着你的代码一步步排查：

1. 先确认脚本引入顺序是否正确 #

AngularJS的模块依赖加载有严格顺序，你得按这个优先级引入脚本，不然Angular找不到依赖的模块：

• 第一步：引入AngularJS核心库
• 第二步：引入OpenLayers的核心JS文件
• 第三步：引入openlayers-directive的脚本
• 第四步：引入你自己写的应用脚本（就是定义MapApp和MapController的那个JS）

举个正确的引入示例：

<script src="angular.min.js"></script>
<script src="ol.js"></script>
<script src="openlayers-directive.min.js"></script>
<script src="你的app脚本路径.js"></script>

2. 检查HTML中是否正确挂载了控制器 #

你的代码里定义了MapController，但HTML片段里没看到挂载这个控制器的代码，Angular没法把控制器和视图绑定起来，自然加载不了地图。你需要在包含OpenLayers指令的元素上加上ng-controller，比如：

<body ng-app="MapApp">
    <div ng-controller="MapController">
        <!-- OpenLayers指令要放在控制器作用域内 -->
        <openlayers ol-center="center"></openlayers>
    </div>
</body>

3. 确认openlayers-directive的模块名称是否匹配 #

你代码里写的["openlayers-directive"]是对的，但要确保你引入的directive版本确实用的这个模块名——有些非常旧的版本可能模块名不一样，不过最新的官方版本都是这个，这点大概率没问题，但还是可以核对一下directive的本地文档。

4. 排查拼写错误 #

仔细检查这些地方有没有大小写或者拼写错误：

• 模块名MapApp在ng-app和JS定义里是否一致
• 控制器名MapController在JS和ng-controller里是否一致
• OpenLayers指令标签<openlayers>有没有写错（比如少写字母）

修正后的完整示例 #

JS代码（和你原来的一致，确保脚本顺序正确）：

var app = angular.module("MapApp", ["openlayers-directive"]);
app.controller('MapController', ['$scope', function MapController($scope){
    angular.extend($scope, {
        center:{
            lat: 40.060620,
            lon: -77.523182,
            zoom: 17
        }
    });
}]);

HTML完整代码：

<!DOCTYPE html>
<html lang="en" ng-app="MapApp">
<head>
    <meta charset="UTF-8">
    <title>Map App</title>
    <!-- 按顺序引入脚本 -->
    <script src="angular.min.js"></script>
    <script src="ol.js"></script>
    <script src="openlayers-directive.min.js"></script>
    <script src="app.js"></script>
    <!-- 引入OpenLayers的CSS，不然地图样式会乱 -->
    <link rel="stylesheet" href="ol.css">
</head>
<body ng-controller="MapController">
    <openlayers ol-center="center" style="width: 100%; height: 500px;"></openlayers>
</body>
</html>

另外别忘了引入OpenLayers的CSS文件，不然地图的样式会错乱，这也是容易忽略的小细节。

内容的提问来源于stack exchange，提问作者Carson