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サービスを使ってアクセスするアクションをサービスとして定義します。
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
6)メニューにログインのリンクを追加
<li><%= link_to "ログイン", "/signin" %></li>
ユーザーログイン時にセッションも管理します。ここでは、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↑