2017-03-03 5 views
0

Mongo DBからのデータをフロントエンドに表示しようとしています。私は比較的新しいMEANスタックを使って作業しています。MongoDBからデータを表示する(平均スタック)

ローカルホストのURL(localhost:3030/incidents)でJSON形式でデータを表示することに成功しましたが、フロントエンド(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> 

私はローカルホストに移動します:9000 /犠牲者のページに、私は、ヘッダーを取得タグが、データはありません。コンソールに次のエラーが表示されます。

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

どうすればよいですか?あなたの助けを前もってありがとう!

+0

に追加されたことを

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

^^注意。 –

+0

あなたはタイプミスがあります。あなたのサービスに 'victimSerivce'という名前をつけ、あなたのコントローラで' victimService'を参照しています。 :) – eminlala

+0

@MatthewGreen、どのようにスコープを追加しますか? ありがとう、@ ex0dm3nt !!タイプミスを修正しましたが、エラーを表示しています: 'TypeError:未定義の 'getVictims'プロパティを読み込めません –

答えて

0

私はそれを理解しました!私は、以下を追加するために必要な:あなたは、関数呼び出しの前に、あなたのDataCtrlでスコープが不足している「$の範囲は」行3

関連する問題