From 075c089b5cbe72e95ec96638f8925aeb44824f7c Mon Sep 17 00:00:00 2001
From: Igor Minar
Date: Fri, 27 Apr 2012 15:18:54 -0700
Subject: docs(tutorial): update all the remaining steps

I made some diagrams and portions of the text that are stil stale
invisible. We'll fix these in the next relese.
---
 docs/content/tutorial/step_08.ngdoc | 61 +++++++++++++++++++++----------------
 1 file changed, 35 insertions(+), 26 deletions(-)

(limited to 'docs/content/tutorial/step_08.ngdoc')

diff --git a/docs/content/tutorial/step_08.ngdoc b/docs/content/tutorial/step_08.ngdoc
index ad206452..9ccaf9b4 100644
--- a/docs/content/tutorial/step_08.ngdoc
+++ b/docs/content/tutorial/step_08.ngdoc
@@ -2,8 +2,6 @@
 @name Tutorial: 8 - More Templating
 @description
 
-<h2 style="color: red">This page has not been updated for AngularJS 1.0 yet</h2>
-
 <ul doc:tutorial-nav="8"></ul>
 
 
@@ -17,8 +15,8 @@ phone in the phone list.
 Now when you click on a phone on the list, the phone details page with phone-specific information
 is displayed.
 
-To implement the phone details view we will use {@link api/angular.module.ng.$xhr $xhr} to fetch our
-data, and we'll flesh out the `phone-details.html` view template.
+To implement the phone details view we will use {@link api/angular.module.ng.$http $http} to fetch
+our data, and we'll flesh out the `phone-details.html` view template.
 
 The most important changes are listed below. You can see the full diff on {@link
 https://github.com/angular/angular-phonecat/compare/step-7...step-8
@@ -58,44 +56,42 @@ show this data in the phone detail view.
 
 ## Controller
 
-We'll expand the `PhoneDetailCtrl` by using the `$xhr` service to fetch the json files. This works
+We'll expand the `PhoneDetailCtrl` by using the `$http` service to fetch the json files. This works
 the same way as the phone list controller.
 
 __`app/js/controller.js`:__
 <pre>
-function PhoneDetailCtrl($xhr) {
-  var self = this;
-
-  $xhr('GET', 'phones/' + self.params.phoneId + '.json', function(code, response) {
-    self.phone = response;
+function PhoneDetailCtrl($scope, $routeParams, $http) {
+  $http.get('phones/' + $routeParams.phoneId + '.json').success(function(data) {
+    $scope.phone = data;
   });
 }
 
-//PhoneDetailCtrl.$inject = ['$xhr'];
+//PhoneDetailCtrl.$inject = ['$scope', '$routeParams', '$http'];
 </pre>
 
-To construct the URL for the HTTP request, we use `params.phoneId` extracted from the current route
-in the `PhoneCatCtrl` controller.
+To construct the URL for the HTTP request, we use `$routeParams.phoneId` extracted from the current
+route by the `$route` service.
 
 
 ## Template
 
 The TBD placeholder line has been replaced with lists and bindings that comprise the phone details.
-Note where we use the angular `{{expression}}` markup and `ng:repeater`s to project phone data from
+Note where we use the angular `{{expression}}` markup and `ngRepeater`s to project phone data from
 our model into the view.
 
 
 __`app/partials/phone-details.html`:__
 <pre>
-<img ng:src="{{phone.images[0]}}" class="phone"/>
+<img ng-src="{{phone.images[0]}}" class="phone">
 
 <h1>{{phone.name}}</h1>
 
 <p>{{phone.description}}</p>
 
 <ul class="phone-thumbs">
-  <li ng:repeat="img in phone.images">
-    <img ng:src="{{img}}"/>
+  <li ng-repeat="img in phone.images">
+    <img ng-src="{{img}}">
   </li>
 </ul>
 
@@ -104,7 +100,7 @@ __`app/partials/phone-details.html`:__
     <span>Availability and Networks</span>
     <dl>
       <dt>Availability</dt>
-      <dd ng:repeat="availability in phone.availability">{{availability}}</dd>
+      <dd ng-repeat="availability in phone.availability">{{availability}}</dd>
     </dl>
   </li>
     ...
@@ -115,7 +111,10 @@ __`app/partials/phone-details.html`:__
 </ul>
 </pre>
 
+<div style="display: none">
+TODO!
 <img src="img/tutorial/tutorial_08-09_final.png">
+</div>
 
 ## Test
 
@@ -125,16 +124,26 @@ step 5.
 __`test/unit/controllerSpec.js`:__
 <pre>
 ...
-    it('should fetch phone detail', function() {
-      scope.params = {phoneId:'xyz'};
-      $browser.xhr.expectGET('phones/xyz.json').respond({name:'phone xyz'});
-      ctrl = scope.$new(PhoneDetailCtrl);
+  describe('PhoneDetailCtrl', function(){
+    var scope, $httpBackend, ctrl;
+
+    beforeEach(inject(function(_$httpBackend_, $rootScope, $routeParams, $controller) {
+      $httpBackend = _$httpBackend_;
+      $httpBackend.expectGET('phones/xyz.json').respond({name:'phone xyz'});
 
-      expect(ctrl.phone).toBeUndefined();
-      $browser.xhr.flush();
+      $routeParams.phoneId = 'xyz';
+      scope = $rootScope.$new();
+      ctrl = $controller(PhoneDetailCtrl, {$scope: scope});
+    }));
 
-      expect(ctrl.phone).toEqual({name:'phone xyz'});
+
+    it('should fetch phone detail', function() {
+      expect(scope.phone).toBeUndefined();
+      $httpBackend.flush();
+
+      expect(scope.phone).toEqual({name:'phone xyz'});
     });
+  });
 ...
 </pre>
 
@@ -144,7 +153,7 @@ output.
     Chrome: Runner reset.
     ...
     Total 3 tests (Passed: 3; Fails: 0; Errors: 0) (5.00 ms)
-      Chrome 11.0.696.57 Mac OS: Run 3 tests (Passed: 3; Fails: 0; Errors 0) (5.00 ms)
+      Chrome 19.0.1084.36 Mac OS: Run 3 tests (Passed: 3; Fails: 0; Errors 0) (5.00 ms)
 
 
 We also added a new end-to-end test that navigates to the Nexus S detail page and verifies that the
-- 
cgit v1.2.3