just getting it her

bin/main/static/templates/albumForm.html

@@ -0,0 +1,32 @@
+<div class="modal-header">
+    <h3 ng-show="albumAction === 'add'">Add an album</h3>
+    <h3 ng-show="albumAction === 'update'">Edit an album</h3>
+</div>
+<div class="modal-body">
+    <form name="albumForm" role="form">
+        <div class="form-group has-feedback" ng-class="{'has-warning': albumForm.title.$invalid, 'has-success': albumForm.title.$valid}">
+            <label for="title">Album Title</label>
+            <input type="text" class="form-control input-large" id="title" name="title" required ng-model="album.title">
+            <span class="glyphicon form-control-feedback" ng-class="{'glyphicon-warning-sign': albumForm.title.$invalid, 'glyphicon-ok': albumForm.title.$valid}"></span>
+        </div>
+        <div class="form-group has-feedback" ng-class="{'has-warning': albumForm.artist.$invalid, 'has-success': albumForm.artist.$valid}">
+            <label for="artist">Artist</label>
+            <input type="text" class="form-control input-large" id="artist" name="artist" required ng-model="album.artist">
+            <span class="glyphicon form-control-feedback" ng-class="{'glyphicon-warning-sign': albumForm.artist.$invalid, 'glyphicon-ok': albumForm.artist.$valid}"></span>
+        </div>
+        <div class="form-group has-feedback" ng-class="{'has-warning': albumForm.releaseYear.$invalid, 'has-success': albumForm.releaseYear.$valid}">
+            <label for="releaseYear">Release Year</label>
+            <input type="text" class="form-control input-small" id="releaseYear" name="releaseYear" required ng-model="album.releaseYear" ng-pattern=yearPattern>
+            <span class="glyphicon form-control-feedback" ng-class="{'glyphicon-warning-sign': albumForm.releaseYear.$invalid, 'glyphicon-ok': albumForm.releaseYear.$valid}"></span>
+        </div>
+        <div class="form-group has-feedback" ng-class="{'has-warning': albumForm.genre.$invalid, 'has-success': albumForm.genre.$valid}">
+            <label for="genre">Genre</label>
+            <input type="text" class="form-control input-medium" id=genre name="genre" required ng-model="album.genre">
+            <span class="glyphicon form-control-feedback" ng-class="{'glyphicon-warning-sign': albumForm.genre.$invalid, 'glyphicon-ok': albumForm.genre.$valid}"></span>
+        </div>
+    </form>
+</div>
+<div class="modal-footer">
+    <button class="btn btn-primary btn-md active" ng-disabled="albumForm.$invalid" ng-click="ok()" >OK</button>
+    <button class="btn btn-warning btn-md active" ng-click="cancel()">Cancel</button>
+</div>

bin/main/static/templates/albums.html

@@ -0,0 +1,29 @@
+<div id="albums" ng-init="init()">
+    <div class="page-header">
+        <h1>Albums</h1>
+        <div>
+            <span> [ view as: </span>
+            <a href="" ng-click="setAlbumsView('grid')"><span class="glyphicon glyphicon-th"></span></a>
+            <a href="" ng-click="setAlbumsView('list')"><span class="glyphicon glyphicon-th-list"></span></a>
+            <span> | sort by: </span>
+            <a href="" ng-click="sortField='title'">title</a>
+            <a href="" ng-click="sortField='artist'">artist</a>
+            <a href="" ng-click="sortField='releaseYear'">year</a>
+            <a href="" ng-click="sortField='genre'">genre</a>
+            <a href="" ng-click="sortDescending=!sortDescending">
+                <span class="glyphicon" ng-class="{'glyphicon-chevron-up' : !sortDescending, 'glyphicon-chevron-down' : sortDescending}"></span>
+            </a>
+            <span> | </span>
+            <a href="" ng-click="addAlbum()"><span class="glyphicon glyphicon-plus"></span>add an album</a>
+            <span> ] </span>
+        </div>
+    </div>
+
+    <div class="row">
+        <div ng-include src="'templates/status.html'"></div>
+    </div>
+
+    <div class="row multi-columns-row">
+        <div ng-include src="albumsView"></div>
+    </div>
+</div>

bin/main/static/templates/errors.html

@@ -0,0 +1,22 @@
+<div id="errors" class="col-xs-12"  ng-controller="ErrorsController">
+    <div class="page-header">
+        <h1>Force Errors</h1>
+    </div>
+
+    <div class="row">
+        <div ng-include src="'templates/status.html'"></div>
+    </div>
+
+    <div class="row">
+        <form role="form">
+            <div class="form-group">
+                <h3>Kill this instance of the application</h3>
+                <a ng-click="kill()" class="btn btn-primary btn-lg active" role="button">Kill</a>
+            </div>
+            <div class="form-group">
+                <h3>Force an exception to be thrown from the application</h3>
+                <a ng-click="throwException()" class="btn btn-primary btn-lg active" role="button">Throw Exception</a>
+            </div>
+        </form>
+    </div>
+</div>

bin/main/static/templates/footer.html

@@ -0,0 +1,3 @@
+<div id="footer" class="row">
+
+</div>

bin/main/static/templates/grid.html

@@ -0,0 +1,31 @@
+<div class="col-xs-6 col-sm-3 col-md-3 col-lg-3" ng-repeat="album in albums | orderBy:sortField:sortDescending">
+    <div class="thumbnail">
+        <div class="caption">
+            <h4>
+                <in-place-edit field-name='title' input-type='text' input-class='input-medium' model=album>{{album.title}}</in-place-edit>
+            </h4>
+
+            <h4>
+                <in-place-edit field-name='artist' input-type='text' input-class='input-medium' model=album>{{album.artist}}</in-place-edit>
+            </h4>
+
+            <h5>
+                <in-place-edit field-name='releaseYear' input-type='text' input-class='input-small' model=album>{{album.releaseYear}}</in-place-edit>
+            </h5>
+
+            <h5>
+                <in-place-edit field-name='genre' input-type='text' input-class='input-small' model=album>{{album.genre}}</in-place-edit>
+            </h5>
+
+            <div class="dropdown">
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                    <span class="glyphicon glyphicon-cog"></span>
+                </a>
+                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
+                    <li role="presentation"><a ng-click="updateAlbum(album)">edit</a></li>
+                    <li role="presentation"><a ng-click="deleteAlbum(album)">delete</a></li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</div>

bin/main/static/templates/header.html

@@ -0,0 +1,24 @@
+<div id="header" ng-controller="InfoController" class="col-xs-12">
+    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
+        <div class="container">
+            <div class="navbar-header">
+                <a class="navbar-brand" href="#">Spring Music <span class="glyphicon glyphicon-music"></span></a>
+                <ul class="navbar-nav">
+                    <!--<li></li>-->
+                </ul>
+            </div>
+
+            <ul class="nav navbar-nav navbar-right">
+                <li class="dropdown">
+                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                        <span class="glyphicon glyphicon-info-sign icon-white"></span>
+                    </a>
+                    <ul class="dropdown-menu">
+                        <li><a><strong>Profiles:</strong> {{info.profiles.join()}}</a></li>
+                        <li><a><strong>Services:</strong> {{info.services.join()}}</a></li>
+                    </ul>
+                </li>
+            </ul>
+        </div>
+    </nav>
+</div>

bin/main/static/templates/list.html

@@ -0,0 +1,38 @@
+<div class="col-xs-12">
+    <table class="table table-striped">
+        <thead>
+        <tr>
+            <th>Album Title</th>
+            <th>Artist</th>
+            <th>Year</th>
+            <th>Genre</th>
+            <th></th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr ng-repeat="album in albums | orderBy:sortField:sortDescending">
+            <td>
+                <in-place-edit field-name='title' input-type='text' input-class='input-large' model=album>{{album.title}}</in-place-edit>
+            </td>
+            <td>
+                <in-place-edit field-name='artist' input-type='artist' input-class='input-large' model=album>{{album.artist}}</in-place-edit>
+            </td>
+            <td>
+                <in-place-edit field-name='releaseYear' input-type='text' input-class='input-small' model=album>{{album.releaseYear}}</in-place-edit>
+            </td>
+            <td>
+                <in-place-edit field-name='genre' input-type='text' input-class='input-medium' model=album>{{album.genre}}</in-place-edit>
+            </td>
+            <td class="dropdown">
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                    <span class="glyphicon glyphicon-cog"></span>
+                </a>
+                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
+                    <li role="presentation"><a ng-click="updateAlbum(album)">edit</a></li>
+                    <li role="presentation"><a ng-click="deleteAlbum(album)">delete</a></li>
+                </ul>
+            </td>
+        </tr>
+        </tbody>
+    </table>
+</div>

bin/main/static/templates/status.html

@@ -0,0 +1,8 @@
+<div class="col-xs-12" id="status" ng-controller="StatusController">
+    <div id="alert" ng-show="status">
+        <div class="alert" ng-class="{'alert-success': !status.isError, 'alert-danger': status.isError}">
+            <button type="button" class="close" ng-click="clearStatus()"><span class="glyphicon glyphicon-remove-circle"></span></button>
+            <p>{{status.message}}</p>
+        </div>
+    </div>
+</div>