yamoo9/angularJS-directives-expressions-login-header-bar.html

## angularJS-directives-expressions-login-header-bar.html
<!DOCTYPE html>
<html lang="ko-KR" data-ng-app>
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
	<meta charset="UTF-8">
	<title>Directives &amp; Expressions - AngularJS</title>
	<style>
	body {
		min-height: 100vh;
		background-image: linear-gradient(0deg, #ADADAD, #F2F2F2);
	}
	body, .header-bar * {
		margin: 0;
	}
	.header-bar {
		padding: 1em;
		background-color: #fff;
		box-shadow: 0px 0px 3px hsla(0,0%,0%,.45);
		font-size: 14px;
	}
	.notice {
		display: inline-block;
		color: #A9A9A9;
		margin-bottom: 0.5em;
		border-bottom: 1px solid #D0D0D0;
	}
	.success { color: #34C0FF; }
	.failed { color: #FE4940;}
	.signup { color: #7045CF;}
	</style>
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.3/angular.min.js"></script>
</head>
<body data-ng-init="member={name: 'yamoo9', log_in: false, is_visible: true, status: 'failed'}">

	<!--
		Directives & Expressions
			⊙ ng-cloak [FOUC(Flash Of Unstyled Content)](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)
			⊙ ng-switch
			⊙ ng-class
			⊙ ng-show
	-->
	<div class="header-bar" data-ng-cloak data-ng-switch="member.log_in">
		<div class="notice" data-ng-show="member.is_visible">
			공지사항을 알려드립니다.
		</div>
		<div class="log_in_success" data-ng-switch-when="true" data-ng-class="{
			'success': member.log_in,
			'failed': !member.log_in
		}">
			<p>안녕하세요. {{member.name}}님. 오늘 하루도 행복하세요. :-)</p>
		</div>
		<div class="log_in_failed" data-ng-switch-when="false" data-ng-class="member.status">
			<p>로그인에 실패하셨습니다. :-( 다시 로그인해보시길 바랍니다.</p>
		</div>
		<div class="sign_up" data-ng-switch-default>
			<p>회원 가입을 환영합니다. :-)</p>
		</div>
	</div>

</body>
</html>