(1)AngularJS service
$ vi app/assets/javascripts/mymodule.js.erb
myModule.factory("flashService", function ($rootScope) { var currentUser = { user: {id: 0} }; return { getUser: function () { return currentUser; }, setUser: function (user) { currentUser = user; } }; });
(2)AngularJS controller
$ vi app/assets/javascripts/mymodule.js.erb
myModule.controller("SessionsNewCtrl", function($scope, sessionResource, $location, flashService) { $scope.submit = function() { function success(response) { var user_info = response; flashService.setUser(user_info); $location.path("/users/" + response.user.id); } function failure(response) { ........ } sessionResource.create($scope.session, success, failure); };
ref.
Rails "sessions" controller
def create user = User.find_by(email: session_params[:email].downcase) if user && user.authenticate(session_params[:password]) remember_token = User.new_remember_token cookies.permanent[:remember_token] = remember_token user.update_attribute(:remember_token, User.encrypt(remember_token)) @user_info = { user: user } render json: @user_info, status: :accepted, location: user else msg = {"password" => ["Invalid email/password combination"]} render json: msg, status: :unprocessable_entity end end
(3)navigation menu
1)AngularJS template view
$ vi app/views/layouts/_header.html.erb
<div ng-controller="CollapseDemoCtrl" class="navbar navbar-default navbar-fixed-top" role="navigation"> ......... <div class="navbar-collapse" collapse="isCollapsed"> <ul class="nav navbar-nav"> ......... <li ng-hide="chkSignin().user.id > 0"><%= link_to "Sign in", "/signin" %></li> <li ng-show="chkSignin().user.id > 0"><%= link_to "Users", "/users" %></li> <li ng-show="chkSignin().user.id > 0" class="dropdown" dropdown> <a class="dropdown-toggle" dropdown-toggle>Account<span class="caret"></span></a> <ul class="dropdown-menu"> <li><%= link_to "Profile", "/users/{{chkSignin().user.id}}/" %></li> <li><%= link_to "Settings", "/users/{{chkSignin().user.id}}/edit" %></li> <li role="separator" class="divider"></li> <li><%= link_to "Sign out", "/signout" %></li> </ul> </li>
2)AngularJS controller
$ vi app/assets/javascripts/mymodule.js.erb
function CollapseDemoCtrl($scope, flashService) { $scope.chkSignin = function() { return flashService.getUser(); }; }
(4)countermeasure of the browser reload
1)AngularJS run method
myModule.run(function (sessionResource,flashService) { sessionResource.current_user({}, function(response) { if (response.user && response.user.id) { var user_info = response; } else { var user_info = { user: {id: 0} }; } flashService.setUser(user_info); }); }); myModule.factory("sessionResource", function($resource) { return $resource("/app/sessions", {}, { 'create': { method: 'POST' }, 'destroy': { method: 'DELETE' }, 'current_user': { method: 'GET', isArray: false } } ); }); myModule.factory("flashService", function ($rootScope) { var currentUser = { user: {id: 0} }; return { getUser: function () { return currentUser; }, setUser: function (user) { currentUser = user; } }; });
2)Rails route
$ vi config/routes.rb
match '/app/sessions', to: 'sessions#current_user', via: 'get'
3)Rails "sessions" controller
$ vi app/controllers/sessions_controller.rb
def current_user remember_token = User.encrypt(cookies[:remember_token]) current_user ||= User.find_by(remember_token: remember_token) @user_info = { user: current_user } render json: @user_info, status: :accepted end