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

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.

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

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"

Related

Cant bind .js file to main AngularJS file

I have two simple files: leads.html and leadsController.js. I want to have leadsController.js as a linked javaScript file in leads.html. When I link it using the following code <script src = "leadsController.js"></script> in my leads.html ... leads.html does not render properly.
However, when I include the contents of leadsController.js as a part of the code of leads.html it works.
Am I not linking the .js file correctly?
Below is what works and what doesn't.
I want this to work when connected to leadsController.js
Yes ... it's in the same directory.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app = "myApp" ng-controller = "myCtrl">
<h1>Hello, world!</h1>
<ul>
<li ng-repeat = "x in myData">{{ x.id }}</li>
</ul>
</div>
<script src = "leadsController.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
</body>
</html>
leadsController.js looks like this:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("https://clearmaze.net/test/newAdmin/leadsData.php").then(function (response) {
$scope.myData = response.data.records;
});
});
This works:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app = "myApp" ng-controller = "myCtrl">
<h1>Hello, world!</h1>
<ul>
<li ng-repeat = "x in myData">{{ x.id }}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("leadsData.php").then(function (response) {
$scope.myData = response.data.records;
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
</body>
</html>
try absolute uri of the script file. eg if ur script is in /scripts folder then
src="~/scripts/leadsController.js" that should work.
Try <script src = "./leadsController.js"></script>
UPDATE: typo. I didn't upload the file to the server ... facepalm. Thanks all for your suggestions as they lead me to figure that out in the first place.

Add or remove column not working in handsontable

I'm experimenting with Handsontable add and remove column feature. But it is not working.
Here is my code :-
My index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.35.0/handsontable.full.js"></script>
<!--<link rel="stylesheet" type="text/css" href="css/style.css">-->
<script type="text/javascript" src="js/app.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.35.0/handsontable.full.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ngHandsontable/0.13.0/ngHandsontable.js"></script>
<!--<script type="text/javascript" src="data/datafactory.js"></script>-->
</head>
<body MainCtrl as ctrl>
<hot-table col-headers="true" datarows="ctrl.data">
<hot-column ng-repeat="column in ctrl.columns" data="{{column.data}}" title="column.title" read-only="column.readOnly"></hot-column>
</hot-table>
<button ng-click="ctrl.addColumn()">Add column</button>
<button ng-click="ctrl.removeColumn()">Remove column</button>
</body>
</html>
My app.js
function MainCtrl() {
var items = [[]];
this.data = items;
this.columns = [
{
data: 'id',
title: 'ID',
readOnly: true
},
{
data: 'price',
title: 'Price',
readOnly: false
}
];
this.addColumn = function() {
this.columns.push({});
};
this.removeColumn = function() {
this.columns.pop();
};
}
angular
.module('app', ['ngHandsontable'])
.controller('MainCtrl', MainCtrl);
MainCtrl.$inject = [];
When I run the code it doesn't work and doesn't allow to add or remove column. I am new to both angular and front-end design. So seeking help here.
I believe you need to order your <script> tags properly - your code should go at the end (I imagine your code is in js/app.js):
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.35.0/handsontable.full.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.35.0/handsontable.full.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ngHandsontable/0.13.0/ngHandsontable.js"></script>
<script type="text/javascript" src="js/app.js"></script>
Also try using arrow functions where you can instead of function()...
Or set up:
let ctrl = this;
You may get in trouble using this the way you do it. Scope of this can and sometimes will change.
Here's example of your code working in JS fiddle:
https://jsfiddle.net/pegla/b6rj93cg/2/

AngularJs - Why file input pop up is not coming?

I am using ngimgCropfor uploading my image but when I click on browse the pop up box does not appear. Whats wrong with it?
My controller
categoriesControllers.controller('PartialsController', ['$scope', '$http', '$rootScope', '$routeParams', '$ngImgCrop','$location', function ($scope, $http, $rootScope, $routeParams, $ngImgCrop, $location) { $scope.myImage='';
$scope.myCroppedImage='';
var handleFileSelect=function(evt) {
var file=evt.currentTarget.files[0];
var reader = new FileReader();
reader.onload = function (evt) {
$scope.$apply(function($scope){
$scope.myImage=evt.target.result;
});
};
reader.readAsDataURL(file);
};
angular.element(document.querySelector('#fileInput')).on('change',handleFileSelect);}]);
My app.js
var myApp = angular.module('myApp', [
'ngRoute', // we are telling angular that we are using ngRouting feature that enables deeplinking first
'vsGoogleAutocomplete',
'categoriesControllers',
'ngImgCrop' ]);
My createbusiness file
<div class="form-group form-group-icon-left">
<div>Select an image file: <input type="file" id="fileInput" /></div>
<div class="cropArea">
<img-crop image="myImage" result-image="myCroppedImage"></img-crop>
</div>
<div>Cropped Image:</div>
<div><img ng-src="{{myCroppedImage}}" /></div>
</div>
and in last my index file
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>EventOber | Every event to be rated</title>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta name="keywords" content="Salons, Stylsts, Weave Suppliers, Lashes" />
<meta name="description" content="Discuss Salons, Stylists, Weave Suppliers, Lashes that you know">
<meta name="author" content="Centangle">
<link rel='shortcut icon' type='image/x-icon' href='/images/favicon.ico' />
<meta name='viewport' content="width=device-width, initial-scale=1.0">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600' rel='stylesheet' type='text/css'>
<link href="css/angular-input-stars.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/mystyles.css">
<!--Angular files -->
</head>
<body>
<div id="fb-root"></div>
<div class="global-wrap">
<div ng-view></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-animate.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap-tpls.js"></script>
<!-- <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>-->
<script src="js/ng-img-crop.js" type="text/javascript"></script>
<link href="css/ng-img-crop.css" rel="stylesheet" type="text/css"/>
<script src="js/vs-google-autocomplete.min.js" type="text/javascript"></script>
<script src="js/angular-input-stars.js" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>
<script src="js/controllers.js" type="text/javascript"></script>
<script src="https://code.angularjs.org/1.5.8/angular-cookies.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/slimmenu.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script src="js/bootstrap-timepicker.js"></script>
<script src="js/nicescroll.js"></script>
<script src="js/dropit.js"></script>
<script src="js/ionrangeslider.js"></script>
<script src="js/icheck.js"></script>
<script src="js/fotorama.js"></script>
<script src="js/typeahead.js"></script>
<script src="js/card-payment.js"></script>
<script src="js/magnific.js"></script>
<script src="js/owl-carousel.js"></script>
<script src="js/fitvids.js"></script>
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<!--Include map api key after jquery -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBN1h8nKcMtDVt2iboiKpmMFvVjxTsnrOI&libraries=places"></script>
<!-- include map api key after jquery -->
</body>
</html>
I am getting this error when I write ngImgcrop in controller function
Error: [$injector:unpr] http://errors.angularjs.org/1.4.4/$injector/unpr?p0=%24ngImgCropProvider%20%3C-%20%24ngImgCrop%20%3C-%20PartialsController
I am following this demo Here
The readme of ngImgCrop states, that you should include ngImgCrop into application dependencies rather than to controller dependencies.
This should resolve the angular unknown provider error.
Check that Image Crop is a directive for AngularJS and you are getting error:
Error: $injector:unpr Unknown Provider
Unknown provider: $ngImgCropProvider <- $ngImgCrop <- PartialsController
Because you are trying to inject $ngImgCrop in your PartialsController and that service do not exist.
PartialsController:
Remove that $ngImgCrop dependency and should work:
categoriesControllers.controller('PartialsController', ['$scope', '$http', '$rootScope', '$routeParams','$location', function ($scope, $http, $rootScope, $routeParams, $location) {
$scope.myImage='';
$scope.myCroppedImage='';
var handleFileSelect=function(evt) {
var file=evt.currentTarget.files[0];
var reader = new FileReader();
reader.onload = function (evt) {
$scope.$apply(function($scope){
$scope.myImage=evt.target.result;
});
};
reader.readAsDataURL(file);
};
angular.element(document.querySelector('#fileInput')).on('change',handleFileSelect);
}]);

an Easy Angular code not working

I am new in Angular.js, I am watching pluralsight Angular tutorial, I did what the teacher told on that videos:
<!Doctype>
<html lang="en" ng-app>
<head>
</head>
<body>
<h1 ng-controller="helloWorldCtrl">{{helloMessage}}</h1>
<script href="angular.min.js"></script>
<script type="text/javascript">
function helloWorldCtrl ($scope) {
$scope.helloMessage = "Hello World!";
}
</script>
</body>
</html>
The h1 should be Hello World! but it is {{helloMessage}}
I am using Latest version of Firefox on windows8 with latest version of Angular
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!Doctype>
<html lang="en" ng-app>
<head>
</head>
<body>
<h1 ng-controller="helloWorldCtrl">{{helloMessage}}</h1>
<script href="angular.min.js"></script>
<script type="text/javascript">
function helloWorldCtrl ($scope) {
$scope.helloMessage = "Hello World!";
}
</script>
</body>
</html>
Above code works without any issue so it is clear whatever problem is with your version issue. Use nuget to resolve the issue in case you are using Visual studio.
The syntax has changed, you have to add ng-app to the body part, and change the script src, the following code works.
<body ng-app>
<h1 ng-controller="helloWorldCtrl">{{helloMessage}}</h1>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script type="text/javascript">
function helloWorldCtrl ($scope) {
$scope.helloMessage = "Hello World!";
}
</script>
</body>
You should a module in your script.
Hope the following code helps you.
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.12/angular.js" data-semver="1.3.12"> </script>
<script src="app.js"></script>
</head>
<body>
<h1 ng-controller="MainCtrl">Hello {{name}}!</h1>
<script>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
</script>
</body>
</html>
Here is the code Plunker:-
<!DOCTYPE html>
<html data-ng-app="one">
<head>
<script data-require="angular.js#*" data-semver="1.4.0-beta.3" src="https://code.angularjs.org/1.4.0-beta.3/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1 ng-controller="helloWorldCtrl">{{helloMessage}}</h1>
<script type="text/javascript">
var app=angular.module("one",[]);
app.controller("helloWorldCtrl",function ($scope) {
$scope.helloMessage = "Hello World!";
});
</script>
</body>
</html>
I assume there is version problem if you are using new version of angular above 1.2.0 it is not allowed to use global controller in that version Source

I can't get datas from json file with angula.js

I have theses codes:
index.html:
<!DOCTYPE html>
<html lang="en" ng-app="pizzasApp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="bootstrap-3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap-3.2.0/css/bootstrap-theme.min.css">
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="bootstrap-3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="angular-route.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="configure.js"></script>
<title>New Web Project</title>
</head>
<body>
<div ng-view></div>
</body>
</html>
pizza-list.html:
<div ng-repeat="pizza in pizzas">
{{pizza.name}}
</div>
app.js:
(function(){
var pizzasApp = angular.module('pizzasApp',['ngRoute','app']);
pizzasApp.config(['$routeProvider', function($routeProvider){
$routeProvider.
when('/pizzas',{
templateUrl: 'pizza-list.html',
controller: 'PizzasController'
}).
otherwise({
redirecTo: '/pizzas'
});
}]);
})();
configure.js:
(function(){
var app = angular.module('app',[]);
app.controller('PizzasController',['$scope','$http',function($scope,$http){
$http.get('http://162.250.78.47/api/pizzas').success(function(data){
$scope.pizzas = data;
});
}]);
})();
The problem is that I can't get the datas from json file. I know that the problem isn't the json file because I can get the datas with other way but without angular-route. But I'm interested in that.
This works: http://plnkr.co/edit/AsAPhINnDmBToTRFmgZf?p=preview
It looks like .otherwise is not doing its job when there is just a '/'. I hacked around it with:
$routeProvider.when('/pizzas',{
templateUrl: 'pizza-list.html',
controller: 'PizzasController'
}).when('/',{
redirectTo: '/pizzas'
}).otherwise({
redirecTo: '/pizzas'
});
Edit: I found the actual error, there were a typo in redirectTo. It was spelled redirecTo.

Categories