未捕获的错误：[$injector:modulerr] - 使用 d3 和 AngularJS 的热图答案

【问题标题】：Uncaught Error: [$injector:modulerr] - Heatmap using d3 and AngularJS未捕获的错误：[$injector:modulerr] - 使用 d3 和 AngularJS 的热图
【发布时间】：2015-12-04 15:12:52
【问题描述】：

我是 angularjs 的新手，正在尝试构建一个利用热图的应用程序。我正在尝试用 d3 来做到这一点。以下是我的代码 sn-ps 和我得到的错误。如果有人能指出我正确的方向，我将不胜感激。谢谢！

结果.html

<html lang="en">
<style h2  {text-align:center;}></style>
<body>
    <div ng-app="myApp">
        <div class="container">
        <div ng-controller="calHeatmap">
            <cal-heatmap config="passed_data"></cal-heatmap>
        </div>
    </div>
    </div>
</body>
</html>

calHeatmap.js

 'use strict';

var myApp = angular.module('myApp.controllers', []);

myApp.controller('calHeatmap', function ($scope) {

        var points = [];
            var max = 0;
            var width = 840;
            var height = 400;
            var len = 200;

            while (len--) {
                var val = Math.floor(Math.random()*100);
                max = Math.max(max, val);
                var point = {
                    x: Math.floor(Math.random()*width),
                    y: Math.floor(Math.random()*height),
                    value: val
                };
                points.push(point);
            }
            // heatmap data format
            $scope.passed_data = { 
                max: max, 
                data: points 
            };
    })
    .directive('heatMap', function(){
        return {
            restrict: 'E',
            scope: {
                data: '='
            },
            template: '<div container></div>',
            link: function(scope, ele, attr){
                scope.heatmapInstance = h337.create({
                  container: ele.find('div')[0]
                });
                scope.heatmapInstance.setData(scope.data);
            }
        };
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Virality of an Online Article</title>
<link rel="icon" href="http://getbootstrap.com/favicon.ico">
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script type="text/javascript" src="bower_components/d3/d3.js"></script>
<script type="text/javascript" src="bower_components/cal-heatmap-master/cal-heatmap.js"></script>
<script type="text/javascript" src="bower_components/cal-heatmap-master/cal-heatmap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="javascript/app.js"></script>
<script src="javascript/controllers/HomeController.js"></script>
<script src="javascript/controllers/calHeatmap.js"></script>
<script src="javascript/highchart-ng.js"></script>
</head>
<body ng-app="myApp">
<div class="container" ng-view="home"></div>
</body>
</html>

我现在收到此错误。

【问题讨论】：

标签： javascript angularjs d3.js heatmap

【解决方案1】：

将您的模块重命名为myApp。您没有定义控制器。在脚本中定义calHeatmap控制器。

【讨论】：

我按照我的问题中的编辑代码所示进行了操作，这对错误没有影响。
使用这个 var myApp = angular.module('myApp', []);
解决了错误！谢谢你。页面仍然是空的，地图也没有显示出来。

【解决方案2】：

在以 Angular 编译页面时，它会搜索 myApp，正如您在 ng-app 指令中所写的那样，因为它不可用，因此 Angular 正在抛出 $moduler exception

当你使用calHeatmap 作为模块时，你应该有

ng-app="calHeatmap"

【讨论】：