Skip to content

Instantly share code, notes, and snippets.

@LeeHyungGeun

LeeHyungGeun/app.js

Created July 6, 2013 06:43
Show Gist options
  • Save LeeHyungGeun/5938926 to your computer and use it in GitHub Desktop.
Save LeeHyungGeun/5938926 to your computer and use it in GitHub Desktop.
Download ZIP
Single Page Application with Angular.js, Node.js(Socket.IO) and MongoDB (MongoJS Module) Refer: http://www.phloxblog.in/single-page-application-angular-js-node-js-mongodb-mongojs-module/
Raw
app.js
var http = require('http');
var express = require('express');
var path = require('path');
var app = express();
var server = http.createServer(app);
var databaseUrl = 'sampledb';
var collections = ['things'];
var db = require('mongojs').connect(databaseUrl, collections);
var mongojs = require('mongojs');
var io = require('socket.io').listen(server);
// 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);
});
// routing
app.get('/', function(req, res){
res.render('home.html');
});
// rest service
io.sockets.on('connection', function(socket){
//GET
socket.on('getUsers', function(){
db.things.find('', function(err, users){
if(err){
console.log(err);
}
else{
getUsers();
}
});
});
function getUsers(){
db.things.find('', function(err, users){
if(err){
console.log(err);
}
else{
socket.emit('getUsers', users);
}
});
}
//POST
socket.on('insertUser', function(data){
db.things.save({username: data.username, password: data.password, email: data.email}, function(err, saved){
if(err){
console.log(err);
}
else{
getUsers();
}
});
});
//PUT
socket.on('updateUser', function(data){
var ObjectId = mongojs.ObjectId;
db.things.update({_id: ObjectId(data._id)}, {username: data.username, password: data.password, email:data.email}, function(err, saved){
if(err){
console.log(err);
}
else{
getUsers();
}
});
});
//DELETE
socket.on('removeUser', function(data){
db.things.remove(data, function(err, saved){
if(err){
console.log(err);
}
else{
getUsers();
}
});
});
});
server.listen(9000);
Raw
home.html
<!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 type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script type="text/javascript" src="/js/app.js"></script>
<title>Single Page Application : Node.js(Socket.IO) + AngularJS + MongoDB(Mongojs)</title>
</head>
<body ng-controller="UserListCtrl">
<div style="width:840px; float:left;">Search: <input ng-model="user"></div>
<div class="span10" style="width:840px; float:left; margin: 10px 0 0 0;">
<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()" style="float:left;">
<fieldset>
<legend>신규회원</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>
Raw
server.js
var http = require('http');
var express = require('express');
var path = require('path');
var app = express();
var server = http.createServer(app);
var databaseUrl = 'sampledb';
var collections = ['things'];
var db = require('mongojs').connect(databaseUrl, collections);
var mongojs = require('mongojs');
var io = require('socket.io').listen(server);
// 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);
});
// routing
app.get('/', function(req, res){
res.render('home.html');
});
// rest service
io.sockets.on('connection', function(socket){
//GET
socket.on('getUsers', function(){
db.things.find('', function(err, users){
if(err){
console.log(err);
}
else{
getUsers();
}
});
});
function getUsers(){
db.things.find('', function(err, users){
if(err){
console.log(err);
}
else{
socket.emit('getUsers', users);
}
});
}
//POST
socket.on('insertUser', function(data){
db.things.save({username: data.username, password: data.password, email: data.email}, function(err, saved){
if(err){
console.log(err);
}
else{
getUsers();
}
});
});
//PUT
socket.on('updateUser', function(data){
var ObjectId = mongojs.ObjectId;
db.things.update({_id: ObjectId(data._id)}, {username: data.username, password: data.password, email:data.email}, function(err, saved){
if(err){
console.log(err);
}
else{
getUsers();
}
});
});
//DELETE
socket.on('removeUser', function(data){
db.things.remove(data, function(err, saved){
if(err){
console.log(err);
}
else{
getUsers();
}
});
});
});
server.listen(9000);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment