Question

我正在开发基于https://thinkster.io/mean-stack-tutorial的评论页面。但该页面根本没有出现。这是代码：

views 目录中的 index.ejs ：

<!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> &nbsp;&nbsp;
        {{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>

models 目录中的 comments.js ：

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);

public / javascripts 目录中的 ang.js ：

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}
];
}]);

上面给出的评论应该出现..但它们不是......为什么??

Answer 1

我认为您的问题是您已经创建了一个模板，但是您没有使用该模板。

我并非100％确定您需要模板，但请尝试：

  <div ng-include src="home.html"></div>

请参阅动态切换模板的示例JSFiddle

Answer 2

看起来Controller不会等待comment加载，因为它不依赖于它。使控制器依赖于comment promise以及comments服务应该使Angular的依赖性变得清晰。

app.controller('Base',[
'$scope','comments', 'comment', function($scope,comments,_comment){
    // ...
}]);

Answer 3

错误在于我必须添加

<ui-view></ui-view>

我需要根据ui-router语法加载模板。

MEAN Stack：页面根本不渲染

3 个答案: