Passing json from Angular JS to Node JS

Question

I am trying to combine my front-end(Angular) and backend(Node) but some how front-end did not pass json to backend

Here is my html code with Angular-js

Index.html

<html>
<head>Testing
<script src = "angular.min.js" ></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope,$http) {
   $scope.submit= function(){
      var data = $.param({
        book: JSON.stringify({
            author: $scope.author,
            title : $scope.title,
            body : $scope.body
        })
      });
    console.log(data)
      $http.post("/", data).success(function(data, status) {
        console.log('Data posted successfully');
      })
   }
});
</script>
</head>

<body ng-app="myApp">    
  <div ng-controller="myCtrl">
    <form>
      Author:
      <input type="text" ng-model="author">
      <br>
      <br> Title:
      <input type="text" ng-model="title">
      <br>
      <br> Body:
      <input type="author" ng-model="body">
      <br>
      <br>
      <input type="submit" value="Submit" ng-click="submit()">
    </form>
  </div>  
</body>
</html>

My node Application is look like below.

Server.js

var express = require('express');
var bodyParser = require('body-parser');

var app = express();

app.use(bodyParser.urlencoded({ extended: true })); 
app.use(bodyParser.json());

app.get('/', function(req, res){
  res.sendFile(__dirname +'/index.html');
});

app.post('/', function(req,res,next){
    console.log(req.body)   
    res.status(200).send('Ok')
})

console.log('server running at 3000!')
app.listen(3000);

I am getting Index.html at my browser at'/' route but when i submit nothing is happening.

Thanks in advance

have u analyzed the data being sent? like use chrome dev tools network tab. Or is a request not being sent out in the first place? — Gilbert Nwaiwu
– Gilbert Nwaiwu, Commented Nov 24, 2016 at 9:44
In inspecting page it fails to load "angular.min.js" but I have put it in the same folder I don't know why it happend @GilbertNwaiwu — Abhishek Parikh
– Abhishek Parikh, Commented Nov 24, 2016 at 10:26
Yes. I've used its online version <script src = "ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js" ></script> — Abhishek Parikh
– Abhishek Parikh, Commented Nov 24, 2016 at 12:14
That was the exact problem. I've tried with "node-modules/angular/angular.min.js" and "angular.min.js" placing file on both location but it was not loading — Abhishek Parikh
– Abhishek Parikh, Commented Nov 24, 2016 at 12:16

Sunil Hirole · Accepted Answer · 2016-11-24 10:17:26Z

2

Can u try this

var data = {
  book: {            
    author: $scope.author,
    title : $scope.title,
    body : $scope.body
  }
}

$http.post("/", data).success(function(data, status) {
    console.log('Data posted successfully');
})

answered Nov 24, 2016 at 10:17

Sunil Hirole

2393 silver badges11 bronze badges

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

2 Comments

Abhishek Parikh Over a year ago

Problem I am facing is with res.status(200).send('Ok'). It is not sending OK @sunil

Abhishek Parikh Over a year ago

please help me to re route it

Collectives™ on Stack Overflow

Passing json from Angular JS to Node JS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related