TN: Implement listing of owner

src/main/webapp/components/owners/OwnerController.js

@@ -1,7 +1,9 @@
-var OwnerController = ['$scope',function($scope) {
+var OwnerController = ['$scope','Owner',function($scope,Owner) {
 	$scope.$on('$viewContentLoaded', function(event){
 		$('html, body').animate({
 		    scrollTop: $("#owners").offset().top
 		}, 1000);
 	});
+
+	$scope.owners = Owner.query();
 }];

src/main/webapp/components/owners/owners.html

@@ -42,75 +42,13 @@
   </div>
 
   <div class="row">
-    <div class="col-md-3">
+    <div class="col-md-3" ng-repeat="owner in owners">
       <div class="thumbnail">
-        <a href="show.html"><a href="show.html"><img src="http://placehold.it/600x600" alt="Generic placeholder image"></a></a>
+        <a href="show.html"><a href="show.html"><img src="/petclinic/images/avatars/owner{{owner.id}}.jpg" alt="Generic placeholder image"></a></a>
         <div class="caption">
-          <a href="show.html"><a href="show.html"><h3>Thumbnail label</h3></a></a>
-          <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum.</p>
-        </div>
-      </div>
-    </div>
-    <div class="col-md-3">
-      <div class="thumbnail">
-        <a href="show.html"><a href="show.html"><img src="http://placehold.it/600x600" alt="Generic placeholder image"></a></a>
-        <div class="caption">
-          <a href="show.html"><a href="show.html"><h3>Thumbnail label</h3></a></a>
-          <p>Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>
-        </div>
-      </div>
-    </div>
-    <div class="col-md-3">
-      <div class="thumbnail">
-        <a href="show.html"><img src="http://placehold.it/600x600" alt="Generic placeholder image"></a>
-        <div class="caption">
-          <a href="show.html"><h3>Thumbnail label</h3></a>
-          <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum.</p>
-        </div>
-      </div>
-    </div>
-    <div class="col-md-3">
-      <div class="thumbnail">
-        <a href="show.html"><img src="http://placehold.it/600x600" alt="Generic placeholder image"></a>
-        <div class="caption">
-          <a href="show.html"><h3>Thumbnail label</h3></a>
-          <p>Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>
-        </div>
-      </div>
-    </div>
-    <div class="col-md-3">
-      <div class="thumbnail">
-        <a href="show.html"><img src="http://placehold.it/600x600" alt="Generic placeholder image"></a>
-        <div class="caption">
-          <a href="show.html"><h3>Thumbnail label</h3></a>
-          <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum.</p>
-        </div>
-      </div>
-    </div>
-    <div class="col-md-3">
-      <div class="thumbnail">
-        <a href="show.html"><img src="http://placehold.it/600x600" alt="Generic placeholder image"></a>
-        <div class="caption">
-          <a href="show.html"><h3>Thumbnail label</h3></a>
-          <p>Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>
-        </div>
-      </div>
-    </div>
-    <div class="col-md-3">
-      <div class="thumbnail">
-        <a href="show.html"><img src="http://placehold.it/600x600" alt="Generic placeholder image"></a>
-        <div class="caption">
-          <a href="show.html"><h3>Thumbnail label</h3></a>
-          <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum.</p>
-        </div>
-      </div>
-    </div>
-    <div class="col-md-3">
-      <div class="thumbnail">
-        <a href="show.html"><img src="http://placehold.it/600x600" alt="Generic placeholder image"></a>
-        <div class="caption">
-          <a href="show.html"><h3>Thumbnail label</h3></a>
-          <p>Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>
+          <a href="show.html"><a href="show.html"><h3>{{owner.firstName}}&nbsp{{owner.lastName}}</h3></a></a>
+          <p>{{owner.city}}</p>
+          <p>{{owner.address}}</p>
         </div>
       </div>
     </div>