使用AngularJS、NodeJS和Mongoose的海图

我是Javascript世界的初学者。我正在尝试使用high charts www.highcharts.com获取AngularJS上的pia图表。我有下面的例子，它工作得很好，但下面的例子有想法数组静态，但我想从MongoDB而不是静态值来做这件事。我不确定需要在这里做些什么才能使这项工作充满活力。我尝试了一些东西，我能够在简单的NodeJS程序中从Mongo获取数据，但我不确定如何将其与AngularJS集成？如何用NodeJS代码中获取的数据替换$scope.ideas值

请帮助我，因为我完全搞不清楚下一步该怎么做。我花了很多时间去了解细节，做了一些事情，但没有运气

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    <div class="hc-pie" items="limitedIdeas"></div>
  </div>
</div>

<script>
function MyCtrl($scope, limitToFilter) {
  $scope.ideas = [
    ['ideas1', 1],
    ['ideas2', 8],
    ['ideas3', 5]
  ];

  $scope.limitedIdeas = limitToFilter($scope.ideas, 3);
}

angular.module('myApp', [])
  .directive('hcPie', function () {
  return {
    restrict: 'C',
    replace: true,
    scope: {
      items: '='
    },
    controller: function ($scope, $element, $attrs) {
      console.log(2);

    },
    template: '<div id="container" style="margin: 0 auto">not working</div>',
    link: function (scope, element, attrs) {
      console.log(3);
      var chart = new Highcharts.Chart({
        chart: {
          renderTo: 'container',
          plotBackgroundColor: null,
          plotBorderWidth: null,
          plotShadow: false
        },
        title: {
          text: 'Browser market shares at a specific website, 2010'
        },
        tooltip: {
          pointFormat: '{series.name}: <b>{point.percentage}%</b>',
          percentageDecimals: 1
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
              enabled: true,
              color: '#000000',
              connectorColor: '#000000',
              formatter: function () {
                return '<b>' + this.point.name + '</b>: ' + this.percentage + ' %';
              }
            }
          }
        },
        series: [{
          type: 'pie',
          name: 'Browser share',
          data: scope.items
        }]
      });
      scope.$watch("items", function (newValue) {
        chart.series[0].setData(newValue, true);
      }, true);

    }
  }
});

</script> 

---

您应该创建一个服务单例或工厂来发出http请求，并将数据获取/发布到节点服务器，然后将服务/工厂注入控制器中

angular.module('').controller('myController', function(ideasService) {
    ideasService.getIdeas()
        .then(function(result) {
            //Apply returned data to view
            $scope.ideas = result.data;
         });
});

angular.module('')
    .service('ideasService', function($http) {
        this.getIdeas = function() {
            //returns promise
            return $http.get('url')
                      .then(function(response) {
                           console.log(response.data);
                       });
    });

---

您需要尝试使用angular指令来渲染hightchart，这将减少大多数渲染图形的指令工作。@PankajParkar，感谢您在这里的回答，但我的问题是，如何集成单独的节点代码和angular代码。节点代码从Mongo获取数据并显示，但我不知道如何将foult.find方法响应传递到$scope.ideas数组？感谢您的回答，但我是否应该从服务连接到MongoDB？基本上，我应该在哪里找到我上面展示的方法，该方法可以获取我正在寻找的数据？代码的这一部分是否将放在您编写的//返回承诺注释下？抱歉，如果我问了一些愚蠢的问题，但我是初学者，所以不太清楚。查找代码应该在节点服务器上运行，而您的angular代码则在客户端上运行。您将需要使用express设置节点服务器，以便拥有可以调用以返回数据的路由。这里是一个小提琴，显示了一个express应用程序的基本布局，您需要npm在您的项目上安装express是的。我正在研究带有节点和角度的expressjs，但感到困惑。我看到了著名的todo示例，它返回getTodo列表/api/todos URI。这个/api/todos URI将返回todo的列表，但在我的例子中，我需要返回array of array for ideas，对吗？很抱歉，我现在把这一点带到了不同的方向，但我的最终目标是从MongoDB动态填充$scope.ideas。下面是一个修订版，它提供了一个MongoDB的基本示例，因此当您调用getIdeas时，它将向节点服务器生成一个api，该api将返回一个json文档数组，然后您将能够访问它们就像我在控制器上看到的，好的。谢谢你。让我尝试与express合作，如果我在这方面遇到任何问题，我会让您知道。

angular.module('').controller('myController', function(ideasService) {
    ideasService.getIdeas()
        .then(function(result) {
            //Apply returned data to view
            $scope.ideas = result.data;
         });
});

angular.module('')
    .service('ideasService', function($http) {
        this.getIdeas = function() {
            //returns promise
            return $http.get('url')
                      .then(function(response) {
                           console.log(response.data);
                       });
    });