(1)Rails controller, route
1)"Sessions" controller
1.generate "Sessions" controller
$ rails generate controller Sessions
2.create action
$ vi app/controllers/sessions_controller.rb
def create user = User.find_by(email: session_params[:email].downcase) if user && user.authenticate(session_params[:password]) else msg = {"password" => ["Invalid email/password combination"]} render json: msg, status: :unprocessable_entity end end private def session_params params.permit(:email,:password) end
2)Rails route
$ vi config/routes.rb
match '/app/sessions', to: 'sessions#create', via: 'post'
match '/app/sessions', to: 'sessions#destroy', via: 'delete'
(2)AngularJS "sessionResource" service
$ vi app/assets/javascripts/mymodule.js.erb
myModule.factory("sessionResource", function($resource) { return $resource("/app/sessions",{}, { 'create': { method: 'POST' }, 'destroy': { method: 'DELETE' } } ); });
(3)AngularJS route
$ vi app/assets/javascripts/mymodule.js.erb
.when("/signin", { templateUrl: "<%= asset_path('sessions/new.html.erb') %>" })
(4)AngularJS controller
$ vi app/assets/javascripts/mymodule.js.erb
myModule.controller("SessionsNewCtrl", function($scope, sessionResource) { $scope.session = new sessionResource(); $scope.submit = function() { function success(response) { console.log("test"); } function failure(response) { _.each(response.data, function(errors, key) { _.each(errors, function(e) { $scope.sessionNewForm[key].$dirty = true; $scope.sessionNewForm[key].$setValidity(e, false); }); }); } sessionResource.create($scope.session, success, failure); }; $scope.errorMessage = function(name) { var s = $scope.sessionNewForm[name].$error; result = []; _.each(s, function(key, value) { result.push(value); }); return result.join(", "); }; $scope.errorClass = function(name) { var s = $scope.sessionNewForm[name]; return s.$invalid && s.$dirty ? "has-error" : ""; }; });
(5)AngularJS template view
$ vi app/assets/templates/sessions/new.html.erb
<div ng-controller="SessionsNewCtrl" class="row"> <div class="col-md-6 col-md-offset-3"> <h1 class="text-center">Sign in</h1> <div class="well"> <form name="sessionNewForm" ng-submit="submit()" novalidate> <div class="form-group"> <label>Email</label> <input type="email" name="email" class="form-control" ng-model="session.email" required /> </div> <div class="form-group" ng-class="errorClass('password')"> <label>Password</label> <input type="password" name="password" class="form-control" ng-model="session.password" required /> <span class="help-block" ng-show="sessionNewForm.password.$invalid && sessionNewForm.password.$dirty"> {{errorMessage('password')}} </span> </div> <button type="submit" class="btn btn-large btn-primary">Sign in</button> </form> <p>New user?<a href="/users/new">Sign up now!</a></p> </div> </div> </div>
(6)add a link to signin
$ vi app/views/layouts/_header.html.erb
<li><%= link_to "Sing in", "/signin" %></li>