Web Programming examples

Google Maps,AngularJS

Archives

Ruby on Rails Tutorial follow/unfollow functionality with AngularJS

1)Rails route

$ vi config/routes.rb

  match '/app/relationships', to: 'relationships#create',  via: 'post'
  match '/app/relationships', to: 'relationships#destroy', via: 'delete'

2)Rails controller

$ vi app/controllers/relationships_controller.rb

class RelationshipsController < ApplicationController
  before_action :signed_in_user

  def create
    remember_token = User.encrypt(cookies[:remember_token])
    current_user ||= User.find_by(remember_token: remember_token)
    @user = User.find(user_params[:id])
    current_user.follow!(@user)
    head :no_content
  end

  def destroy
    remember_token = User.encrypt(cookies[:remember_token])
    current_user ||= User.find_by(remember_token: remember_token)
    @user = User.find(user_params[:id])
    current_user.unfollow!(@user)
    head :no_content
  end

  private
    def user_params
      params.permit(:id)
    end
    def signed_in_user
      remember_token = User.encrypt(cookies[:remember_token])
      current_user ||= User.find_by(remember_token: remember_token)
      if current_user.nil?
        render status: :unauthorized
      end
    end
end

3)AngularJS "relationshipsResource" service

$ vi app/assets/javascripts/mymodule.js.erb

myModule.factory("relationshipsResource", function($resource) {
  return $resource("/app/relationships",{},
    {
      'create':  { method: 'POST' },
      'destroy': { method: 'DELETE' }
    }
  );
});

4)AngularJS controller

$ vi app/assets/javascripts/mymodule.js.erb

myModule.controller("UsersShowCtrl", function($scope, $routeParams, userResource, flashService, $filter, micropostsResource, $q, sessionResource, relationshipsResource) {
.....
  $scope.follow = function(id) {
    function success(response) {
      $scope.flg_unfollow = true;
      sessionResource.current_user({}, function(response) {
        flashService.setUser(response);
      });
      $scope.$emit("$routeChangeSuccess");
    }
    function failure(response) {
      console.log("follow error");
    }
    var user_data = {
      id: id
    };
    relationshipsResource.create(user_data, success, failure);
  };

  $scope.unfollow = function(id) {
    relationshipsResource.destroy({ id: id }, function(response) {
      $scope.flg_unfollow = false;
      sessionResource.current_user({}, function(response) {
        flashService.setUser(response);
      });
      $scope.$emit("$routeChangeSuccess");
    });
  };

Ruby on Rails Tutorial show follow/unfollow buttons with AngularJS

1)AngularJS template view

$ vi app/assets/templates/users/show.html.erb

<div class="col-xs-6 col-sm-8">
  <div ng-show="!flg_follers && chkSignin() && 
       chkSignin().user.id != user_info.user.id" class="row">
    <div ng-show="flg_unfollow">
      <a class="btn btn-large btn-primary" href="#" 
         ng-click="unfollow(user_info.user.id)">
        Unfollow
      </a>
    </div>
    <div ng-hide="flg_unfollow">
      <a class="btn btn-large btn-primary" href="#" 
        ng-click="follow(user_info.user.id)">follow</a>
    </div>
  </div>

2)AngularJS controller

$ vi app/assets/javascripts/mymodule.js.erb

myModule.controller("UsersShowCtrl", function($scope, $routeParams, userResource, flashService, $filter, micropostsResource, $q) {
  var qgetUser = function(deferred) {
    if (flashService.getUser()) {
      var quser_info = flashService.getUser();
      deferred.resolve(quser_info);
    } else {
      sessionResource.current_user({}, function(response) {
        if (response.user.id) {
          var quser_info = response;
        } else {
          var quser_info = { user: {id: 0} };
        }
        flashService.setUser(quser_info);
        deferred.resolve(quser_info);
      });
    }
  }

  var chkUnfollow = function() {
    $scope.flg_unfollow = false;
    var deferred = $q.defer();
    deferred.promise.then(function (result) {
      var user_signin = result.user.id;
      for (var i=0; i<=$scope.user_info.followers.length; i++) {
        if ($scope.user_info.followers[i] && $scope.user_info.followers[i].id == user_signin) {
          $scope.flg_unfollow = true;
        }
      }
    },function (reason) {
      console.log("user_signin-Error");
    },function (reason) {
      console.log("user_signin");
    })
    qgetUser(deferred);
  };

  userResource.show({ id: $routeParams.id }, function(response) {
    $scope.user_info = response;
    chkUnfollow();
........
  });