Angular Factory wird nicht aufgerufen

Ich folge this Tutorial zum Erstellen einer MEAN App mit Google Maps. Ich habe das Problem, dass die Karte überhaupt nicht angezeigt wird. Es gibt keine Fehler in der Browser-Konsole und als ich das Debugging mit dem node-Inspector probiert habe, habe ich festgestellt, dass ich in der Datei, die die Angular Factory enthält, Haltepunkte setzen kann, die nicht ausgelöst werden. Ich frage mich, ob es überhaupt angerufen wird.Angular Factory wird nicht aufgerufen

factory.js

angular.module('gservice', []).factory('gservice', function($http){ 

    var googleMapService = {}; 
    var stationLocations = []; 
    var selLat = 40.7831; 
    var selLong = -73.9712; 

    googleMapService.refresh = function(latitude, longitude){ 

     stationLocations = []; 

     $http.get('/stations').then(function(response){ 
      stationLocations = convertToMapPoints(reponse.data); 
      initialize(latitude, longitude); 
     }).error(function(){console.log("error")}); 
    }; 

    var convertToMapPoints = function(reponse){ 
     var stationLocations = []; 

     for(var i=0; i < reponse.length; i++) { 
      console.log(i); 
      console.log("hi"); 
      var station = reponse[i]; 

      var stationDetails = 
       '<p>Station Name: ' + station.StationName + 
       '</p>'; 

      // Convert retrieved JSON to GMaps LatLong Format 
      stationLocations.push({ 
       latlong: new google.maps.LatLng(station.Latitude, station.Longitude), 
       message: new google.maps.InfoWindow({ 
        content: stationDetails, 
        maxWidth: 300 
       }), 
       stationName: station.StationName 
      }); 

     } 
     return stationLocations; 
    }; 

    var initialize = function(latitude, longitude) { 
     var startLatLong = {lat: 40.7831, lng: -73.9712}; 

     if (!map){ 
      console.log('no map yet'); 
      var map = new google.maps.Map(document.getElementById('map'), { 
       zoom: 12, 
       center: startLatLong 
      }); 
     } 

     locations.forEach(function(n, i){ 
      var marker = new google.maps.Marker({ 
       position: n.latlong, 
       map: map, 
       title: "Citigraph", 
       icon: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png" 
      }); 

      google.maps.event.addListener(marker, 'click', function(e){ 
       currentMarker = n, 
       n.message.open(map, marker); 
      }); 
     }); 

     var initLocation = new google.maps.LatLng(latitude, longitude); 
     var marker = new google.maps.Marker({ 
      position: initLocation, 
      animation: google.maps.Animation.Bounce, 
      map: map, 
      icon: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png" 
     }); 
     lastMarker = marker; 
    }; 

    google.maps.event.addDomListener(window, 'load', 
     googleMapService.refresh(selLat, selLong)); 

    return googleMapService; 
});

Dies sollte die div map und legen Sie eine Karte bekommen es in der index.html:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <link rel="stylesheet" href="style.css"/> 
    <!-- Google Maps API --> 
    <script src="https://maps.googleapis.com/maps/api/js?key=KEY&sensor=true"></script> 
    <!-- JS Source --> 
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
    <script src="/node_modules/angular/angular.js"></script> 
    <!-- Angular Files --> 
    <script src="./app.js"></script> 
    <script src="./factory.js"></script> 

    </head> 
    <body> 

    <div class="container"> 
    <div id="map"></div> 
    </div> 
    </body> 
</html>

Und app.js ist nur folgendes:

var app = angular.module('citigraph', ['gservice']);

Mein server.js:

var express   = require('express'); 
var mongoose  = require('mongoose'); 
var port   = process.env.PORT || 3000; 
var bodyParser  = require('body-parser'); 
var morgan   = require('morgan'); 
var methodOverride = require('method-override'); 
var app    = express(); 

mongoose.connect('mongodb://127.0.0.1:27017/test2'); 

var db = mongoose.connection; 
db.on('error', console.error.bind(console, 'connection error:')); 
db.once('open', function() { 
    console.log('connected'); 
}); 

// Logging & Parsing 
app.use(express.static(__dirname)); 
app.use(morgan('dev'));           
app.use(bodyParser.json());          
app.use(bodyParser.urlencoded({extended: true}));    
app.use(bodyParser.text());          
app.use(bodyParser.json({ type: 'application/vnd.api+json'})); 
app.use(methodOverride()); 

require('./routes.js')(app); 

app.listen(port, function() { 
    console.log('Server listening on', 3000) 
})

Aber wie gesagt, die Seite bleibt leer und es gibt keine Fehler. Ich habe versucht, es stundenlang zu reparieren, vielleicht hat jemand hier eine Idee, in welche Richtung ich schauen sollte, um das zu beheben?

Prost

Quelle

2017-05-02 ffritz

sollten Sie 'factory.js' umfassen vor' app.js' –

@Hadi Danke, das zu wissen, ist gut. Allerdings hat es nicht behoben. – ffritz

welche Anzeige in der Konsole jetzt? –

Sie sollten den gleichen Namen für den Service und das Modul zunächst nicht haben. versuche, es in einen anderen Namen zu ändern.

angular.module('gservice', []).factory('Myervice', function($http){

und dann

var app = angular.module('citigraph', ['gservice']);

auch die Reihenfolge sollte sein,

<script src="./factory.js"></script> 
<script src="./app.js"></script>

Sie müssen auch ng-App in den HTML-Code enthalten.

<div ng-app="citigraph" class="container"> 
    <div id="map"></div> 
    </div> 
    </body>

Quelle

2017-05-02 08:01:15 Sajeetharan

Vielen Dank. Ich habe es entsprechend geändert, aber ich bekomme immer noch die gleiche leere Seite und keine Fehler. – ffritz

Okay, ich habe es aktualisiert, keine Änderung leider. – ffritz

können Sie den Cache löschen und überprüfen? – Sajeetharan

Angular Factory wird nicht aufgerufen

Antwort

Verwandte Themen