Show comments for event. And ability to add a new comment.

routes/api.js

@@ -8,4 +8,32 @@ router.get('/psy', function(req, res, next) {
   });
 });
 
+/* GET enents listing. */
+router.get('/commentsArray', function(req, res, next) {
+  var comments = {
+        event: {
+            event01: {
+                title: 'Понимание типов сервисов в AngularJS',
+                description: 'Переменная подобна константе, но может быть изменена. Она часто используется для настройки директив. Переменная подобна усеченной версии фабрики, только содержит значения, которые не могут быть вычислены в самом сервисе.',
+                img: 'http://www.indiaonrent.com/forwards/n/nature-beauty-amazing/res/5mavuy.jpg' 
+            }
+        },
+        comments: {
+            item01: {
+                comment: 'WTF?',
+                nameUser: 'stepan'
+            },
+            item02: {
+                comment: 'boroda!!!',
+                nameUser: 'ivan'
+            }, 
+            item03: {
+                comment: 'Странно тогда почему нельзя обращаться и так: price',
+                nameUser: 'Ignat'
+            } 
+        }
+  };
+  res.json(comments);
+});
+
 module.exports = router;

src/js/app/controllers/comments.js

@@ -0,0 +1,35 @@
+(function () {
+    angular.module('eva', []).controller('messageCtrl', function ($scope, $http) {
+
+        $scope.user = {}
+        $scope.items = []; 
+
+        $scope.sendPost = function() {
+            if ( $scope.user.newMessage !== "" && $scope.user.newMessage !== undefined ) {
+                // ADD A NEW ELEMENT.
+                $scope.items.push({ name: $scope.user.newName, message: $scope.user.newMessage });
+                //SEND REQUEST
+                $http.post("./events/events.json", $scope.user).success(function(data, status, headers) {
+                    // CLEAR THE FIELDS.
+                    $scope.user.newName = '';
+                    $scope.user.newMessage = '';    
+                })
+            }
+        }                   
+    }) 
+})();     
+
+
+(function () {
+  angular.module('eva').controller('StudsController', comments);
+
+  comments.$inject = ['CommentsService'];
+
+  function comments (ss) {
+    var context = this;
+
+    ss.getComments().then(function (commentsItemData) {
+      context.commentsItem = commentsItemData;
+    });
+  }
+})();

src/js/app/services/comments.js

@@ -0,0 +1,15 @@
+(function () {
+  angular.module('eva').service('CommentsService', ['$http', comments]);
+
+  comments.$inject = ['$http'];
+
+  function comments ($http) {
+    return {
+      getComments: function () {
+        return $http.get('/api/commentsArray').then(function(resp){
+            return resp.data;
+        });
+      }
+    };
+  }
+})();

views/index.jade

@@ -7,3 +7,41 @@ block content
         ul
             li(ng-repeat="item in gen.generatedList")
                 span {{item.id}}
+
+    .white(style="padding:20px;font-size:16px" ng-controller="messageCtrl")
+        div(class="" ng-controller="StudsController as comments")
+            div(class="col" ng-repeat="stud in comments.commentsItem.event")
+                div.card   
+                    div.card-content
+                        span.card-title {{stud.title}}
+                        div(style="margin-bottom:10px") 
+                            img(src="{{stud.img}}" width="400px" height="300px")
+                        p {{stud.description}}
+
+        h4 Comments       
+        ul(class="comments-list" ng-controller="StudsController as comments") 
+            li(class="card" ng-repeat="stud in comments.commentsItem.comments")
+                .card-content
+                    div.chip {{stud.nameUser}}
+                    .card-content
+                        span {{stud.comment}}
+            li(class="card" ng-repeat="item in items")
+                    .card-content
+                        div.chip {{item.name}}
+                        .card-content 
+                            span {{item.message}} 
+
+
+        h4 Your comment    
+        .card              
+            .card-content  
+
+                form(role="form" class="col" ng-submit="sendPost()" style="overflow:hidden")          
+                    div.input-field.col
+                        input(type="text" id="name" class="validate" placeholder="Name" ng-model="user.newName" required).
+                    div.input-field.col
+                        input(type="Email" id="email" class="validate" placeholder="Email" ng-model="user.newEmail" required).
+                    div.input-field.col
+                        textarea(id="Name" class="materialize-textarea validate" placeholder="Message" ng-model="user.newMessage" required).
+                    div.input-field.col
+                        button(type="submit" name="action" class="right btn waves-effect waves-light") Send

views/layout.jade

@@ -3,6 +3,7 @@ html
   head
     title= title
     link(rel='stylesheet', href='/stylesheets/style.css')
+    link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css')
     script(src='/js/main.js')
   body(ng-app='eva')
     block content