Web Programming examples

Google Maps,AngularJS

Ruby on Rails Tutorial following and followers pages with AngularJS

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

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.