{"id":1160,"date":"2015-08-05T08:18:14","date_gmt":"2015-08-05T08:18:14","guid":{"rendered":"http:\/\/www.honobono-life.info\/wpeng\/?p=1160"},"modified":"2015-08-05T08:18:14","modified_gmt":"2015-08-05T08:18:14","slug":"show-follower-stats-with-angularjs","status":"publish","type":"post","link":"http:\/\/www.honobono-life.info\/wpeng\/show-follower-stats-with-angularjs\/","title":{"rendered":"Ruby on Rails Tutorial show follower stats with AngularJS"},"content":{"rendered":"

(1)Rails model, association, validation<\/strong><\/p>\r\n\r\n

1)"Relationship" model<\/strong><\/p>\r\n\r\n

$ rails generate model Relationship follower_id:integer followed_id:integer<\/p>\r\n\r\n

2)add indices for the relationships table<\/strong><\/p>\r\n\r\n

$ vi db\/migrate\/…._create_relationships.rb<\/p>\r\n\r\n

\r\nclass CreateRelationships < ActiveRecord::Migration\r\n  def change\r\n    create_table :relationships do |t|\r\n      t.integer :follower_id\r\n      t.integer :followed_id\r\n\r\n      t.timestamps\r\n    end\r\n    add_index :relationships, :follower_id\r\n    add_index :relationships, :followed_id\r\n    add_index :relationships, [:follower_id, :followed_id], unique: true\r\n  end\r\nend<\/pre>\r\n\r\n
3)migrate<\/strong><\/p>\r\n\r\n
$ bundle exec rake db:migrate<\/p>\r\n\r\n
4)validation<\/strong><\/p>\r\n\r\n
$ vi app\/models\/relationship.rb<\/p>\r\n\r\n
\r\nvalidates :follower_id, presence: true\r\nvalidates :followed_id, presence: true<\/pre>\r\n\r\n
(2)User\/followed_users associations<\/strong><\/p>\r\n\r\n
1)"relationship" model<\/strong><\/p>\r\n\r\n
$ vi app\/models\/relationship.rb<\/p>\r\n\r\n
\r\nbelongs_to :follower, class_name: "User"\r\nbelongs_to :followed, class_name: "User"<\/pre>\r\n\r\n
2)"user" model<\/strong><\/p>\r\n\r\n
$ vi app\/models\/user.rb<\/p>\r\n\r\n
\r\nhas_many :relationships, foreign_key: "follower_id", dependent: :destroy\r\nhas_many :followed_users, through: :relationships, source: :followed<\/pre>\r\n\r\n
3)Utility methods for following<\/strong><\/p>\r\n\r\n
$ vi app\/models\/user.rb<\/p>\r\n\r\n
\r\n  def following?(other_user)\r\n    relationships.find_by(followed_id: other_user.id)\r\n  end\r\n\r\n  def follow!(other_user)\r\n    relationships.create!(followed_id: other_user.id)\r\n  end\r\n\r\n  def unfollow!(other_user)\r\n    relationships.find_by(followed_id: other_user.id).destroy\r\n  end<\/pre>\r\n\r\n
(3)User\/followers associations<\/strong><\/p>\r\n\r\n
1)"relationship" model<\/strong><\/p>\r\n\r\n
$ more app\/models\/relationship.rb<\/p>\r\n\r\n
\r\nbelongs_to :follower, class_name: "User"\r\nbelongs_to :followed, class_name: "User"<\/pre>\r\n\r\n
2)"user" model<\/strong><\/p>\r\n\r\n
$ vi app\/models\/user.rb<\/p>\r\n\r\n
\r\n  has_many :reverse_relationships, foreign_key: "followed_id",\r\n                                   class_name:  "Relationship",\r\n                                   dependent:   :destroy\r\n  has_many :followers, through: :reverse_relationships, source: :follower<\/pre>\r\n\r\n
(3)check by console<\/strong><\/p>\r\n\r\n
1.user instance<\/strong><\/p>\r\n\r\n
> user2=User.find_by(id: 2)
\r\n> user6=User.find_by(id: 6)<\/p>\r\n\r\n
2."following?"<\/strong><\/p>\r\n\r\n
> user2.following?(user6)
\r\n => nil
\r\n> user6.following?(user2)
\r\n => nil<\/p>\r\n\r\n
3."follow!"<\/strong><\/p>\r\n\r\n
> user2.follow!(user6)
\r\n   (0.2ms)  begin transaction
\r\n  SQL (0.3ms)  INSERT INTO "relationships" ("created_at", "followed_id", "follower_id", "updated_at") VALUES (?, ?, ?, ?)  [["created_at", "2015-07-24 08:17:13.716171"], ["followed_id", 6], ["follower_id", 2], ["updated_at", "2015-07-24 08:17:13.716171"]]
\r\n   (3.4ms)  commit transaction
\r\n => #<Relationship id: 1, follower_id: 2, followed_id: 6, created_at: "2015-07-24 08:17:13", updated_at: "2015-07-24 08:17:13"><\/p>\r\n\r\n
> user6.follow!(user2)<\/p>\r\n\r\n
4."relationships", "reverse_relationships" association<\/strong><\/p>\r\n\r\n
> user2.relationships
\r\n => #<ActiveRecord::Associations::CollectionProxy [#<Relationship id: 1, follower_id: 2, followed_id: 6, created_at: "2015-07-24 08:17:13", updated_at: "2015-07-24 08:17:13">]><\/p>\r\n\r\n
> user2.reverse_relationships
\r\n  Relationship Load (0.2ms)  SELECT "relationships".* FROM "relationships"  WHERE "relationships"."followed_id" = ?  [["followed_id", 2]]
\r\n => #<ActiveRecord::Associations::CollectionProxy [#<Relationship id: 2, follower_id: 6, followed_id: 2, created_at: "2015-07-24 08:17:54", updated_at: "2015-07-24 08:17:54">]><\/p>\r\n\r\n
> Relationship.all
\r\n  Relationship Load (0.2ms)  SELECT "relationships".* FROM "relationships"
\r\n => #<ActiveRecord::Relation [#<Relationship id: 1, follower_id: 2, followed_id: 6, created_at: "2015-07-24 08:17:13", updated_at: "2015-07-24 08:17:13">, #<Relationship id: 2, follower_id: 6, followed_id: 2, created_at: "2015-07-24 08:17:54", updated_at: "2015-07-24 08:17:54">]><\/p>\r\n\r\n
> user2.relationships.find_by(followed_id: user6)
\r\n  Relationship Load (0.1ms)  SELECT  "relationships".* FROM "relationships"  WHERE "relationships"."follower_id" = ? AND "relationships"."followed_id" = 6 LIMIT 1  [["follower_id", 2]]
\r\n => #<Relationship id: 1, follower_id: 2, followed_id: 6, created_at: "2015-07-24 08:17:13", updated_at: "2015-07-24 08:17:13"><\/p>\r\n\r\n
5."followed_users", "followers" association<\/strong><\/p>\r\n\r\n
> user2.followed_users.count
\r\n => 1
\r\n> user2.followers.count
\r\n => 1
\r\n> user6.followed_users.count
\r\n => 1
\r\n> user6.followers.count
\r\n => 1
\r\n> user2.followers.all<\/p>\r\n\r\n
> user2.followed_users.all<\/p>\r\n\r\n
(4)show following and followers<\/strong><\/p>\r\n\r\n
1)Rails controller<\/strong><\/p>\r\n\r\n
$ vi app\/controllers\/sessions_controller.rb<\/p>\r\n\r\n
\r\n  def create\r\n    user = User.find_by(email: session_params[:email].downcase)\r\n    if user && user.authenticate(session_params[:password])\r\n      remember_token = User.new_remember_token\r\n      cookies.permanent[:remember_token] = remember_token\r\n      user.update_attribute(:remember_token, User.encrypt(remember_token))\r\n      gravatar_id = Digest::MD5::hexdigest(user.email.downcase)\r\n      microposts = user.microposts\r\n      @user_info = {\r\n        user: user,\r\n        gravatar_url: "https:\/\/secure.gravatar.com\/avatar\/#{gravatar_id}",\r\n        microposts: microposts,\r\n        feed: user.feed,\r\n        followed_users: user.followed_users,\r\n        followers:  user.followers\r\n      }\r\n      render json: @user_info, status: :accepted, location: user\r\n    else\r\n......\r\n  def current_user\r\n    remember_token = User.encrypt(cookies[:remember_token])\r\n    current_user ||= User.find_by(remember_token: remember_token)\r\n    if current_user\r\n      gravatar_id = Digest::MD5::hexdigest(current_user.email.downcase)\r\n      microposts = current_user.microposts\r\n      @user_info = {\r\n        user: current_user,\r\n        gravatar_url: "https:\/\/secure.gravatar.com\/avatar\/#{gravatar_id}",\r\n        microposts: microposts,\r\n        feed: current_user.feed,\r\n        followed_users: current_user.followed_users,\r\n        followers:  current_user.followers\r\n      }\r\n      render json: @user_info, status: :accepted\r\n    else\r\n      head :no_content\r\n    end\r\n  end<\/pre>\r\n\r\n
2)AngularJS template view<\/strong><\/p>\r\n\r\n
$ vi app\/assets\/templates\/static_pages\/home.html.erb<\/p>\r\n\r\n
\r\n<div ng-controller="HomeCtrl">\r\n  <div ng-show="chkSignin().user.id > 0" class="row">\r\n......\r\n    <div class="col-sm-4">\r\n.........\r\n      <div class="stats">\r\n        <a href="#">\r\n          <strong id="following" class="stat">\r\n            {{chkSignin().followed_users.length}}\r\n          <\/strong>\r\n          following\r\n        <\/a>\r\n        <a href="#">\r\n          <strong id="followers" class="stat">\r\n            {{chkSignin().followers.length}}\r\n          <\/strong>\r\n          followers\r\n        <\/a>\r\n      <\/div><\/pre><\/div>\r\n\r\n
3)css<\/strong><\/p>\r\n\r\n
$ vi app\/assets\/stylesheets\/custom.css.scss<\/p>\r\n\r\n
\r\n.stats {\r\n  overflow: auto;\r\n  border-top: 1px solid $grayLighter;\r\n  a {\r\n    float: left;\r\n    padding: 0 10px;\r\n    border-left: 1px solid $grayLighter;\r\n    color: gray;\r\n    &:first-child {\r\n      padding-left: 0;\r\n      border: 0;\r\n    }\r\n    &:hover {\r\n      text-decoration: none;\r\n      color: blue;\r\n    }\r\n  }\r\n  strong {\r\n    display: block;\r\n  }\r\n}\r\n<\/pre>","protected":false},"excerpt":{"rendered":"
(1)Rails model, association, validation 1)"Relationship" model $ rails generate model Relationship follower_id:integer followed_id:integer 2)add indices for the relationships table $ vi db\/migrate\/…._create_relationships.rb class CreateRelationships < ActiveRecord::Migration def change create_table :relationships do |t| t.integer :follower_id t.integer :followed_id t.timestamps end add_index :relationships, :follower_id add_index :relationships, :followed_id add_index :relationships, [:follower_id, :followed_id], unique: true end end 3)migrate $ bundle […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[137],"tags":[35,184,183],"amp_enabled":true,"_links":{"self":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts\/1160"}],"collection":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/comments?post=1160"}],"version-history":[{"count":1,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts\/1160\/revisions"}],"predecessor-version":[{"id":1161,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts\/1160\/revisions\/1161"}],"wp:attachment":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/media?parent=1160"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/categories?post=1160"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/tags?post=1160"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}