I have an AngularJS
app which has a mailer script written in PHP
. I'm trying to refer to the PHP file via the angular
$http
service but I keep getting a 404 error when I try to use it via my contact form, in the corresponding controller, like so:
angular.module('myModule')
.controller('contactUsController', ['$scope', '$http', function ($scope, $http) {
$scope.formData = {};
$scope.submitted = false;
$scope.submit = function(contactform) {
console.log('Form data', $scope.formData);
$scope.submitted = false;
$scope.submitButtonDisabled = true;
if (contactform.$valid) {
$http({
method : 'POST',
url : "app/process.php",
data : $.param($scope.formData),
headers : { 'Content-Type': 'application/x-www-form-urlencoded' }
}).success(function(data){
console.log(data);
if (!data.success) {
// if not successful, bind errors to error variables
$scope.errorName = data.errors.name;
$scope.errorEmail = data.errors.email;
$scope.errorTextarea = data.errors.message;
$scope.submissionMessage = "Sorry. Error sending message. Please try again.";
$scope.submission = true; //shows the error message
} else {
// if successful, bind success message to message
$scope.formData = {}; // form fields are emptied with this line
$scope.submissionMessage = "Thank you! Your message has been sent successfully.";
$scope.submitted = true; //shows the success message
}
});
} else {
}
}
}]);
So each time I invoke the submit()
function by pressing the send button, the browser complains like so:
I've been searching around for an answer, but I haven't found one that could help me out.
I am using npm start
to run my app. My project structure is as shown in the image below:
Any idea what could be going wrong? Any help is appreciated.