0
私はhttps://thinkster.io/mean-stack-tutorialに基づいてコメントページを開発していました。しかし、このページはまったく表示されません。ここでは、コードは次のようになります。平均スタック：全くレンダリングされていないページ
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<script src="/javascripts/ang.js"></script>
</head>
<body ng-app="peopleComments">
<script type="text/ng-template" id="/home.html">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="page-header">
<h2>Learn. Share. Popularize.</h2>
</div>
<p>Share here to let the world know.</p>
<hr/>
<div ng-repeat="comment in comments|orderBy:'-upvotes'" style="line-height:25px">
{{comment.username}} - {{comment.contents}}
<br>
{{comment.upvotes}}
<span class="glyphicon glyphicon-triangle-top" ng-click="increaseUpvotes(comment)" style="color:green"></span>
{{comment.downvotes}}
<span class="glyphicon glyphicon-triangle-bottom" ng-click="increaseDownvotes(comment)" style="color:red"></span>
<hr/>
</div>
<form ng-submit="addComment()">
<div class="col-xs-2">
<div class="form-group">
<input type="text" class="form-control" placeholder="Your Name" ng-model="username"></input>
</div>
</div>
<div class="col-xs-8">
<div class="form-group">
<input type="text" class="form-control" placeholder="What would you like to share?" ng-model="contents"></input>
</div>
</div>
<button class="btn btn-info" type="submit">Add My Entry</button>
</form>
</div>
</div>
</div>
</script>
</body>
</html>
でcomments.js モデルディレクトリ内：ANGで
var mongoose = require('mongoose');
var CommentSchema = new mongoose.Schema({
username: String,
contents: String,
upvotes: {type: Number, default: 0},
downvotes:{type:Number, default:0}
});
CommentSchema.methods.upvote=function(cb){
this.upvotes+=1;
this.save(cb);
};
mongoose.model('Comment', CommentSchema);
index.ejs ビューディレクトリ内で
.js in public/javascript Sディレクトリ：
var app=angular.module('peopleComments',['ui.router']);
app.factory('comments',['$http', function($http){
var c={
comments:[]
};
//loading all existing comments with getAll()
c.getAll=function(){
return $http.get('/comments').success(function(data){
angular.copy(data, c.comments);
});
};
//function which creates the new comments for updating in the database
c.create = function(comment) {
return $http.post('/comments', comment).success(function(data){
c.comments.push(data);
});
};
app.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
//setting up a home state
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'Base',
resolve: {
comment: ['comments', function(comments){ //using resolve property of ui-router - not rendering???
return comments.getAll();
}]
}
});
$urlRouterProvider.otherwise('home');
}]);
app.controller('Base',[
'$scope','comments',function($scope,comments){
$scope.addComment=function(){ //add new comments to the server/display existing ones
$scope.comments=comments.comments;
if(!$scope.username||$scope.username=='') {$scope.username='Anonymous';}
if(!$scope.contents||$scope.contents==''){return;}
comments.create({
username: $scope.username,
contents: $scope.contents,
}); $scope.comments.push({username:$scope.username,contents:$scope.contents,upvotes:0,downvotes:0});
$scope.username='';
$scope.contents='';
}
$scope.comments = [
{username: 'Diana', contents:'In either a quantum world or in a higher dimension, the past, present and future co-exist!', upvotes: 5, downvotes:0},
{username: 'Cindy', contents:'Never wash strawberries or any berry unless you intend to eat them right away or they will mold.', upvotes: 7, downvotes:0}
];
}]);
なぜ...上記のコメントが表示されます..しかし、彼らはありません？
端末/コマンドプロンプトにエラーがありますか？ –
問題を再現する必要のないメソッドのいくつかを削除して、同じ問題が発生したコードのサイズをいくらか小さくすると、問題の絞り込みが容易になります。 –
@Jezzabeanzエラーはありません..それはうまく動作します – nj2237