1
處理足夠簡單的MEAN堆棧項目。 當我運行應用程序時，數據綁定失敗，因爲使View和後端（使得連接到我的數據庫的http連接）之間關聯的模塊從未被實例化，並且無法識別。使用Node和Mongo在Angular中無法識別的模塊
以下錯誤消息出現在控制檯
[$injector:modulerr] Failed to instantiate module moviesApp due to:
Error: [$injector:nomod] Module 'moviesApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
錯誤信息是非常可以理解的。我似乎錯誤地（或根本不）在文件「Movies.js」中創建了視圖「MoviesList.html」和包含上述模塊（moviesApp）的文件之間的鏈接。
Movies.js利用工廠。我檢查了一般語法（看不到實際工廠內的錯誤代碼會導致模塊無法識別）。在jsfiddle之前寫過一個基本工廠之前，我確信語法應該沒問題。 https://jsfiddle.net/Sheepy99/4wmd3zd0/（授予我鏈接工廠在這個例子中，但它是大致相同的前提下）
之前，我張貼我的代碼的其餘部分，它是基於在這裏下車包含的例子：http://www.dotnetcurry.com/nodejs/1032/nodejs-apps-in-visual-studio-mean-stack 我的一些代碼是不同的，由於不同的版本，並且自從作者發表文章（也想知道爲什麼他一貫使用雙引號），某些位被棄用。
任何含糊不清或結束的問題，都會問。
MoviesList.html
<html>
<!--<meta charset="UTF-8">-->
<title>Node-Express Movie List</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!--<link rel="stylesheet" href="/styles/site.css">-->
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<!--<script src="/scripts/controller.js"></script>
<script src="/scripts/movies.js"></script>-->
<script src="../public/scripts/movies.js"></script>
<script src="../public/scripts/controller.js"></script>
</head>
<body>
<div class="container">
<!--<div class="text-center" ng-app="moviesApp" ng-controller="MoviesCtrl">-->
<div class="text-center" ng-app="moviesApp" ng-controller="MoviesCtrl">
<h1>Node-Express Movie List</h1>
<div class="col-md-12" control-group="">
<input type="text" style="width: 200px;" ng-model="newMovieText">
<button id="btnAddTodo" class="btn" style="margin: 2px;" ng-click="addMovie()" ng-disabled="newMovieText">Add Movie</button>
</div>
<div class="col-md-5" sticky-note="">
<h3 class="text-center">Released Movies</h3>
<!--<div class="col-md-5" rowmargin="" todoitem="" ng-repeat="movie" in="" movies="" |="" filter:{released:true}"="">-->
<div class="col-md-5" rowmargin="" todoitem="" ng-repeat="movie" in="" movies="" filter:{released:true}>
<div class="thumbnail">
<input type="checkbox" ng-model="movie.watched" ng-change="movieWatched(movie)">
<span ng-class="{watchedMovie: movie.watched}">{{movie.name}}</span>
</div>
</div>
</div>
<div class="col-md-5" sticky-note="">
<h3 class="text-center">Coming Up...</h3>
<div class="col-md-5" rowmargin="" todoitem="" ng-repeat="movie" in="" movies="" filter:{released:false}>
<div class="thumbnail">
{{movie.name}}
<br>
<br>
<input type="button" value="Released!" class="btn btn-success" btn-link="" released-button="" ng-click="movieReleased(movie)" style="">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
movies.js
var app = angular.module('moviesApp', []);
app.factory('moviesCRUD', function ($http, $q) {
function getAllMovies() {
var deferred = $q.defer();
$http.get('/api/movies').then(function (result) {
deferred.resolve(result.data);
}, function (error) {
deferred.reject(error);
});
return deferred.promise;
}
function addMovie(newMovie) {
var deferred = $q.defer();
$http.post('/api/movies', newMovie).then(function (result) {
deferred.resolve(result.data.movie);
}, function (error) {
deferred.reject(error);
});
return deferred.promise;
}
function modifyMovie(updatedMovie) {
var deferred = $q.defer();
$http.put('/api/movies/' + updatedMovie._id, updatedMovie).then(function (data) {
deferred.resolve(data);
}, function (error) {
deferred.reject(error);
});
return deferred.promise;
}
return {
getAllMovies: getAllMovies,
addMovie: addMovie,
modifyMovie: modifyMovie
};
});
mongoOperations.js
var mongoose = require('mongoose');
var Schema = mongoose.Schema;
//http://stackoverflow.com/questions/24908405/mongoose-and-new-schema-returns-referenceerror-schema-is-not-defined
//link recommends use of what's on line 2 as a solution
mongoose.Promise = global.Promise; //not using promises, this line removes a default setting and also gets rid of a warning about promises
mongoose.connect('mongodb://localhost/moviesDb');
var db = mongoose.connection;
//var movieSchema = mongoose.Schema({ *I shouldn't need this because i've declared "require('mongoose')"
var movieSchema = new Schema({
name: String, //doesn't like if I have spaces on each new line, before the use of characters
released: Boolean,
watched: Boolean
});
var MovieModel = mongoose.model('movie', movieSchema);
db.on('error', console.error.bind(console, "connection error"));
db.once('open', function() {
//console.log("moviesDb is open...");
MovieModel.find().exec(function (error, results) {
if (results.length === 0) {
MovieModel.create({ name: "The Amazing Spider-Man 2", released: true, watched: false });
MovieModel.create({ name: "The Other Woman", released: true, watched: true });
MovieModel.create({ name: "Shaadi ke Side Effects", released: false, watched: false });
MovieModel.create({ name: "Walk of Shame", released: true, watched: false });
MovieModel.create({ name: "Lucky Kabootar", released: false, watched: false });
}
});
});
exports.fetch = function (request, response) {
MovieModel.find().exec(function (err, res) {
if (err) {
response.send(500, { error: err });
}
else {
response.send(res);
}
});
};
exports.add = function (request, response) {
var newMovie = { name: request.body.name, released: false, watched: false };
MovieModel.create(newMovie, function (addError, addedMovie) {
if (addError) {
response.send(500, { error: addError });
}
else {
response.send({ success: true, movie: addedMovie });
}
});
};
exports.modify = function (request, response) {
var movieId = request.params.movieId;
MovieModel.update({ _id: movieId }, { released: request.body.released, watched: request.body.watched }, { multi: false },
function (error, rowsAffected) {
if (error) {
response.send(500, { error: error });
}
else if (rowsAffected == 0) {
response.send(500, { error: "No rows affected" });
}
else {
response.send(200);
}
}
);
};
server.js
var http = require('http');
var express = require('express');
var bodyParser = require('body-parser');
var path = require("path");
var port = process.env.port || 1337;
var app = express();
//app.use(bodyParser()); //getting deprecated warning in shell when using this specific line
app.use(bodyParser.urlencoded({ extended: true }));
//app.use(bodyParser.json()); used in stackoverflow solution, can see potential benefit, but isn't helping
var mongoOps = require('./server/MongoOperations.js');
app.get('/', function (request, response) {
//response.sendfile("views/MoviesList.html");
//response.sendFile("views/MoviesList.html");
response.sendFile("views/MoviesList.html", { "root": __dirname });
});
app.get('/api/list', function (request, response) {
response.send([{ id: 1, name: "charlie" }, { "id": 2, "name": "ward" }]);
//'Hello World!');
});
app.get('/api/movies', mongoOps.fetch);
app.post('/api/movies', mongoOps.add);
app.put('/api/movies/:movieId', mongoOps.modify);
app.use(express.static(path.join(__dirname, 'public')));
app.listen(port);
controller.js
app.controller('MoviesCtrl', function ($scope, moviesCRUD) {
$scope.released = { released: true };
$scope.notReleased = { released: false };
function init() {
moviesCRUD.getAllMovies().then(function (movies) {
$scope.movies = movies;
}, function (error) {
console.log(error);
});
}
$scope.movieReleased = function (movie) {
moviesCRUD.modifyMovie({ _id: movie._id, name: movie.name, released: true, watched: movie.watched })
.then(function (result) {
if (result.status === 200) {
movie.released = true;
}
}, function (error) {
console.log(error);
});
};
$scope.movieWatched = function (movie) {
moviesCRUD.modifyMovie(movie)
.then(function (result) {
if (result.status === 200) {
console.log("Movie updated");
}
}, function (error) {
movie.watched = !movie.watched;
});
};
$scope.addMovie = function() {
moviesCRUD.addMovie({ name: $scope.newMovieText }).then(function (newMovie) {
$scope.movies.push(newMovie);
$scope.newMovieText = "";
}, function (error) {
console.log(error);
});
};
init();
});
此外，大部分我的html被渲染爲內鑽石問號。這讓我非常困惑。只是以爲我會把它放在那裏。
作爲一個noobie，任何簡短的一般性建議都會受到歡迎，如調整我的可讀性代碼或方法。