Highcharts с использованием AngularJS, NodeJS и Mongoose

Question

Я начинаю на Javascript мире. Я пытаюсь использовать высокие графики (www.highcharts.com) для диаграмм pia на AngularJS. У меня есть пример, который работает отлично, но ниже пример имеет массив «идей», но я хотел сделать это от MongoDB, а не от статического значения. Я не уверен, что нужно сделать здесь, чтобы сделать эту динамику. Я пробовал немного вещей, и я могу получить данные от Mongo по простой программе NodeJS, но я не уверен, как мне интегрировать это с AngularJS? Как заменить значение $ scope.ideas на данные, которые я получаю на свой код NodeJS?

Пожалуйста, помогите мне, поскольку я полностью путаюсь с следующим шагом здесь. Я потратил много времени, чтобы узнать подробности и сделать несколько вещей, но не повезло.

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

Метод поиска простых узлов, как показано ниже, использует мангуст.

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

Вы должны создать службу (Singleton) или фабрику, чтобы сделать запрос 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); 
         }); 
    });