AngularJS $http.post() returns 404

Question

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>
              &nbsp;&nbsp;

              <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>&nbsp;</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

can you show the routes in node.js ? I feel your method is not matching there — notnotundefined
– notnotundefined, Commented Mar 17, 2016 at 7:45

Daniel Netto · Accepted Answer · 2016-03-21 10:00:54Z

1

The error I got was due to slight misconfiguration in my productCategoryRouteConfigurator.js

I used

else if (route.requestType == 'post') {
    self.app.get(route.requestUrl, route.callbackFunction);
}

instead of

else if (route.requestType == 'post') {
    self.app.post(route.requestUrl, route.callbackFunction);
}

This has solved my problem.

Thankyou @redA for pointing that there may be problem in route file.

answered Mar 21, 2016 at 10:00

Daniel Netto

3855 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS $http.post() returns 404

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related