angularjs - 如果任何集合的文档超过 100 个，MEAN stack 应用程序将停止工作

Question

我有一个运行以下版本的应用

• angularjs 1.46
• 蒙戈 4.0.0
• Mongoose 4.1.12
• 表达 4.7.4
• Node 8.11.3

只要我所有的表都包含 100 个或更少的文档，一切都很好。一旦我到达 101，它就会停止返回任何文件。这些是只有一个索引的小型文档，因此大小不是问题。我在想是不是某个地方的设置导致了这种情况，但这是我第一次使用这些技术。这种行为在本地(在 Windows 机器上)和部署在 AWS unix 机器上(代码通过 git 传输)时都会发生。

我已将其简化为这个。我已经定义了一个简单的模型和路线来尝试隔离问题。所以我只是将路线放在浏览器中，我认为这会排除方程式的 Angular 。最多 100 个文档，数据在浏览器中返回。 101 文档没有响应，但是 get 调用出错(见下文)。在开发人员工具中，当我查看 network>xhr 时，它表示在错误最终返回之前它已停止或等待几分钟。在 addCtrl.js 中，未到达日志语句。所以它在 GET 调用的某个地方停滞了，我只是不知道为什么 101 是一个神奇的障碍。

如果我手动返回记录(将 json 直接粘贴到路由的返回值中)，它工作正常。所以它似乎是 mongo/mongoose/node 端的东西(至少我认为这就是它的意思)。

在查看它停止运行的位置时，它似乎是 angular.js 文件中的第 10695 行

xhr.send(isUndefined(post) ? null : post);

对于失败的运行，它会这样结束

成功的运行看起来像这样

这里是routes中get调用报错

angular.js:10695 GET http://localhost:3000/censusBlocks/ 0 () (anonymous) @ angular.js:10695 sendReq @ angular.js:10514 serverRequest @ angular.js:10221 processQueue @ angular.js:14678 (anonymous) @ angular.js:14694 $eval @ angular.js:15922 $digest @ angular.js:15733 $apply @ angular.js:16030 bootstrapApply @ angular.js:1660 invoke @ angular.js:4476 doBootstrap @ angular.js:1658 bootstrap @ angular.js:1678 angularInit @ angular.js:1572 (anonymous) @ angular.js:28821 trigger @ angular.js:3022 eventHandler @ angular.js:3296

运行之间唯一不同的是文档数量。我真的想不通。

我确实发现如果我使用 var query = CensusBlock.find({}).limit(itemcount); 并将项目计数设置为 101，那么它将返回 101 并且工作正常。但如果我将限制设置为 102，它将再次停止工作。或者，如果我将文档数增加到 102，它也会再次停止工作。

我也尝试使用 Mongo 版本 3.6.6 并得到了相同的行为。我也刚刚尝试使用 npm install 在一台新计算机上(我手动复制了 angular.js 文件)，但问题仍然存在。我知道其他人无法复制，但我无法让它停止。所以我真的很困惑和沮丧。

这是代码，它非常简单，所以我觉得这一定是某处的一些奇怪设置，我只是想不出在哪里。

包.json

{
  "name": "testApp",
  "version": "1.0.0",
  "description": "TEst",
  "main": "server.js",
  "author": "gina",
  "dependencies": {
    "express": "~4.7.2",
    "mongoose": "~4.1.0",
    "body-parser": "~1.5.2"
  }
}

服务器.js

// Dependencies
// -----------------------------------------------------
var express         = require('express');
var mongoose        = require('mongoose');
var port            = process.env.PORT || 3000;
var bodyParser      = require('body-parser');

var app = express();


// Express Configuration
// -----------------------------------------------------
// Sets the connection to MongoDB
mongoose.connect("mongodb://localhost/test");

// Logging and Parsing
app.use(express.static(__dirname + '/public'));                 // sets the static files location to public
app.use('/bower_components',  express.static(__dirname + '/bower_components')); // Use BowerComponents
app.use(bodyParser.json());                                     // parse application/json
app.use(bodyParser.urlencoded({extended: true}));               // parse application/x-www-form-urlencoded
app.use(bodyParser.text());                                     // allows bodyParser to look at raw text
app.use(bodyParser.json({ type: 'application/vnd.api+json'}));  // parse application/vnd.api+json as json

// Routes
// ------------------------------------------------------
require('./app/routes.js')(app);


// Listen
// -------------------------------------------------------
app.listen(port);
console.log('App listening on port ' + port);

routes.js。请注意，查询没有 .limit，它只是试图获取所有文档。如上所述，添加 .limit(101) 似乎可以使其工作，但每次调用之前都必须获取文档。手动将记录放在这里可以解决这个问题。

// Dependencies
var mongoose        = require('mongoose');
var CensusBlock     = require('./model.js');

// Opens App Routes
module.exports = function(app) {

    // GET Routes
    // --------------------------------------------------------
    // Retrieve the censuslocks from the db
    app.get('/censusBlocks', function (req, res) {
        var blocklist = new CensusBlock(req.body);
        console.log('in route censusblocks'); //This reports
        var query = CensusBlock.find({});
        //var query = CensusBlock.find({}).limit(itemcount); //This seems to work if itemcount is less than or equal to the document count
        query.exec(function (err, blocklist) {
            if (err) {
                console.log(`Error: ${err}`); 
                res.send(err);
            }
            // If no errors are found, it responds with a JSON of all sites
            console.log('in route censusblocks query return'); //This does not report for 101
            res.json(blocklist);

            //Manually returning the data here (as shown below) works so it's the get that's failing somehow
            //return res.json([{}…]);
        });
    });
};  

应用程序.js

// Declares the initial angular module "meanApp". Module grabs other controllers and services.
var app = angular.module('meanApp', ['addCtrl']);

添加Ctrl.js

// Creates the addCtrl Module and Controller.
// var addCtrl = angular.module('addCtrl', ['$scope', '$http']); //causes compile error as noted in comments
var addCtrl = angular.module('addCtrl', []);
addCtrl.controller('addCtrl', function($scope, $http){

    // Initializes Variables
    // ----------------------------------------------------------------------------
    $scope.formData = {};

    // Functions
    // ----------------------------------------------------------------------------
    $http.get('/censusBlocks/').success(function (response) {
        console.log('There are ' + response.length + ' censusblocks'); //This does not report for 101 docs
        $scope.blocks = response;
    }).error(function () { });
});

模型.js

// Pulls Mongoose dependency for creating schemas
var mongoose    = require('mongoose');
var Schema      = mongoose.Schema;

var CensusBlockSchema = new Schema({
    geoid10: Number,
    intptlat10: Number,
    intptlon10: Number,
    blockarea: Number
});

CensusBlockSchema.index({ geoid10: 1 }, { unique: true });

module.exports = mongoose.model('censusblocks', CensusBlockSchema);

配置.js

// Sets the MongoDB Database options
module.exports = {

    local:
    {
        name: "testapp",
        url: "mongodb://localhost/test",
        port: 27017
    }
};

index.html

<!doctype html>

<html class="no-js" ng-app="meanApp">
<head>
    <meta charset="utf-8">
    <title>Scotch MEAN Map</title>
    <meta name="description" content="test App">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- JS Source -->
    <script src="js/angular.js"></script>
     <!-- Angular Scripts -->
    <script src="js/app.js"></script>
    <script src="js/addCtrl.js"></script>
</head>
<body ng-controller="addCtrl">
    <div class="container">
        <div class="form-group">
            <label for="census block">Pick the Census Block</label>
            <select label="census block" ng-model="formdata.selectedBlock"  ng-options="x.geoid10 for x in blocks | orderBy:'geoid10' "></select>
        </div>

    </div>
</body>
</html>

Answer 1

哇，很抱歉之前没有注意到这一点，但是您未能将依赖项注入(inject)到您的模块中。

Controller 需要 $scope 和 $http 所以你应该声明它们:

var addCtrl = angular.module('addCtrl', ['$scope', '$http']);