Skip to content

Instantly share code, notes, and snippets.

@LeeHyungGeun
Last active June 19, 2021 19:07
Show Gist options
  • Save LeeHyungGeun/5933736 to your computer and use it in GitHub Desktop.
Save LeeHyungGeun/5933736 to your computer and use it in GitHub Desktop.
Single Page App : Node.js + AngularJS + MongoDB
var http = require('http');
var express = require('express');
var path = require('path');
var app = express();
var databaseUrl = 'sampledb';
var collections = ['things'];
var db = require('mongojs').connect(databaseUrl, collections);
var mongojs = require('mongojs');
// config
app.configure(function(){
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
app.use(express.errorHandler({ dumpExceptions: true, showStack: true}));
app.set('views', __dirname + '/views');
app.engine('html', require('ejs').renderFile);
});
app.get('/', function(req, res){
res.render('index.html');
});
//rest service
app.get('/getUsers', function(req, res){
db.things.find('', function(err, users){
if(err) {
console.log(err);
}
else{
res.json(users);
}
});
});
app.post('/insertUser', function(req, res){
var jsonData = JSON.parse(req.body.data);
db.things.save({email: jsonData.email, password: jsonData.password, username: jsonData.username}, function(err, saved){
if(err){
console.log(err);
}
else{
res.end('User saved');
}
})
});
app.put('/updateUser', function(req, res){
var jsonData = JSON.parse(req.body.data);
var ObjectId = mongojs.ObjectId;
db.things.update({_id: ObjectId(jsonData._id)}, {username: jsonData.username, password: jsonData.password, email: jsonData.email}, function(err, saved){
if(err){
console.log(err);
}
else{
res.end('User updated');
}
});
});
app.delete('/removeUser', function(req, res){
var jsonData = JSON.parse(req.body.data);
db.things.remove(jsonData, function(err, saved){
if(err){
console.log(err);
}
else{
res.end('User deleted');
}
});
});
app.listen(9900);
'use strict';
var app = angular.module('app', []);
app.config(['$httpProvider', function($httpProvider){
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
}
]);
function UserListCtrl($scope, $http, $templateCache){
var serverUrl = 'http://192.168.10.165:9900';
var getUrl = serverUrl + '/getUsers';
var insertUrl = serverUrl + '/insertUser';
var updateUrl = serverUrl + '/updateUser';
var removeUrl = serverUrl + '/removeUser';
var insertMethod = 'POST';
var updateMethod = 'PUT';
var removeMethod = 'DELETE';
$scope.showEdit = false;
$scope.showLabel= true;
// 추가
$scope.save = function(){
var formData = {
"username" : this.username,
"password" : this.password,
"email" : this.email
};
this.username = '';
this.password = '';
this.email = '';
var data = 'data=' + JSON.stringify(formData);
httpMethod(insertMethod, insertUrl, data, $templateCache);
return false;
};
$scope.update = function(){
var userData = {
"username": this.user.username,
"password": this.user.password,
"email": this.user.email,
"_id": this.user._id
};
var data = 'data=' + JSON.stringify(userData);
httpMethod(updateMethod, updateUrl, data, $templateCache);
$scope.list();
return false;
};
// 삭제
$scope.remove = function(){
var userData = {
"username" : this.user.username,
"password": this.user.password,
"email" : this.user.email
};
var data = 'data=' + JSON.stringify(userData);
httpMethod(removeMethod, removeUrl, data, $templateCache);
$scope.list();
return false;
};
$scope.list = function(){
var url = 'http://192.168.10.165:9900/getUsers';
$http.get(url).success(function(data){
$scope.users = data;
});
};
function httpMethod(method, url, data, templateCache){
$http({
method: method,
url: url,
data: data,
headers: { 'Content-Type': 'application/x-www-form-urlencoded'},
cache: templateCache
}).
success(function(response){
$scope.list();
}).
error(function(response){
});
}
$scope.selectUser = function(){
if(this.showEdit === false){
this.showEdit = true;
this.showLabel = false;
}
};
$scope.list();
}
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script type="text/javascript" src="/js/index.js"></script>
<title></title>
</head>
<body ng-controller="UserListCtrl">
Search: <input ng-model="user">
<div class="span10">
<ul class="users">
<li ng-repeat="user in users | filter:user">
<div ng-click="selectUser()">
<label ng-show="showLabel" style="float:left;">{{user.username}}</label> <input type="text" ng-show="showEdit" ng-model="user.username"/>
<label ng-show="showLabel" style="float:left;">{{user.password}}</label> <input type="text" ng-show="showEdit" ng-model="user.password"/>
<label ng-show="showLabel" style="float:left;">{{user.email}}</label> <input type="text" ng-show="showEdit" ng-model="user.email"/>
<button class="btn btn-primary" ng-click="update()" ng-show="showEdit">수정</button>
<button class="btn btn-danger" style="margin-left:10px;" ng-click="remove()">삭제</button>
</div>
</li>
</ul>
</div>
<form name="myform" id="myform" ng-submit="save()">
<fieldset>
<legend>New User</legend>
<div class="control-group">
<center><input type="text" placeholder="이름" ng-model="username" size="50" required/></center>
<center><input type="text" placeholder="비밀번호" ng-model="password" size="50" required/></center>
<center><input type="text" placeholder="이메일" ng-model="email" size="50" required/></center>
</div>
<p>
<div><center><button class="btn btn-success" type="submit">등록</button></center></div>
</p>
</fieldset>
</form>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment