我想了解更多nodejs,angularjs和mongodb。我正在开设这个在线课程https://scotch.io/tutorials/making-mean-apps-with-google-maps-part-i,因为我想了解如何使用前面提到的工具使用谷歌地图。但是,我在使用modernizr的谷歌crome上有一个错误,我不知道如何解决。它显示了第一行代码:#!/ usr / bin / env node。有没有人知道如何解决这种情况?
我已经阅读了所有Uncaught语法错误:...在stackoverflow中但我无法找到它。
我的代码是上面链接的复制和粘贴。
文件夹结构:
MapApp
-- app // Backend
---- model.js
---- routes.js
-- public // Frontend
---- index.html
---- js
------ app.js
------ addCtrl.js
------ gservice.js
---- style.css
-- server.js // Express Server
-- package.json
这是index.html
<!doctype html>
<!-- Declares meanMapApp as the starting Angular module -->
<html class="no-js" ng-app="meanMapApp">
<head>
<meta charset="utf-8">
<title>Edwin MEAN Map</title>
<meta name="description" content="An example demonstrating Google Map integration with MEAN Apps">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS -->
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css"/>
<link rel="stylesheet" href="style.css"/>
<!-- Holder JS -->
<script src="../bower_components/holderjs/holder.js"></script>
<!-- Google Maps API -->
<script src="https://maps.googleapis.com/maps/api/js?key=A VALID GOOGLE KEY "></script>
<!-- Modernizr -->
<script src="../bower_components/modernizr/bin/modernizr"></script>
<!-- JS Source -->
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/angular-route/angular-route.js"></script>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644 },
zoom: 8
});
}
</script>
<script src="../bower_components/angularjs-geolocation/dist/angularjs-geolocation.min.js"></script>
<!-- Angular Scripts -->
<script src="js/app.js"></script>
<script src="js/addCtrl.js"></script>
<script src="js/gservice.js"></script>
</head>
<body ng-controller="addCtrl">
<div class="container">
<div class="header">
<ul class="nav nav-pills pull-right">
<li active><a href="">Join the Team</a></li>
<li disabled><a href="">Find Teammates</a></li>
</ul>
<h3 class="text-muted">The Edwin's MEAN MapApp</h3>
</div>
<!-- Map and Side Panel -->
<div class="row content">
<!-- Google Map -->
<div class="col-md-7">
<div id="map" style="width:645px; height:645px"></div>
</div>
<!-- Side Panel -->
<div class="col-md-5">
<div class="panel panel-default">
<!-- Panel Title -->
<div class="panel-heading">
<h2 class="panel-title text-center">Join the Scotch Team! <span class="glyphicon glyphicon-map-marker"></span></h2>
</div>
<!-- Panel Body -->
<div class="panel-body">
<!-- Creates Form (novalidate disables HTML validation, Angular will control) -->
<form name ="addForm" novalidate>
<!-- Text Boxes and Other User Inputs. Note ng-model binds the values to Angular $scope -->
<div class="form-group">
<label for="username">Username <span class="badge">All fields required</span></label>
<input type="text" class="form-control" id="username" placeholder="OldandGold" ng-model="formData.username" required>
</div>
<label class="radio control-label">Gender</label>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="radiomale" value="Male" ng-model="formData.gender">
Male
</label>
</div>
<div class="radio" required>
<label>
<input type="radio" name="optionsRadios" id="radiofemale" value="Female" ng-model="formData.gender">
Female
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="radioother" value="What's it to ya?" ng-model="formData.gender">
What's it to ya?
</label>
</div>
<div class="form-group">
<label for="age">Age</label>
<input type="number" class="form-control" id="age" placeholder="72" ng-model="formData.age" required>
</div>
<div class="form-group">
<label for="language">Favorite Language</label>
<input type="text" class="form-control" id="language" placeholder="Fortran" ng-model="formData.favlang" required>
</div>
<div class="form-group">
<label for="latitude">Latitude</label>
<input type="text" class="form-control" id="latitude" value="39.500" ng-model="formData.latitude" readonly>
</div>
<div class="form-group">
<label for="longitude">Longitude</label>
<input type="text" class="form-control" id="longitude" value="-98.350" ng-model="formData.longitude" readonly>
</div>
<div class="form-group">
<label for="verified">HTML5 Verified Location? <span><button class="btn btn-default btn-xs"><span class="glyphicon glyphicon-refresh"></span></button></span></label>
<input type="text" class="form-control" id="verified" placeholder= "Nope (Thanks for spamming my map...)" ng-model="formData.htmlverified" readonly>
</div>
<!-- Submit button. Note that its tied to createUser() function from addCtrl. Also note ng-disabled logic which prevents early submits. -->
<button type="submit" class="btn btn-danger btn-block" ng-click="createUser()" ng-disabled="addForm.$invalid">Submit</button>
</form>
</div>
</div>
</div>
</div>
<hr/>
<!-- Footer -->
<div class="footer">
<p class="text-center"><span class="glyphicon glyphicon-check"></span> Created by Ahmed Haque for Scotch IO -
<a href="https://scotch.io/">App Tutorial</a> | <a href="https://github.com/afhaque/MeanMapAppV2.0">Github Repo</a></p>
</div>
</div>
</body>
</html>
===================================== =====这是我的server.js ===
// Dependencies
// -----------------------------------------------------
var express = require('express');
var mongoose = require('mongoose');
var port = process.env.PORT || 3000;
var morgan = require('morgan');
var bodyParser = require('body-parser');
var methodOverride = require('method-override');
var app = express();
// Express Configuration
// -----------------------------------------------------
// Sets the connection to MongoDB
mongoose.connect("mongodb://localhost/MeanMapApp");
// Logging and Parsing
app.use(express.static(__dirname + '/public')); // sets the static files location to public
app.use('/bower_components', express.static(__dirname + '/bower_components')); // Use BowerComponents
app.use(morgan('dev')); // log with Morgan
app.use(bodyParser.json()); // parse application/json
app.use(bodyParser.urlencoded({extended: true})); // parse application/x-www-form-urlencoded
app.use(bodyParser.text()); // allows bodyParser to look at raw text
app.use(bodyParser.json({ type: 'application/vnd.api+json'})); // parse application/vnd.api+json as json
app.use(methodOverride());
// Routes
// ------------------------------------------------------
require('./app/routes.js')(app);
// Listen
// -------------------------------------------------------
app.listen(port);
console.log('App listening on port ' + port);
提前谢谢你,