showing transaction with animation in home page

app/views/includes/foot.jade

@@ -12,6 +12,7 @@ script(type='text/javascript', src='/lib/angular-resource/angular-resource.js')
 script(type='text/javascript', src='/lib/angular-route/angular-route.js')
 script(type='text/javascript', src='/lib/qrcode-generator/js/qrcode.js')
 script(type='text/javascript', src='/lib/angular-qrcode/qrcode.js')
+script(type='text/javascript', src='/lib/angular-animate/angular-animate.js')
 
 //Angular UI
 script(type='text/javascript', src='/lib/angular-bootstrap/ui-bootstrap.js')

app/views/includes/head.jade

@@ -14,5 +14,4 @@ head
   link(rel='stylesheet', href='/css/common.css')
 
   script(src='/socket.io/socket.io.js')
-  script(src='/lib/jquery/jquery.js')
 

app/views/sockets/main.js

@@ -2,11 +2,14 @@
 
 var Transaction = require('../../models/Transaction');
 
+// server-side socket behaviour
 module.exports = function(app, io) {
   io.set('log level', 1); // reduce logging
   io.sockets.on('connection', function(socket) {
     Transaction.findOne(function(err, tx) {
-      socket.emit('tx', tx);
+      setTimeout(function() {
+        socket.emit('tx', tx);
+      }, 5000);
     });
   });
 };

bower.json

@@ -10,6 +10,8 @@
       "bootstrap": "3.0.3",
       "angular-bootstrap": "0.9.0",
       "angular-ui-utils": "0.1.0",
-      "angular-qrcode": "latest"
+      "angular-qrcode": "latest",
+      "angular-animate": "latest"
+
     }
 }

public/css/common.css

@@ -48,3 +48,14 @@ body {
   font-size: 10px;
 }
 
+
+
+/* Animations */
+.fader.ng-enter {
+  transition: opacity 1s;
+  opacity: 0;
+}
+
+.fader.ng-enter-active {
+  opacity: 1;
+}

public/js/app.js

@@ -1,9 +1,10 @@
 'use strict';
 
-angular.module('mystery', ['ngCookies', 'ngResource', 'ngRoute', 'ui.bootstrap', 'ui.route', 'mystery.system', 'mystery.index', 'mystery.blocks', 'mystery.transactions', 'monospaced.qrcode', 'mystery.address']);
+var app = angular.module('mystery', ['ngAnimate', 'ngCookies', 'ngResource', 'ngRoute', 'ui.bootstrap', 'ui.route', 'mystery.system', 'mystery.index', 'mystery.blocks', 'mystery.transactions', 'monospaced.qrcode', 'mystery.address']);
 
 angular.module('mystery.system', []);
 angular.module('mystery.index', []);
 angular.module('mystery.blocks', []);
 angular.module('mystery.transactions', []);
 angular.module('mystery.address', []);
+

public/js/controllers/index.js

@@ -1,16 +1,14 @@
 'use strict';
 
-angular.module('mystery.system').controller('IndexController', ['$scope', 'Global', 'Index', function($scope, Global, Index) {
+angular.module('mystery.system').controller('IndexController', ['$scope', 'Global', 'socket', function($scope, Global, socket) {
   $scope.global = Global;
-  $scope.index = Index;
-}]);
-
-$(document).ready(function() {
-  var socket = io.connect('http://localhost');
   socket.on('tx', function(data) {
     var tx = data;
-    console.log('Transaction received! '+tx.txid);
+    console.log('Transaction received! ' + tx.txid);
+    $scope.txs.push(tx.txid);
   });
 
-});
+  $scope.txs = [];
+
+}]);
 

public/js/services/index.js

@@ -1,5 +1,26 @@
 'use strict';
 
-angular.module('mystery.index').factory('Index', ['$resource', function($resource) {
-  return $resource;
-}]);
+app.factory('socket', function($rootScope) {
+  var socket = io.connect();
+  return {
+    on: function(eventName, callback) {
+      socket.on(eventName, function() {
+        var args = arguments;
+        $rootScope.$apply(function() {
+          callback.apply(socket, args);
+        });
+      });
+    },
+    emit: function(eventName, data, callback) {
+      socket.emit(eventName, data, function() {
+        var args = arguments;
+        $rootScope.$apply(function() {
+          if (callback) {
+            callback.apply(socket, args);
+          }
+        });
+      });
+    }
+  };
+});
+

public/views/index.html

@@ -1,8 +1,9 @@
-<section data-ng-controller="IndexController" data-ng-init="last_blocks()">
-  <div class="jumbotron">
-    <h1>Hello, BitPay!</h1>
-    <p>Start here for blocks information</p>
-    <p><a href="/#!/blocks" class="btn btn-primary btn-lg">List all blocks</a></p>
+<section data-ng-controller="IndexController" data-ng-init="">
+  <div class="">
+    <h3>New transactions</h3>
+    <div class="alert alert-info fader" ng-repeat='tx in txs'>
+      {{tx}}
+    </div>
   </div>
 </section>
 

server.js

@@ -63,8 +63,9 @@ require('./app/views/sockets/main.js')(app,io);
 
 //Start the app by listening on <port>
 var port = process.env.PORT || config.port;
-server.listen(port);
-console.log('Express app started on port ' + port);
+server.listen(port, function(){
+    console.log('Express server listening on port %d in %s mode', server.address().port, process.env.NODE_ENV);
+});
 
 //expose app
 exports = module.exports = app;