{"id":1121,"date":"2015-08-04T06:53:41","date_gmt":"2015-08-04T06:53:41","guid":{"rendered":"http:\/\/www.honobono-life.info\/wpeng\/?p=1121"},"modified":"2017-10-08T07:51:21","modified_gmt":"2017-10-08T07:51:21","slug":"users-index-with-angularjs","status":"publish","type":"post","link":"http:\/\/www.honobono-life.info\/wpeng\/users-index-with-angularjs\/","title":{"rendered":"Ruby on Rails Tutorial users index with AngularJS"},"content":{"rendered":"

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

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

\r\nclass UsersController < ApplicationController\r\n  before_action :signed_in_user, only: [:index, :update]\r\n\r\n  def index\r\n    @users = User.all\r\n    render json: @users\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\n.when("\/users", {\r\n templateUrl: "<%= asset_path('users\/index.html.erb') %>"\r\n })<\/pre>\r\n\r\n
3)install JavaScript-MD5 to display gravatar<\/strong><\/p>\r\n\r\n
1.download<\/strong>
\r\nhttps:\/\/github.com\/blueimp\/JavaScript-MD5<\/p>\r\n\r\n
2.deploy<\/strong>
\r\nvendor\/assets\/javascripts\/<\/p>\r\n\r\n
3.include<\/strong><\/p>\r\n\r\n
$ vi app\/assets\/javascripts\/application.js<\/p>\r\n\r\n
\/\/= require md5.min<\/p>\r\n\r\n
4)AngularJS template view<\/strong><\/p>\r\n\r\n
$ vi app\/assets\/templates\/users\/index.html.erb<\/p>\r\n\r\n
\r\n<div ng-controller="UsersIndexCtrl">\r\n  <h1 class="text-center">All users<\/h1>\r\n  <ul ng-repeat="user in users" class="users">\r\n    <li><img alt="{{user.name}}" src="https:\/\/secure.gravatar.com\/avatar\/{{hash(user.email)}}?s=52" \/>\r\n      <a href="\/users\/{{user.id}}">{{user.name}}<\/a>\r\n    <\/li>\r\n  <\/ul>\r\n<\/div><\/pre><\/div>\r\n\r\n
5)css<\/strong><\/p>\r\n\r\n
$ vi app\/assets\/stylesheets\/custom.css.scss<\/p>\r\n\r\n
\r\n$grayLighter: rgb(238, 238, 238);\r\n\r\n\/* users index *\/\r\n\r\n.users {\r\n  list-style: none;\r\n  margin: 0;\r\n  li {\r\n    overflow: auto;\r\n    padding: 10px 0;\r\n    border-top: 1px solid $grayLighter;\r\n    &:last-child {\r\n      border-bottom: 1px solid $grayLighter;\r\n    }\r\n  }\r\n}<\/pre>\r\n\r\n
6)AngularJS controller<\/strong><\/p>\r\n\r\n
$ vi app\/assets\/javascripts\/mymodule.js.erb<\/p>\r\n\r\n
\r\nmyModule.controller("UsersIndexCtrl", function($scope, userResource, flashService, $location, sessionResource, $q) {\r\n  var qgetUser = function(deferred) {\r\n    if (flashService.getUser()) {\r\n      var quser_info = flashService.getUser();\r\n      deferred.resolve(quser_info);\r\n    } else {\r\n      sessionResource.current_user({}, function(response) {\r\n        if (response.user.id) {\r\n          var quser_info = response;\r\n        } else {\r\n          var quser_info = { user: {id: 0} };\r\n        }\r\n        flashService.setUser(quser_info);\r\n        deferred.resolve(quser_info);\r\n      });\r\n    }\r\n  }\r\n  var deferred = $q.defer();\r\n  deferred.promise.then(function (result) {\r\n    var user_info = result;\r\n    if (user_info.user.id > 0) {\r\n      $scope.users = userResource.index();\r\n    } else {\r\n      $location.path("\/signin");\r\n    }\r\n  },function (reason) {\r\n    console.log("qgetUser-Error");\r\n  })\r\n  qgetUser (deferred);\r\n\r\n$ vi app\/views\/layouts\/_header.html.erb\r\n\r\n  $scope.hash = function(email) {\r\n    return md5(email.toLowerCase());\r\n  };\r\n});<\/pre>\r\n\r\n
7)add link to navigation menu<\/strong><\/p>\r\n\r\n
<li ng-show="chkSignin().user.id > 0"><%= link_to "Users", "\/users" %><\/li><\/p>","protected":false},"excerpt":{"rendered":"
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 $ […]<\/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,171],"amp_enabled":true,"_links":{"self":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts\/1121"}],"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=1121"}],"version-history":[{"count":1,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts\/1121\/revisions"}],"predecessor-version":[{"id":1122,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts\/1121\/revisions\/1122"}],"wp:attachment":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/media?parent=1121"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/categories?post=1121"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/tags?post=1121"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}