Question

我正在尝试将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 / victim页面时，我得到了标头标签，但没有数据。控制台显示此错误：

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

^^请注意＆＃39; $ scope＆＃39;在第3行添加。

显示来自MongoDB的数据（MEAN堆栈）

1 个答案: