(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());
};