step-8 Templating Links & Images

- Add a phone image and links to phone pages.
- Add an end-to-end test that verifies the phone links.
- Tweak the CSS to style the page just a notch.

app/app.css

@@ -2,3 +2,20 @@ body {
   padding-top: 20px;
 }
 
+.phones {
+  list-style: none;
+}
+
+.phones li {
+  clear: both;
+  height: 115px;
+  padding-top: 15px;
+}
+
+.thumb {
+  float: left;
+  height: 100px;
+  margin: -0.5em 1em 1.5em 0;
+  padding-bottom: 1em;
+  width: 100px;
+}

app/phone-list/phone-list.component.js

@@ -5,12 +5,12 @@ angular.
   module('phoneList').
   component('phoneList', {
     templateUrl: 'phone-list/phone-list.template.html',
-    controller: function PhoneListController($http) {
+    controller: ['$http', function PhoneListController($http) {
       var self = this;
       self.orderProp = 'age';
 
       $http.get('phones/phones.json').then(function(response) {
         self.phones = response.data;
       });
-    }
+    }]
   });

app/phone-list/phone-list.template.html

@@ -21,8 +21,11 @@
       <!--Body content-->
 
       <ul class="phones">
-        <li ng-repeat="phone in $ctrl.phones | filter:$ctrl.query | orderBy:$ctrl.orderProp">
-          <span>{{phone.name}}</span>
+        <li ng-repeat="phone in $ctrl.phones | filter:$ctrl.query | orderBy:$ctrl.orderProp" class="thumbnail">
+          <a href="#/phones/{{phone.id}}" class="thumb">
+            <img ng-src="{{phone.imageUrl}}" alt="{{phone.name}}" />
+          </a>
+          <a href="#/phones/{{phone.id}}">{{phone.name}}</a>
           <p>{{phone.snippet}}</p>
         </li>
       </ul>

e2e-tests/scenarios.js

@@ -52,6 +52,14 @@ describe('PhoneCat Application', function() {
       ]);
     });
 
+    it('should render phone specific links', function() {
+      var query = element(by.model('$ctrl.query'));
+      query.sendKeys('nexus');
+
+      element.all(by.css('.phones li a')).first().click();
+      expect(browser.getLocationAbsUrl()).toBe('/phones/nexus-s');
+    });
+
   });
 
 });