Javascript 未捕获错误：[$injector:modulerr]-使用d3和AngularJS的热图_Javascript_Angularjs_D3.js_Heatmap

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

javascript angularjs d3.js

Javascript 未捕获错误：[$injector:modulerr]-使用d3和AngularJS的热图,javascript,angularjs,d3.js,heatmap,Javascript,Angularjs,D3.js,Heatmap,我是angularjs的新手，正在尝试构建一个利用热图的应用程序。我正试着用d3做这件事。下面是我的代码片段和我得到的错误。如果有人能为我指出正确的方向，我将不胜感激。谢谢 result.html <html lang="en"> <style h2 {text-align:center;}></style> <body> <div ng-app="myApp"> <div class="containe

我是angularjs的新手，正在尝试构建一个利用热图的应用程序。我正试着用d3做这件事。下面是我的代码片段和我得到的错误。如果有人能为我指出正确的方向，我将不胜感激。谢谢

result.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);
            }
        };
});

“严格使用”；
var myApp=angular.module（'myApp.controllers'，[]）；
myApp.controller（'calHeatmap'，函数（$scope）{
var点=[]；
var max=0；
var宽度=840；
var高度=400；
var-len=200；
而(len--){
var val=Math.floor（Math.random（）*100）；
max=Math.max（max，val）；
变量点={
x:Math.floor（Math.random（）*宽度），
y:Math.floor（Math.random（）*高度），
值：val
};
点。推（点）；
}
//热图数据格式
$scope.passed_data={
马克斯：马克斯，
数据：点数
};
})
.directive（'heatMap'，function（）{
返回{
限制：'E'，
范围：{
数据：'='
},
模板：“”，
链接：功能（范围、元素、属性）{
scope.heatmaInstance=h337.create({
容器：ele.find（'div'）[0]
});
scope.heatmaInstance.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>


网上文章的病毒性

到现在为止，我收到了这个错误。

在angular中编译页面时，它会搜索

myApp

，正如您在

ng app

指令中所写的，因为angular在那里不可用，它正在抛出

$moduler异常

当您使用

calHeatmap

作为模块时，您应该

ng-app="calHeatmap"

将模块重命名为

myApp

。您没有定义控制器。在脚本中定义

calHeatmap

控制器。

我按照问题中编辑的代码所示那样做，这对错误没有影响。使用此变量myApp=angular.module（'myApp'，[]）；这就解决了错误！非常感谢。但是页面仍然是空的，地图也没有显示。