CODEWITHSUNDEEP
node.jsangularjsmongodbejs
flashc5
flashc5

Reputation: 347

Getting Information From Mongo And Displaying It With AngularJS

Hello I am trying to learn the mean stack and seem to be stuck.

I created a node.js, express angular and mongo project.

I have installed mongo with npm install mongodb

How do I pass data from mongo to the angular view?

my index.ejs file looks like this

<!DOCTYPE html>
<html ng-app="phonecatApp">
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
      <script src="/javascripts/countriesCtrl.js"></script>
    <script src="/javascripts/angular.min.js" ></script>

  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>

        <div ng-controller="PhoneListCtrl">
            <table border="1" cellspacing="0"  cellpadding=3>
                <tr><td>Abbreviation</td><td>Name</td></tr>
                <tr ng-repeat="state in states">
                    <td>{{state.abbreviation}}</td><td>{{state.name}}</td>
                </tr>
            </table>
        </div>
  </body>
</html>

my countriesCtrl.js looks like this

var MongoClient = require('mongodb').MongoClient;
//var mongoClient = new MongoClient(new Server('localhost', 27017));
var phonecatApp = angular.module('phonecatApp', []);

phonecatApp.controller('PhoneListCtrl', function ($scope) {

        $scope.lkp_states = function() {

            MongoClient.connect("mongodb://localhost:27017/website", function(err, db) {
                if(err) {
                    return console.dir(err);
                }
                else
                {
                    console.log("connected to mongo");
                }
            })

            return db.collection('states');
        }
    });

The error I get is this

GET http://localhost:3000/ [HTTP/1.1 200 OK 35ms]
Use of getUserData() or setUserData() is deprecated.  Use WeakMap or element.dataset instead. requestNotifier.js:63
GET http://localhost:3000/stylesheets/style.css [HTTP/1.1 304 Not Modified 17ms]
GET http://localhost:3000/javascripts/countriesCtrl.js [HTTP/1.1 304 Not Modified 15ms]
GET http://localhost:3000/javascripts/angular.min.js [HTTP/1.1 304 Not Modified 7ms]
ReferenceError: require is not defined countriesCtrl.js:2
http://localhost:3000/javascripts/angular.min.js is being assigned a //# sourceMappingURL, but already has one
Error: [$injector:modulerr] http://errors.angularjs.org/1.2.21/$injector/modulerr?p0=phonecatApp&p1=%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.2.21%2F%24injector%2Fnomod%3Fp0%3DphonecatApp%0Ay%2F%3C%40http%3A%2F%2Flocalhost%3A3000%2Fjavascripts%2Fangular.min.js%3A6%3A443%0AZc%2Fb.module%3C%2F%3C%2Fb%5Be%5D%3C%40http%3A%2F%2Flocalhost%3A3000%2Fjavascripts%2Fangular.min.js%3A20%3A385%0AZc%2Fb.module%3C%2F%3C%40http%3A%2F%2Flocalhost%3A3000%2Fjavascripts%2Fangular.min.js%3A20%3A273%0Ae%2F%3C%40http%3A%2F%2Flocalhost%3A3000%2Fjavascripts%2Fangular.min.js%3A33%3A206%0Aq%40http%3A%2F%2Flocalhost%3A3000%2Fjavascripts%2Fangular.min.js%3A7%3A288%0Ae%40http%3A%2F%2Flocalhost%3A3000%2Fjavascripts%2Fangular.min.js%3A33%3A148%0Agc%40http%3A%2F%2Flocalhost%3A3000%2Fjavascripts%2Fangular.min.js%3A36%3A250%0Afc%2Fc%40http%3A%2F%2Flocalhost%3A3000%2Fjavascripts%2Fangular.min.js%3A18%3A58%0Afc%40http%3A%2F%2Flocalhost%3A3000%2Fjavascripts%2Fangular.min.js%3A18%3A270%0AXc%40http%3A%2F%2Flocalhost%3A3000%2Fjavascripts%2Fangular.min.js%3A17%3A369%0A%40http%3A%2F%2Flocalhost%3A3000%2Fjavascripts%2Fangular.min.js%3A213%3A58%0Aa%40http%3A%2F%2Flocalhost%3A3000%2Fjavascripts%2Fangular.min.js%3A144%3A399%0Aoe%2Fc%2F%3C%40http%3A%2F%2Flocalhost%3A3000%2Fjavascripts%2Fangular.min.js%3A31%3A159%0Aq%40http%3A%2F%2Flocalhost%3A3000%2Fjavascripts%2Fangular.min.js%3A7%3A288%0Aoe%2Fc%40http%3A%2F%2Flocalhost%3A3000%2Fjavascripts%2Fangular.min.js%3A31%3A143%0A angular.min.js:6
GET http://localhost:3000/stylesheets/style.css

Upvotes: 0

Views: 228

Answers (1)

Claies
Claies

Reputation: 22323

The MongoClient uses require.js, which is a common way to include libraries in node.js. In this case, however, you aren't running this code on the server in node.js, you are running it on the client in the browser, and thus don't have require.js defined by default.

You have three options to solve this situation:

  1. Include require.js and register it as a script in your HTML.
  2. Load the MongoClient manually by using a <script> tag in your HTML and using the new MongoClient() function.
  3. Refactor your application to perform the Mongo Database access at the server level in node.js and only have your client HTML perform a request for the query results rather than perform the query itself. (recommended)

Upvotes: 1

Related Questions