CODEWITHSUNDEEP
javascriptangularjsmongodbmean-stackmeanjs
Daniel Kr
Daniel Kr

Reputation: 43

How can I get a value from mongodb to an angularjs controller

I am new to Web Development and started out with a MEAN-Stack (Mongo, Express, Angular, Node).

In short, I would like to get a value from mongo into my angular controller to use multiple values from mongo in a formula like this:

value11*value12 + value21*value22 ...etc

My Problem in more detail:

  1. I already wrote with a fieldset some data into mongo:

HTML Snippet

<fieldset>
<rzslider rz-slider-model="value11"
          rz-slider-options="slider11.options"></rzslider>
<md-slider flex md-discrete ng-model="value12" step="1" min="1 max="100 aria-label="rating"></md-slider
</fieldset>

Controller.js Snippet. The rzslider comes from there https://github.com/angular-slider/angularjs-slider
The md-slider from Angular-Material

$scope.slider11 = { 
  options: { 
    showTicks: true,
    hidePointerLabels: true,
    hideLimitLabels: true,
    stepsArray: [
      { value: 1, legend: 'Very poor' }
      { value: 2, legend: 'Poor' },
      { value: 3, legend: 'Fair' },
      { value: 4, legend: 'Good' }, 
      { value: 5, legend: 'Very Good' }
    ] 
  }
};
$scope.value12 = 40;
//Create new Article object
var article = new Articles
  value11: this.value11,
  value12: this.value12,

At this point everything is working and in mongo the set values get stored.

  1. In this second step I would like to get the value from the database into a different controller to include them in above mentioned formula. The only thing working so far is to recall the values like this in the html view directly:

HTML Snippet

{{article.value11 * article.value12}}

which works, as far as I understood thanks to a query like below.

Controller snippet

// Find a list of Articles
$scope.find = function () {
$scope.articles = Articles.query();
};

But ultimately I would like to recall the database values and define them as a new $scope in a controller.

Upvotes: 3

Views: 2179

Answers (1)

FrickeFresh
FrickeFresh

Reputation: 1758

So the idea behind the whole MEAN stack and more-or-less the whole frontend/backend idea is that your angular application is the frontend and you need to make a AJAX call to your Node.js service to connect to MongoDB

Think of it like this Angular <---AJAX---> Node <------> Mongo

So the first thing you need is to build a rest service (using the help of the express framework) so something like this would work

app.get('/getMongoData', function(req, res, next) {
     //code to get mongo data with Mongoose

     req.json(DataFromMongo); //returns the data in json format
});

Here is where you will use your backend code to grab data from the Mongo Database using the Mongoose package and return send it back using the req.json() call which is part of Express

Now that this all work you can call the data from your Angular controller with something like

$http.get('/getMongoData').then(function(response) {
      $scope.myMongoData = response.data;       
});

NOTE: don't forget to add $http to your controller's injection app.controller('MyController', ['$scope', '$http', function ($scope, $http) { // code }]);

Upvotes: 3

Related Questions