Question

您好我正在尝试学习平均堆栈并且似乎被卡住了。

我创建了一个node.js，表示angular和mongo项目。

我已经使用npm install mongodb

安装了mongo

如何将数据从mongo传递到角度视图？

我的index.ejs文件看起来像这样

<!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看起来像这样

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');
        }
    });

我得到的错误就是这个

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

Answer 1

MongoClient使用require.js，这是在node.js中包含库的常用方法。但是，在这种情况下，您不能在node.js中的服务器上运行此代码，而是在浏览器中的客户端上运行它，因此默认情况下不会定义require.js. / p>

您有三种方法可以解决这种情况：

包含require.js并将其注册为HTML中的脚本。
使用HTML中的<script>标记并使用新的MongoClient()功能手动加载MongoClient。
重构您的应用程序以在node.js中的服务器级别执行Mongo Database访问，并且只让您的客户端HTML执行查询结果请求，而不是执行查询本身。（推荐）

从Mongo获取信息并使用AngularJS显示它

1 个答案: