bobhob314 bobhob314 - 1 month ago 9
AngularJS Question

Thinkster MEAN Stack tutorial

I was doing the thinkster.io tutorial on the MEAN stack and Flapper News. https://thinkster.io/mean-stack-tutorial/ I stopped just before the section Beginning Node. My code was working until the later parts of the first half of the tutorial. I hope someone can help me identify what is wrong, as I am just a beginner to MEAN.

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


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


I am currently running this skeleton by opening
index.html
in chromium.

Answer

There are typos in the app.js that will prevent it from working. In the future, open your browser's developer tools with the F12 key and follow the links the errors provide to see what lines to change.

Specifically, there was an extra ; and missing ,s in a few places.

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

Comments