I have been trying to learn following through the tutorial "CRUD app with AngularJs, Node js, express js, Bootstrap, EJS, MySQL" by Shiva Adhikari when I realized that I was stuck at part 5 of the tutorial.
My problem
On submitting the form to create a product category, the browser console reports the following error
My code that is called when the form is submitted
angular.module("productCategoryModule")
.factory("productCategoryService", productCategoryService);
productCategoryService.$inject = ['$http'];
function productCategoryService($http) {
return {
createProductCategory: function(productCategory) {
return $http.post('/createProductCategory', {
categoryName: productCategory.categoryName,
categoryDetails: productCategory.categoryDetails
});
/* return $http({
method: 'POST',
url: '/createProductCategory',
data: {
'categoryName' : productCategory.categoryName,
'categoryDetails' : productCategory.categoryDetails
},
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
});*/
},
getAllProductCategories: function() {
return $http.get('/getAllProductCategory');
}
};
}
html code
<% include layout %>
<div class="panel panel-info">
<div class="panel-heading">
<h1 class="panel-title"> <%=title %></h1>
</div>
<div class="panel-body">
<div class="container" data-ng-cloak data-ng-app="productCategoryModule" data-ng-controller="productCategoryController">
<form class="navbar-form navbar-left" role="search" method="post" name="formProductCategory">
<div class="row">
<div class="form-group">
<label for="productCategory">Product Category Name</label>
<input type="text" class="form-control" placeholder="Please Enter Product Category" name="productCategory" id="productCategory" ng-model="productCategory.categoryName" style="width:100%" required>
</div>
</div>
<div class="row">
<div class="form-group">
<label for="productDetails">Product Category Details</label>
<textarea class="form-control" placeholder="Please Enter Product Category Details" name="productDetails" id="productDetails" rows="5" cols="30" ng-model="productCategory.categoryDetails" style="width:100%" required></textarea>
</div>
</div>
<div> </div>
<div class="row">
<div class="form-group" style="padding-left:40%;">
<button type="button" class="btn btn-primary" ng-click="createProductCategory(productCategory)">Create Product Category</button>
</div>
</div>
</form>
</div>
</div>
</div>
<script src="/bower_components/angular/angular.js"></script>
<script src="../../js/app/productCategory/productCategoryModule.js"></script>
<script src="../../js/app/productCategory/productCategoryService.js"></script>
<script src="../../js/app/productCategory/productCategoryController.js" </script>
productCategoryRouteConfigurator.js
function productCategoryRouteConfig(app) {
this.app = app;
this.routeTable = [];
this.init();
}
productCategoryRouteConfig.prototype.init = function () {
var self = this;
this.addRoutes();
this.processRoutes()
}
productCategoryRouteConfig.prototype.processRoutes = function () {
var self = this;
self.routeTable.forEach(function (route) {
if (route.requestType == 'get') {
self.app.get(route.requestUrl, route.callbackFunction);
} else if (route.requestType == 'post') {
self.app.get(route.requestUrl, route.callbackFunction);
} else if (route.requestType == 'delete') {
}
})
}
productCategoryRouteConfig.prototype.addRoutes = function () {
var self = this;
self.routeTable.push({
requestType: 'get',
requestUrl: '/createProductCategory',
callbackFunction: function (request, response) {
response.render('createProductCategory', {
title: "Create a Product Category"
});
}
});
self.routeTable.push({
requestType: 'post',
requestUrl: '/createProductCategory',
callbackFunction: function (request, response) {
var productCategoryDao = require('../model/dao/productCategoryDao.js');
console.log(request.body)
productCategoryDao.productCategoryDao.createProductCategory(request.body, function (status) {
response.json(status);
console.log(status);
});
}
});
self.routeTable.push({
requestType: 'get',
requestUrl: '/viewProductCategory',
callbackFunction: function (request, response) {
response.render('viewProductCategory', {
title: "View Product Category"
});
}
});
self.routeTable.push({
requestType: 'get',
requestUrl: '/createProduct',
callbackFunction: function (request, response) {
response.render('createProduct', {
title: "Create a Product"
});
}
});
self.routeTable.push({
requestType: 'get',
requestUrl: '/viewProduct',
callbackFunction: function (request, response) {
response.render('viewProduct', {
title: "View a Product"
});
}
});
self.routeTable.push({
requestType: 'get',
requestUrl: '/getAllProductCategory',
callbackFunction: function (request, response) {
var productCategoryDao = require('../model/dao/productCategoryDao.js');
productCategoryDao.productCategoryDao.getAllProductCategory (function (productCategories) {
console.log(productCategories);
response.json({ productCategories : productCategories })
});
}
});
self.routeTable.push({
requestType: 'get',
requestUrl: '/editProductCategory/:productCategoryId',
callbackFunction: function (request, response) {
response.render('editProductCategory', {
title: "Edit Product Category"
});
}
});
}
module.exports = productCategoryRouteConfig;
I have tried both implementation of $http and tried CORS solution.
The following posts and suggested posts were referred before creating this question as they didn't solved my problem: SO post 1, SO post 2, SO post 3, SO post 4
