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>