CODEWITHSUNDEEP
javascriptangularjsd3.jsheatmap
alamba
alamba

Reputation: 117

Uncaught Error: [$injector:modulerr] - Heatmap using d3 and AngularJS

I am new to angularjs and trying to build an app which utilises heat-maps. I am trying to do this with d3. Following are my code snippets and the error that I am getting. I would appreciate if someone can point me in the right direction please. Thanks!

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

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>

I am getting this error as of now. Error in browser

Upvotes: 1

Views: 231

Answers (2)

Vivek
Vivek

Reputation: 13238

Rename your module to myApp. You do not have controller defined. Define calHeatmap controller in the script.

Upvotes: 1

Pankaj Parkar
Pankaj Parkar

Reputation: 136144

While compiling page in angular, it searches for myApp as you wrote that in ng-app directive, as it is not available there angular is is throwing $moduler exception

As you are using calHeatmap as module, you should have 

ng-app="calHeatmap"

Upvotes: 0

Related Questions