Getting Information From Mongo And Displaying It With AngularJS

Question

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

Claies · Accepted Answer · 2014-08-04 20:13:15Z

1

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:

Include require.js and register it as a script in your HTML.
Load the MongoClient manually by using a <script> tag in your HTML and using the new MongoClient() function.
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)

answered Aug 4, 2014 at 20:13

Claies

22.4k4 gold badges56 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Getting Information From Mongo And Displaying It With AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related