{"id":1937,"date":"2015-07-09T10:55:02","date_gmt":"2015-07-09T10:55:02","guid":{"rendered":"http:\/\/www.nikola-breznjak.com\/blog\/?p=1937"},"modified":"2015-07-31T09:54:24","modified_gmt":"2015-07-31T09:54:24","slug":"how-to-add-a-comment-field-to-mean-js-article-example","status":"publish","type":"post","link":"https:\/\/nikola-breznjak.com\/blog\/codeproject\/how-to-add-a-comment-field-to-mean-js-article-example\/","title":{"rendered":"How to add a comment field to MEAN.js Article example"},"content":{"rendered":"

\"MEAN_Grunt_604x270\"<\/a><\/h3>\n

If you happen to like the image above, and you’re thinking to yourself how cool it would look like as a sticker, take a look at a few that I made<\/a>.<\/em><\/p>\n

TL;DR<\/h3>\n

In my previous tutorial about the MEAN stack, I showed you\u00a0how to get your MEAN stack up and running in less than a minute<\/a>.\u00a0In this tutorial I’m going to show you how to add a comment field to an existing MEAN.js Article example<\/a>. You can see the finished application on\u00a0http:\/\/mean.nikola-dev.com<\/a>, and\u00a0you can clone\u00a0the source on GitHub<\/a>.<\/p>\n

I actually answered the question Adding comments to MEAN.JS articles<\/a>\u00a0on StackOverflow, and this posts is kind of an addition to that answer, with pictures (everyone\u00a0likes pictures, right? \ud83d\ude09<\/em>).<\/p>\n

[toc]<\/p>\n

Starting point<\/h3>\n

So, if you’ve followed the (ah, yet again mentioned<\/em>) previous tutorial<\/a>\u00a0you have a running MEAN.js example on your DigitalOcean Droplet<\/a>, whose front page looks like the image below if you’re logged in. You can simply register via mail (I didn’t implement any other methods like Facebook, Google, LinkedIn or GitHub for this tutorial).<\/p>\n

\"Screen<\/a><\/p>\n

Please note that yes, you can run this example locally on your computer too, but you would have to manually install the whole MEAN stack (namely MongoDB, Express.js and Node.js). If you wish to do so, you can take a look at the steps needed to do this from a rather popular tutorial How to get started on the MEAN stack<\/a>. Rest of the tutorial, however, assumes you are testing this on DigitalOcean Droplet<\/a>.<\/em><\/p>\n

How to add a subdomain for Nodejs application on DigitalOcean droplet<\/h3>\n

When I was preparing this post I bought a domain just for testing purposes called nikola-dev.com<\/a>\u00a0and I wanted to have Node.js apps running on this VPS (behind a NGINX running as proxy, as we set it up in previous tutorial) but that they would be accessible from different subdomains (for example mean.nikola-dev.com<\/a>). Below are the steps I needed to take in order to make this happen:<\/p>\n

    \n
  1. Buy a domain (clearly you have done so \"smileyGlasses\"<\/a>)<\/li>\n
  2. Edit the Nameserver information in the admin dashboard of your domain provider (where you bought the domain) to the following three records:
    \nns1.digitalocean.com,\u00a0ns2.digitalocean.com,\u00a0ns3.digitalocean.com<\/li>\n
  3. Add the domain on DigitalOcean DNS settings page:
    \n    \"digitalOcean_dns\"<\/a><\/li>\n
  4. Delete \/etc\/nginx\/sites-enabled\/default<\/strong><\/li>\n
  5. Create\u00a0\/etc\/nginx\/sites-available\/nikola-dev.com<\/strong>\u00a0file with the following content (this will be a simple single HTML file which will list the available test apps on this server):\n
    server {\r\n    listen 80;\r\n    server_name nikola-dev.com;\r\n    root \/var\/www\/nikola-dev.com\/public_html;\r\n}<\/pre>\n<\/li>\n
  6. Create\u00a0\/etc\/nginx\/sites-available\/mean.nikola-dev.com<\/strong>\u00a0file with the following content (this will serve the actual Node.js app that we’re building in this tutorial):\n
    server {\r\n    listen 80;\r\n\r\n    server_name mean.nikola-dev.com;\r\n\r\n    location \/ {\r\n        proxy_pass http:\/\/127.0.0.1:3000;\r\n        proxy_http_version 1.1;\r\n        proxy_set_header Upgrade $http_upgrade;\r\n        proxy_set_header Connection 'upgrade';\r\n        proxy_set_header Host $host;\r\n        proxy_cache_bypass $http_upgrade;\r\n    }\r\n}<\/pre>\n<\/li>\n
  7. Restart NGINX:\n
    sudo service nginx restart<\/pre>\n<\/li>\n<\/ol>\n
    Adding a comment field to Article example<\/h3>\n
      \n
    1. In the file app\/models\/article.server.model.js<\/strong>\u00a0add:\n
      comment: {\r\n\ttype: String,\r\n\tdefault: '',\r\n\ttrim: true\r\n},<\/pre>\n
      For the reference, the whole app\/models\/article.server.model.js<\/strong>\u00a0file contents should look like this:<\/p>\n
      'use strict';\r\n\r\n\/**\r\n * Module dependencies.\r\n *\/\r\nvar mongoose = require('mongoose'),\r\n        Schema = mongoose.Schema;\r\n\r\n\/**\r\n * Article Schema\r\n *\/\r\nvar ArticleSchema = new Schema({\r\n        created: {\r\n                type: Date,\r\n                default: Date.now\r\n        },\r\n        title: {\r\n                type: String,\r\n                default: '',\r\n                trim: true,\r\n                required: 'Title cannot be blank'\r\n        },\r\n        content: {\r\n                type: String,\r\n                default: '',\r\n                trim: true\r\n        },\r\n        user: {\r\n                type: Schema.ObjectId,\r\n                ref: 'User'\r\n        },\r\n        comment: {\r\n                type: String,\r\n                default: '',\r\n                trim: true\r\n        }\r\n});\r\n\r\nmongoose.model('Article', ArticleSchema);<\/pre>\n<\/li>\n
    2. In the file public\/modules\/articles\/views\/create-article.client.view.html<\/strong> add the following content before the submit<\/strong> button:\n
      <div class=\"form-group\">\r\n\t<label class=\"control-label\" for=\"comment\">Comment<\/label>\r\n\t<div class=\"controls\">\r\n\t\t<textarea name=\"comment\" data-ng-model=\"comment\" id=\"comment\" class=\"form-control\" cols=\"30\" rows=\"10\" placeholder=\"Comment\"><\/textarea>\r\n\t<\/div>\r\n<\/div><\/pre>\n
      For the reference, the whole public\/modules\/articles\/views\/create-article.client.view.html<\/strong>\u00a0file contents should look like this:<\/p>\n
      <section data-ng-controller=\"ArticlesController\">\r\n        <div class=\"page-header\">\r\n                <h1>New Article<\/h1>\r\n        <\/div>\r\n        <div class=\"col-md-12\">\r\n                <form name=\"articleForm\" class=\"form-horizontal\" data-ng-submit=\"create()\" novalidate>\r\n                        <fieldset>\r\n                                <div class=\"form-group\" ng-class=\"{ 'has-error': articleForm.title.$dirty && articleForm.title.$invalid }\">\r\n                                        <label class=\"control-label\" for=\"title\">Title<\/label>\r\n                                        <div class=\"controls\">\r\n                                                <input name=\"title\" type=\"text\" data-ng-model=\"title\" id=\"title\" class=\"form-control\" placeholder=\"Title\" required>\r\n                                        <\/div>\r\n                                <\/div>\r\n                                <div class=\"form-group\">\r\n                                        <label class=\"control-label\" for=\"content\">Content<\/label>\r\n                                        <div class=\"controls\">\r\n                                                <textarea name=\"content\" data-ng-model=\"content\" id=\"content\" class=\"form-control\" cols=\"30\" rows=\"10\" placeholder=\"Content\"><\/textarea>\r\n                                        <\/div>\r\n                                <\/div>\r\n\r\n\t\t\t\t\t\t\t\t<div class=\"form-group\">\r\n\t\t\t\t\t\t\t\t        <label class=\"control-label\" for=\"comment\">Comment<\/label>\r\n\t\t\t\t\t\t\t\t        <div class=\"controls\">\r\n\t\t\t\t\t\t\t\t                <textarea name=\"comment\" data-ng-model=\"comment\" id=\"comment\" class=\"form-control\" cols=\"30\" rows=\"10\" placeholder=\"Comment\"><\/textarea>\r\n\t\t\t\t\t\t\t\t        <\/div>\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\r\n                                <div class=\"form-group\">\r\n                                        <input type=\"submit\" class=\"btn btn-default\">\r\n                                <\/div>\r\n                                <div data-ng-show=\"error\" class=\"text-danger\">\r\n                                        <strong data-ng-bind=\"error\"><\/strong>\r\n                                <\/div>\r\n                        <\/fieldset>\r\n                <\/form>\r\n        <\/div>\r\n<\/section><\/pre>\n<\/li>\n
    3. In the file public\/modules\/articles\/controllers\/articles.client.controller.js<\/strong> adjust the create<\/strong> function to be:\n
      var article = new Articles({\r\ntitle: this.title,\r\ncontent: this.content,\r\ncomment: this.comment\r\n});<\/pre>\n
      For the reference, the whole public\/modules\/articles\/controllers\/articles.client.controller.js<\/strong>\u00a0file contents should look like this:<\/p>\n
      'use strict';\r\n\r\nangular.module('articles').controller('ArticlesController', ['$scope', '$stateParams', '$location', 'Authentication', 'Articles',\r\n        function($scope, $stateParams, $location, Authentication, Articles) {\r\n                $scope.authentication = Authentication;\r\n\r\n                $scope.create = function() {\r\n                        var article = new Articles({\r\n                                title: this.title,\r\n                                content: this.content,\r\n                                comment: this.comment\r\n                        });\r\n                        article.$save(function(response) {\r\n                                $location.path('articles\/' + response._id);\r\n\r\n                                $scope.title = '';\r\n                                $scope.content = '';\r\n                        }, function(errorResponse) {\r\n                                $scope.error = errorResponse.data.message;\r\n                        });\r\n                };\r\n\r\n                $scope.remove = function(article) {\r\n                        if (article) {\r\n                                article.$remove();\r\n\r\n                                for (var i in $scope.articles) {\r\n                                        if ($scope.articles[i] === article) {\r\n                                                $scope.articles.splice(i, 1);\r\n                                        }\r\n                                }\r\n                        } else {\r\n                                $scope.article.$remove(function() {\r\n                                        $location.path('articles');\r\n                                });\r\n                        }\r\n                };\r\n\r\n                $scope.update = function() {\r\n                        var article = $scope.article;\r\n\r\n                        article.$update(function() {\r\n                                $location.path('articles\/' + article._id);\r\n                        }, function(errorResponse) {\r\n                                $scope.error = errorResponse.data.message;\r\n                        });\r\n                };\r\n\r\n                $scope.find = function() {\r\n                        $scope.articles = Articles.query();\r\n                };\r\n\r\n                $scope.findOne = function() {\r\n                        $scope.article = Articles.get({\r\n                                articleId: $stateParams.articleId\r\n                        });\r\n                };\r\n        }\r\n]);\r\n<\/pre>\n<\/li>\n
    4. In the file public\/modules\/articles\/views\/view-article.client.view.html<\/strong> add this just before the closing section<\/strong> tag:\n
      <p data-ng-bind=\"article.comment\"><\/p><\/pre>\n
      For the reference, the whole public\/modules\/articles\/views\/view-article.client.view.html<\/strong>\u00a0file contents should look like this:<\/p>\n
      <section data-ng-controller=\"ArticlesController\" data-ng-init=\"findOne()\">\r\n        <div class=\"page-header\">\r\n                <h1 data-ng-bind=\"article.title\"><\/h1>\r\n        <\/div>\r\n        <div class=\"pull-right\" data-ng-show=\"authentication.user._id == article.user._id\">\r\n                <a class=\"btn btn-primary\" href=\"\/#!\/articles\/{{article._id}}\/edit\">\r\n                        <i class=\"glyphicon glyphicon-edit\"><\/i>\r\n                <\/a>\r\n                <a class=\"btn btn-primary\" data-ng-click=\"remove();\">\r\n                        <i class=\"glyphicon glyphicon-trash\"><\/i>\r\n                <\/a>\r\n        <\/div>\r\n        <small>\r\n                <em class=\"text-muted\">\r\n                        Posted on\r\n                        <span data-ng-bind=\"article.created | date:'mediumDate'\"><\/span>\r\n                        by\r\n                        <span data-ng-bind=\"article.user.displayName\"><\/span>\r\n                <\/em>\r\n        <\/small>\r\n        <p class=\"lead\" data-ng-bind=\"article.content\"><\/p>\r\n        <p data-ng-bind=\"article.comment\"><\/p>\r\n<\/section><\/pre>\n<\/li>\n
    5. This is it, now you have a new field comment<\/strong> for each article:
      \n\"meanCommentAdding\"<\/a>Once added, you’ll see the comment in the article list:\"meanCommentAddedJPG\"<\/a><\/li>\n
    6. What you should do now, and I hope it’s clear form these instructions here, is alter the editing<\/strong> part of the articles, so that they include the comment<\/strong> field.<\/li>\n<\/ol>\n
      Where to go from here?<\/h3>\n
      This tutorial should have given you the basic understanding on how to add additional fields to the MEAN.js Article example, and you should be confident enough to starting adding your own fields and altering the example to your liking.<\/p>\n
      In the next tutorial we’ll take a look at how to add Image CRUD module to MEAN.js application with a single<\/strong> Yeoman command (I will update the link here once the tutorial is finished).<\/p>\n
      If you want to\u00a0learn more about the MEAN\u00a0stack, take a look at the blog2book Getting MEAN with MEMEs<\/a>\u00a0(yes, you can download it for free, though a coffee would be nice\u00a0\"smileyGlasses\"<\/a><\/em>).<\/p>\n","protected":false},"excerpt":{"rendered":"
      If you happen to like the image above, and you’re thinking to yourself how cool it would look like as a sticker, take a look at a few…<\/p>\n","protected":false},"author":1,"featured_media":1907,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,39],"tags":[],"class_list":["post-1937","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codeproject","category-mean"],"_links":{"self":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/1937","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/comments?post=1937"}],"version-history":[{"count":5,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/1937\/revisions"}],"predecessor-version":[{"id":1992,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/1937\/revisions\/1992"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media\/1907"}],"wp:attachment":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media?parent=1937"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/categories?post=1937"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/tags?post=1937"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}