Agrega paso 8 de la aplicación

- Implementa el controlador `DetalleTelefonoCtrl` para traer los
detalles de un teléfono específico de un archivo JSON
  utilizando el servicio `$http`.

- Actualiza la plantilla de la vista del detalle de un teléfono.

- Agrega CSS para hacer que la vista de los detalles de un teléfono se
vea "bonita".

app/css/app.css

@@ -21,3 +21,59 @@ body {
     height: 115px;
     padding-top: 15px;
 }
+
+/** Detail View **/
+img.phone {
+    float: left;
+    border: 1px solid black;
+    margin-right: 3em;
+    margin-bottom: 2em;
+    background-color: white;
+    padding: 2em;
+    height: 400px;
+    width: 400px;
+}
+
+ul.phone-thumbs {
+    margin: 0;
+    list-style: none;
+}
+
+ul.phone-thumbs li {
+    border: 1px solid black;
+    display: inline-block;
+    margin: 1em;
+    background-color: white;
+}
+
+ul.phone-thumbs img {
+    height: 100px;
+    width: 100px;
+    padding: 1em;
+}
+
+ul.specs {
+    clear: both;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+ul.specs > li{
+    display: inline-block;
+    width: 200px;
+    vertical-align: top;
+}
+
+ul.specs > li > span{
+    font-weight: bold;
+    font-size: 1.2em;
+}
+
+ul.specs dt {
+    font-weight: bold;
+}
+
+h1 {
+    border-bottom: 1px solid gray;
+}

app/js/controladores.js

@@ -13,7 +13,9 @@ phonecatControladores.controller('ListaTelefonosCtrl', ['$scope', '$http',
     $scope.ordenProp = 'age';
   }]);
 
-phonecatControladores.controller('DetallesTelefonoCtrl', ['$scope', '$routeParams',
-  function($scope, $routeParams) {
-    $scope.idTelefono = $routeParams.idTelefono;
+phonecatControladores.controller('DetallesTelefonoCtrl', ['$scope', '$routeParams', '$http',
+  function($scope, $routeParams, $http) {
+    $http.get('phones/' + $routeParams.idTelefono + '.json').success(function(data) {
+      $scope.telefono = data;
+    });
   }]);

app/partials/detalle-telefono.html

@@ -1 +1,113 @@
-TBD: vista detalle para <span>{{idTelefono}}</span>
+<img ng-src="{{telefono.images[0]}}" class="phone">
+
+<h1>{{telefono.name}}</h1>
+
+<p>{{telefono.description}}</p>
+
+<ul class="phone-thumbs">
+  <li ng-repeat="img in telefono.images">
+    <img ng-src="{{img}}">
+  </li>
+</ul>
+
+<ul class="specs">
+  <li>
+    <span>Availability and Networks</span>
+    <dl>
+      <dt>Availability</dt>
+      <dd ng-repeat="availability in telefono.availability">{{availability}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Battery</span>
+    <dl>
+      <dt>Type</dt>
+      <dd>{{telefono.battery.type}}</dd>
+      <dt>Talk Time</dt>
+      <dd>{{telefono.battery.talkTime}}</dd>
+      <dt>Standby time (max)</dt>
+      <dd>{{telefono.battery.standbyTime}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Storage and Memory</span>
+    <dl>
+      <dt>RAM</dt>
+      <dd>{{telefono.storage.ram}}</dd>
+      <dt>Internal Storage</dt>
+      <dd>{{telefono.storage.flash}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Connectivity</span>
+    <dl>
+      <dt>Network Support</dt>
+      <dd>{{telefono.connectivity.cell}}</dd>
+      <dt>WiFi</dt>
+      <dd>{{telefono.connectivity.wifi}}</dd>
+      <dt>Bluetooth</dt>
+      <dd>{{telefono.connectivity.bluetooth}}</dd>
+      <dt>Infrared</dt>
+      <dd>{{telefono.connectivity.infrared}}</dd>
+      <dt>GPS</dt>
+      <dd>{{telefono.connectivity.gps}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Android</span>
+    <dl>
+      <dt>OS Version</dt>
+      <dd>{{telefono.android.os}}</dd>
+      <dt>UI</dt>
+      <dd>{{telefono.android.ui}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Size and Weight</span>
+    <dl>
+      <dt>Dimensions</dt>
+      <dd ng-repeat="dim in telefono.sizeAndWeight.dimensions">{{dim}}</dd>
+      <dt>Weight</dt>
+      <dd>{{telefono.sizeAndWeight.weight}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Display</span>
+    <dl>
+      <dt>Screen size</dt>
+      <dd>{{telefono.display.screenSize}}</dd>
+      <dt>Screen resolution</dt>
+      <dd>{{telefono.display.screenResolution}}</dd>
+      <dt>Touch screen</dt>
+      <dd>{{telefono.display.touchScreen}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Hardware</span>
+    <dl>
+      <dt>CPU</dt>
+      <dd>{{telefono.hardware.cpu}}</dd>
+      <dt>USB</dt>
+      <dd>{{telefono.hardware.usb}}</dd>
+      <dt>Audio / headtelefono jack</dt>
+      <dd>{{telefono.hardware.audioJack}}</dd>
+      <dt>FM Radio</dt>
+      <dd>{{telefono.hardware.fmRadio}}</dd>
+      <dt>Accelerometer</dt>
+      <dd>{{telefono.hardware.accelerometer}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Camera</span>
+    <dl>
+      <dt>Primary</dt>
+      <dd>{{telefono.camera.primary}}</dd>
+      <dt>Features</dt>
+      <dd>{{telefono.camera.features.join(', ')}}</dd>
+    </dl>
+  </li>
+  <li>
+    <span>Additional Features</span>
+    <dd>{{telefono.additionalFeatures}}</dd>
+  </li>
+</ul>

test/unit/controladoresSpec.js

@@ -29,4 +29,26 @@ describe('controllers', function() {
     expect(scope.ordenProp).toBe('age');
   });
 
+  describe('DetallesTelefonoCtrl', function(){
+    var scope, $httpBackend, ctrl;
+
+    beforeEach(inject(function(_$httpBackend_, $rootScope, $routeParams, $controller) {
+      $httpBackend = _$httpBackend_;
+      $httpBackend.expectGET('phones/xyz.json').respond({name:'telefono xyz'});
+
+      $routeParams.idTelefono = 'xyz';
+      scope = $rootScope.$new();
+      ctrl = $controller('DetallesTelefonoCtrl', {$scope: scope});
+    }));
+
+
+    it('debe obtener el detalle de un teléfono', function() {
+      expect(scope.telefono).toBeUndefined();
+      $httpBackend.flush();
+
+      expect(scope.telefono).toEqual({name:'telefono xyz'});
+    });
+  });
+
+
 });