Alligator/index.html

## index.html
<!DOCTYPE HTML>
<html lang="en" ng-app="notes">
<head>
  <meta charset="UTF-8">
  <title></title>

  <link rel="stylesheet" href="static/reset.css" />
  <style type="text/css">
    html, body, .content {
      height: 100%;
    }

    body {
      font-family: sans-serif;
    }

    .notes {
      -webkit-box-sizing: border-box;
      background-color: #000;
      color: #fff;
      height: 100%;
      float: left;
      width: 25%;
      padding: 10px;
    }

    .note {
      -webkit-box-sizing: border-box;
      padding: 10px;
      height: 100%;
      float: left;
      width: 75%;
    }

    .note-link {
      margin-bottom: 5px;
    }

    a, a:link {
      text-decoration: none;
      color: white;
    }

    h1 {
      font-size: 36pt;
      margin-bottom: 15px;
    }

    input {
      background-color: #555;
      color: white;
      border: none;
      margin-bottom: 10px;
      display: block;
    }

    textarea {
      background-color: #555;
      color: white;
      width: 90%;
    }

    hr {
      border: 1px solid white;
    }

  </style>

  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    angular.module('notes', []).
    config(['$routeProvider', function($routeProvider) {
      $routeProvider.
        when('/:note', {
          templateUrl: '/static/notes_template.html',
          controller: NotesDetailCtrl
        }).
        otherwise({ redirectTo: '/' });
    }]);

    function NotesCtrl($scope, $http, $routeParams) {
      $http.get('/notes').success(function(data) {
        $scope.notes = data.notes;
      });
    }

    function NotesDetailCtrl($scope, $http, $routeParams) {
      if ($routeParams.note) {
        $http.get('/notes/' + $routeParams.note).success(function(data) {
          $scope.note = data.notes[0];
        });
      }
    }
  </script>
</head>
<body>
  <ng-include src="'static/notes_list_template.html'"></ng-include>
  <div class="content" ng-view></div>
</body>
</html>

## notes_list_template.html
<div ng-controller="NotesCtrl" class="notes">
  <h1>notes.</h1>
  <div ng-repeat="note in notes" class="note-link">
    <a href="#/{{ note.id }}">{{ note.title }}</a>
  </div>
  <hr />
  <form action="/add", method="POST">
    <label for="title">title</label>
    <input type="text" name="title"/>

    <label for="content">content</label>
    <textarea name="content"></textarea>

    <input type="submit" value="add new note"/>
  </form>
</div>

## notes_template.html
<div class="note">
  <h1>{{ note.title }}</h1>
  <p>{{ note.content }}</p>
</div>
	<!DOCTYPE HTML>
	<html lang="en" ng-app="notes">
	<head>
	<meta charset="UTF-8">
	<title></title>

	<link rel="stylesheet" href="static/reset.css" />
	<style type="text/css">
	html, body, .content {
	height: 100%;
	}

	body {
	font-family: sans-serif;
	}

	.notes {
	-webkit-box-sizing: border-box;
	background-color: #000;
	color: #fff;
	height: 100%;
	float: left;
	width: 25%;
	padding: 10px;
	}

	.note {
	-webkit-box-sizing: border-box;
	padding: 10px;
	height: 100%;
	float: left;
	width: 75%;
	}

	.note-link {
	margin-bottom: 5px;
	}

	a, a:link {
	text-decoration: none;
	color: white;
	}

	h1 {
	font-size: 36pt;
	margin-bottom: 15px;
	}

	input {
	background-color: #555;
	color: white;
	border: none;
	margin-bottom: 10px;
	display: block;
	}

	textarea {
	background-color: #555;
	color: white;
	width: 90%;
	}

	hr {
	border: 1px solid white;
	}

	</style>

	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js" type="text/javascript"></script>
	<script type="text/javascript">
	angular.module('notes', []).
	config(['$routeProvider', function($routeProvider) {
	$routeProvider.
	when('/:note', {
	templateUrl: '/static/notes_template.html',
	controller: NotesDetailCtrl
	}).
	otherwise({ redirectTo: '/' });
	}]);

	function NotesCtrl($scope, $http, $routeParams) {
	$http.get('/notes').success(function(data) {
	$scope.notes = data.notes;
	});
	}

	function NotesDetailCtrl($scope, $http, $routeParams) {
	if ($routeParams.note) {
	$http.get('/notes/' + $routeParams.note).success(function(data) {
	$scope.note = data.notes[0];
	});
	}
	}
	</script>
	</head>
	<body>
	<ng-include src="'static/notes_list_template.html'"></ng-include>
	<div class="content" ng-view></div>
	</body>
	</html>
	<div ng-controller="NotesCtrl" class="notes">
	<h1>notes.</h1>
	<div ng-repeat="note in notes" class="note-link">
	<a href="#/{{ note.id }}">{{ note.title }}</a>
	</div>
	<hr />
	<form action="/add", method="POST">
	<label for="title">title</label>
	<input type="text" name="title"/>

	<label for="content">content</label>
	<textarea name="content"></textarea>

	<input type="submit" value="add new note"/>
	</form>
	</div>
	<div class="note">
	<h1>{{ note.title }}</h1>
	<p>{{ note.content }}</p>
	</div>