fc2ブログ

Ruby on RailsでWebサイト公開!に挑戦中

レンタルサーバーでWebサイトを公開すべく、Ruby on Railaの勉強をする日々を語ります。

PREV | PAGE-SELECT | NEXT

≫ EDIT

AngularJSを使ってユーザーログインページを作成

「Ruby on Rails Tutorial」のサンプルアプリをAngularJSを使う形に変更しています。前回まででユーザー登録機能の作成が一通り終わったので、ユーザーログイン機能を作成します。今回はまずRailsのコントローラを作成、Railsのルート設定、AngularJSのルート設定、ログインページの作成まで行いました。

加筆・修正した記事はこちら


1)Railsコントローラを作成、ルート設定

ユーザーログイン時にセッションも管理します。ここでは、sessionsという名前でコントローラを作成し、下記アクションを使用します。
 
・createアクション
 ログインフォームからログイン。HTTPのPOSTリクエスト。セッションを作成。
・destroyアクション
 ログアウト。HTTPのDELETEリクエスト。セッションを削除

①Sessionsコントローラを作成

$ rails generate controller Sessions

②Railsのルート設定

$ vi config/routes.rb

match '/app/sessions', to: 'sessions#create', via: 'post'
match '/app/sessions', to: 'sessions#destroy', via: 'delete'

2)AngularJSの$resourceのRESTアクションをサービスとして定義

Railsのサーバー側にAngularJSの$resourceサービスを使ってアクセスするアクションをサービスとして定義します。


$ vi app/assets/javascripts/mymodule.js.erb

myModule.factory("sessionResource", function($resource) {
return $resource("/app/sessions",{},
{
'create': { method: 'POST' },
'destroy': { method: 'DELETE' }
}
);
});


3)AngularJSのルート設定追加

ログインページ用のルート設定を追加します。

$ vi app/assets/javascripts/mymodule.js.erb

.when("/signin", {
templateUrl: "<%= asset_path('sessions/new.html.erb') %>"
})


4)AngularJSのコントローラを作成

myModule.controller("SessionsNewCtrl", function($scope, sessionResource) {
$scope.session = new sessionResource();
});

5)ユーザーログインフォーム作成

$ vi app/assets/templates/sessions/new.html.erb



<div ng-controller="SessionsNewCtrl" class="container">
<h1>ユーザーログイン</h1>
<form name="sessionNewForm" ng-submit="submit()" novalidate>
<div class="well">
<div class="form-group">
<label>メールアドレス</label>
<input type="email" name="email" class="form-control"
ng-model="session.email"
required />
</div>
<div class="form-group">
<label>パスワード</label>
<input type="password" name="password" class="form-control"
ng-model="session.password" required />
</div>
<button type="submit" ng-disabled="sessionNewForm.$invalid" class="btn btn-primary">ログイン</button>
<a class="btn btn-primary" href="/users/new">ユーザー登録</a>
</div>
</form>
</div>


6)メニューにログインのリンクを追加

<li><%= link_to "ログイン", "/signin" %></li>

| AngularJS | 08:07 | comments:0 | trackbacks:0 | TOP↑

COMMENT















非公開コメント

TRACKBACK URL

http://hbnist76.blog.fc2.com/tb.php/523-910115f4

TRACKBACK

PREV | PAGE-SELECT | NEXT