Hedgehog-practice

Project maintained by twilson63 Hosted on GitHub Pages — Theme by mattgraham

Hedgehog Practice

A simple project to practice with AngularJS and Socket.IO.

Requirements

  1. NodeJS - http://nodejs.org
  2. Grunt - npm install -g grunt-cli
  3. Node-Dev = npm install -g node-dev

Get Started

  1. Clone the Repo
git clone https://github.com/twilson63/hedgehog-practice.git
  1. cd into app
cd hedgehog-practice
  1. npm install
npm install
  1. run grunt
grunt concat
  1. run grunt watch
grunt watch
  1. run node-dev in new terminal
node-dev app.js

  1. open browser and editer

  2. add search form template

<form class="form-search">
  <div class="input-append">
    <input class="search-query" type="text" ng-model="query">
    <button class="btn" ng-click="search()">
      <i class="icon-bolt"></i>
    </button>
  </div>
</form>
  1. add search form client code
$scope.search = function() {
  socket.emit('search', $scope.query, function(res) {
    $scope.hogs = res.responseData.results;
  });
};
  1. add search form server code
socket.on('search', function (q, fn) {
  request('https://ajax.googleapis.com/ajax/services/search/images?v=1.0&' +
   'q=HedgeHog+' + q,
    {json: true},
    function(e,r,b) { fn(b); }
  );
});
  1. add results and select template
<li ng-repeat="hog in hogs" >
  <a href="#" ng-click="select(hog)">
  <div class="media">
    <div class="chevron pull-right">
      <i class="icon-chevron-right"></i>
    </div>
    <div class="pull-left">
      <img class="media-object" style="" ng-src="{{hog.tbUrl}}" />
    </div>
    <div class="media-body">
      <h4><div ng-bind-html-unsafe="hog.title"></div></h4>
    </div>
  </div>
  </a>
</li>
  1. Add select client code
$scope.select = function(hog) {
  $scope.selected = hog.url;
};
  1. Add submit template
<div class="row">
  <img ng-src="{{selected}}"></img>
</div>
<div class="row">
<button 
  style="margin-top: 20px;"
  class="btn pull-right" 
  ng-show="selected"
  ng-click="submit()">Submit</button>
</div>
  1. Add submit client code
$scope.submit = function() {
  socket.emit('submit', $scope.selected);
  $location.path('/vote');
};
  1. Add submit server code
socket.on('submit', function(url) {
  db.put(uuid.v1(), JSON.stringify({url: url, votes: 0}));
  io.sockets.emit('addHog', url);
});
  1. Add vote template 
<div class="span2" ng-repeat="hog in hogs">
  <a href="#" ng-click="vote(hog)">
    <img 
      style="height: 120px; width: 120px;"
      ng-src="{{hog.url}}" 
     />
  </a>
</div>
  1. Add Vote Client Code
$scope.hogs = [];
socket.on('addHog', function(hog) {
  $scope.hogs.push(hog);
});
socket.emit('hogs');
$scope.vote = function(hog) {
  socket.emit('vote', hog);
  $location.path('/leaders');
};
  1. Add vote server side code
socket.on('vote', function(hog) {
  db.put(hog.id, JSON.stringify({
    url: hog.url, 
    votes: hog.votes + 1
  }));
});
  1. Add leaders template 
<div class="span2" ng-repeat="hog in hogs | orderBy: '-votes'">
  <a href="#" ng-click="vote(hog)">
    <img 
      style="height: 120px; width: 120px;"
      ng-src="{{hog.url}}" 
     />
  </a>
  <div style="padding: 30px;font-size: 3em;font-weight: bold;">{{hog.votes}}</div>
</div>
  1. Add leaders client code
$scope.hogs = [];
// insert leaders code here
socket.on('addHog', function(hog) {
  $scope.hogs.push(hog);
});
socket.emit('hogs');

Complete

Now you should have a simple hedgehog voting app.

Errors

If you find any errors or typos, please submit issue and I will fix

Thanks