var app = angular.module('ngApp', ['ngResource']); // value app.value( 'currentUser', { 'login': false, 'username': '', 'email': '' } ); // routeProvider app.config(function ($routeProvider) { $routeProvider .when('/', { template: angular.element(document.querySelector("#main")).html(), controller: 'MainCtrl' }) .when('/login', { template: angular.element(document.querySelector("#login")).html(), controller: 'LoginCtrl' }) .when('/logout', { template: angular.element(document.querySelector("#logout")).html(), controller: 'LogoutCtrl' }) .when('/register', { template: angular.element(document.querySelector("#register")).html(), controller: 'RegisterCtrl' }) .otherwise({ redirectTo: '/' }); }); // Deployd factory app.factory('Deployd', function (){ return dpd; }); // MainCtrl app.controller('MainCtrl', ['$scope', '$location', 'currentUser', 'Deployd', function ($scope, $location, currentUser, Deployd) { $scope.login = false; $scope.me = {}; Deployd.users.me(function(result, err) { if (err) { return console.error(err); } currentUser = result; currentUser.login = true; $scope.me = currentUser; $scope.login = currentUser.login; if (!$scope.$$phase) { $scope.$digest(); } }); }]); // LoginCtrl app.controller('LoginCtrl', ['$scope', '$location', 'currentUser', 'Deployd', function ($scope, $location, currentUser, Deployd) { $scope.username = ''; $scope.password = ''; $scope.doLogin = function () { Deployd.users.login({ username: $scope.username, password: $scope.password }, function(result, err) { if (err) { alert(err.message); return console.error(err); } currentUser.login = true; $location.path('/'); if (!$scope.$$phase) { $scope.$apply(); } }); }; }]); // LogoutCtrl app.controller('LogoutCtrl', ['$scope', '$location', 'currentUser', 'Deployd', function ($scope, $location, currentUser, Deployd) { Deployd.users.logout(function (result, err) { if (err) { return console.error(err); } console.log(result); currentUser = { 'login': false, 'usename': '', 'email': '' }; $location.path('/'); if (!$scope.$$phase) { $scope.$apply(); } }); }]); // RegisterCtrl app.controller('RegisterCtrl', ['$scope', '$location', 'currentUser', 'Deployd', function ($scope, $location, currentUser, Deployd) { $scope.user = { 'username' : '', 'email': '', 'password': '', 'passwordRepeated': '' }; $scope.errorMessage = ''; $scope.signupInProgress = false; $scope.doSignUp = function() { if($scope.user.password != $scope.user.passwordRepeated) { $scope.errorMessage = 'パスワードが一致しません'; } else { $scope.errorMessage = ''; $scope.signupInProgress = true; Deployd.users.post({ 'username': $scope.user.username, 'email': $scope.user.email, 'password': $scope.user.password }, function(result, err) { if (err) { return console.error(err); } $location.path('/login'); if (!$scope.$$phase) { $scope.$apply(); } }); } }; }]);
<div ng-app="ngApp"> <div class="main container" ng-view=""></div> </div> <!-- Main template --> <div id="main" ng-controller="MainCtrl" class="template"> <div ng-hide="login"> <p><a href="#/login">ログイン</a></p> <p><a href="#/register">新規登録</a></p> </div> <div ng-show="login"> <p>ようこそ{{me.username}}さん!</p> <p><a href="#/logout">ログアウト</a></p> </div> </div> <!-- Login template --> <div id="login" ng-controller="LoginCtrl" class="template"> <a href="#/">ホーム</a> <legend>ログイン</legend> <div class="alert alert-error" ng-show="isLoginError"> ユーザ名かパスワードが間違ってます </div> <form name="loginForm" ng-submit="doLogin()"> <input type="text" id="username" name="username" placeholder="ユーザ名" ng-model="username" required="required"/><br /> <input type="password" id="password" name="password" placeholder="パスワード" ng-model="password" required="required"/><br /> <button type="submit" name="submit" class="btn btn-primary" ng-class="{disabled: signinInProgress}">ログイン</button><br /> <a href="#/register">新規登録</a> </form> </div> <!-- Logout template --> <div id="logout" ng-controller="LogoutCtrl" class="template"> <p>ログアウト中...</p> </div> <!-- Register template --> <div id="register" ng-controller="RegisterCtrl" class="template"> <a href="#/">ホーム</a> <legend>新規登録</legend> <div class="alert alert-error" ng-show="errorMessage.length > 0"> {{ errorMessage }} </div> <form name="loginForm" ng-submit="doSignUp()"> <input type="text" id="username" name="username" placeholder="ユーザ名" ng-model="user.username" required="required"/><br /> <input type="email" id="email" name="email" placeholder="メールアドレス" ng-model="user.email" required="required"/><br /> <input type="password" id="password" name="password" placeholder="パスワード" ng-model="user.password" required="required"/><br /> <input type="password" id="passwordRepeated" name="passwordRepeated" placeholder="パスワード(確認)" ng-model="user.passwordRepeated" required="required"/><br /> <button type="submit" name="submit" class="btn btn-primary" ng-class="{disabled: signupInProgress}"> 登録</button><br /> <a href="#/login">ログイン</a> </form> </div>
.template { display: none; }