1
I’m new to these technologies and I’m trying to make an http call (get and post) via html but it’s giving error, I’ve seen several topics here and elsewhere but I can’t make it work. Someone can help me?
my index.html
<html ng-app="nodeApp">
<head>
<meta charset="utf-8">
<title>Node App</title>
<link rel="stylesheet" type="text/css" href="libs/bootstrap/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/app.css">
<script src="libs/angular/angular.js"></script>
<script src="src/js/app.js"></script>
<script src="src/js/controllers/nodeAppCtrl.js"></script>
</head>
<body ng-controller="nodeAppCtrl">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"
ng-model="filtroResult">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="jumbotron">
<input ng-blur="onBlur(formAdd.name)" class="form-control" type="text" placeholder="name" ng-model="formAdd.name" style="margin-bottom: 10px">
<input class="form-control" type="text" placeholder="capital" ng-model="formAdd.capital"
style="margin-bottom: 10px">
<div style="width: 50%; margin-left: auto; margin-right: auto">
<button class="form-control btn btn-primary" ng-click="adicionar(formAdd)">Adicionar</button>
</div>
</div>
<div class="jumbotron">
<table class="table table-striped">
<tr>
<th>Name</th>
<th>Capital</th>
</tr>
<tr ng-repeat="name in names | filter:filtroResult">
<td>{{name.name}}</td>
<td>{{name.capital}}</td>
</tr>
</table>
</div>
</body>
</html>
my index.js
var http = require('http');
var express = require('express');
var port = process.env.PORT || 3065;
var app = express();
var appRoutes = require('./routes/appRoutes');
var mongoose = require('mongoose');
var bodyParser = require('body-parser');
app.use(function (req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization, sid");
res.header("Acces-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT");
next();
});
mongoose.connect('mongodb://localhost/meanDb', { useNewUrlParser: true });
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use('/', appRoutes);
http.createServer(app).listen(port);
console.log("Backend running on port:", port);
my appRoutes.js
var express = require('express');
var router = express.Router();
var Country = require('../models/dataSchema');
router.post('/create', (req, res) => {
console.log("ROUTER POST")
var newCountry = new Country({
name: req.body.name,
capital: req.body.capital
});
newCountry.save((err, country) => {
if (err) {
res.status(500).json({ errmsg: err });
} else {
res.status(200).json({ msg: country });
}
});
});
router.get('/read', (req, res, next) => {
console.log("GET ROUTES")
Country.find({}, (err, countries) => {
if (err) {
res.status(500).json({ errmsg: err });
} else {
res.status(200).json({ msg: countries });
}
});
});
router.put('/update', (req, res, next) => {
Country.findById(req.body._id, (err, country) => {
if (err) {
res.status(500).json({ errmsg: err });
} else {
country.name = req.body.name;
country.capital = req.body.capital;
country.save((err, country) => {
if (err) {
res.status(500).json({ errmsg: err });
} else {
res.status(200).json({ msg: country });
}
});
}
});
});
router.delete('/delete/:id', (req, res, next) => {
Country.findOneAndRemove({ _id: req.params.id }, (err, country) => {
if (err) {
res.status(500).json({ errmsg: err });
} else {
res.status(200).json({ msg: country });
}
});
});
module.exports = router;
my nodeAppCtrl.js
angular.module("nodeApp").controller("nodeAppCtrl", function ($scope, $http) {
$scope.app = "node app";
$scope.names = [{name:"Brazil",capital:"Brasilia"},
{name:"Pernambuco", capital:"Recife"}];
$scope.status = "";
$scope.onBlur = function(campo){
if(campo.toUpperCase == "brazil".toUpperCase || campo.toUpperCase == "brasil".toUpperCase){
$scope.formAdd.capital = "Brasilia"
}else if(campo == ""){
delete $scope.formAdd.capital
}
}
$scope.adicionar = function (request) {
$http.post('localhost:3065/create', request)
.then(function (response) {
$scope.status = "sucesso";
}).catch(function (err) {
$scope.status = "error";
console.log(err);
});
};
});
My respective class to Country
var mongoose = require('mongoose');
var countrySchema = mongoose.Schema({
name: { type: String },
capital: { type: String }
});
module.exports = mongoose.model('country', countrySchema);
When I click the button it calls the $Scope.add method and always falls in the catch, what I realized is that it does not enter my Router, already by the Postman it goes straight to the Router and works.
What happens that doesn’t work? Error appears?
– Costamilam
Where is the class code
Country?– Sergio
I edited the post with the error that happens and the respective source to Country.
– Davi Lindoso