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>