ericdouglas/example-01-03-01.html

## example-01-03-01.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Chapter 1 - Recipe 3 - Example 01</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
	<link rel="stylesheet" href="css/bootstrap.css">
	<script src="example-01-03-01.js"></script>
</head>
<body ng-app ng-controller="Controller">

	<div class="alert alert-{{ state }}">
		<h1 ng-show="visible">Bushido AngularJS</h1>
		<h3>The Ultimate Way to Learn AngularJS with Confidence</h3>
	</div>

	<p><button ng-click="toggle()" class="btn btn-primary btn-lg">Hide the title!</button></p>

</body>
</html>

## example-01-03-01.js
function Controller ( $scope ) {

	$scope.visible = true;
	$scope.state = "info";

	$scope.toggle = function () {
		$scope.visible = !$scope.visible;

		if ($scope.state === "info") {
			$scope.state = "success";
		} else if ($scope.state === "success") {
			$scope.state = "info";
		}
	};
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Chapter 1 - Recipe 3 - Example 01</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
	<link rel="stylesheet" href="css/bootstrap.css">
	<script src="example-01-03-01.js"></script>
	</head>
	<body ng-app ng-controller="Controller">

	<div class="alert alert-{{ state }}">
	<h1 ng-show="visible">Bushido AngularJS</h1>
	<h3>The Ultimate Way to Learn AngularJS with Confidence</h3>
	</div>

	<p><button ng-click="toggle()" class="btn btn-primary btn-lg">Hide the title!</button></p>

	</body>
	</html>
	function Controller ( $scope ) {

	$scope.visible = true;
	$scope.state = "info";

	$scope.toggle = function () {
	$scope.visible = !$scope.visible;

	if ($scope.state === "info") {
	$scope.state = "success";
	} else if ($scope.state === "success") {
	$scope.state = "info";
	}
	};
	}