Web Programming examples

Google Maps,AngularJS

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'