From 0a604bdb90e9dff9399bae0fb4941fe46cc7e9f9 Mon Sep 17 00:00:00 2001
From: Kenneth R. Culp
Date: Tue, 26 Apr 2011 09:54:08 -0700
Subject: Tutorial files for your perusal.

---
 docs/tutorial.step_8.ngdoc | 110 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 110 insertions(+)
 create mode 100755 docs/tutorial.step_8.ngdoc

(limited to 'docs/tutorial.step_8.ngdoc')

diff --git a/docs/tutorial.step_8.ngdoc b/docs/tutorial.step_8.ngdoc
new file mode 100755
index 00000000..bf03fdac
--- /dev/null
+++ b/docs/tutorial.step_8.ngdoc
@@ -0,0 +1,110 @@
+@workInProgress
+@ngdoc overview
+@name Tutorial: Step 8
+@description
+<table id="tutorial_nav">
+<tr>
+<td id="previous_step">{@link tutorial.step_7 Previous}</td>
+<td id="step_result">{@link  http://angular.github.com/angular-phonecat/step-8/app Example}</td>
+<td id="tut_home">{@link tutorial Tutorial Home}</td>
+<td id="code_diff">{@link
+https://github.com/angular/angular-phonecat/commit/1f91f571bdd6f1e705ebb303998afe7820ffc6d9 Code
+Diff}</td>
+<td id="next_step">{@link tutorial.step_9 Next}</td>
+</tr>
+</table>
+
+In this step, we implement the Phone Details View template.  Once again we will use {@link
+angular.services.$xhr $xhr} to fetch our data, and we'll flesh out the `phone-details.html` View
+template.
+
+__`app/partials/phone-details.html`:__
+<pre>
+<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>
+</ul>
+
+<ul class="specs">
+  <li>
+    <span>Availability and Networks</span>
+    <dl>
+      <dt>Availability</dt>
+      <dd ng:repeat="availability in phone.availability">{{availability}}</dd>
+    </dl>
+  </li>
+    ...
+    <span>Additional Features</span>
+    <dd>{{phone.additionalFeatures}}</dd>
+  </li>
+</ul>
+</pre>
+
+__`app/js/controller.js`:__
+<pre>
+function PhoneCatCtrl($route) (same as Step 7)
+
+function PhoneListCtrl($xhr) (same as Step 7)
+
+function PhoneDetailCtrl($xhr) {
+  var self = this;
+
+  $xhr('GET', 'phones/' + self.params.phoneId + '.json', function(code, response) {
+    self.phone = response;
+  });
+}
+
+//PhoneDetailCtrl.$inject = ['$xhr'];
+</pre>
+
+__`app/phones/nexus-s.json`:__ (sample snippet)
+<pre>
+{
+  "additionalFeatures": "Contour Display, Near Field Communications (NFC), Three-axis gyroscope,
+  Anti-fingerprint display coating, Internet Calling support (VoIP/SIP)", 
+  "android": {
+      "os": "Android 2.3", 
+      "ui": "Android"
+  }, 
+  ...
+  "images": [
+      "img/phones/nexus-s.0.jpg", 
+      "img/phones/nexus-s.1.jpg", 
+      "img/phones/nexus-s.2.jpg", 
+      "img/phones/nexus-s.3.jpg"
+  ], 
+  "storage": {
+      "flash": "16384MB", 
+      "ram": "512MB"
+  }
+}
+</pre>
+
+## Discussion:
+
+* Phone Details View Template. There is nothing fancy or new here, just note where we use the
+angular `{{ expression }}` markup and directives to project phone data from our model.
+
+* Note how we used the `$route` `params` object from the scope managed by the root controller
+(`PhoneCatCtrl`), to construct the path to the phone details requested by the user. The rest of
+this step is simply applying the previously learned concepts and angular APIs to create a large
+template that displays a lot of data about a phone.
+
+<table id="tutorial_nav">
+<tr>
+<td id="previous_step">{@link tutorial.step_7 Previous}</td>
+<td id="step_result">{@link  http://angular.github.com/angular-phonecat/step-8/app Example}</td>
+<td id="tut_home">{@link tutorial Tutorial Home}</td>
+<td id="code_diff">{@link
+https://github.com/angular/angular-phonecat/commit/1f91f571bdd6f1e705ebb303998afe7820ffc6d9 Code
+Diff}</td>
+<td id="next_step">{@link tutorial.step_9 Next}</td>
+</tr>
+</table>
-- 
cgit v1.2.3