将JSON AngularJS结构传递给mongoDB数据库

Question

我刚刚使用AngularJS将我以纯SVG格式转换成JSON格式的数据结构“转换”了一下。

现在，我想将这样的结构存储在MongoDB数据库中，以开始最终连接MEAN堆栈的一些组件，并开始看到一些工作起作用！基本上，我有一个Webstorm AngularJS项目中下面的代码：

JS：

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


     $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.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.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.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.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.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.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; 
      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){ 
       DrawMatrixPerfectProgression(desiredNo); 
       AddExtraRectangles(desiredNo); 
      } 
      else { 
       DrawMatrixEvenProgression(desiredNo); 
       AddExtraRectangles(desiredNo); 
      } 
     }; */ 
} 
); 

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

代码的相关部分是$ scope.rectangles数组，它包含字符串的JSON.parse代表我html方面的数据结构和JSON中的结构（或JSON解析或其他）是我想要保存在MongoDB数据库中的...我该怎么做？该HTML相关部分也正是如此：

HTML：

<p><button ng-click="DrawMatrixEvenProgression(NumQuest)">Draw</button></p> 

    <svg ng-attr-height="{{graph.height}}" ng-attr-width="{{graph.width}}"> 

    <rect ng-repeat="rect in rectangles" 

      ng-attr-x="{{rect.x}}" 

      ng-attr-y="{{rect.y}}" 

      ng-attr-width="{{rect.width}}" 

      ng-attr-height="{{rect.height}}"> 

    </rect> 

    </svg> 

任何帮助将不胜感激...我可以通过添加更多的文件到该项目来处理数据库开始，那么事情将被链接一起？

像添加东西来处理猫鼬和连接？

在此先感谢！

Answer 1

因为Angular是一个前端框架。因此，为了与数据库进行通信（在本例中是MongoDB），您需要在服务器端有应用程序来处理这个问题，我建议您使用Node.js和Mongoose作为MongoDB驱动程序。

Node.js
Mongoose

回过头来角，您可以创建角的服务或工厂，让他们谈谈与像$ HTTP或$资源服务您的服务器。

Angular service documentation

举例角度服务

angular.module('app') 
    .factory('RectangleService', function($http){ 
    return { 
     create: create 
    } 

    function create(rectangle){ 
     // make http request to the server 
     return $http({ 
     url: 'API_URL', 
     method: 'GET', 
     params: rectangle 
     }); 
    } 
    }); 

后您创建的服务，你必须把它注入到你的控制器和 您可以创建一些功能，以您的$范围，像这样的服务来说话

app.controller('MainCtrl', function($scope, RectangleService) { // <-- Inject service to controller 
    // your controller code 

    $scope.createRectangle = function(rectangle){ 
    RectangleService.create(rectangle); 
    } 
}); 

您可以将createRectangle函数映射为像ng-click这样的指令并将您的json数据作为参数

因为我不知道你可以使用什么服务器端语言，所以我不来与Node.js的&猫鼬

希望的例子这可以帮助:)