{"id":1078,"date":"2015-08-01T00:09:19","date_gmt":"2015-08-01T00:09:19","guid":{"rendered":"http:\/\/www.honobono-life.info\/wpeng\/?p=1078"},"modified":"2015-08-01T00:14:30","modified_gmt":"2015-08-01T00:14:30","slug":"user-show-view-gravatar-image-sidebar","status":"publish","type":"post","link":"http:\/\/www.honobono-life.info\/wpeng\/user-show-view-gravatar-image-sidebar\/","title":{"rendered":"Ruby on Rails Tutorial user show view, gravatar image and a sidebar"},"content":{"rendered":"

1)Rails controller show action<\/strong><\/p>\r\n\r\n

$ vi app\/controllers\/users_controller.rb<\/p>\r\n\r\n

\r\n  def show\r\n    user = User.find(params[:id])\r\n    gravatar_id = Digest::MD5::hexdigest(user.email.downcase)\r\n    @user_info = {\r\n      user: user,\r\n      gravatar_url: "https:\/\/secure.gravatar.com\/avatar\/#{gravatar_id}"\r\n    }\r\n    render json: @user_info\r\n  end<\/pre>\r\n\r\n
2)AngularJS route<\/strong><\/p>\r\n\r\n
$ vi app\/assets\/javascripts\/mymodule.js.erb<\/p>\r\n\r\n
\r\nmyModule = angular.module('myModule', ['ui.bootstrap','ngRoute','ngResource']);\r\n\r\nmyModule.config(function($routeProvider, $locationProvider) {\r\n  $locationProvider.html5Mode(true);\r\n  $routeProvider\r\n......\r\n    .when("\/users\/:id", {\r\n     templateUrl: "<%= asset_path('users\/show.html.erb') %> "\r\n     })<\/pre>\r\n\r\n
3)AngularJS controller "UsersShowCtrl"<\/strong><\/p>\r\n\r\n
$ vi app\/assets\/javascripts\/mymodule.js.erb<\/p>\r\n\r\n
\r\nmyModule.factory("userResource", function($resource) {\r\n  return $resource("\/app\/users\/:id", { id: "@id" },\r\n    {\r\n.........\r\n      'show':    { method: 'GET', isArray: false },\r\n.........\r\n    }\r\n  );\r\n});\r\n\r\nmyModule.controller("UsersShowCtrl", function($scope, $routeParams, userResource) {\r\n  $scope.user_info = userResource.show({ id: $routeParams.id });\r\n});<\/pre>\r\n\r\n
4)AngularJS template <\/strong><\/p>\r\n\r\n
$ vi app\/assets\/templates\/users\/show.html.erb<\/p>\r\n\r\n
\r\n<div ng-controller="UsersShowCtrl">\r\n  <div class="row">\r\n    <div class="col-xs-6 col-sm-4">\r\n      <h3>{{user_info.user.name}}<\/h3>\r\n      <h1>\r\n    <img alt="{{user_info.user.name}}" src="{{user_info.gravatar_url}}" \/>\r\n    {{user_info.user.name}}\r\n      <\/h1>\r\n    <\/div>\r\n    <div class="col-xs-6 col-sm-8">\r\n      <h3>Main View<\/h3>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n<\/pre><\/div>\r\n\r\n
5)Rails route<\/strong><\/p>\r\n\r\n
*Preblem<\/strong><\/p>\r\n\r\n
1."http:\/\/localhost:3000\/users\/1"
\r\n2.browser reload
\r\n3."No route" error<\/p>\r\n\r\n
*Avoidance<\/strong><\/p>\r\n\r\n
$ vi config\/routes.rb<\/p>\r\n\r\n
get 'users\/*other', to: 'layouts#index'<\/p>\r\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[137],"tags":[35,148,149],"amp_enabled":true,"_links":{"self":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts\/1078"}],"collection":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/comments?post=1078"}],"version-history":[{"count":2,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts\/1078\/revisions"}],"predecessor-version":[{"id":1081,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts\/1078\/revisions\/1081"}],"wp:attachment":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/media?parent=1078"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/categories?post=1078"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/tags?post=1078"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}