Question

我正在研究Thinkster.io MEAN Stack教程。这是链接：https://thinkster.io/mean-stack-tutorial

我刚刚完成了前端（AngularJS）的编码，我即将进入Node部分。出于某种原因，我没有得到我应该得到的结果。当我打开页面时，在Console.log中我收到以下错误：

Error: [$rootScope:infdig] http://errors.angularjs.org/1.3.10/$rootScope/infdig?p0=10&p1=%5B%5D

这是我的代码：

的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>

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

  <!-- rest of template -->
  <span>
    <a href="#/posts/{{$index}}">Comments</a>
  </span>
</script>

<script type="text/ng-template" id="/posts.html">

  <!-- post template -->

  <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">
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
          <ui-view></ui-view>
      <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="incrementUpvotes(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="title"></input>
        </div>
        <div class="form-group">
          <input type="text"
          class="form-control"
          placeholder="Link"
          ng-model="link"></input>
        </div>
        <button type="submit" class="btn btn-primary">Post</button>
      </form>

    </div>
  </div>
</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.test = 'Hello world!';
  $scope.posts = posts.posts;

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

  $scope.incrementUpvotes = function(post) {
    post.upvotes += 1;
  };
}]);

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

非常感谢任何帮助！

Answer 1

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

  <!-- rest of template -->
  <span>
    <a href="#/posts/{{$index}}">Comments</a>
  </span>
</script>

<script type="text/ng-template" id="/posts.html">

  <!-- post template -->

  <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>之前）

Thinkster.io MEAN堆栈问题

1 个答案: