(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" /> <a href="/users/{{f_user.id}}">{{f_user.name}}</a> </li> </ul> </div> <h3>Micropost Feed</h3> .....
3)AngularJS controller
$ vi app/assets/javascripts/mymodule.js.erb
myModule.controller("HomeCtrl", function($scope, flashService, micropostsResource, sessionResource, $filter) { ..... $scope.chkSignin = function() { return flashService.getUser(); }; ..... $scope.flg_follers = false; $scope.following = function() { $scope.flg_follers = true; $scope.follow_title = "Following"; $scope.f_users = $scope.chkSignin().followed_users; }; $scope.followers = function() { $scope.flg_follers = true; $scope.follow_title = "Followers"; $scope.f_users = $scope.chkSignin().followers; }; $scope.hash = function(email) { return md5(email.toLowerCase()); };
(2)User Profile page
1)follower stats parts
$ vi app/assets/templates/users/show.html.erb
<div class="col-xs-6 col-sm-4"> <h3> <img alt="{{user_info.user.name}}" src="{{user_info.gravatar_url}}?s=60" class="gravatar" /> {{user_info.user.name}} </h3> <span ng-show="flg_follers"> <a href="#" ng-click="viewProfile()"> view my profile </a> </span><br /> <div class="stats"> <a href="#" ng-click="following()"> <strong id="following" class="stat"> {{user_info.followed_users.length}} </strong> following </a> <a href="#" ng-click="followers()"> <strong id="followers" class="stat"> {{user_info.followers.length}} </strong> followers </a> </div> </div>
2)following and followers list parts
$ vi app/assets/templates/users/show.html.erb
<div class="col-xs-6 col-sm-8"> <div ng-show="flg_follers" class="row"> <h3>{{follow_title}}</h3> <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" /> <a href="/users/{{f_user.id}}">{{f_user.name}}</a> </li> </ul> </div> <div ng-hide="flg_follers" class="row"> <h3>Microposts({{user_info.microposts.length}})</h3> .......
3)AngularJS controller
$ vi app/assets/javascripts/mymodule.js.erb
myModule.controller("UsersShowCtrl", function($scope, $routeParams, userResource, flashService, $filter, micropostsResource, $q) { ..... userResource.show({ id: $routeParams.id }, function(response) { $scope.user_info = response; ....... }); $scope.flg_follers = false; $scope.following = function() { $scope.flg_follers = true; $scope.follow_title = "Following"; $scope.f_users = $scope.user_info.followed_users; }; $scope.followers = function() { $scope.flg_follers = true; $scope.follow_title = "Followers"; $scope.f_users = $scope.user_info.followers; }; $scope.viewProfile = function() { $scope.flg_follers = false; }; $scope.hash = function(email) { return md5(email.toLowerCase()); };