使用 AngularJS、NodeJS 和 Mongoose 的 Highcharts

Question

我是 Javascript 世界的初学者。我正在尝试将高图表（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> 

简单的节点查找方法如下，也使用了mongoose。

foult.find({$and:[ {"instrument":"android"} , {"sentiments": {"$gt":0}} ]}, function(err, foult) {
  if (err) return console.error(err);
  androidSentimentArray = ["foult", foult.length];
  console.dir(foult);
});

Answer 1

您应该创建一个服务（单例）或工厂来发出 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);
                       });
    });