I have created an AngularJS webapp that uses node, loopback, ui-router, and bootstrap.
I am building my app using Brackets and when I launch their live preview (http://127.0.0.1:53490/index.html). The page loads all elements but does not populate the proper database information. I know that the loopback api and mysql database connection works because I can push and pull data from the table in the loopback explorer. The issue seems to be in the connection between my webapp and loopback.
The loopback api listens at localhost:3000 and the mysql port is 3306.
I have also seen that people can load their webapp by browsing to localhost:3000 alone, but for me I just see the runtime of the server.
Specifically, the error I am seeing is this: GET http://127.0.0.1:53490/api/se_users 404 (Not Found)
I also tried to debug by throwing in a breakpoint at the 'getse_users()' point in the users.js code. This showed that the error appears in the angular.js file at line 10460 at 'xhr.onload=function requestLoaded()'
Here is my code:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>User Management Tool</title>
<link href="bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="client/js/lb-services.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="userApp">
<!-- NAVIGATION -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">User Management Tool</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a ui-sref='home'>All Users <span class="sr-only">(current)</span></a></li>
<li><a ui-sref="create">Create a User</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>User Admin</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="container">
<div ui-view></div>
</div>
</body>
</html>
app.js
angular.module('userApp', ['ui.router', 'lbServices'])
.controller('UserController', ['$scope', '$state', 'Se_user', function ($scope, $state, Se_user) {
$scope.users = [];
function getse_users() {
Se_user
.find()
.$promise
.then(function (results) {
$scope.users = results;
});
}
getse_users();
$scope.addSe_user = function () {
Se_user
.create($scope.newUser)
.$promise
.then(function (user) {
$scope.newUser = '';
$scope.userForm.content.$setPristine();
$('.focus').focus();
getse_users();
});
};
$scope.removeUser = function (item) {
Se_user
.deleteById(item)
.$promise
.then(function () {
getse_users();
});
};
}])
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('');
$stateProvider
.state('home', {
url: '',
templateUrl: 'partial-home.html',
controller: 'UserController'
})
.state('create', {
url: '/create',
templateUrl: 'partial-create.html',
controller: 'UserController'
});
// .state('edit',{
// url:'/edit',
// templateUrl:'partial-edit.html',
// contoller: 'UserDetailController'
// })
}]);
partial-home.html
<div class="container-fluid">
<div class="row">
<div class="col-md-9">
<h1>All Users</h1>
</div>
<br>
<div class="col-md-3">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</div><!--/.container-fluid -->
<div class="container-fluid" ng-controller="UserController as users">
<table class="table table-hover">
<thead>
<tr>
<th>EID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Active</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
<td>{{user.content}}</td>
<td>{{user.first_nm}}</td>
<td>{{user.last_nm}}</td>
<td>{{user.active}}</td>
</tr>
</tbody>
</table>
</div>
<div ui-view></div>
user.js
angular.module('userApp')
.controller('UserController', ['$scope', '$state', 'Se_user', function($scope, $state, Se_user) {
$scope.users = [];
function getSe_users() {
Se_user
.find()
.$promise
.then(function(results){
$scope.users = results;
});
}
getSe_users();
$scope.addSe_user = function() {
Se_user
.create($scope.newUser)
.$promise
.then(function(user){
$scope.newUser = '';
$scope.userForm.content.$setPristine();
$('.focus').focus();
getSe_users();
});
};
$scope.removeUser = function(item) {
Se_user
.deleteById(item)
.$promise
.then(function(){
getSe_users();
});
};
}]);
partial-create.html
<div class="row">
<div class="col-md-8">
<h1>Create a User</h1>
</div>
<div class="col-md-4">
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<form name=userForm ng-submit="addSe_user()">
<div class="form-group">
<label for="user_id">ID</label>
<input type="text" class="form-control" ng-model="user.user_id" placeholder="Enter EID">
</div>
<div class="form-group">
<label for="first_nm">First Name</label>
<input type="text" class="form-control" ng-model="user.user_first_nm" placeholder="Enter First Name">
</div>
<div class="form-group">
<label for="last_nm">Last Name</label>
<input type="text" class="form-control" ng-model="user.user_last_nm" placeholder="Enter Last Name">
</div>
<div class="form-group">
<label for="email_adr">Email Address</label>
<input type="text" class="form-control" ng-model="user.user_email_adr" placeholder="Enter Item Type">
</div>
<div class="form-group">
<label for="user_role">Role</label>
<input type="text" class="form-control" ng-model="user.user_role" placeholder="Enter Status Code">
</div>
<div class="form-group">
<label for="user_active">Active</label>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="Yes" ng-model="user.user_active" checked>Yes
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="No" ng-model="user.user_active">No
</label>
</div>
</div>
<div class="form-group">
<label for="mgr_full_nm">Manager Name</label>
<input type="text" class="form-control" ng-model="user.user_mgr_full_nm" placeholder="Enter Full Name">
</div>
<div class="form-group">
<label for="mgr_eid">Manager EID</label>
<input type="text" class="form-control" ng-model="user.user_mgr_eid" placeholder="Enter Manager EID">
</div>
<div class="form-group">
<label for="insrt_dt">Insert Date</label>
<input type="date" class="form-control" ng-model="user.insrt_dt" placeholder="Enter Date">
</div>
<div class="form-group">
<label for="insrt_user_id">Insert User EID</label>
<input type="text" class="form-control" ng-model="user.user_upd_user_id" placeholder="Enter User EID">
</div>
<div class="form-group">
<label for="upd_dt">Update Date</label>
<input type="date" class="form-control" ng-model="user.user_upd_dt" placeholder="Enter Update User Date">
</div>
<div class="form-group">
<label for="upd_user_id">Update User EID</label>
<input type="text" class="form-control" ng-model="user.upd_user_id" placeholder="Enter Update User EID">
</div>
<div class="btn-group btn-group-justified" role="group">
<div class="btn-group" role="group">
<button type="submit" class="btn btn-primary btn-lg">Submit</button>
</div>
</div>
<br>
<br>
<pre>
{{user | json}}
</pre>
</form>
</div>
</div>
</div>
I am relatively new to coding and have really just begun to teach myself. Any help is appreciated!!
Thanks!!
EDIT:
rest-api.js
module.exports = function mountRestApi(server) {
var restApiRoot = server.get('restApiRoot');
server.use(restApiRoot, server.loopback.rest());
};
I figured it out!
The lbservices file was using a BaseURL of "/api" when it needed to be "http://localhost:3000/api"
Thank you everyone for your help!
Related
The Project: https://github.com/marcosnunes/storeData
I need to publish into {div id="result"}{/div} the data from the form and then store to local cached directory. Would anyone help me to write this code? What I am trying to do is make a local site for to be loaded into an Android Hibrid App.
The form:
<body>
<div class="w3-container">
<div class="w3-card-4" style="width:100%">
<header class="w3-container w3-light-grey">
<h2><Div id="nameBox"></Div></h2>
</header>
<div class="w3-container">
<h2><div id="result"></div></h2>
</div>
</div>
</div>
<div class="w3-container">
<div class="row">
<div class="col-md-8">
<h3>Adicionar um Envelope e Saldo</h3>
<form name="contact-form"
method="post" id="contact-form">
<div class="form-group">
<label for="inputName">Envelope</label>
<input type="text"
class="form-control" id="cardName" name="cardName" placeholder="Envelope"
required>
</div>
<div class="form-group">
<label for="inputValue">Valor</label>
<input type="number" class="form-control" id="Value" name="Value"
placeholder="Valor" required>
</div>
<div class="form-group">
<label for="inputDescription">Descrição</label>
<input type="text" class="form-control" id="Description"
name="Description"
placeholder="Descrição" required>
</div>
<button onclick="store()" class="btn btn-primary" name="submit"
value="Submit"
id="submit_form">Adicionar</button>
</form>
</div>
</div>
</div>
</body>
</html>
I need too create new div on the button onclick()
The java code
<script>
function store(){
if (typeof(Storage) !== "undefined") {
var inputName = document.getElementById("cardName");
sessionStorage.setItem("cardName", inputName.value);
var inputValue = document.getElementById("Value");
sessionStorage.setItem("Value", inputValue.value);
var inputDescription = document.getElementById("Description");
sessionStorage.setItem("Description", inputDescription.value);
document.getElementById("result1").innerHTML = sessionStorage.getItem("cardName");
document.getElementById("result2").innerHTML = sessionStorage.getItem("Value");
document.getElementById("result3").innerHTML = sessionStorage.getItem("Description");
} else {
document.getElementById("result").innerHTML = "Ops! Alguma coisa deu errado...";
}
}
I got it !
Just inserted type="button" on button.
<button onclick="store()" **type="button"** class="btn btn-primary"
name="submit" value="Submit"
id="submit_form">Adicionar</button>
The second part is the html code and the first part is the angularjs part .
customer.controller("new_info",
function($scope, $routeParams,$http)
{
$scope.customer = {};
$scope.register = function () {
$http.post('localhost:4000/new_info', $scope.customer).then(
function (response) {
console.log("posted successfully"); //not showing anything in the console window
}
);
}
});
<div class="col-md-6">
<div class="panel-body">
<form name="AddCustomer" >
<div class="form-group">
<label>Id</label>
<input type="text" class="form-control" ng-model="customer.id" />
</div>
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" ng-model="customer.name" />
</div>
<div class="form-group">
<label>City</label>
<input type="text" class="form-control" ng-model="customer.city" />
</div>
<button class="btn btn-default" ng-click="register()">Submit</button>
</form>
</div>
</div>
//after clicking the button its not showing anything .
I have a form and trying to send the value of the input to the angular controller but on click, the value in the controller is showing undefined.
html code
<div ng-if="questioncode == 2" class="user-form">
<div class="row">
<form>
<div class="col-sm-12">
<label class="control-label" >Phone number</label>
</div>
<div class="col-sm-12">
<input type="text" class="form-control" name="phone" placeholder="your phone number" ng-model="phone">
</div>
<div class="col-sm-12">
<input type="submit" class=" col-sm-12 btn btn-primary" ng-click="submituserPhone();" >
<flash-message duration="3000" show-close="true" on-dismiss="myCallback(flash);" ></flash-message>
</div>
</form>
</div>
</div>
angular controller
$scope.submituserPhone = function() {
console.log($scope.phone);
$http.post('insertphone',$scope.phone),then(function() {
if(response.data.status === false) {
Flash.create('danger',response.data.message);
}else{
$scope.questioncode = 3;
}
})
}
So the problem is the ng-if which is creating a new scope, hence the scope variable phone is not getting updated in the controller. Here are two methods to tackle this problem.
Using $parent:
You can use $parent to update the variable of the parent scope instead of the current one, then your variable will be visible inside the controller.
var app = angular.module('myApp', []);
app.controller('MyController', function MyController($scope) {
$scope.questioncode = 2;
$scope.submituserPhone = function() {
console.log($scope.phone);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller='MyController' ng-app="myApp">
<div ng-if="questioncode == 2" class="user-form">
<div class="row">
<form>
<div class="col-sm-12">
<label class="control-label">Phone number</label>
</div>
<div class="col-sm-12">
<input type="text" class="form-control" name="phone" placeholder="your phone number" ng-model="$parent.phone">
</div>
<div class="col-sm-12">
<input type="submit" class=" col-sm-12 btn btn-primary" ng-click="submituserPhone();">
<flash-message duration="3000" show-close="true" on-dismiss="myCallback(flash);"></flash-message>
</div>
</form>
</div>
</div>
</div>
Pass the variable as a parameter:
You can simply just pass the variable of the created scope into the controller function and update it there, as shown below.
var app = angular.module('myApp', []);
app.controller('MyController', function MyController($scope) {
$scope.questioncode = 2;
$scope.submituserPhone = function(phone) {
$scope.phone = phone;
console.log($scope.phone);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller='MyController' ng-app="myApp">
<div ng-if="questioncode == 2" class="user-form">
<div class="row">
<form>
<div class="col-sm-12">
<label class="control-label">Phone number</label>
</div>
<div class="col-sm-12">
<input type="text" class="form-control" name="phone" placeholder="your phone number" ng-model="phone">
</div>
<div class="col-sm-12">
<input type="submit" class=" col-sm-12 btn btn-primary" ng-click="submituserPhone(phone);">
<flash-message duration="3000" show-close="true" on-dismiss="myCallback(flash);"></flash-message>
</div>
</form>
</div>
</div>
</div>
I have seen similar questions, but am unable to understand the mistake and the way around.
I have a basic mean stack application. I have a submit button, where if I click, it throws me an error saying in the browser saying :
Cannot POST /
Although, the post request has gone to the server and it gets updated in my database. I just want the browser to come back to the previous page after I click submit and post request is done!
The browser console also shows an error saying:
POST http://localhost:3000/ 404 (Not Found)
Here are my files for reference ctrl1.js:
var app = angular.module('myApp', []);
app.controller('myCtrl',['$scope', '$http', function($scope, $http) {
console.log("Hello from controller");
$scope.application = {};
var refresh = function(){
$http.get('/applicationList').then(function(response){
console.log("I got the applications I requested");
$scope.applicationList = response.data;
// $scope.contact = null;
});
};
refresh();
$scope.saveApplication = function(){
console.log($scope.application);
$scope.application.state = "saved";
$http.post('/applicationList', $scope.application).then(function(response){
console.log(response);
//refresh();
});
};
$scope.submitApplication = function(){
console.log("reached here");
console.log($scope.application);
console.log("reached here");
$scope.application.state = "submit";
$http.post('/applicationList', $scope.application).then(function(response){
console.log(response);
refresh();
});
};
$scope.remove = function(id){
console.log(id);
$http.delete('/applicationlist/'+id).then(function(response){
refresh();
});
};
$scope.edit = function(id){
console.log(id);
$http.get('/applicationlist/'+id).then(function(response){
$scope.application = response.data;
//refresh();
});
};
$scope.update = function(){
console.log($scope.application._id);
$http.put('/applicationlist/' + $scope.application._id, $scope.application).then(function(response){
//$scope.contact = response.data;
refresh();
});
};
// $scope.clear = function(){
// $scope.application = "";
// };
//Universities
$scope.application.selectname1={};
$scope.application.selectname2={};
$scope.application.selectname3={};
$scope.filter1 = function(item){
return (!($scope.application.selectname1&&$scope.application.selectname1.id)||item.id !=$scope.application.selectname1.id||item.id==100);
};
$scope.filter2 = function(item){
return (!($scope.application.selectname2&&$scope.application.selectname2.id)||item.id!=$scope.application.selectname2.id||item.id==100);
};
$scope.filter3 = function(item){
return (!($scope.application.selectname3&&$scope.application.selectname3.id)||item.id !=$scope.application.selectname3.id||item.id==100);
};
$scope.universities = [
{
id:1,
name: 'IITs'
},
{
id:2,
name: 'IIITs'
},
{
id:3,
name: 'BITS'
},
{
id:100,
name: 'None'
}
];
//Degrees
$scope.application.selectdegree1={};
$scope.application.selectdegree2={};
$scope.application.selectdegree3={};
$scope.filterDegree1 = function(item){
return (!($scope.application.selectdegree1&&$scope.application.selectdegree1.id)||item.id !=$scope.application.selectdegree1.id||item.id==100);
};
$scope.filterDegree2 = function(item){
return (!($scope.application.selectdegree2&&$scope.application.selectdegree2.id)||item.id!=$scope.application.selectdegree2.id||item.id==100);
};
$scope.filterDegree3 = function(item){
return (!($scope.application.selectdegree3&&$scope.application.selectdegree3.id)||item.id !=$scope.application.selectdegree3.id||item.id==100);
};
$scope.degrees = [
{
id:1,
name: 'PhD'
},
{
id:2,
name: 'Masters'
},
{
id:3,
name: 'BTech'
},
{
id:100,
name: 'None'
}
];
$scope.check = function(evt,cityName)
{
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
return true;
}
}]);
Server.js :
var express = require('express');
var app = express();
var mongojs = require('mongojs');
var db = mongojs('internapplications', ['internforms']);
var assert = require('assert');
var bodyParser = require('body-parser');
var request = require('request');
app.use(express.static(__dirname + "/public"));
app.use(bodyParser.json());
app.get('/applicationList', function(req, res){
console.log("I received a get request");
db.internforms.find(function(err, docs){
console.log(docs);
res.json(docs);
});
});
app.post('/applicationList', function(req, res){
console.log("I received a post request");
console.log(req.body);
db.internforms.insert(req.body, function(err,doc){
res.json(doc);
});
});
app.delete('/applicationList/:id', function(req,res){
console.log("reached here");
var id = req.params.id;
console.log(id);
db.internforms.remove({_id: mongojs.ObjectId(id)}, function(err,doc){
res.json(doc);
});
});
app.put('/applicationList/:id', function(req,res){
var id = req.params.id;
console.log(req.body.name);
db.internforms.findAndModify({query: {_id: mongojs.ObjectId(id)},
update: {$set: {name: req.body.name, email: req.body.email, number: req.body.number}},
new: true},
function(err,doc){
res.json(doc);
});
});
app.listen(3000);
console.log("Server running at port 3000");
And my html looks like this :
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<!-- Latest compiled and minified CSS - loading at the top, since we want stylesheets to load up as soon as the page comes up -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link href="css/index.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="controllers/ctrl1.js"></script>
<title>Intern Applications App</title>
</head>
<body ng-controller="myCtrl">
<div class="container">
<nav id="tab-navigation">
<a href ng-click="check(event, 'page1')" id="defaultOpen">Applications Form</a>
<a href ng-click="check(event, 'page2')" >Application List</a>
</nav>
<div class="tabcontent" id="page1">
<form class="well form-horizontal" action=" " method="post" id="contact_form">
<!-- <fieldset> -->
<!-- Form Name -->
<legend>Intern Application Form</legend>
<div class="form-group">
<label class="col-md-4 control-label">Project Title</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea class="form-control" name="comment" placeholder="Project Title" ng-model="application.title" ></textarea>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Project Description</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea class="form-control" name="comment" ng-model="application.description" placeholder="Project Description" ></textarea>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Approach</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea class="form-control" name="comment" ng-model="application.approach" placeholder="Approach" ></textarea>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Is the dataset available?</label>
<div class="col-md-4">
<div class="radio">
<label>
<input type="radio" id="yes" name="dataset" value="yes" ng-model="application.isData"/> Yes
</label>
</div>
<div class="radio">
<label>
<input type="radio" id="no" name="dataset" value="no" ng-model="application.isData"/> No
</label>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group" ng-show="application.isData == 'no'">
<label class="col-md-4 control-label">Approach for Data Collection</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<input name="first_name" ng-model="application.dataDescription" placeholder="Approach" class="form-control" type="text">
</div>
</div>
</div>
<div class="form-group" ng-show="application.isData == 'yes'">
<label class="col-md-4 control-label">Data Available at</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<input name="first_name" placeholder="Approach" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Impact</label>
<div class="col-md-4 inputGroupContainer">
<div class="checkbox">
<label>
<input type="checkbox" id="yes" value="Technical" ng-model="application.technical"/> Technical
</label>
<label>
<input type="checkbox" id="yes" value="Business" ng-model="application.business"/> Business
</label>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Number of Interns</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<input name="first_name" placeholder="Number" ng-model="application.numberOfInterns" class="form-control" type="text" >
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Skill Set </label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea class="form-control" name="comment" ng-model="application.skillSet" placeholder="Skill Set " ></textarea>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">University Preference</label>
<div class="col-md-4 inputGroupContainer">
<!-- <div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea class="form-control" name="comment" ng-model="application.skillSet" placeholder="Skill Set " ></textarea>
</div> -->
<div class="input-group">
<select ng-model="application.selectname1"
ng-options="item as item.name for item in universities|filter:filter2|filter:filter3" ><option value="">- select -</option>
</select>
<select ng-model="application.selectname2"
ng-options="item as item.name for item in universities|filter:filter1|filter:filter3" ><option value="">- select -</option>
</select>
<select ng-model="application.selectname3" ng-options="item as item.name for item in universities|filter:filter1|filter:filter2" ><option value="">- select -</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Other Comments</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea class="form-control" name="comment" ng-model="application.comments" placeholder="Comments"></textarea>
</div>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-2">
<button type="submit" class="btn btn-primary" ng-click="submitApplication()"> Submit <span class="glyphicon glyphicon-send"></span></button>
</div>
<div>
<button type="submit" class="btn btn-warning" ng-click="saveApplication()"> Save <span class="glyphicon glyphicon-floppy-disk"></span></button>
</div>
</div>
<!-- </fieldset> -->
</form>
</div>
<div class="tabcontent" id="page2" style="display: none;">
<table class="table">
<thead>
<tr>
<th>Project Title</th>
<th>Project Description</th>
<th>State</th>
<th></th>
</tr>
<tbody>
<tr ng-repeat="apllication in applicationList">
<td>{{application.title}}</td>
<td>{{application.description}}</td>
<td>{{application.state}}</td>
<td><button class="btn btn-danger" ng-click="remove(application._id)" ng-show="application.state='saved'">Delete</button></td>
<td><button class="btn btn-warning" ng-click="edit(application._id)" ng-show="application.state='saved'">Edit</button></td>
</tr>
</tbody>
</thead>
</div>
</div>
</body>
</html>
Your database gets updated because you have attached an ng-click directive to the submit button, which is correctly hitting your /applicationList route with a POST: that's good.
At the same time, your button is inside a form element and is of type submit, which means clicking it will trigger the form action. Because you have left the form action empty - action=" " - you are also hitting the non-existent / route. That's why you get your error.
A simple fix is to change your button types to button so that they don't trigger the form action, and remove the action attribute from the form.
you are trying to get '/' for this plealse write this code in
server.js
app.get('/', function(req, res) {
res.end('Welcome to api');
return;
})
need some help on angular i have no knowledge on, but i have a work to do ^^' . My problem is when i write into my inputs i can't get the ng-model return and get a scope error telling $scope.newemployee is undefined(corrected).
New problem my table 'List' stay empty like my object employee
<!DOCTYPE html>
<html ng-app="employe">
<head>
<meta charset="utf-8" />
<title>
List of employe
</title>
<meta name="viewport" content="with=device-width , initial-scale=0 ,shrink- to-fit=no" />
<link rel="stylesheet" href="./files/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="./files/style.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js" type="text/javascript">
</script>
<script type="text/javascript" src="./files/code.js">
</script>
</head>
<body>
<div ng-controller="FormController as FormCtrl">
<button ng-click="FormCtrl.setShow(2)">Add new employee</button>
<form class="form-horizontal" ng-controller="ListCtrl" name="infoForm" ng-submit="addEmployee()" ng-show="FormCtrl.isShow(2)" novalidate="" id="infoForm">
{{newemployee}}
<h2>
Add/Edit employee
</h2><!-- NOM -->
<div class="form-group">
<label for="name" class="col-xs-5 control-label">Name</label>
<div class="col-xs-2">
<input type="texte" ng-model:"newemployee.name" class="form-control" ng-required="true" name="name" />
</div>
</div><!-- AGE -->
<div class="form-group">
<label for="age" class="col-xs-5 control-label">Age</label>
<div class="col-xs-2">
<input type="number" ng-model:"newemployee.age" class="form-control" ng-required="true" />
</div>
</div><!-- NICKNAME -->
<div class="form-group">
<label for="nickname" class="col-xs-5 control-label">Nickname</label>
<div class="col-xs-2">
<input type="texte" ng-model:"newemployee.nickname" class="form-control" ng-required="true" />
</div>
</div><!-- EMPLOYEE -->
<div class="form-group">
<label for="employee" class="col-xs-5 control-label">Employee</label>
<div class="col-xs-2">
<label class="radio-inline"><input type="radio" name="inlineRadioOptions" id="Yes" ng-model:"newemployee.yes" value="yes" />Yes</label> <label class="radio-inline"><input type="radio" name="inlineRadioOptions" id="No" ng-model:"newemployee.no" value="no" />No</label>
</div>
</div><!-- JOB -->
<div class="form-group">
<label for="job" class="col-xs-5 control-label">Job</label>
<div class="col-xs-2">
<select ng-model:"newemployee.job" class="form-control">
<option>
Founder
</option>
<option>
Market chef
</option>
<option>
Stage
</option>
</select>
</div>
</div><!-- ANNEE -->
<div class="form-group">
<label for="years" class="col-xs-5 control-label">Years</label>
<div class="col-xs-2">
<input type="number" ng-model:"newemployee.years" class="form-control" ng-required="true" />
</div>
</div><!-- BUTTON -->
<div class="center">
<button type="submit" class="btn btn-default btn-success">Validate</button> <button class="btn btn-default btn-warning" ng-click="FormCtrl.setShow(1)">Cancel</button>
</div>
</form>
</div>
</body>
Here angularjs code
(function () {
var app = angular.module('employe', []);
app.controller("FormController", function () {
this.Edit = 1;
this.isShow = function(checkEdit){
return this.Edit == checkEdit;
};
this.setShow = function(setShow){
return this.Edit = setShow ;
};
console.log(this.Edit);
});
app.controller("ListCtrl", ['$scope', function($scope) {
$scope.list = /*employee*/[];
$scope.addEmployee = function(){
$scope.list.push({
name: $scope.newemployee.name,
age : parseInt($scope.newemployee.age),
nickname : $scope.newemployee.nickname,
job : $scope.newemployee.job ,
years : parseInt($scope.newemployee.years),
salarie : $scope.newemployee.yes + $scope.newemployee.no
});
};
}]);
})();
You should probably initialize the newemployee object inside ListCtrl as follows
app.controller("ListCtrl", ['$scope', function($scope) {
$scope.list = /*employee*/ [];
$scope.newemployee = {};
$scope.addEmployee = function() {
$scope.list.push({
name: $scope.newemployee.name,
age: parseInt($scope.newemployee.age),
nickname: $scope.newemployee.nickname,
job: $scope.newemployee.job,
years: parseInt($scope.newemployee.years),
salarie: $scope.newemployee.yes + $scope.newemployee.no
});
};
}]);
Sample input tag
<input type="text" class="form-control" ng-required="true" name="name" ng-model="newemployee.name" />
You have to link the input fields to the properties you want to set. You can do this with ng-model like this:
<input type="texte" class="form-control" ng-required="true" name="name" ng-model="$scope.newemployee.name" />