顯示來自MongoDB（MEAN Stack）的數據

Question

我試圖將一些數據從Mongo數據庫顯示到前端。 我正在使用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

我可能會缺少什么？ 在此先感謝您的幫助！

Answer 1

我想到了！ 我需要添加以下內容：

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

^^請注意，在第3行上添加了“ $ scope”。