Commenting system using Angular.js

Published on April 29, 2015

Hi guys, I’m back with another angular.js application. A commenting system you might have seen this before other technologies but now we will create using angular.js. It took 1 hr to do this but I’m sure it’s bit hard to split and explain. I try to do my best please bare with me.

Demo download

Before we start. I’m using semantic UI for my CSS designs. Angular ngMessges with semantic error classes to show form validation message. Finally, https://github.com/blueimp/JavaScript-MD5 to generate md5 hash keys out of user email enter by user. We need a md5 hash of email to get gravatar profile image. If you don’t know what is gravatar, it’s a service to get user profile pic based on user email. If a user does not register with gravatar it will give you default image. Ok. Now let’s jump in coding part.

Index.html(boilerplate)

<!DOCTYPE html>
<html lang="en" data-ng-app="Commenter">
  <head>
    <meta charset="UTF-8" />
    <title>Comment system using angular js - techumber</title>
    <link
      rel="stylesheet"
      type="text/css"
      href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.0/semantic.min.css"
    />
  </head>
  <body>
    <div class="ui page grid">
      <div class="column">
        <h1 class="ui header align cetner">NG-Commenter</h1>
      </div>
    </div>
    <script src="//cdn.rawgit.com/blueimp/JavaScript-MD5/master/js/md5.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-messages.min.js"></script>
    <script src="app.js"></script>
  </body>
</html>

html boilder with angularjs, angular-messages, md5.js and semanticui.

comments

<div class="ui divided list" data-ng-cloak>
  <div class="item" data-ng-repeat="comment in comments">
    <img class="ui avatar image" data-ng-src="//www.gravatar.com/avatar/{{comment.avatar}}" />
    <div class="content">
      <a class="header">{{comment.username}} </a>
      <div class="description">{{comment.text}}</div>
    </div>
  </div>
</div>

Here, we are using the angular ng-repeate directive to loop through all comments. A user will enter a username, email, and text values but the avatar we need to generate it. We will see it later but for now, we simply displaying the values in a list.

Form

<form class="ui form" novalidate data-ng-submit="addComment(cmt)" name="commentForm">
  <button type="submit" class="ui submit teal button" data-ng-disabled="commentForm.$invalid">Submit
    </submit>
</form>

HTML form with the angular ng-submit directive. novalidate disables html5 validations. We are disabling submit button until all input controls are valid. When we submit the form we will call addComment() function. It’s always a good thing to use ng-submit instead of ng-click on submit button. ng-submit supports both pressing enter key as well as clicking submit button.

field

<div
  class="required field"
  data-ng-class="{error: (commentForm.username.$invalid && commentForm.username.$dirty)}"
>
  <label>Name </label>
  <div class="ui icon input">
    <input type="text" placeholder="Name" name="username" data-ng-model="cmt.username" required />
    <i class="user icon"> </i>
  </div>
  <div ng-messages="commentForm.username.$error">
    <div data-ng-include="'messages.tpl.html'"></div>
  </div>
</div>

We are using ng-class to add error class, if the control is invalid and it’s been used at least once. We are using ng-messages directive to show error messages. I have created messages.tpl.html which will contain all possible error messages. We can reuse that template for other controls.

messages.tpl.html

<div class="ui red pointing prompt label transition visible" ng-message="required">
  This filed is required
</div>
<div class="ui red pointing prompt label transition visible" ng-message="email">
  Enter Valid email
</div>

This messages template will contain all error messages. We are using semantic UI class to decorate the error messages.

app.js

angular.module('Commenter', ['ngMessages']).controller('CommentManageCtrl', [
  '$scope',
  function($scope) {
    $scope.comments = [];
    $scope.addComment = function(cmt) {
      cmt.avatar = md5(cmt.email.trim().toLowerCase());
      $scope.comments.push(angular.copy(cmt));
    };
  },
]);

Finally, we are at app.js. It’s a very simple code. When a user submits form we are calling addComment function. Inside we are generating md5 hash value. We are creating avatar property on the object and adding them to comments property. Whenever any variable on the scope it will automatically update on the frontend.