{"id":1166,"date":"2015-08-05T09:02:21","date_gmt":"2015-08-05T09:02:21","guid":{"rendered":"http:\/\/www.honobono-life.info\/wpeng\/?p=1166"},"modified":"2017-10-08T07:50:44","modified_gmt":"2017-10-08T07:50:44","slug":"following-and-followers-pages-with-angularjs","status":"publish","type":"post","link":"http:\/\/www.honobono-life.info\/wpeng\/following-and-followers-pages-with-angularjs\/","title":{"rendered":"Ruby on Rails Tutorial following and followers pages with AngularJS"},"content":{"rendered":"

(1)Home page<\/strong><\/p>\r\n\r\n

1)follower stats parts<\/strong><\/p>\r\n\r\n

$ vi app\/assets\/templates\/static_pages\/home.html.erb<\/p>\r\n\r\n

\r\n<div class="stats">\r\n  <a href="#" ng-click="following()">\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
2)following and followers list parts<\/strong><\/p>\r\n\r\n
$ vi app\/assets\/templates\/static_pages\/home.html.erb<\/p>\r\n\r\n
\r\n.....\r\n<div class="col-sm-8">\r\n  <div ng-show="flg_follers" class="row">\r\n    <h1 class="text-center">{{follow_title}}<\/h1>\r\n    <ul ng-repeat="f_user in f_users" class="users">\r\n      <li><img alt="{{f_user.name}}" src="https:\/\/secure.gravatar.com\/avatar\/{{hash(f_user.email)}}?s=52" \/>\r\n        <a href="\/users\/{{f_user.id}}">{{f_user.name}}<\/a>\r\n      <\/li>\r\n    <\/ul>\r\n  <\/div>\r\n  <h3>Micropost Feed<\/h3>\r\n.....<\/pre><\/div>\r\n\r\n
3)AngularJS controller<\/strong><\/p>\r\n\r\n
$ vi app\/assets\/javascripts\/mymodule.js.erb<\/p>\r\n\r\n
\r\nmyModule.controller("HomeCtrl", function($scope, flashService, micropostsResource, sessionResource, $filter) {\r\n.....\r\n  $scope.chkSignin = function() {\r\n    return flashService.getUser();\r\n  };\r\n.....\r\n  $scope.flg_follers = false;\r\n  $scope.following = function() {\r\n    $scope.flg_follers = true;\r\n    $scope.follow_title = "Following";\r\n    $scope.f_users = $scope.chkSignin().followed_users;\r\n  };\r\n  $scope.followers = function() {\r\n    $scope.flg_follers = true;\r\n    $scope.follow_title = "Followers";\r\n    $scope.f_users = $scope.chkSignin().followers;\r\n  };\r\n  $scope.hash = function(email) {\r\n    return md5(email.toLowerCase());\r\n  };<\/pre>\r\n\r\n
(2)User Profile page<\/strong><\/p>\r\n\r\n
1)follower stats parts<\/strong><\/p>\r\n\r\n
$ vi app\/assets\/templates\/users\/show.html.erb<\/p>\r\n\r\n
\r\n<div class="col-xs-6 col-sm-4">\r\n  <h3>\r\n    <img alt="{{user_info.user.name}}"\r\n         src="{{user_info.gravatar_url}}?s=60"\r\n         class="gravatar" \/>\r\n    {{user_info.user.name}}\r\n  <\/h3>\r\n  <span ng-show="flg_follers">\r\n    <a href="#" ng-click="viewProfile()">\r\n      view my profile\r\n    <\/a>\r\n  <\/span><br \/>\r\n  <div class="stats">\r\n    <a href="#" ng-click="following()">\r\n      <strong id="following" class="stat">\r\n        {{user_info.followed_users.length}}\r\n      <\/strong>\r\n      following\r\n    <\/a>\r\n    <a href="#" ng-click="followers()">\r\n      <strong id="followers" class="stat">\r\n        {{user_info.followers.length}}\r\n      <\/strong>\r\n      followers\r\n    <\/a>\r\n  <\/div>\r\n<\/div><\/pre><\/div>\r\n\r\n
2)following and followers list parts<\/strong><\/p>\r\n\r\n
$ vi app\/assets\/templates\/users\/show.html.erb<\/p>\r\n\r\n
\r\n<div class="col-xs-6 col-sm-8">\r\n  <div ng-show="flg_follers" class="row">\r\n    <h3>{{follow_title}}<\/h3>\r\n    <ul ng-repeat="f_user in f_users" class="users">\r\n      <li><img alt="{{f_user.name}}"\r\n               src="https:\/\/secure.gravatar.com\/avatar\/{{hash(f_user.email)}}?s=52" \/>\r\n        <a href="\/users\/{{f_user.id}}">{{f_user.name}}<\/a>\r\n      <\/li>\r\n    <\/ul>\r\n  <\/div>\r\n  <div ng-hide="flg_follers" class="row">\r\n    <h3>Microposts({{user_info.microposts.length}})<\/h3>\r\n.......<\/pre><\/div>\r\n\r\n
3)AngularJS controller<\/strong><\/p>\r\n\r\n
$ vi app\/assets\/javascripts\/mymodule.js.erb<\/p>\r\n\r\n
\r\nmyModule.controller("UsersShowCtrl", function($scope, $routeParams, userResource, flashService, $filter, micropostsResource, $q) {\r\n.....\r\n  userResource.show({ id: $routeParams.id }, function(response) {\r\n    $scope.user_info = response;\r\n.......\r\n  });\r\n  $scope.flg_follers = false;\r\n  $scope.following = function() {\r\n    $scope.flg_follers = true;\r\n    $scope.follow_title = "Following";\r\n    $scope.f_users = $scope.user_info.followed_users;\r\n  };\r\n  $scope.followers = function() {\r\n    $scope.flg_follers = true;\r\n    $scope.follow_title = "Followers";\r\n    $scope.f_users = $scope.user_info.followers;\r\n  };\r\n  $scope.viewProfile = function() {\r\n    $scope.flg_follers = false;\r\n  };\r\n  $scope.hash = function(email) {\r\n    return md5(email.toLowerCase());\r\n  };\r\n<\/pre>\r\n","protected":false},"excerpt":{"rendered":"
(1)Home page 1)follower stats parts $ vi app\/assets\/templates\/static_pages\/home.html.erb <div class="stats"> <a href="#" ng-click="following()"> <strong id="following" class="stat"> {{chkSignin().followed_users.length}} <\/strong> following <\/a> <a href="#"> <strong id="followers" class="stat"> {{chkSignin().followers.length}} <\/strong> followers <\/a> <\/div> 2)following and followers list parts $ vi app\/assets\/templates\/static_pages\/home.html.erb ….. <div class="col-sm-8"> <div ng-show="flg_follers" class="row"> <h1 class="text-center">{{follow_title}}<\/h1> <ul ng-repeat="f_user in f_users" class="users"> <li><img alt="{{f_user.name}}" src="https:\/\/secure.gravatar.com\/avatar\/{{hash(f_user.email)}}?s=52" \/> […]<\/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,185,186],"amp_enabled":true,"_links":{"self":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts\/1166"}],"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=1166"}],"version-history":[{"count":1,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts\/1166\/revisions"}],"predecessor-version":[{"id":1167,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts\/1166\/revisions\/1167"}],"wp:attachment":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/media?parent=1166"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/categories?post=1166"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/tags?post=1166"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}