[英]Displaying data from MongoDB (MEAN Stack)
I am trying to displaying some data from a Mongo DB onto the front-end. 我试图将一些数据从Mongo数据库显示到前端。 I am working with the MEAN stack, which I'm relatively new at.
我正在使用MEAN堆栈,该堆栈相对较新。
I have successfully gotten the data to display in JSON format at a localhost URL (localhost:3030/incidents), but cannot get the clean data to appear on the front end (which is at localhost:9000). 我已经成功地将数据以JSON格式显示在localhost URL(localhost:3030 / incidents),但是无法使干净的数据显示在前端(位于localhost:9000)。
This is what my code looks like so far for the server side ( router.js ): 到目前为止,这是服务器端我的代码( 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;
Client side: 客户端:
services.js: services.js:
'use strict';
angular.module('victimList.services', []).factory('Victim', function($resource) {
return $resource('http://localhost:3030/api/incident/:id');
});
data.js: 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: 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: 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>
When I navigate to the localhost:9000/victims page, I get the header tag, but no data. 当我导航到localhost:9000 / victims页面时,我得到了标头标记,但没有数据。 The console shows this error:
控制台显示此错误:
Error: [$injector:unpr] Unknown provider: victimServiceProvider <- victimService <- DataCtrl
What could I be missing? 我可能会缺少什么? Thanks in advance for your help!
在此先感谢您的帮助!
I figured it out! 我想到了! I needed to add the following:
我需要添加以下内容:
angular.module('victimList', [])
.service('victimService')
.controller('DataCtrl', ['$scope', 'victimService', function ($scope, victimService) {
victimService.getVictims(function(victims) {
$scope.victims = victims;
});
}])
^^ Note that '$scope' was added on line 3. ^^请注意,在第3行上添加了“ $ scope”。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.