显示来自 MongoDB 的数据（MEAN Stack）答案

【问题标题】：Displaying data from MongoDB (MEAN Stack)显示来自 MongoDB 的数据（MEAN Stack）
【发布时间】：2017-07-24 02:10:54
【问题描述】：

我正在尝试将 Mongo DB 中的一些数据显示到前端。我正在使用 MEAN 堆栈，我相对较新。

我已成功获取数据以 JSON 格式显示在 localhost URL (localhost:3030/incidents)，但无法让干净数据显示在前端（位于 localhost:9000）。

这是我的代码目前在服务器端的样子（router.js）：

"use strict";

var config = require('../config/database-config');

var Router = function (options) {
  var self = this;
  self.environment = options.environment;


  self.route = function(app) {
    var IncidentController = require('./controllers/incident-controller.js');
    var IncidentModel = require('./models/incident-model.js');
    var incidentModel = new IncidentModel(config[`${self.environment}`]);
    console.log("Incident Model", incidentModel);
    var incidentController = new IncidentController({model: incidentModel});

    app.get('/api/incident/:id', incidentController.findIncidentById);
    app.get('/incidents', incidentController.getAllIncidents);
  };
  return self;
};

module.exports = Router;

客户端：

services.js：

'use strict';
    angular.module('victimList.services', []).factory('Victim', function($resource) {
      return $resource('http://localhost:3030/api/incident/:id');
    });

data.js：

'use strict';

 angular.module('victimList', [])
   .service('victimList')
   .controller('DataCtrl', ['victimService', function ($scope, victimService) {
      victimService.getVictims(function(victims) {
        $scope.victims = victims;
      });
}])
  .factory('victimSerivce', function($http) {
    var getVictims = function(callback) {
      $http.get('http://localhost:3030/incidents').success(function(data){
        callback(data);
      });
    };

    return {
      getVictims: getVictims
    };
  });

app.js:

'use strict';

angular
  .module('frontendApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch',
    'victimList',
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl',
        controllerAs: 'main'
      })
      .when('/victims', {
        templateUrl: 'views/victims.html',
        controller: 'DataCtrl',
        controllerAs: 'victims'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

victims.html:

<div ng-app="victimList">
  <h1>Testing</h1>
    <div ng-controller="DataCtrl">
        <ul ng-repeat="victim in victims">
            <li>1</li>
            <li>{{ victim.firstname }} {{ victim.lastname }}</li>
        </ul>
    </div>

当我导航到 localhost:9000/victims 页面时，我得到了标题标签，但没有数据。控制台显示此错误：

Error: [$injector:unpr] Unknown provider: victimServiceProvider <- victimService <- DataCtrl

我会错过什么？提前感谢您的帮助！

【问题讨论】：

您在函数调用之前缺少 DataCtrl 中的范围。
你有一个错字。您将服务命名为victimSerivce，并且在您的控制器中引用victimService。 :)
@MatthewGreen，我将如何添加范围？谢谢，@ex0dm3nt！我已修正错字，但现在显示错误：TypeError: Cannot read property 'getVictims' of undefined

标签： javascript angularjs mean-stack

【解决方案1】：

我想通了！我需要添加以下内容：

angular.module('victimList', [])
   .service('victimService')
   .controller('DataCtrl', ['$scope', 'victimService', function ($scope, victimService) {
      victimService.getVictims(function(victims) {
        $scope.victims = victims;
      });
}])

^^ 请注意，'$scope' 是在第 3 行添加的。

【讨论】：