From 3751f172b3986604853700a1475a7ad81b42a9b1 Mon Sep 17 00:00:00 2001
From: Igor Minar
Date: Tue, 10 May 2011 17:45:42 -0700
Subject: add new batch of tutorial docs and images

---
 docs/content/tutorial/step_01.ngdoc | 57 +++++++++++++++++++++++++++----------
 1 file changed, 42 insertions(+), 15 deletions(-)

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

diff --git a/docs/content/tutorial/step_01.ngdoc b/docs/content/tutorial/step_01.ngdoc
index 4f0640c9..a0fac338 100755
--- a/docs/content/tutorial/step_01.ngdoc
+++ b/docs/content/tutorial/step_01.ngdoc
@@ -1,11 +1,11 @@
-@ngdoc overview
+@ngdoc overview
 @name Tutorial: Step 1
 @description
 <table id="tutorial_nav">
   <tr>
   <td id="previous_step">{@link tutorial.step_00 Previous}</td>
     <td id="step_result">{@link http://angular.github.com/angular-phonecat/step-1/app Live
-    Demo}</td>
+Demo}</td>
     <td id="tut_home">{@link tutorial Tutorial Home}</td>
     <td id="code_diff">
 {@link https://github.com/angular/angular-phonecat/compare/step-0...step-1 Code Diff}</td>
@@ -13,38 +13,53 @@
   </tr>
 </table>
 
-In this step you will add some basic information about two cell phones to our app.  
 
-1. Do one of the following to reset your workspace to step 1; be aware that this will throw away
-any changes you might have made to the tutorial files:
+In order to illustrate how angular enhances standard HTML, you will create a purely *static* HTML
+page and then examine how we can turn this HTML code into a template that angular will use to
+dynamically display the same result with any set of data.
 
-  * Git users run:
 
-              git checkout --force step-1
+In this step you will add some basic information about two cell phones to an HTML page.
+
+
+1. Reset the workspace to step 1.
+
+
+   * Git users run:
+
+
+              git checkout -f step-1
+
+
+   * Snapshot users run:
 
-  * Snapshot users run:
 
               ./goto_step.sh 1
 
+
 2. Refresh your browser or check the app out on {@link
-http://angular.github.com/angular-phonecat/step-1/app anglar's server}. The page now contains a
-list with information about two phones.
+http://angular.github.com/angular-phonecat/step-1/app anglar's server}.
+
+
+The page now contains a list with information about two phones.
+
 
 The most important changes are listed below. You can see the full diff on {@link
 https://github.com/angular/angular-phonecat/compare/step-0...step-1 GitHub}:
 
+
 __`app/index.html`:__
 <pre>
 ...
   <ul>
     <li>
-      <span>Nexus S<span>
+      <span>Nexus S</span>
       <p>
         Fast just got faster with Nexus S.
       </p>
     </li>
     <li>
-      <span>Motorola XOOM™ with Wi-Fi<span>
+      <span>Motorola XOOM™ with Wi-Fi</span>
       <p>
         The Next, Next Generation tablet.
       </p>
@@ -53,26 +68,38 @@ __`app/index.html`:__
 ...
 </pre>
 
+
+
+
 # Experiments
 
-* Try adding more static html to `index.html`. For example: 
 
-            <p>Total number of phones: 3</p>
+* Try adding more static HTML to `index.html`. For example:
+
+
+  <pre>
+    <p>Total number of phones: 2</p>
+  </pre>
+
+
 
 
 # Summary
 
+
 This addition to your app uses static HTML to display the list. Now, let's go to step 2 to learn
 how to use angular to dynamically generate the same list.
 
+
 <table id="tutorial_nav">
   <tr>
   <td id="previous_step">{@link tutorial.step_00 Previous}</td>
     <td id="step_result">{@link http://angular.github.com/angular-phonecat/step-1/app Live
-    Demo}</td>
+Demo}</td>
     <td id="tut_home">{@link tutorial Tutorial Home}</td>
     <td id="code_diff">
 {@link https://github.com/angular/angular-phonecat/compare/step-0...step-1 Code Diff}</td>
     <td id="next_step">{@link tutorial.step_02 Next}</td>
   </tr>
 </table>
+
-- 
cgit v1.2.3