I am new to JavaScript and this marks my first inquiry on StackOverflow. Therefore, any feedback or criticism is appreciated.
Here you can find the AngularJS Flowchart project on GitHub. There is also another discussion on StackOverflow that explains how to utilize a factory as a data retriever using $http.
My goal is to generate data for the chart by implementing an Angular factory that returns a $http function. This $http function communicates with a PHP service which retrieves data from a database. I have confirmed the functionality of the service using jsonlint and it works correctly. The directory of the service has been verified relative to the HTML file.
I copied the "factory" code from another StackOverflow question and applied it to app.js in the AngularJS Flowchart GitHub project.
The issue I am facing is that the Chrome console keeps throwing an error that I am unable to comprehend. Data is not being retrieved. The error displayed is "TypeError: Cannot read property 'getData' of undefined".
This is the modified version of app.js:
//
// Define the 'app' module.
//
angular.module('app', ['flowChart', ])
//
// Simple service to create a prompt.
//
.factory('prompt', function () {
return prompt;
})
//
// Application controller.
//
.controller('AppCtrl', ['$scope', 'prompt', function AppCtrl ($scope, prompt, dataFactory) {
// Key codes for various keys.
var deleteKeyCode = 46;
var ctrlKeyCode = 65;
var ctrlDown = false;
var aKeyCode = 17;
var escKeyCode = 27;
var nextNodeID = 10;
$scope.keyDown = function (evt) {
if (evt.keyCode === ctrlKeyCode) {
ctrlDown = true;
evt.stopPropagation();
evt.preventDefault();
}
};
$scope.keyUp = function (evt) {
if (evt.keyCode === deleteKeyCode) {
$scope.chartViewModel.deleteSelected();
}
if (evt.keyCode == aKeyCode && ctrlDown) {
$scope.chartViewModel.selectAll();
}
if (evt.keyCode == escKeyCode) {
$scope.chartViewModel.deselectAll();
}
if (evt.keyCode === ctrlKeyCode) {
ctrlDown = false;
evt.stopPropagation();
evt.preventDefault();
}
};
$scope.addNewNode = function () {
var nodeName = prompt("Enter a task name:", "New Task");
if (!nodeName) {
return;
}
var newNodeDataModel = {
name: nodeName,
id: nextNodeID++,
x: 0,
y: 0,
inputConnectors: [
{
name: "Pre"
}
],
outputConnectors: [
{
name: "Sub"
}
],
};
$scope.chartViewModel.addNode(newNodeDataModel);
};
$scope.addNewInputConnector = function () {
var connectorName = prompt("Enter a connector name:", "New connector");
if (!connectorName) {
return;
}
var selectedNodes = $scope.chartViewModel.getSelectedNodes();
for (var i = 0; i < selectedNodes.length; ++i) {
var node = selectedNodes[i];
node.addInputConnector({
name: connectorName,
});
}
};
$scope.addNewOutputConnector = function () {
var connectorName = prompt("Enter a connector name:", "New connector");
if (!connectorName) {
return;
}
var selectedNodes = $scope.chartViewModel.getSelectedNodes();
for (var i = 0; i < selectedNodes.length; ++i) {
var node = selectedNodes[i];
node.addOutputConnector({
name: connectorName,
});
}
};
$scope.deleteSelected = function () {
$scope.chartViewModel.deleteSelected();
};
var chartDataModel = {};
var handleSuccess = function(data, status){
chartDataModel = data;
console.log(chartDataModel);
};
dataFactory.getData().success(handleSuccess);
$scope.chartViewModel = new flowchart.ChartViewModel(chartDataModel);
}])
.factory('dataFactory', function($http){
return {
getData : function(){
return $http.post("chart-data-retrieve.php");
}
};
});
The code segments added by me but are not functioning properly are:
// Setup the data-model for the chart.
var chartDataModel = {};
var handleSuccess = function(data, status){
chartDataModel = data;
console.log(chartDataModel);
};
dataFactory.getData().success(handleSuccess);
and
.factory('dataFactory', function($http){
return {
getData : function(){
return $http.post("chart-data-retrieve.php");
}
};
});
I would greatly appreciate any assistance. Thank you.