喜欢功能的提交

app/assets/javascripts/angularjs.js.coffee

@@ -1,9 +1,10 @@
 #= require angular
+#= require angular-cookies
 #= require angular-resource
 #= require_self
 #= require_tree ./angularjs
 
-@app = angular.module('app', [])
+@app = angular.module('app', ['ngCookies'])
 
 @app.config(["$httpProvider", (provider) ->
     provider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content')

app/assets/javascripts/angularjs/comments.js.coffee

@@ -1,4 +1,4 @@
-@app.controller 'CommentsController', ($scope, $http, $location, $timeout)->
+@app.controller 'CommentsController', ($scope, $http, $location)->
   url = $location.absUrl() + "/comments"
 
   $http.get(url).success (data)->

app/assets/javascripts/angularjs/likes.js.coffee

@@ -0,0 +1,27 @@
+@app.controller 'LikesController', ($scope, $http, $location, $cookies)->
+  url = $location.absUrl() + "/likes"
+
+  $scope.count = 0
+
+  $scope.get_count = ->
+    $http.get url
+    .success (res)->
+      $scope.count = res.count
+
+  $scope.get_count()
+  
+  $scope.like = $cookies.like
+
+  $scope.submit = ->
+    $http.post url
+    .success (res)->
+      if res.success
+        $scope.count += 1
+        $scope.like = $cookies.like = res.id
+
+  $scope.cancel = ->
+    $http.delete url + "/" + $scope.like
+    # anyway, clear cookie
+    delete $cookies["like"]
+    $scope.like = null
+    $scope.get_count()

app/assets/stylesheets/foundation_and_overrides.scss

@@ -1191,15 +1191,15 @@
 @import 'foundation';
 @import 'foundation-icons';
 
-#like-button {
-  color:  #eaa296;
-  background-color: transparent;
-  border: 1px solid #e79385;
+.like-button {
+  color:  #eaa296 !important;
+  background-color: transparent !important;
+  border: 1px solid #e79385 !important;
   border-radius: 10rem;
   &:hover {
-    background-color: #FCFF9E;
+    background-color: #FCFF9E !important;
   }
   &:focus {
-    outline-style: none;
+    outline-style: none !important;
   }
 }

app/assets/stylesheets/like_and_weixin.css.scss

@@ -0,0 +1,5 @@
+.like-button {
+  span {
+    margin-left: 0.23rem;
+  }
+}

app/controllers/likes_controller.rb

@@ -11,7 +11,7 @@ class LikesController < ApplicationController
     like = Like.new
     like.post = post
     if like.save
-      render :json=> { success: true }
+      render :json=> { success: true, id: like.id.to_s }
     else
       render :json=> { success: false }
     end

app/helpers/application_helper.rb

@@ -1,2 +1,5 @@
 module ApplicationHelper
+  def format_date(time)
+    time.strftime("%Y-%m-%d")
+  end
 end

app/views/blogs/_comment.html.slim

@@ -1,4 +1,4 @@
-.row ng-app="app" ng-controller="CommentsController"
+.row ng-controller="CommentsController"
   .small-12.large-8.columns
     form novalidate='' name='form'
       .row

app/views/blogs/_post.html.slim

@@ -1,9 +1,9 @@
-h2.blog-title hello
+h2.blog-title #{post.title}
 p.ptag
-  | 分类: 
+  i.fi-list
   span 技术
 p.ptag
-  | 标签:
+  i.fi-pricetag-multiple
   span 生活, 感悟
 
 .content.markdown
@@ -11,6 +11,11 @@ p.ptag
 
 p.ptag
   | 发表于:
-  span 2014-2-14
-p
-  button#like-button Like
+  span #{format_date(post.created_at)}
+p ng-controller="LikesController"
+  button.like-button ng-show="! like " ng-click="submit()"
+    |{{ count }}
+    span Like
+  button.like-button ng-show=" like " ng-click="cancel()" 
+    |{{ count }}
+    span Liked

app/views/layouts/application.html.slim

@@ -51,7 +51,7 @@ html
               = link_to about_path do
                 i.fi-torso
                 | 关于我
-        section.main-section 
+        section.main-section ng-app="app"
           = yield
           = render "layouts/footer"
         a.exit-off-canvas