Web Programming examples

Google Maps,AngularJS

Archives

Ruby on Rails

Ruby on Rails Tutorial adding microposts count and gravatar to home page with AngularJS

1)Rails controller

$ vi app/controllers/sessions_controller.rb

  def create
    user = User.find_by(email: session_params[:email].downcase)
    if user && user.authenticate(session_params[:password])
      remember_token = User.new_remember_token
      cookies.permanent[:remember_token] = remember_token
      user.update_attribute(:remember_token, User.encrypt(remember_token))
      gravatar_id = Digest::MD5::hexdigest(user.email.downcase)
      microposts = user.microposts
      @user_info = {
        user: user,
        gravatar_url: "https://secure.gravatar.com/avatar/#{gravatar_id}",
        microposts: microposts
      }
      render json: @user_info, status: :accepted, location: user
    else
      msg = {"password" => ["Invalid email/password combination"]}
      render json: msg, status: :unprocessable_entity
    end
  end

  def current_user
    remember_token = User.encrypt(cookies[:remember_token])
    current_user ||= User.find_by(remember_token: remember_token)
    if current_user
      gravatar_id = Digest::MD5::hexdigest(current_user.email.downcase)
      microposts = current_user.microposts
      @user_info = {
        user: current_user,
        gravatar_url: "https://secure.gravatar.com/avatar/#{gravatar_id}",
        microposts: microposts
      }
      render json: @user_info, status: :accepted
    else
      head :no_content
    end
  end

2)AngularJS "UsersNewCtrl" controller

myModule.controller("UsersNewCtrl", function($scope, userResource, $location, flashService, $routeParams, sessionResource, $q) {
.....
  $scope.submit = function() {
    function success(response) {
.........
      var user_info = { 
        user: response,
        gravatar_url: "https://secure.gravatar.com/avatar/" + md5(response.email.toLowerCase())
      };
      flashService.setUser(user_info);
      $location.path("/users/" + response.id);
    }

3)AngularJS "HomeCtrl" controller and template view

1.AngularJS "HomeCtrl" controller

$ vi app/assets/javascripts/mymodule.js.erb

myModule.controller("HomeCtrl", function($scope,flashService) {
  $scope.chkSignin = function() {
    return flashService.getUser();
  };
});

2.AngularJS template view

$ vi app/assets/templates/static_pages/home.html.erb

<div ng-controller="HomeCtrl">
  <div ng-show="chkSignin().user.id > 0" class="row">
    <div class="col-sm-4">
      <a href="/users/{{chkSignin().user.id}}">
        <img alt="{{chkSignin().user.name}}"
             src="{{chkSignin().gravatar_url}}?s=60"
             class="gravatar"
        />
      </a>
      <h4>{{chkSignin().user.name}}</h4>
      <span><a href="/users/{{chkSignin().user.id}}">view my profile</a></span><br />
      <ng-pluralize count="chkSignin().microposts.length"
                    when="{'0': '0 micropost',
                           'one': '1 micropost',
                           'other': '{} microposts'}">
      </ng-pluralize>
    </div>
  </div>
  <div ng-hide="chkSignin().user.id > 0">
    <div class="jumbotron">
      <h1>Welcome to the Sample App</h1>
.........
Ruby on Rails

Ruby on Rails Tutorial users index with AngularJS

1)Rails controller

$ vi app/controllers/users_controller.rb

class UsersController < ApplicationController
  before_action :signed_in_user, only: [:index, :update]

  def index
    @users = User.all
    render json: @users
  end

2)AngularJS route

$ vi app/assets/javascripts/mymodule.js.erb

.when("/users", {
 templateUrl: "<%= asset_path('users/index.html.erb') %>"
 })

3)install JavaScript-MD5 to display gravatar

1.download
https://github.com/blueimp/JavaScript-MD5

2.deploy
vendor/assets/javascripts/

3.include

$ vi app/assets/javascripts/application.js

//= require md5.min

4)AngularJS template view

$ vi app/assets/templates/users/index.html.erb

<div ng-controller="UsersIndexCtrl">
  <h1 class="text-center">All users</h1>
  <ul ng-repeat="user in users" class="users">
    <li><img alt="{{user.name}}" src="https://secure.gravatar.com/avatar/{{hash(user.email)}}?s=52" />
      <a href="/users/{{user.id}}">{{user.name}}</a>
    </li>
  </ul>
</div>

5)css

$ vi app/assets/stylesheets/custom.css.scss

$grayLighter: rgb(238, 238, 238);

/* users index */

.users {
  list-style: none;
  margin: 0;
  li {
    overflow: auto;
    padding: 10px 0;
    border-top: 1px solid $grayLighter;
    &:last-child {
      border-bottom: 1px solid $grayLighter;
    }
  }
}

6)AngularJS controller

$ vi app/assets/javascripts/mymodule.js.erb

myModule.controller("UsersIndexCtrl", function($scope, userResource, flashService, $location, sessionResource, $q) {
  var qgetUser = function(deferred) {
    if (flashService.getUser()) {
      var quser_info = flashService.getUser();
      deferred.resolve(quser_info);
    } else {
      sessionResource.current_user({}, function(response) {
        if (response.user.id) {
          var quser_info = response;
        } else {
          var quser_info = { user: {id: 0} };
        }
        flashService.setUser(quser_info);
        deferred.resolve(quser_info);
      });
    }
  }
  var deferred = $q.defer();
  deferred.promise.then(function (result) {
    var user_info = result;
    if (user_info.user.id > 0) {
      $scope.users = userResource.index();
    } else {
      $location.path("/signin");
    }
  },function (reason) {
    console.log("qgetUser-Error");
  })
  qgetUser (deferred);

$ vi app/views/layouts/_header.html.erb

  $scope.hash = function(email) {
    return md5(email.toLowerCase());
  };
});

7)add link to navigation menu

<li ng-show="chkSignin().user.id > 0"><%= link_to "Users", "/users" %></li>

Ruby on Rails

Ruby on Rails Tutorial user show view, gravatar image and a sidebar

1)Rails controller show action

$ vi app/controllers/users_controller.rb

  def show
    user = User.find(params[:id])
    gravatar_id = Digest::MD5::hexdigest(user.email.downcase)
    @user_info = {
      user: user,
      gravatar_url: "https://secure.gravatar.com/avatar/#{gravatar_id}"
    }
    render json: @user_info
  end

2)AngularJS route

$ vi app/assets/javascripts/mymodule.js.erb

myModule = angular.module('myModule', ['ui.bootstrap','ngRoute','ngResource']);

myModule.config(function($routeProvider, $locationProvider) {
  $locationProvider.html5Mode(true);
  $routeProvider
......
    .when("/users/:id", {
     templateUrl: "<%= asset_path('users/show.html.erb') %> "
     })

3)AngularJS controller "UsersShowCtrl"

$ vi app/assets/javascripts/mymodule.js.erb

myModule.factory("userResource", function($resource) {
  return $resource("/app/users/:id", { id: "@id" },
    {
.........
      'show':    { method: 'GET', isArray: false },
.........
    }
  );
});

myModule.controller("UsersShowCtrl", function($scope, $routeParams, userResource) {
  $scope.user_info = userResource.show({ id: $routeParams.id });
});

4)AngularJS template 

$ vi app/assets/templates/users/show.html.erb

<div ng-controller="UsersShowCtrl">
  <div class="row">
    <div class="col-xs-6 col-sm-4">
      <h3>{{user_info.user.name}}</h3>
      <h1>
    <img alt="{{user_info.user.name}}" src="{{user_info.gravatar_url}}" />
    {{user_info.user.name}}
      </h1>
    </div>
    <div class="col-xs-6 col-sm-8">
      <h3>Main View</h3>
    </div>
  </div>
</div>

5)Rails route

*Preblem

1."http://localhost:3000/users/1"
2.browser reload
3."No route" error

*Avoidance

$ vi config/routes.rb

get 'users/*other', to: 'layouts#index'