Thinkster MEAN Stack教程

时间：2015-07-06 18:55:32

标签： javascript angularjs

我在MEAN堆栈和Flapper News上做了thinkster.io教程。 https://thinkster.io/mean-stack-tutorial/我在开始节点部分之前停了下来。我的代码一直工作到本教程前半部分的后半部分。我希望有人可以帮助我找出错误，因为我只是MEAN的初学者。

我的index.html 

<html>
<head>
    <title>Flapper News</title>
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/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="app.js"></script>
    <style> .glyphicon-thumbs-up { cursor:pointer } </style>
</head>

<body ng-app="flapperNews">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <ui-view></ui-view>
        </div>
    </div>

<script type="text/ng-template" id="/home.html">
    <div class="page-header">
        <h1>Flapper News</h1>
    </div>

    <div ng-repeat="post in posts | orderBy:'-upvotes'">
        <span class="glyphicon glyphicon-thumbs-up"
            ng-click="upvote(post)"></span>
        {{post.upvotes}}
        <span style="font-size:20px; margin-left:10px;">
            <a ng-show="post.link" href="{{post.link}}">
                {{post.title}}
            </a>
            <span ng-hide="post.link">
                {{post.title}}
            </span>
        </span>
    </div>

    <form ng-submit="addPost()"
        style="margin-top:30px;">
        <h3>Add a new post</h3>

        <div class="form-group">
            <input type="text"
                class="form-control"
                placeholder="Title"
                ng-model="theTitle"></input>
        </div>
        <div class="form-group">
            <input type="text"
                class="form-control"
                placeholder="Link"
                ng-model="theLink"></input>
        </div>
        <button type="submit" class="btn btn-primary">Post</button>
    </form>
</script>

<script type="text/ng-template" id="/posts.html">
  <div class="page-header">
    <h3>
      <a ng-show="post.link" href="{{post.link}}">
        {{post.title}}
      </a>
      <span ng-hide="post.link">
        {{post.title}}
      </span>
    </h3>
  </div>

  <div ng-repeat="comment in post.comments | orderBy:'-upvotes'">
    <span class="glyphicon glyphicon-thumbs-up"
      ng-click="incrementUpvotes(comment)"></span>
    {{comment.upvotes}} - by {{comment.author}}
    <span style="font-size:20px; margin-left:10px;">
      {{comment.body}}
    </span>
  </div>
</script>

</body>
</html>

我的app.js 

var app = angular.module('flapperNews', ['ui.router']);

app.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {

    $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: '/home.html'
            controller: 'MainCtrl'
        });
        .state('posts', {
            url: '/posts/{id}',
            templateUrl: '/posts.html',
            controller: 'PostsCtrl'
        });

    $urlRouterProvider.otherwise('home');
}])

app.factory('posts', [function(){
    var o = {
        posts: []
    };
    return o;
}]);

app.controller('MainCtrl', [
'$scope',
'posts',
function($scope, posts){
    $scope.posts = posts.posts;
    $scope.addPost = function(){
        if(!$scope.theTitle || $scope.theTitle === '') { return; }
        $scope.posts.push({
            title: $scope.theTitle,
            link: $scope.theLink,
            upvotes: 0
            comments: [
                {author: 'Joe', body: 'Cool post!', upvotes: 0},
                {author: 'Bob', body: 'Great idea but everything is wrong!', upvotes: 0}
            ]
        });
        $scope.theTitle = '';
        $scope.theLink = '';
    }
    $scope.upvote = function(post){
        post.upvotes++;
    }
}]);

app.controller('PostsCtrl', [
'$scope',
'$stateParams',
'posts',
function($scope, $stateParams, posts){
    $scope.post = posts.posts[$stateParams.id];
    $scope.addComment = function(){
        if($scope.body === '') { return; }
        $scope.post.comments.push({
            body: $scope.body,
            author: 'user',
            upvotes: 0
        });
        $scope.body = '';
    };
}]);

我目前通过在Chrome中打开index.html来运行此骨架。

3 个答案:

答案 0 :(得分：4)

app.js中有拼写错误会阻止它工作。将来，使用 F12 键打开浏览器的开发人员工具，并按照错误提供的链接查看要更改的行。

具体来说，在一些地方还有一个额外的;和,个。{/ p>

＆＃13;
＆＃13; 
var app = angular.module('flapperNews', ['ui.router']);

app.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {

    $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: '/home.html',
            controller: 'MainCtrl'
        })
        .state('posts', {
            url: '/posts/{id}',
            templateUrl: '/posts.html',
            controller: 'PostsCtrl'
        });

    $urlRouterProvider.otherwise('home');
}])

app.factory('posts', [function(){
    var o = {
        posts: []
    };
    return o;
}]);

app.controller('MainCtrl', [
'$scope',
'posts',
function($scope, posts){
    $scope.posts = posts.posts;
    $scope.addPost = function(){
        if(!$scope.theTitle || $scope.theTitle === '') { return; }
        $scope.posts.push({
            title: $scope.theTitle,
            link: $scope.theLink,
            upvotes: 0,
            comments: [
                {author: 'Joe', body: 'Cool post!', upvotes: 0},
                {author: 'Bob', body: 'Great idea but everything is wrong!', upvotes: 0}
            ]
        });
        $scope.theTitle = '';
        $scope.theLink = '';
    }
    $scope.upvote = function(post){
        post.upvotes++;
    }
}]);

app.controller('PostsCtrl', [
'$scope',
'$stateParams',
'posts',
function($scope, $stateParams, posts){
    $scope.post = posts.posts[$stateParams.id];
    $scope.addComment = function(){
        if($scope.body === '') { return; }
        $scope.post.comments.push({
            body: $scope.body,
            author: 'user',
            upvotes: 0
        });
        $scope.body = '';
    };
}]);
＆＃13; 
<html>
<head>
    <title>Flapper News</title>
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/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="app.js"></script>
    <style> .glyphicon-thumbs-up { cursor:pointer } </style>
</head>

<script type="text/ng-template" id="/home.html">
    <div class="page-header">
        <h1>Flapper News</h1>
    </div>
</script>

<script type="text/ng-template" id="/posts.html">
  <div class="page-header">
    <h3>
      <a ng-show="post.link" href="{{post.link}}">
        {{post.title}}
      </a>
      <span ng-hide="post.link">
        {{post.title}}
      </span>
    </h3>
  </div>

  <div ng-repeat="comment in post.comments | orderBy:'-upvotes'">
    <span class="glyphicon glyphicon-thumbs-up"
      ng-click="incrementUpvotes(comment)"></span>
    {{comment.upvotes}} - by {{comment.author}}
    <span style="font-size:20px; margin-left:10px;">
      {{comment.body}}
    </span>
  </div>

 <form ng-submit="addComment()"
  style="margin-top:30px;">
  <h3>Add a new comment</h3>

  <div class="form-group">
    <input type="text"
    class="form-control"
    placeholder="Comment"
    ng-model="body"></input>
  </div>
  <button type="submit" class="btn btn-primary">Post</button>
 </form>

</script>

<body ng-app="flapperNews" ng-controller="MainCtrl">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <ui-view></ui-view>

            <div ng-repeat="post in posts | orderBy:'-upvotes'">
                <span class="glyphicon glyphicon-thumbs-up"
                    ng-click="upvote(post)"></span>
                {{post.upvotes}}
                <span style="font-size:20px; margin-left:10px;">
                    <a ng-show="post.link" href="{{post.link}}">
                        {{post.title}}
                    </a>
                    <span ng-hide="post.link">
                        {{post.title}}
                    </span>
                        <span>
                            <a href="#/posts/{{$index}}">Comments</a>
                        </span>
                </span>
            </div>

            <form ng-submit="addPost()"
                style="margin-top:30px;">
                <h3>Add a new post</h3>

                <div class="form-group">
                    <input type="text"
                        class="form-control"
                        placeholder="Title"
                        ng-model="theTitle"></input>
                </div>
                <div class="form-group">
                    <input type="text"
                        class="form-control"
                        placeholder="Link"
                        ng-model="theLink"></input>
                </div>
                <button type="submit" class="btn btn-primary">Post</button>
            </form>

        </div>
    </div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：2)

如果有人在复制kiswa的代码片段时遇到问题，我发现将脚本移动到具有ng-app的body元素正下方解决了问题（目前它们位于开始的body标记之上）。

因此，如果您将代码修改为如下所示：

<!--code-->

</head>

<body ng-app="flapperNews" ng-controller="MainCtrl">

<script type="text/ng-template" id="/home.html">
    <div class="page-header">
        <h1>Flapper News</h1>
    </div>
</script>

<script type="text/ng-template" id="/posts.html">
    <div class="page-header">
        <h3>
            <a ng-show="post.link" href="{{post.link}}">
                {{post.title}}
            </a>
      <span ng-hide="post.link">
        {{post.title}}
      </span>
        </h3>
    </div>

    <div ng-repeat="comment in post.comments | orderBy:'-upvotes'">
    <span class="glyphicon glyphicon-thumbs-up"
          ng-click="incrementUpvotes(comment)"></span>
        {{comment.upvotes}} - by {{comment.author}}
    <span style="font-size:20px; margin-left:10px;">
      {{comment.body}}
    </span>
    </div>

    <form ng-submit="addComment()"
          style="margin-top:30px;">
        <h3>Add a new comment</h3>

        <div class="form-group">
            <input type="text"
                   class="form-control"
                   placeholder="Comment"
                   ng-model="body"></input>
        </div>
        <button type="submit" class="btn btn-primary">Post</button>
    </form>

</script>

<!--rest of code-->

它应该解决这个问题。原因是因为ng-app在正文中定义：

<body ng-app="flapperNews" ng-controller="MainCtrl">

答案 2 :(得分：1)

将它穿过一个短绒将会有很长的路要走。

反正，

在这里缺少逗号并有一个额外的分号：

.state('home', {
    url: '/home',
    templateUrl: '/home.html'  // <-- need a comma
    controller: 'MainCtrl'
});  // <-- remove this semicolon
.state('posts', {
    url: '/posts/{id}',
    templateUrl: '/posts.html',
    controller: 'PostsCtrl'
});

在upvotes值之后你需要一个逗号：

$scope.posts.push({
    title: $scope.theTitle,
    link: $scope.theLink,
    upvotes: 0  // <-- need a comma
    comments: [
        {author: 'Joe', body: 'Cool post!', upvotes: 0},
        {author: 'Bob', body: 'Great idea but everything is wrong!', upvotes: 0}
    ]
});

这也假设您正在运行本地服务器，而不仅仅是在浏览器中加载index.html。这解决了jsbin

中的问题
相关问题
最新问题