Single Page App : Node.js + AngularJS + MongoDB

angularjsDemo03_.idea_.name

angularjsDemo03

angularjsDemo03_app.js

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);

angularjsDemo03_public_js_index.js

'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();
}

angularjsDemo03_views_index.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 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>