Adding data from AngularJS into a MongoDB database

Question

I've been using AngularJS and MongoDB for a while now for an internship project, and I want to be able to add data that's being handled/generated by a controller into a mongoDB database.

The code for the controller that's generating the data is something like this:

var app = angular.module('app', []);
var RectangleDim=30;

app.controller('MainCtrl', function($scope) {

    $scope.graph = {'width': 5000, 'height': 5000};

    $scope.circles = [

      /*  JSON.parse("{\"x\": 85, \"y\": 20, \"r\":15}"),

        {"x": 20, "y": 60, "r":20},

        {"x": 18, "y": 10, "r":40} */
    ];

        $scope.draw=function(val)
        {
           // val = document.getElementById("NumQuest").value;
            return JSON.parse('{\"cx\":'+val+', "cy": 20, "r":30}');
           // $scope.circles.push(JSON.parse('{\"x\":'+val+', "y": 220, "r":30}'));
        };

    $scope.rectangles = [

       //     {'x':220,  'y':220,  'width' : 300, 'height' : 100},
       // {'x':520,  'y':220,  'width' : 10, 'height' : 10},
    ];

        $scope.DrawRect=function(xpos,ypos) {
           return JSON.parse('{\"x\":' + xpos + ', \"y\":' + ypos + ', \"width\":' + RectangleDim + ', \"height\":' + RectangleDim+ ', \"style\":\"fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)\"'+ '}');
        };

        $scope.DrawRectDel=function(xpos,ypos) {
            return JSON.parse('{\"x\":' + xpos + ', \"y\":' + ypos + ', \"width\":' + 0 + ', \"height\":' + 0+ ', \"style\":\"fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)\"'+ '}');
        };

        $scope.Debug=function(desiredNo){
            desiredNo=document.getElementById("NumQuest").value;
            for(var i = 0;i < RectangleDim*desiredNo+desiredNo;i++){
                $scope.rectangles.push($scope.DrawRect(i+RectangleDim+1,40));
            }
        };

        $scope.DebugDel=function(desiredNo){
            $scope.rectangles.length=0;
            desiredNo=document.getElementById("NumQuest").value;
            for(var i = 0;i < RectangleDim*desiredNo+desiredNo;i++){
                $scope.rectangles.push(JSON.parse('{\"x\":' + xpos + ', \"y\":' + ypos + ', \"width\":' +0 + ', \"height\":' + 0+ ', \"style\":\"fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)\"}'));//+', \"info\":+\"\"}'));
            }
        };

        $scope.DrawLineOdd=function(desiredNo,lineNo,pozY){
            var pozX = lineNo*RectangleDim;
            var aux = 2*Math.floor(Math.sqrt(desiredNo))-1-2*lineNo;
            for (var j = 0; j < aux; j++) {
                $scope.rectangles.push($scope.DrawRect(pozX, pozY));//$scope.DrawRect(pozX, pozY);
                pozX += RectangleDim;
            }
            //return aux;
        };

        $scope.DrawLineOddDel=function(desiredNo,lineNo,pozY){
            $scope.rectangles.length=0;
            var pozX = lineNo*RectangleDim;
            var aux = 2*Math.floor(Math.sqrt(desiredNo))-1-2*lineNo;
            for (var j = 0; j < aux; j++) {
                $scope.rectangles.push($scope.DrawRectDel(pozX, pozY));//$scope.DrawRect(pozX, pozY);
                pozX += RectangleDim;
            }
            //return aux;
        };

        $scope.DrawMatrixPerfectProgression=function(desiredNo) {

            desiredNo=document.getElementById("NumQuest").value;


            var line=0;
            var pozy=0;
            while(line<Math.floor(Math.sqrt(desiredNo))) {
                $scope.DrawLineOdd(desiredNo, line, pozy);
                //document.getElementById("val").innerHTML = teste;
                line += 1;
                pozy+=RectangleDim;
            }
            //document.getElementById('tablePrint').innerHTML = finalTable;
        };

        $scope.DrawMatrixPerfectProgressionDel=function(desiredNo) {
            $scope.rectangles.length=0;
            desiredNo=document.getElementById("NumQuest").value;


            var line=0;
            var pozy=0;
            while(line<Math.floor(Math.sqrt(desiredNo))) {
                $scope.DrawLineOddDel(desiredNo, line, pozy);
                //document.getElementById("val").innerHTML = teste;
                line += 1;
                pozy+=RectangleDim;
            }
            //document.getElementById('tablePrint').innerHTML = finalTable;
        };

        $scope.DrawLineEven=function(desiredNo, lineNo, pozY){
            var pozX = lineNo*RectangleDim;
            //var pozY = lineno*20;
            var aux = 2*Math.floor(Math.sqrt(desiredNo))-2*lineNo;
            for (var j = 0; j < aux; j++) {
                $scope.rectangles.push($scope.DrawRect(pozX, pozY));
                pozX += RectangleDim;
            }
            //return aux;
        };

        $scope.DrawLineEvenDel=function(desiredNo, lineNo, pozY){
            $scope.rectangles.length=0;
            var pozX = lineNo*RectangleDim;
            //var pozY = lineno*20;
            var aux = 2*Math.floor(Math.sqrt(desiredNo))-2*lineNo;
            for (var j = 0; j < aux; j++) {
                $scope.rectangles.push($scope.DrawRectDel(pozX, pozY));
                pozX += RectangleDim;
            }
            //return aux;
        };

        $scope.DrawMatrixEvenProgression=function(desiredNo) {

            desiredNo=document.getElementById("NumQuest").value;

            var line=0;
            var pozy=0;
            while(line<Math.floor((Math.sqrt(4*desiredNo+1)-1)/2)) {
                $scope.DrawLineEven(desiredNo, line, pozy);
                //document.getElementById("val").innerHTML = teste;
                line += 1;
                pozy+=RectangleDim;
            }
            //document.getElementById('tablePrint').innerHTML = finalTable;
        };

        $scope.DrawMatrixEvenProgressionDel=function(desiredNo) {
            $scope.rectangles.length=0;
            desiredNo=document.getElementById("NumQuest").value;

            var line=0;
            var pozy=0;
            while(line<Math.floor((Math.sqrt(4*desiredNo+1)-1)/2)) {
                $scope.DrawLineEvenDel(desiredNo, line, pozy);
                //document.getElementById("val").innerHTML = teste;
                line += 1;
                pozy+=RectangleDim;
            }
            //document.getElementById('tablePrint').innerHTML = finalTable;
        };

        $scope.AddExtraRectangles=function(desiredNo) {
            desiredNo = document.getElementById("NumQuest").value;

            var arg1 = desiredNo - (  Math.floor(Math.sqrt(desiredNo))*Math.floor(Math.sqrt(desiredNo)));
            var arg2 = desiredNo-(Math.floor((Math.sqrt(4*desiredNo+1)-1)/2)*Math.floor((Math.sqrt(4*desiredNo+1)-1)/2))-Math.floor((Math.sqrt(4*desiredNo+1)-1)/2);
            var OptimalLeftOver = Math.min( arg1  ,arg2 );
            //We add two rectangles per row: one at the beginning one at the end
            //we start with the row below the first one

            var line;
            var pozy;
            var pozx1, pozx2;
            var nRectLine_i;

            if(OptimalLeftOver===arg1){
                line=1;//1st line is skipped
                pozy=RectangleDim;
                pozx1 = 0;
                while(OptimalLeftOver>0) {
                    nRectLine_i = 2* Math.floor(Math.sqrt(desiredNo))-1-2*line;
                    pozx2 = (line-1)*RectangleDim+RectangleDim*(nRectLine_i+1);//pozx1+nRectLine_i+2*RectangleDim;
                    $scope.rectangles.push($scope.DrawRect(pozx1,pozy));
                    OptimalLeftOver-=1;
                    if(OptimalLeftOver>0) {
                        $scope.rectangles.push($scope.DrawRect(pozx2, pozy));
                        OptimalLeftOver -= 1;
                    }
                    //document.getElementById("val").innerHTML = teste;
                    line += 1;
                    pozy+=RectangleDim;
                    pozx1=RectangleDim*line - RectangleDim;
                }
                //document.getElementById('tablePrint').innerHTML = finalTable;
            }
            else {
                line=1;//1st line is skipped
                pozy=RectangleDim;
                pozx1 = 0;
                while(OptimalLeftOver>0) {
                    nRectLine_i = 2* Math.floor(Math.sqrt(desiredNo))-2*line;
                    pozx2 = RectangleDim*(line-1)+RectangleDim*(nRectLine_i+1);//pozx1+nRectLine_i+2*RectangleDim;
                    $scope.rectangles.push($scope.DrawRect(pozx1,pozy));
                    OptimalLeftOver-=1;
                    if(OptimalLeftOver>0) {
                        $scope.rectangles.push($scope.DrawRect(pozx2, pozy));
                        OptimalLeftOver -= 1;
                    }
                    //document.getElementById("val").innerHTML = teste;
                    line += 1;
                    pozy+=RectangleDim;
                    pozx1=RectangleDim*line - RectangleDim;
                }
                //document.getElementById('tablePrint').innerHTML = finalTable;
            }
        };

        $scope.DelExtraRectangles=function(desiredNo) {
            $scope.rectangles.length=0;
            desiredNo = document.getElementById("NumQuest").value;

            var arg1 = desiredNo - (  Math.floor(Math.sqrt(desiredNo))*Math.floor(Math.sqrt(desiredNo)));
            var arg2 = desiredNo-(Math.floor((Math.sqrt(4*desiredNo+1)-1)/2)*Math.floor((Math.sqrt(4*desiredNo+1)-1)/2))-Math.floor((Math.sqrt(4*desiredNo+1)-1)/2);
            var OptimalLeftOver = Math.min( arg1  ,arg2 );
            //We add two rectangles per row: one at the beginning one at the end
            //we start with the row below the first one

            var line;
            var pozy;
            var pozx1, pozx2;
            var nRectLine_i;

            if(OptimalLeftOver===arg1){
                line=1;//1st line is skipped
                pozy=RectangleDim;
                pozx1 = 0;
                while(OptimalLeftOver>0) {
                    nRectLine_i = 2* Math.floor(Math.sqrt(desiredNo))-1-2*line;
                    pozx2 = (line-1)*RectangleDim+RectangleDim*(nRectLine_i+1);//pozx1+nRectLine_i+2*RectangleDim;
                    $scope.rectangles.push($scope.DrawRectDel(pozx1,pozy));
                    OptimalLeftOver-=1;
                    if(OptimalLeftOver>0) {
                        $scope.rectangles.push($scope.DrawRectDel(pozx2, pozy));
                        OptimalLeftOver -= 1;
                    }
                    //document.getElementById("val").innerHTML = teste;
                    line += 1;
                    pozy+=RectangleDim;
                    pozx1=RectangleDim*line - RectangleDim;
                }
                //document.getElementById('tablePrint').innerHTML = finalTable;
            }
            else {
                line=1;//1st line is skipped
                pozy=RectangleDim;
                pozx1 = 0;
                while(OptimalLeftOver>0) {
                    nRectLine_i = 2* Math.floor(Math.sqrt(desiredNo))-2*line;
                    pozx2 = RectangleDim*(line-1)+RectangleDim*(nRectLine_i+1);//pozx1+nRectLine_i+2*RectangleDim;
                    $scope.rectangles.push($scope.DrawRectDel(pozx1,pozy));
                    OptimalLeftOver-=1;
                    if(OptimalLeftOver>0) {
                        $scope.rectangles.push($scope.DrawRectDel(pozx2, pozy));
                        OptimalLeftOver -= 1;
                    }
                    //document.getElementById("val").innerHTML = teste;
                    line += 1;
                    pozy+=RectangleDim;
                    pozx1=RectangleDim*line - RectangleDim;
                }
                //document.getElementById('tablePrint').innerHTML = finalTable;
            }
        };


        $scope.DrawMatrix=function(desiredNo)
        {
            /* Chooses optimal leftover number based on the progression formulas.
             Attempts to minimize the work of the designer of the response form without
             making too much assumptions */
            desiredNo = document.getElementById("NumQuest").value;
            //document.getElementById("val").innerHTML = 'There are '+OptimalLeftOver+' questions missing!'+ arg1+ '___'+arg2;
           // document.getElementById("val").innerHTML=desiredNo;
            var arg1 = desiredNo - (  Math.floor(Math.sqrt(desiredNo))*Math.floor(Math.sqrt(desiredNo)));
            var arg2 = desiredNo - (Math.floor((Math.sqrt(4*desiredNo+1)-1)/2)*Math.floor((Math.sqrt(4*desiredNo+1)-1)/2))-Math.floor((Math.sqrt(4*desiredNo+1)-1)/2);
            var OptimalLeftOver = Math.min( arg1  ,arg2 );
            //document.getElementById("val").innerHTML = 'There are '+OptimalLeftOver+' questions missing!'+ arg1+ '___'+arg2;
            //console.log(arg1);
            if(OptimalLeftOver===arg1){
                //desiredNo = document.getElementById("NumQuest").value;

                $scope.DrawMatrixPerfectProgression(desiredNo);
                $scope.AddExtraRectangles(desiredNo);
            }
            else {
               // desiredNo = document.getElementById("NumQuest").value;

                $scope.DrawMatrixEvenProgression(desiredNo);
                $scope.AddExtraRectangles(desiredNo);
            }
        };

    $scope.DelMatrix=function(desiredNo) {
        $scope.rectangles.length=0;
        /* Chooses optimal leftover number based on the progression formulas.
         Attempts to minimize the work of the designer of the response form without
         making too much assumptions */
        desiredNo = document.getElementById("NumQuest").value;
        //document.getElementById("val").innerHTML = 'There are '+OptimalLeftOver+' questions missing!'+ arg1+ '___'+arg2;
        //document.getElementById("val").innerHTML = desiredNo;
        var arg1 = desiredNo - (  Math.floor(Math.sqrt(desiredNo)) * Math.floor(Math.sqrt(desiredNo)));
        var arg2 = desiredNo - (Math.floor((Math.sqrt(4 * desiredNo + 1) - 1) / 2) * Math.floor((Math.sqrt(4 * desiredNo + 1) - 1) / 2)) - Math.floor((Math.sqrt(4 * desiredNo + 1) - 1) / 2);
        var OptimalLeftOver = Math.min(arg1, arg2);
        //document.getElementById("val").innerHTML = 'There are '+OptimalLeftOver+' questions missing!'+ arg1+ '___'+arg2;
        //console.log(arg1);
        if (OptimalLeftOver === arg1) {
            //desiredNo = document.getElementById("NumQuest").value;

            $scope.DrawMatrixPerfectProgressionDel(desiredNo);
            $scope.DelExtraRectangles(desiredNo);
        }
        else {
            //desiredNo = document.getElementById("NumQuest").value;

            $scope.DrawMatrixEvenProgressionDel(desiredNo);
            $scope.DelExtraRectangles(desiredNo);
        }
    };
}
);

angular.bootstrap(document.getElementById('body'), ["app"]);

Please ignore the methods for "deletion" as they are going to be changed (if you have a good solution for the deletion issue tell me!! Deleting the contents of an SVG being manipulated by html seems difficult but not my question).

That code is inside a specific controller and specific project tree, root folder and all, using WebStorm.

Then as a separate project I have this structure:

where the AngularJS code is in the app.js and it's this:

App.js of the above project:

var dbteste = angular.module("dbteste",[]);

dbteste.controller("AppCtrl",function($http){
    var app = this;
    $http.get("http://localhost:3000").success(function(answers){
        app.answers=answers;
    })
});

My question now is, how can I connect these two components (MongoDB and AngularJS) when I'm handling a very specific task in one of the Angular controllers, i.e. on one of the projects my angular controller is responsible for (in a way) generating the front-end, while on the other (smaller, example only) project I'm doing the forwarding of some database items to the html... My question now is:

Can I create multiple controllers in a single AngularJS file and can each of the controllers handle one thing? Or do I need to do it separately?

I'm receiving user input to create a specific matrix whose structure gets stored inside an array called rectangles that is local to the angular controller... Bottom line: I want that after the user entered input and created the matrix, it can press a button, and once it does the specific configuration of the matrix (which will be stored inside the array rectangles as a series of JSON.parse(string) objects ) will be stored in a DB that then I want to display on another page.

Any ideas, tips, help would be invaluable!

This approach to building angular apps is quite wrong. You shouldn't have any DOM query or manipulation code whatsoever in a controller. Your view should be driven by model data, not by looking for DOM elements. For all of the user input value you are not taking advantage of the 2 way binding that ng-model offers. As for the mongo question the connection needs to be done at server — charlietfl
– charlietfl, Commented Aug 12, 2015 at 23:25
Also stop creating json manually. It makes no sense and is very prone to error. Just use javascript objects and arrays. It makes no sense to create strings and then convert to objectt/array when you should just be working with the objects/arrays directly. This will also make your delete problems very insignificant — charlietfl
– charlietfl, Commented Aug 12, 2015 at 23:27
Could you give me some pseudo code as to where or how I should do the arrays creation in plain JS+HTML in JSON format? Or how should I refactor the above code to achieve the goal I asked about? — Bruno Oliveira
– Bruno Oliveira, Commented Aug 12, 2015 at 23:33
$scope.DrawRect=function(xpos,ypos) { return {x: xpos , y: ypos , width: RectangleDim ....}; }; No need for all that concatenation which can be error prone when writing — charlietfl
– charlietfl, Commented Aug 12, 2015 at 23:47
As for mongo goal you need to use $http (ajax) to send data to server and server code will store — charlietfl
– charlietfl, Commented Aug 12, 2015 at 23:49

Collectives™ on Stack Overflow

Adding data from AngularJS into a MongoDB database

0

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

0

Know someone who can answer? Share a link to this question via email, Twitter, or Facebook.

Your Answer

Sign up or log in

Post as a guest