Skip to content

Instantly share code, notes, and snippets.

@romeosierra1

romeosierra1/index.html

Created September 20, 2017 09:26
Show Gist options
  • Save romeosierra1/5b4cdb461ccc9c703f53db8d5d943047 to your computer and use it in GitHub Desktop.
Save romeosierra1/5b4cdb461ccc9c703f53db8d5d943047 to your computer and use it in GitHub Desktop.
Download ZIP
AngularJS + NodeJS + MongoDB
Raw
index.html
<!DOCTYPE html>
<html>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Angular JS file -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<script>
var app = angular.module('rugs-inventory', []);
app.controller('rugsCtrl', function ($scope, $http) {
var rug = {
name: '',
category: '',
size: '',
price: ''
};
var rugs = [];
var msg = '';
//Back End Server Address
var apiUrl = 'http://localhost:8080/';
//Front end variables to store data
$scope.rug = rug;
$scope.rugs = rugs;
$scope.msg = msg;
//Function to load data
function afterCRUD() {
$http.get(apiUrl + 'rugs')
.then(function (response) {
console.log(response.data);
$scope.rugs = response.data;
});
}
//Function to send request to server to add new rug
$scope.addRug = function () {
$http.post(apiUrl + 'rug', rug)
.then(function (response) {
$scope.msg = response.data.msg;
afterCRUD();
});
}
//Function to send request to server to view rugs
$scope.viewRugs = function () {
afterCRUD();
}
//Function to send request to server to update rug
$scope.updateRug = function (rug) {
$http.put(apiUrl + 'rug/' + rug._id, rug)
.then(function (response) {
$scope.msg = response.data.msg;
afterCRUD();
});
}
//Function to send request to server to delete rug
$scope.deleteRug = function (id) {
$http.delete(apiUrl + 'rug/' + id)
.then(function (response) {
$scope.msg = response.data.msg;
afterCRUD();
});
}
});
</script>
<body>
<div ng-app="rugs-inventory" ng-controller="rugsCtrl">
<div>
<table class="table table-bordered">
<tr>
<td>Name</td>
<td><input class="form-control" type="text" ng-model="rug.name" /></td>
</tr>
<tr>
<td>Category</td>
<td><input class="form-control" type="text" ng-model="rug.category" /></td>
</tr>
<tr>
<td>Size</td>
<td><input class="form-control" type="text" ng-model="rug.size" /></td>
</tr>
<tr>
<td>Price</td>
<td><input class="form-control" type="text" ng-model="rug.price" /></td>
</tr>
</table>
<input type="button" class="btn btn-primary" ng-click="addRug()" value="Add Rug" />
</div>
<table ng-init="viewRugs()" class="table table-bordered">
<tr>
<th>Name</th>
<th>Category</th>
<th>Size</th>
<th>Price</th>
<th colspan="2"></th>
</tr>
<!-- lines created -->
<tr ng-repeat="rug in rugs">
<td><input class="form-control" type="text" ng-model="rug.name" /></td>
<td><input class="form-control" type="text" ng-model="rug.category" /></td>
<td><input class="form-control" type="text" ng-model="rug.size" /></td>
<td><input class="form-control" type="text" ng-model="rug.price" /></td>
<td><input class="btn btn-primary" type="button" ng-click="updateRug(rug)" value="Update Rug" /></td>
<td><input class="btn btn-primary" type="button" ng-click="deleteRug(rug._id)" value="Delete Rug" /></td>
</tr>
</table>
<div>{{msg}}</div>
</div>
</body>
</html>
Raw
package.json
{
"name": "back-end",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"body-parser": "^1.18.1",
"cors": "^2.8.4",
"express": "^4.15.4",
"mongodb": "^2.2.31"
},
"devDependencies": {}
}
Raw
script.js
//Node Packages required for Creating Server in Node JS
let express = require('express');
let cors = require('cors');
let bodyParser = require('body-parser');
let app = express();
//Node Packages required to run CRUD operation using MongoDB in Node JS
let MongoClient = require('mongodb').MongoClient;
let dbUrl = 'mongodb://localhost:27017/rugs-inventory';
let ObjectID = require('mongodb').ObjectID;
//Creates a connection with MongoDB and Crates a Collection(Table) named rug
MongoClient.connect(dbUrl, (err, db) => {
if (err) {
throw err;
} else {
db.createCollection('rugs', (err, res) => {
if (err) {
throw err;
} else {
console.log('MongoDB Server created');
db.close();
}
});
}
});
//Settings for Server
app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
extended: true
}))
//API ENDPOINTS (used to recieve request and send response from front end)
//Default End Point
app.get('/', (req, res) => {
res.json({
msg: 'Bad Request'
});
})
//Endpoint to view rugs
app.get('/rugs', (req, res) => {
MongoClient.connect(dbUrl, (err, db) => {
if (err) {
throw err;
} else {
db.collection('rugs', (err, dbres) => {
if (err) {
throw err;
} else {
db.collection("rugs").find({}).toArray((err, result) => {
if (err) {
throw err
};
let data = result;
console.log(data);
db.close();
res.json(data);
});
}
});
}
});
});
//Endpoint to add new rug
app.post('/rug', (req, res) => {
let rug = {
name: req.body.name,
category: req.body.category,
size: req.body.size,
price: req.body.price
};
MongoClient.connect(dbUrl, (err, db) => {
if (err) {
throw err;
} else {
db.collection('rugs', (err, dbres) => {
if (err) {
throw err;
} else {
db.collection('rugs').insertOne(rug, (err, result) => {
if (err) {
throw err;
} else {
db.close();
res.json({
msg: 'Rug Added'
});
}
});
}
})
}
});
})
//Endpoint to update rug
app.put('/rug/:id', (req, res) => {
MongoClient.connect(dbUrl, (err, db) => {
if (err) {
throw err;
} else {
db.collection('rugs', (err, dbres) => {
if (err) {
throw err;
} else {
//New values
let newRug = {
name: req.body.name,
category: req.body.category,
size: req.body.size,
price: req.body.price
};
db.collection("rugs").updateOne({
//Row to be updated
_id: new ObjectID(req.params.id)
}, newRug, (err, result) => {
if (err) {
throw err
};
db.close();
res.json({
msg: 'Rug Updated'
});
});
}
})
}
});
})
//Endpoint to delete rug
app.delete('/rug/:id', (req, res) => {
MongoClient.connect(dbUrl, (err, db) => {
if (err) {
throw err;
} else {
db.collection('rugs', (err, dbres) => {
if (err) {
throw err;
} else {
db.collection('rugs').deleteOne({
//Row to be deleted
_id: new ObjectID(req.params.id)
}, (err, result) => {
if (err) {
throw err;
} else {
console.log(result.deletedCount);
db.close();
res.json({
msg: 'Rug Deleted'
})
}
});
}
})
}
});
})
//Handle other requests
app.get('*', (req, res) => {
res.json({
msg: 'Bad Request'
});
})
//Starts server on 8080 port
app.listen('8080', () => {
console.log('Express server started on 8080 port with CORS enabled');
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment