new batch of docs

14 files changed, 470 insertions, 601 deletions

diff --git a/docs/content/tutorial/index.ngdoc b/docs/content/tutorial/index.ngdoc
index 4b10401a..eb4c7e11 100644
--- a/docs/content/tutorial/index.ngdoc
+++ b/docs/content/tutorial/index.ngdoc
@@ -38,14 +38,14 @@ When you finish the tutorial you will be able to:
 * Identify resources for learning more about angular
 
 
-Mac and Linux users can work through the tutorial, run tests, and experiment with the code using
-Git or the snapshots described below. Windows users will be able read the tutorial but won't be
-able to run the tests or experiment with the code.
+The tutorial is will guide you through the process of building a simple application, including
+writing and running unit and end-to-end tests, and will allow you to experiment with angular and
+the application through experiments suggested at the end of each step.
 
 
 You can go through the whole tutorial in a couple of hours or you may want to spend a pleasant day
-really digging into it. If you're looking for a shorter introduction to angular, check out {@link
-http://docs.angularjs.org/#!started started}.
+really digging into it. If you're looking for a shorter introduction to angular, check out the
+{@link misc/started Getting Started} document.
 
 
 
@@ -54,21 +54,8 @@ http://docs.angularjs.org/#!started started}.
 
 
 
-<a name="PreReqs"></a>
-# Prerequisites
 
 
-To run the tutorial app and tests on your machine you will need the following:
-
-
-* A Mac or Linux machine (required for running the tutorial scripts)
-* An http server running on your system. Mac and Linux machines typically have Apache preinstalled.
-If you don't already have an http server installed, you can install `node.js` ({@link
-https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager node.js install guide})
-or another http sever.
-* {@link http://java.com Java}.
-* A web browser.
-* A text editor.
 
 
 
@@ -76,59 +63,113 @@ or another http sever.
 # Working with the code
 
 
-There are two ways that you can you follow this tutorial and hack on the code:
-
-
-## Using Git
-
-
-The following instructions are for Git users. If you're not a Git user, skip down to the "Using
-Snapshots" section.
-
-
-1. Check to be sure you have all of the <a href="#PreReqs">prerequisites</a> on your system.
-
-
-2. Clone the angular-phonecat repository located at {@link
-https://github.com/angular/angular-phonecat GitHub} by running the following command in a terminal:
-
-
-        git clone git://github.com/angular/angular-phonecat.git
-
-
-   This will create a directory called `angular-phonecat` in the current directory.
-
-
-3. Change your current directory to `angular-phonecat`.
-
-
-        cd angular-phonecat
-
-
-    The tutorial instructions assume you are running all commands from this directory.
-
-
-
-
-## Using Snapshots
-
-
-1. Check to be sure you have all of the <a href="#PreReqs">prerequisites</a> on your system.
-
-
-2. {@link http://code.angularjs.org/angular-phonecat-snapshots.zip Download the zip archive} with
-all files and unzip them into `[tutorial-dir]` directory.
-
-
-
-
-3. Change directories to `[tutorial-dir]/sandbox`.
-
-
-        cd [tutorial-dir]/sandbox
-
-
-
-
-Let's get going with {@link tutorial/step_00 step 0}.
+There are two ways that you can you follow this tutorial and hack on the code, both available on
+Mac/Linux or Windows environment. The first work flow uses Git versioning system for source code
+management, the second work flow doesn't depend on any source control system and instead uses
+scripts to copy snapshots of project files into your workspace (`sandbox`) directory. Choose the
+one you prefer:
+
+
+<doc:tutorial-instructions show="true">
+  <doc:tutorial-instruction id="git-mac" title="Git on Mac/Linux">
+    <ol>
+      <li><p>Verify that you have <a href="http://java.com/">Java</a> installed by running the
+following command in a terminal window:</p>
+      <pre><code>java -version</code></pre>
+      <p>You will need Java to run unit tests.</p></li>
+      <li><p>Get Git from <a href="http://git-scm.com/download">here</a></p>
+      <p>You can build it from source or use pre-compiled package.</p></li>
+      <li><p>Clone the angular-phonecat repository located at <a
+href="https://github.com/angular/angular-phonecat">Github</a> by running this command:</p>
+      <pre><code>git clone git://github.com/angular/angular-phonecat.git</code></pre>
+      <p>This will create <code>angular-phonecat</code> directory in current directory.</p></li>
+      <li><p>Change your current directory to <code>angular-phonecat</code>:</p>
+      <pre><code>cd angular-phonecat</code></pre>
+      <p>The tutorial instructions assume you are running all commands from this directory.</p></li>
+      <li><p>You'll also need an http server running on your system. Mac and Linux machines
+typically have Apache preinstalled.</p>
+      <p>If you don't already have an http server installed, you can <a
+href="https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager">install
+node.js</a> and use it to run <code>scripts/web-server.js</code> — a simple bundled http
+server.</p></li>
+    </ol>
+  </doc:tutorial-instruction>
+
+
+  <doc:tutorial-instruction id="git-win" title="Git on Windows">
+    <ol>
+      <li><p>Verify that you have <a href="http://java.com/">Java</a> installed and that the
+<code>java</code> executable is on your <code>PATH</code> by running this command in windows
+command line:</p>
+      <pre><code>java -version</code></pre>
+      <p>You will need Java to run unit tests.</p></li>
+      <li><p>Install msysGit from <a href="http://git-scm.com/download">here</a></p></li>
+      <li><p>Open msysGit bash and clone the angular-phonecat repository located at <a
+href="https://github.com/angular/angular-phonecat">Github</a> by running this command:</p>
+      <pre><code>git clone git://github.com/angular/angular-phonecat.git</code></pre>
+      <p>This will create angular-phonecat directory in your current directory.</p></li>
+      <li><p>Change your current directory to angular-phonecat:</p>
+      <pre><code>cd angular-phonecat</code></pre>
+      <p>The tutorial instructions assume you are running all commands from this directory.</p>
+      <p>You should run all <code>git</code> commands from msysGit bash.</p>
+      <p>Other commands like <code>test-server.bat</code> or <code>test.bat</code> that will be
+introduced soon, should be executed from the windows command line.</li>
+      <li><p>You'll also need an http server running on your system.</p>
+      <p>If you don't already have an http server installed, you can install <a
+href="http://nodejs.org/">node.js</a>. Just download <a
+href="http://node-js.prcn.co.cc/">pre-compiled binaries</a>, unzip them and add
+<code>nodejs\bin</code> into your <code>PATH</code> and use <code>node</code> to run
+<code>scripts\web-server.js</code> — a simple bundled http server.</p></li>
+    </ol>
+  </doc:tutorial-instruction>
+
+
+  <doc:tutorial-instruction id="ss-mac" title="Snapshots on Mac/Linux">
+    <ol>
+      <li><p>Verify that you have <a href="http://java.com/">Java</a> installed by running the
+following command in a terminal window:</p>
+      <pre><code>java -version</code></pre>
+      <p>You will need Java to run unit tests.</p></li>
+      <li><p>Download the <a href="http://code.angularjs.org/angular-phonecat/">zip archive</a>
+with all files and unzip them into [tutorial-dir] directory</p></li>
+      <li><p>Change your current directory to [tutorial-dir]/sanbox:</p>
+      <pre><code>cd [tutorial-dir]/sandbox</code></pre>
+      <p>The tutorial instructions assume you are running all commands from this directory.</p></li>
+      <li><p>You'll also need an http server running on your system. Mac and Linux machines
+typically have Apache preinstalled.</p>
+      <p>If you don't already have an http server installed, you can <a
+href="https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager">install
+node.js</a> and use it to run <code>scripts/web-server.js</code> — a simple bundled http
+server.</p></li>
+    </ol>
+  </doc:tutorial-instruction>
+
+
+  <doc:tutorial-instruction id="ss-win" title="Snapshots on Windows">
+    <ol>
+      <li><p>Verify that you have <a href="http://java.com/">Java</a> installed and that the
+<code>java</code> executable is on your <code>PATH</code> by running this command in windows
+command line:</p>
+      <pre><code>java -version</code></pre>
+      <p>You will need Java to run unit tests.</p></li>
+      <li><p>Download the <a href="http://code.angularjs.org/angular-phonecat/">zip archive</a>
+with all files and unzip them into [tutorial-dir] directory</p></li>
+      <li><p>Change your current directory to [tutorial-dir]/sanbox:</p>
+      <pre><code>cd [tutorial-dir]/sandbox</code></pre>
+      <p>The tutorial instructions assume you are running all commands from this directory.</p></li>
+      <li><p>You'll also need an http server running on your system.</p>
+      <p>If you don't already have an http server installed, you can install <a
+href="http://nodejs.org/">node.js</a>. Just download <a
+href="http://node-js.prcn.co.cc/">pre-compiled binaries</a>, unzip them and add
+<code>nodejs\bin</code> into your <code>PATH</code> and use <code>node</code> to run
+<code>scripts\web-server.js</code> — a simple bundled http server.</p></li>
+    </ol>
+  </doc:tutorial-instruction>
+</doc:tutorial-instructions>
+
+
+For either work flow you'll also need a web browser and your favorite text editor.
+
+
+Let's get going with {@link step_00 step 0}.
 
diff --git a/docs/content/tutorial/step_00.ngdoc b/docs/content/tutorial/step_00.ngdoc
index 36b35004..e97f4038 100755
--- a/docs/content/tutorial/step_00.ngdoc
+++ b/docs/content/tutorial/step_00.ngdoc
@@ -1,17 +1,11 @@
 @ngdoc overview
-@name Tutorial: Step 0
+@name Tutorial: 0 - angular-seed
 @description
 
 
-<table id="tutorial_nav">
-<tr>
-<td id="previous_step">{@link tutorial Previous}</td>
-<td id="step_result">{@link  http://angular.github.com/angular-phonecat/step-0/app Live Demo}</td>
-<td id="tut_home">{@link tutorial Tutorial Home}</td>
-<td id="code_diff">Code Diff</td>
-<td id="next_step">{@link tutorial.step_01 Next}</td>
-</tr>
-</table>
+<ul doc:tutorial-nav="0"></ul>
+
+
 
 
 You are now ready to build the phone cat application. In this step, you will become familiar with
@@ -19,40 +13,146 @@ the most important source code files, learn how to start the development servers
 angular-seed, and run the application in the browser.
 
 
-1. Do one of the following:
-
-
-   * Git users: In the `angular-phonecat` directory, run this command:
-
-
-               git checkout -f step-0
-
-
-   * Snapshot users: In the `[tutorial-dir]/sandbox` directory, run this command:
 
 
-               ./goto_step.sh 0
+<doc:tutorial-instructions show="true">
+  <doc:tutorial-instruction id="git-mac" title="Git on Mac/Linux">
+    <ol>
+      <li><p>In angular-phonecat directory, run this command:</p>
+      <pre><code>git checkout -f step-0</code></pre>
+      <p>This resets your workspace to Step 0 of the tutorial app.</p>
+      <p>You must repeat this for every future step in the tutorial and change the number to
+      the number of the step you are on. This will cause any changes you made within
+      your working directory to be lost.</p></li>
+
+
+      <li>To see the app running in a browser, do one of the following:
+        <ul>
+          <li><b>For node.js users:</b>
+            <ol>
+              <li>In a <i>separate</i> terminal tab or window, run
+<code>./scripts/web-server.js</code> to start the web server.</li>
+              <li>Open a browser window for the app and navigate to <a
+href="http://localhost:8000/app/index.html">http://localhost:8000/app/index.html</a></li>
+            </ol>
+          </li>
+          <li><b>For other http servers:</b>
+            <ol>
+              <li>Configure the server to serve the files in the <code>angular-phonecat</code>
+directory.</li>
+              <li>Navigate in your browser to
+<code>http://localhost:[port-number]/[context-path]/app/index.html</code>.</li>
+            </ol>
+          </li>
+        </ul>
+      </li>
+    </ol>
+  </doc:tutorial-instruction>
+
+
+
+
+  <doc:tutorial-instruction id="git-win" title="Git on Windows">
+    <ol>
+      <li><p>Open msysGit bash and run this command (in angular-phonecat directory):</p>
+      <pre><code>git checkout -f step-0</code></pre>
+      <p>This resets your workspace to Step 0 of the tutorial app.</p>
+      <p>You must repeat this for every future step in the tutorial and change the number to
+      the number of the step you are on. This will cause any changes you made within
+      your working directory to be lost.</p></li>
+      <li>To see the app running in a browser, do one of the following:
+        <ul>
+          <li><b>For node.js users:</b>
+            <ol>
+              <li>In a <i>separate</i> terminal tab or window, run <code>node
+scripts\web-server.js</code> to start the web server.</li>
+              <li>Open a browser window for the app and navigate to <a
+href="http://localhost:8000/app/index.html">http://localhost:8000/app/index.html</a></li>
+            </ol>
+          </li>
+          <li><b>For other http servers:</b>
+            <ol>
+              <li>Configure the server to serve the files in the <code>angular-phonecat</code>
+directory.</li>
+              <li>Navigate in your browser to
+<code>http://localhost:[port-number]/[context-path]/app/index.html</code>.</li>
+            </ol>
+          </li>
+        </ul>
+      </li>
+    </ol>
+  </doc:tutorial-instruction>
+
+
+
+
+  <doc:tutorial-instruction id="ss-mac" title="Snapshots on Mac/Linux">
+    <ol>
+      <li><p>In angular-phonecat directory, run this command:</p>
+      <pre><code>./goto_step.sh 0</code></pre>
+      <p>This resets your workspace to Step 0 of the tutorial app.</p>
+      <p>You must repeat this for every future step in the tutorial and change the number to
+      the number of the step you are on. This will cause any changes you made within
+      your working directory to be lost.</p></li>
+      <li>To see the app running in a browser, do one of the following:
+        <ul>
+          <li><b>For node.js users:</b>
+            <ol>
+              <li>In a <i>separate</i> terminal tab or window, run
+<code>./scripts/web-server.js</code> to start the web server.</li>
+              <li>Open a browser window for the app and navigate to <a
+href="http://localhost:8000/app/index.html">http://localhost:8000/app/index.html</a></li>
+            </ol>
+          </li>
+          <li><b>For other http servers:</b>
+            <ol>
+              <li>Configure the server to serve the files in the angular-phonecat
+<code>sandbox</code> directory.</li>
+              <li>Navigate in your browser to
+<code>http://localhost:[port-number]/[context-path]/app/index.html</code>.</li>
+            </ol>
+          </li>
+        </ul>
+      </li>
+    </ol>
+  </doc:tutorial-instruction>
+
+
+
+
+  <doc:tutorial-instruction id="ss-win" title="Snapshots on Windows">
+    <ol>
+      <li><p>Open windows command line and run this command (in angular-phonecat directory):</p>
+      <pre><code>goto_step.bat 0</code></pre>
+      <p>This resets your workspace to Step 0 of the tutorial app.</p>
+      <p>You must repeat this for every future step in the tutorial and change the number to
+      the number of the step you are on. This will cause any changes you made within
+      your working directory to be lost.</p></li>
+      <li>To see the app running in a browser, do one of the following:
+        <ul>
+          <li><b>For node.js users:</b>
+            <ol>
+              <li>In a <i>separate</i> terminal tab or window, run <code>node
+scripts\web-server.js</code> to start the web server.</li>
+              <li>Open a browser window for the app and navigate to <a
+href="http://localhost:8000/app/index.html">http://localhost:8000/app/index.html</a></li>
+            </ol>
+          </li>
+          <li><b>For other http servers:</b>
+            <ol>
+              <li>Configure the server to serve the files in the angular-phonecat
+<code>sandbox</code> directory.</li>
+              <li>Navigate in your browser to
+<code>http://localhost:[port-number]/[context-path]/app/index.html</code>.</li>
+            </ol>
+          </li>
+        </ul>
+      </li>
+    </ol>
+  </doc:tutorial-instruction>
+</doc:tutorial-instructions>
 
 
-  This resets your workspace to Step 0 of the tutorial app.
-
-
-  You must repeat this for every future step in the tutorial and change the number to the number of
-the step you are on. Either command will cause any changes you made within your working directory
-to be lost.
-
-
-2. To see the app running in a browser, do one of the following:
-   * __For node.js users:__
-       1. In a _separate_ terminal tab or window, run `./scripts/web-server.js` to start the app
-server.
-       2. Open a browser window for the app and navigate to http://localhost:8000/app/index.html.
-
-
-   * __For other http servers:__
-       1. Configure the server to serve the files in the `angular-phonecat` directory.
-       2. Navigate in your browser to
-http://localhost:[*port-number*]/[*context-path*]/app/index.html.
 
 
 You can now see the page in your browser. It's not very exciting, but that's OK.
@@ -93,7 +193,7 @@ __`app/index.html`:__
 * xmlns declaration
 
 
-       <html xmlns:ng="http://angularjs.org">
+          <html xmlns:ng="http://angularjs.org">
 
 
   This `xmlns` declaration for the `ng` namespace must be specified in all angular applications in
@@ -104,7 +204,7 @@ using XHTML or HTML).
 * angular script tag
 
 
-       <script src="lib/angular/angular.js" ng:autobind>
+          <script src="lib/angular/angular.js" ng:autobind>
 
 
   This single line of code is all that is needed to bootstrap an angular application.
@@ -112,12 +212,12 @@ using XHTML or HTML).
 
   The code downloads the `angular.js` script and registers a callback that will be executed by the
 browser when the containing HTML page is fully downloaded. When the callback is executed, angular
-looks for the {@link angular.directive.ng:autobind ng:autobind} attribute. If angular finds
+looks for the {@link api/angular.directive.ng:autobind ng:autobind} attribute. If angular finds
 `ng:autobind`, it creates a root scope for the application and associates it with the `<html>`
 element of the template:
 
 
-     <img src="img/tutorial/tutorial_00_final.png"/>
+          <img src="img/tutorial/tutorial_00_final.png"/>
 
 
     As you will see shortly, everything in angular is evaluated within a scope. We'll learn more
@@ -151,12 +251,6 @@ For the purposes of this tutorial, we modified the angular-seed with the followi
 Now let's go to step 1 and add some content to the web app.
 
 
-<table id="tutorial_nav">
-<tr>
-<td id="previous_step">{@link tutorial Previous}</td>
-<td id="step_result">{@link  http://angular.github.com/angular-phonecat/step-0/app Live Demo}</td>
-<td id="tut_home">{@link tutorial Tutorial Home}</td>
-<td id="code_diff">Code Diff</td>
-<td id="next_step">{@link tutorial.step_01 Next}</td>
-</tr>
-</table>
+
+
+<ul doc:tutorial-nav="0"></ul>
diff --git a/docs/content/tutorial/step_01.ngdoc b/docs/content/tutorial/step_01.ngdoc
index a0fac338..81d9082a 100755
--- a/docs/content/tutorial/step_01.ngdoc
+++ b/docs/content/tutorial/step_01.ngdoc
@@ -1,44 +1,26 @@
 @ngdoc overview
-@name Tutorial: Step 1
+@name Tutorial: 1 - Static Template
 @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>
-    <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>
 
 
-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.
-
-
-In this step you will add some basic information about two cell phones to an HTML page.
+<ul doc:tutorial-nav="1"></ul>
 
 
-1. Reset the workspace to step 1.
 
 
-   * Git users run:
+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 checkout -f step-1
+In this step you will add some basic information about two cell phones to an HTML page.
 
 
-   * Snapshot users run:
 
 
-              ./goto_step.sh 1
+<doc:tutorial-instructions step="1" show="true"></doc:tutorial-instructions>
 
 
-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.
@@ -77,9 +59,7 @@ __`app/index.html`:__
 * Try adding more static HTML to `index.html`. For example:
 
 
-  <pre>
-    <p>Total number of phones: 2</p>
-  </pre>
+          <p>Total number of phones: 2</p>
 
 
 
@@ -91,15 +71,7 @@ This addition to your app uses static HTML to display the list. Now, let's go to
 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>
-    <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>
+
+
+<ul doc:tutorial-nav="1"></ul>
 
diff --git a/docs/content/tutorial/step_02.ngdoc b/docs/content/tutorial/step_02.ngdoc
index faad7f0e..10721679 100755
--- a/docs/content/tutorial/step_02.ngdoc
+++ b/docs/content/tutorial/step_02.ngdoc
@@ -1,17 +1,11 @@
 @ngdoc overview
-@name Tutorial: Step 2
+@name Tutorial: 2 - Angular Template
 @description
-<table id="tutorial_nav">
- <tr>
-   <td id="previous_step">{@link tutorial.step_01 Previous}</td>
-   <td id="step_result">{@link  http://angular.github.com/angular-phonecat/step-2/app Live
-Demo}</td>
-   <td id="tut_home">{@link tutorial Tutorial Home}</td>
-<td id="code_diff">{@link https://github.com/angular/angular-phonecat/compare/step-1...step-2 Code
-Diff}</td>
-   <td id="next_step">{@link tutorial.step_03 Next}</td>
- </tr>
-</table>
+
+
+<ul doc:tutorial-nav="2"></ul>
+
+
 
 
 Now it's time to make this web page dynamic with angular. We'll also add a test that verifies the
@@ -24,21 +18,12 @@ code and separate concerns. With that in mind, let's use a little angular and Ja
 model, view, and controller components to our app.
 
 
-1. Reset your workspace to step 2.
-
 
-          git checkout -f step-2
 
+<doc:tutorial-instructions step="2"></doc:tutorial-instructions>
 
-   or
 
 
-          ./goto_step.sh 2
-
-
-2. Refresh your browser or check the app out on {@link
-http://angular.github.com/angular-phonecat/step-2/app angular's server}.
-
 
 The app now contains a list with 3 phones.
 
@@ -76,9 +61,9 @@ __`app/index.html`:__
 </pre>
 
 
-We replaced the hard-coded phone list with the {@link angular.widget.@ng:repeat ng:repeat widget}
-and two {@link guide.expression angular expressions} enclosed in curly braces: `{{phone.name}}` and
-`{{phone.snippet}}`:
+We replaced the hard-coded phone list with the {@link api/angular.widget.@ng:repeat ng:repeat
+widget} and two {@link guide/dev_guide.expressions angular expressions} enclosed in curly braces:
+`{{phone.name}}` and `{{phone.snippet}}`:
 
 
     * The `ng:repeat="phone in phones"` statement in the `<li>` tag is an angular repeater.  It
@@ -90,12 +75,12 @@ tag as the template.
 
 
     * The curly braces around `phone.name` and `phone.snippet` are an example of {@link
-angular.markup angular markup}. The curly markup is shorthand for the angular directive {@link
-angular.directive.ng:bind ng:bind}. The `ng:bind` directives indicate to angular that these are
-template binding points. Binding points are locations in the template where angular creates
-data-binding between the view and the model. In angular, the view is a projection of the model
-through the HTML template. This means that whenever the model changes, angular refreshes the
-appropriate binding points, which updates the view.
+guide/dev_guide.compiler.markup angular markup}. The curly markup is shorthand for the angular
+directive {@link api/angular.directive.ng:bind ng:bind}. The `ng:bind` directives indicate to
+angular that these are template binding points. Binding points are locations in the template where
+angular creates data-binding between the view and the model. In angular, the view is a projection
+of the model through the HTML template. This means that whenever the model changes, angular
+refreshes the appropriate binding points, which updates the view.
 
 
 
@@ -133,7 +118,7 @@ data, and logic components:
 
 
     * The name of our controller function (in the JavaScript file `controllers.js`) matches the
-{@link angular.directive.@ng:controller ng:controller} directive in the `<body>` tag
+{@link api/angular.directive.@ng:controller ng:controller} directive in the `<body>` tag
 (`PhoneListCtrl`).
     * We instantiated our data within the scope of our controller function, and our template
 binding points are located within the block bounded by the `<body ng:controller="PhoneListCtrl">`
@@ -145,7 +130,7 @@ the template, model and controller all work together. Angular uses scopes, along
 information contained in the template, data model, and controller, to keep the model and view
 separated but in sync. Any changes to the model are reflected in the view; any changes that occur
 in the view are reflected in the model. To learn more about angular scopes, see the {@link
-angular.scope angular scope documentation}.
+api/angular.scope angular scope documentation}.
 
 
 
@@ -162,7 +147,7 @@ __`test/unit/controllersSpec.js`:__
 describe('PhoneCat controllers', function() {
 
 
-  describe('PhoneListCtrl', function(){
+  describe('PhoneListCtrl', function() {
 
 
     it('should create "phones" model with 3 phones', function() {
@@ -199,8 +184,8 @@ http://code.google.com/p/js-test-driver/ JsTestDriver}. To run the test, do the
 3. Choose "Capture this browser in strict mode".
 
 
-At this point, you can leave this tab open and forget about it. JsTestDriver will use it to execute
-the tests and report the results in the terminal.
+   At this point, you can leave this tab open and forget about it. JsTestDriver will use it to
+execute the tests and report the results in the terminal.
 
 
 4. Execute the test by running `./scripts/test.sh`
@@ -218,7 +203,7 @@ the tests and report the results in the terminal.
   Yay! The test passed! Or not...
 
 
-Note: If you see errors after you run the test, close the browser tab and go back to the terminal
+  Note: If you see errors after you run the test, close the browser tab and go back to the terminal
 and kill the script, then repeat the procedure above.
 
 
@@ -231,13 +216,13 @@ and kill the script, then repeat the procedure above.
           <p>Total number of phones: {{phones.length}}</p>
 
 
-* Create a new model property in the controller and bind to it from the template.  For example:
+* Create a new model property in the controller and bind to it from the template. For example:
 
 
           this.hello = "Hello, World!"
 
 
-Refresh your browser to make sure it says, "Hello, World!"
+  Refresh your browser to make sure it says, "Hello, World!"
 
 
 * Create a repeater that constructs a simple table:
@@ -273,17 +258,5 @@ you're testing as you go. Now, let's go to step 3 to learn how to add full text
 
 
 
-<table id="tutorial_nav">
- <tr>
-   <td id="previous_step">{@link tutorial.step_01 Previous}</td>
-   <td id="step_result">{@link  http://angular.github.com/angular-phonecat/step-2/app Live
-Demo}</td>
-   <td id="tut_home">{@link tutorial Tutorial Home}</td>
-<td id="code_diff">{@link https://github.com/angular/angular-phonecat/compare/step-1...step-2 Code
-Diff}</td>
-   <td id="next_step">{@link tutorial.step_03 Next}</td>
- </tr>
-</table>
-
-
+<ul doc:tutorial-nav="2"></ul>
 
diff --git a/docs/content/tutorial/step_03.ngdoc b/docs/content/tutorial/step_03.ngdoc
index 33e97eed..8425ab9a 100755
--- a/docs/content/tutorial/step_03.ngdoc
+++ b/docs/content/tutorial/step_03.ngdoc
@@ -1,38 +1,24 @@
 @ngdoc overview
-@name Tutorial: Step 3
+@name Tutorial: 3 - Filtering Repeaters
 @description
-<table id="tutorial_nav">
-<tr>
-  <td id="previous_step">{@link tutorial.step_02 Previous}</td>
-  <td id="step_result">{@link  http://angular.github.com/angular-phonecat/step-3/app Live Demo}</td>
-  <td id="tut_home">{@link tutorial Tutorial Home}</td>
-<td id="code_diff">{@link https://github.com/angular/angular-phonecat/compare/step-2...step-3 Code
-Diff}</td>
-  <td id="next_step">{@link tutorial.step_04 Next}</td>
-</tr>
-</table>
 
 
-We did a lot of work in laying a foundation for the app in the last step, so now we'll do something
-simple, and add full text search (yes, it will be simple!). We will also write an end-to-end test,
-because a good end-to-end test is a good friend. It stays with your app, keeps an eye on it, and
-quickly detects regressions.
+<ul doc:tutorial-nav="3"></ul>
 
 
-1. Reset your workspace to step 3.
 
 
-         git checkout -f step-3
+We did a lot of work in laying a foundation for the app in the last step, so now we'll do something
+simple, and add full text search (yes, it will be simple!). We will also write an end-to-end test,
+because a good end-to-end test is a good friend. It stays with your app, keeps an eye on it, and
+quickly detects regressions.
 
 
-  or
 
 
-         ./goto_step.sh 3
+<doc:tutorial-instructions step="3"></doc:tutorial-instructions>
 
 
-2. Refresh your browser or check the app out on {@link
-http://angular.github.com/angular-phonecat/step-3/app angular's server}.
 
 
 The app now has a search box. The phone list on the page changes depending on what a user types
@@ -73,7 +59,7 @@ __`app/index.html`:__
 </pre>
 
 
-We added a standard HTML `<input>` tag and use angular's {@link angular.Array.filter $filter}
+We added a standard HTML `<input>` tag and use angular's {@link api/angular.array.filter $filter}
 function to process the input for the `ng:repeater`.
 
 
@@ -94,7 +80,7 @@ the DOM to reflect the current state of the model.
       <img src="img/tutorial/tutorial_03_final.png">
 
 
-* Use of `$filter`. The {@link angular.Array.filter $filter} method, uses the `query` value, to
+* Use of `$filter`. The {@link api/angular.array.filter $filter} method, uses the `query` value, to
 create a new array that contains only those records that match the `query`.
 
 
@@ -155,7 +141,7 @@ To run the end-to-end test, open the following in a new browser tab:
 
 * node.js users: {@link http://localhost:8000/test/e2e/runner.html}
 * users with other http servers:
-`http://localhost:[*port-number*]/[*context-path*]/test/e2e/runner.html`
+`http://localhost:[port-number]/[context-path]/test/e2e/runner.html`
 * casual reader: {@link http://angular.github.com/angular-phonecat/step-3/test/e2e/runner.html}
 
 
@@ -174,20 +160,20 @@ really is that easy to set up any functional, readable, end-to-end test.
 * Let's see how we can get the current value of the `query` model to appear in the HTML page title.
 
 
-You might think you could just add the {{query}} to the title tag element as follows:
+  You might think you could just add the {{query}} to the title tag element as follows:
 
 
           <title>Google Phone Gallery: {{query}}</title>
 
 
-However, when you reload the page, you won't see the expected result. This is because the "query"
+  However, when you reload the page, you won't see the expected result. This is because the "query"
 model lives in the scope defined by the body element:
 
 
           <body ng:controller="PhoneListCtrl">
 
 
-If you want to bind to the query model from the `<title>` element, you must __move__ the
+  If you want to bind to the query model from the `<title>` element, you must __move__ the
 `ng:controller` declaration to the HTML element because it is the common parent of both the body
 and title elements:
 
@@ -195,23 +181,21 @@ and title elements:
           <html ng:controller="PhoneListCtrl">
 
 
-Be sure to *remove* the `ng:controller` declaration from the body element.
+  Be sure to *remove* the `ng:controller` declaration from the body element.
 
 
 * Add the following end-to-end test into the `describe` block within `test/e2e/scenarios.js`:
 
 
   <pre>
-    it('should display the current filter value within an element with id "status"', function() {
+    it('should display the current filter value within an element with id "status"',
+        function() {
       expect(element('#status').text()).toMatch(/Current filter: \s*$/);
 
-
       input('query').enter('nexus');
 
-
       expect(element('#status').text()).toMatch(/Current filter: nexus\s*$/);
 
-
       //alternative version of the last assertion that tests just the value of the binding
       using('#status').expect(binding('query')).toBe('nexus');
     });
@@ -238,14 +222,9 @@ With full text search under our belt and a test to verify it, let's go to step 4
 add sorting capability to the phone app.
 
 
-<table id="tutorial_nav">
-<tr>
-  <td id="previous_step">{@link tutorial.step_02 Previous}</td>
-  <td id="step_result">{@link  http://angular.github.com/angular-phonecat/step-3/app Live Demo}</td>
-  <td id="tut_home">{@link tutorial Tutorial Home}</td>
-<td id="code_diff">{@link https://github.com/angular/angular-phonecat/compare/step-2...step-3 Code
-Diff}</td>
-  <td id="next_step">{@link tutorial.step_04 Next}</td>
-</tr>
-</table>
+
+
+<ul doc:tutorial-nav="3"></ul>
+
+
 
diff --git a/docs/content/tutorial/step_04.ngdoc b/docs/content/tutorial/step_04.ngdoc
index 9848c821..7d5419e3 100755
--- a/docs/content/tutorial/step_04.ngdoc
+++ b/docs/content/tutorial/step_04.ngdoc
@@ -1,43 +1,27 @@
 @ngdoc overview
-@name Tutorial: Step 4
+@name Tutorial: 4 - Two-way Data Binding
 @description
-<table id="tutorial_nav">
-<tr>
-<td id="previous_step">{@link tutorial.step_03 Previous}</td>
-<td id="step_result">{@link  http://angular.github.com/angular-phonecat/step-4/app Live Demo}</td>
-<td id="tut_home">{@link tutorial Tutorial Home}</td>
-<td id="code_diff">{@link https://github.com/angular/angular-phonecat/compare/step-3...step-4 Code
-Diff}</td>
-<td id="next_step">{@link tutorial.step_05 Next}</td>
-</tr>
-</table>
 
 
-In this step, you will add a feature to let your users control the order of the items in the phone
-list. The dynamic ordering is implemented by creating a new model property, wiring it together with
-the repeater, and letting the data binding magic do the rest of the work.
+<ul doc:tutorial-nav="4"></ul>
 
 
 
 
-1. Reset your workspace to Step 4 using:
-
+In this step, you will add a feature to let your users control the order of the items in the phone
+list. The dynamic ordering is implemented by creating a new model property, wiring it together with
+the repeater, and letting the data binding magic do the rest of the work.
 
-         git checkout -f step-4
 
 
-  or
 
+<doc:tutorial-instructions step="4"></doc:tutorial-instructions>
 
-         ./goto_step.sh 4
 
 
-2. Refresh your browser or check the app out on {@link
-http://angular.github.com/angular-phonecat/step-4/app angular's server}.
 
-You should see that in
-addition to the search box, the app displays a drop down menu that allows users to control the
-order in which the phones are listed.
+You should see that in addition to the search box, the app displays a drop down menu that allows
+users to control the order in which the phones are listed.
 
 
 The most important changes are listed below. You can see the full diff on {@link
@@ -87,9 +71,9 @@ two provided sorting options.
       <img src="img/tutorial/tutorial_04-06_final.png">
 
 
-* We then chained the `$filter` method with {@link angular.Array.orderBy `$orderBy`} method to
+* We then chained the `$filter` method with {@link api/angular.array.orderBy `$orderBy`} method to
 further process the input into the repeater. `$orderBy` is a utility method similar to {@link
-angular.Array.filter `$filter`}, but instead of filtering an array, it reorders it.
+api/angular.array.filter `$filter`}, but instead of filtering an array, it reorders it.
 
 
 Angular creates a two way data-binding between the select element and the `orderProp` model.
@@ -220,7 +204,7 @@ __`test/e2e/scenarios.js`:__
     it('should be possible to control phone order via the drop down select box', function() {
 
 
-      //let's narrow the dataset to make the test assertions shorter
+      // let's narrow the dataset to make the test assertions shorter
       input('query').enter('tablet');
 
 
@@ -270,16 +254,5 @@ services and how angular uses dependency injection.
 
 
 
-<table id="tutorial_nav">
-<tr>
-<td id="previous_step">{@link tutorial.step_03 Previous}</td>
-<td id="step_result">{@link  http://angular.github.com/angular-phonecat/step-4/app Live Demo}</td>
-<td id="tut_home">{@link tutorial Tutorial Home}</td>
-<td id="code_diff">{@link https://github.com/angular/angular-phonecat/compare/step-3...step-4 Code
-Diff}</td>
-<td id="next_step">{@link tutorial.step_05 Next}</td>
-</tr>
-</table>
-
-
+<ul doc:tutorial-nav="4"></ul>
 
diff --git a/docs/content/tutorial/step_05.ngdoc b/docs/content/tutorial/step_05.ngdoc
index 1e63e383..4bd4e4b3 100755
--- a/docs/content/tutorial/step_05.ngdoc
+++ b/docs/content/tutorial/step_05.ngdoc
@@ -1,47 +1,29 @@
 @ngdoc overview
-@name Tutorial: Step 5
+@name Tutorial: 5 - XHRs & Dependency Injection
 @description
-<table id="tutorial_nav">
-<tr>
- <td id="previous_step">{@link tutorial.step_04 Previous}</td>
- <td id="step_result">{@link  http://angular.github.com/angular-phonecat/step-5/app Live Demo
-}</td>
- <td id="tut_home">{@link tutorial Tutorial Home}</td>
-<td id="code_diff">{@link https://github.com/angular/angular-phonecat/compare/step-4...step-5 Code
-Diff}</td>
- <td id="next_step">{@link tutorial.step_06 Next}</td>
-</tr>
-</table>
 
 
-Enough of building an app with three phones in a hard-coded dataset! Let's fetch a larger dataset
-from our server using one of angular's built-in {@link angular.service services} called {@link
-angular.service.$xhr $xhr}. We will use angular's {@link guide.di dependency injection (DI)} to
-provide the service to the `PhoneListCtrl` controller.
-
+<ul doc:tutorial-nav="5"></ul>
 
-1. Reset your workspace to step 5.
 
 
-         git checkout -f step-5
 
+Enough of building an app with three phones in a hard-coded dataset! Let's fetch a larger dataset
+from our server using one of angular's built-in {@link api/angular.service services} called {@link
+api/angular.service.$xhr $xhr}. We will use angular's {@link guide/dev_guide.di dependency
+injection (DI)} to provide the service to the `PhoneListCtrl` controller.
 
-  or
 
 
-         ./goto_step.sh 5
 
+<doc:tutorial-instructions step="5"></doc:tutorial-instructions>
 
 
 
-2. Refresh your browser or check the app out on {@link
-http://angular.github.com/angular-phonecat/step-5/app angular's server}.
 
 You should now see a list of 20 phones.
 
 
-
-
 The most important changes are listed below. You can see the full diff on {@link
 https://github.com/angular/angular-phonecat/compare/step-4...step-5
 GitHub}:
@@ -74,16 +56,16 @@ Following is a sample of the file:
 ## Controller
 
 
-We'll use angular's {@link angular.service.$xhr $xhr} service in our controller to make an HTTP
+We'll use angular's {@link api/angular.service.$xhr $xhr} service in our controller to make an HTTP
 request to your web server to fetch the data in the `app/phones/phones.json` file. `$xhr` is just
-one of several built-in {@link angular.service angular services} that handle common operations in
-web apps. Angular injects these services for you where you need them.
+one of several built-in {@link api/angular.service angular services} that handle common operations
+in web apps. Angular injects these services for you where you need them.
 
 
-Services are managed by angular's {@link guide.di DI subsystem}. Dependency injection helps to make
-your web apps both well-structured (e.g., separate components for presentation, data, and control)
-and loosely coupled (dependencies between components are not resolved by the components themselves,
-but by the DI subsystem).
+Services are managed by angular's {@link guide/dev_guide.di DI subsystem}. Dependency injection
+helps to make your web apps both well-structured (e.g., separate components for presentation, data,
+and control) and loosely coupled (dependencies between components are not resolved by the
+components themselves, but by the DI subsystem).
 
 
 __`app/js/controllers.js:`__
@@ -179,7 +161,7 @@ production code behind the scenes, as follows:
 describe('PhoneCat controllers', function() {
 
 
-  describe('PhoneListCtrl', function(){
+  describe('PhoneListCtrl', function() {
     var scope, $browser, ctrl;
 
 
@@ -188,8 +170,9 @@ describe('PhoneCat controllers', function() {
       $browser = scope.$service('$browser');
 
 
-      $browser.xhr.expectGET('phones/phones.json').respond([{name: 'Nexus S'},
-                                                            {name: 'Motorola DROID'}]);
+      $browser.xhr.expectGET('phones/phones.json')
+          .respond([{name: 'Nexus S'},
+                    {name: 'Motorola DROID'}]);
       ctrl = scope.$new(PhoneListCtrl);
     });
   });
@@ -211,13 +194,13 @@ we create the `PhoneListCtrl` child scope, we need to tell the testing harness t
 incoming request from the controller. To do this we:
 
 
-* Use the {@link angular.scope.$service `$service`} method to retrieve the `$browser` service, a
-service that angular uses to represent various browser APIs. In tests, angular automatically uses a
-mock version of this service that allows you to write tests without having to deal with these
+* Use the {@link api/angular.scope.$service `$service`} method to retrieve the `$browser` service,
+a service that angular uses to represent various browser APIs. In tests, angular automatically uses
+a mock version of this service that allows you to write tests without having to deal with these
 native APIs and the global state associated with them.
 
 
-* Use the `$browser.expectGET` method to train the `$browser` object to expect an incoming HTTP
+* Use the `$browser.xhr.expectGET` method to train the `$browser` object to expect an incoming HTTP
 request and tell it what to respond with. Note that the responses are not returned before we call
 the `$browser.xhr.flush` method.
 
@@ -293,14 +276,7 @@ implementation of dependency injection), go to step 6, where you will add some t
 phones and some links.
 
 
-<table id="tutorial_nav">
-<tr>
- <td id="previous_step">{@link tutorial.step_04 Previous}</td>
- <td id="step_result">{@link  http://angular.github.com/angular-phonecat/step-5/app Live Demo
-}</td>
- <td id="tut_home">{@link tutorial Tutorial Home}</td>
- <td id="code_diff">{@link https://github.com/angular/angular-phonecat/compare/step-4...step-5 Code
-Diff}</td>
- <td id="next_step">{@link tutorial.step_06 Next}</td>
-</tr>
-</table>
+
+
+<ul doc:tutorial-nav="5"></ul>
+
diff --git a/docs/content/tutorial/step_06.ngdoc b/docs/content/tutorial/step_06.ngdoc
index 154b984e..e7fa1660 100755
--- a/docs/content/tutorial/step_06.ngdoc
+++ b/docs/content/tutorial/step_06.ngdoc
@@ -1,38 +1,24 @@
 @ngdoc overview
-@name Tutorial: Step 6
+@name Tutorial: 6 - Templating Links & Images
 @description
-<table id="tutorial_nav">
-<tr>
-<td id="previous_step">{@link tutorial.step_05 Previous}</td>
-<td id="step_result">{@link  http://angular.github.com/angular-phonecat/step-6/app Live Demo
-}</td>
-<td id="tut_home">{@link tutorial Tutorial Home}</td>
-<td id="code_diff">{@link https://github.com/angular/angular-phonecat/compare/step-5...step-6 Code
-Diff}</td>
-<td id="next_step">{@link tutorial.step_07 Next}</td>
-</tr>
-</table>
 
 
-In this step, you will add thumbnail images for the phones in the phone list, and links that, for
-now, will go nowhere. In subsequent steps you will use the links to display additional information
-about the phones in the catalog.
+<ul doc:tutorial-nav="6"></ul>
+
 
 
-1. Reset your workspace to step 6.
 
+In this step, you will add thumbnail images for the phones in the phone list, and links that, for
+now, will go nowhere. In subsequent steps you will use the links to display additional information
+about the phones in the catalog.
 
-         git checkout -f step-6
 
 
-  or
 
+<doc:tutorial-instructions step="6"></doc:tutorial-instructions>
 
-         ./goto_step.sh 6
 
 
-2. Refresh your browser or check the app out on {@link
-http://angular.github.com/angular-phonecat/step-6/app angular's server}.
 
 You should now see links and images of the phones in the list.
 
@@ -86,16 +72,16 @@ __`app/index.html`:__
 
 
 To dynamically generate links that will in the future lead to phone detail pages, we used the
-now-familiar {@link angular.markup double-curly brace markup} in the `href` attribute values. In
-step 2, we added the `{{phone.name}}` binding as the element content. In this step the
-'{{phone.id}}' binding is used in the element attribute.
+now-familiar {@link guide/dev_guide.compiler.markup double-curly brace markup} in the `href`
+attribute values. In step 2, we added the `{{phone.name}}` binding as the element content. In this
+step the '{{phone.id}}' binding is used in the element attribute.
 
 
 We also added phone images next to each record using an image tag with the {@link
-angular.directive.ng:src ng:src} directive. That directive prevents the browser from treating the
-angular `{{ exppression }}` markup literally, which it would have done if we had only specified an
-attribute binding in a regular `src` attribute (`<img src="{{phone.imageUrl}}">`). Using `ng:src`
-prevents the browser from making an http request to an invalid location.
+api/angular.directive.ng:src ng:src} directive. That directive prevents the browser from treating
+the angular `{{ exppression }}` markup literally, which it would have done if we had only specified
+an attribute binding in a regular `src` attribute (`<img src="{{phone.imageUrl}}">`). Using
+`ng:src` prevents the browser from making an http request to an invalid location.
 
 
 
@@ -145,15 +131,5 @@ templates and how angular makes it easy to create applications that have multipl
 
 
 
-<table id="tutorial_nav">
-<tr>
-<td id="previous_step">{@link tutorial.step_05 Previous}</td>
-<td id="step_result">{@link  http://angular.github.com/angular-phonecat/step-6/app Live Demo
-}</td>
-<td id="tut_home">{@link tutorial Tutorial Home}</td>
-<td id="code_diff">{@link https://github.com/angular/angular-phonecat/compare/step-5...step-6 Code
-Diff}</td>
-<td id="next_step">{@link tutorial.step_07 Next}</td>
-</tr>
-</table>
+<ul doc:tutorial-nav="6"></ul>
 
diff --git a/docs/content/tutorial/step_07.ngdoc b/docs/content/tutorial/step_07.ngdoc
index c87739f8..cda63463 100755
--- a/docs/content/tutorial/step_07.ngdoc
+++ b/docs/content/tutorial/step_07.ngdoc
@@ -1,41 +1,26 @@
 @ngdoc overview
-@name Tutorial: Step 7
+@name Tutorial: 7 - Routing & Multiple Views
 @description
-<table id="tutorial_nav">
-<tr>
-<td id="previous_step">{@link tutorial.step_06 Previous}</td>
-<td id="step_result">{@link  http://angular.github.com/angular-phonecat/step-7/app Live Demo
-}</td>
-<td id="tut_home">{@link tutorial Tutorial Home}</td>
-<td id="code_diff">{@link https://github.com/angular/angular-phonecat/compare/step-6...step-7 Code
-Diff}</td>
-<td id="next_step">{@link tutorial.step_08 Next}</td>
-</tr>
-</table>
 
 
-In this step, you will learn how to create a layout template and how to build an app that has
-multiple views by adding routing.
+<ul doc:tutorial-nav="7"></ul>
+
 
 
-1. Reset your workspace to step 7.
 
+In this step, you will learn how to create a layout template and how to build an app that has
+multiple views by adding routing.
 
-         git checkout -f step-7
 
 
-  or
 
+<doc:tutorial-instructions step="7"></doc:tutorial-instructions>
 
-         ./goto_step.sh 7
 
 
-2. Refresh your browser, but be sure that there is nothing in the url after `app/index.html`, or
-check the app out on {@link http://angular.github.com/angular-phonecat/step-7/app angular's
-server}.
 
-Note that you are redirected to `app/index.html#/phones` and the same phone list appears
-in the browser. When you click on a phone link the stub of a phone detail page is displayed.
+Note that you are redirected to `app/index.html#/phones` and the same phone list appears in the
+browser. When you click on a phone link the stub of a phone detail page is displayed.
 
 
 
@@ -63,9 +48,9 @@ our application. Other "partial templates" are then included into this layout te
 the current "route" — the view that is currently displayed to the user.
 
 
-Application routes in angular are declared via the {@link angular.service.$route $route} service.
-This service makes it easy to wire together controllers, view templates, and the current URL
-location in the browser. Using this feature we can implement {@link
+Application routes in angular are declared via the {@link api/angular.service.$route $route}
+service. This service makes it easy to wire together controllers, view templates, and the current
+URL location in the browser. Using this feature we can implement {@link
 http://en.wikipedia.org/wiki/Deep_linking deep linking}, which lets us utilize the browser's
 history (back and forward navigation) and bookmarks.
 
@@ -82,13 +67,13 @@ function PhoneCatCtrl($route) {
 
 
   $route.when('/phones',
-              {template: 'partials/phone-list.html',   controller: PhoneListCtrl});
+      {template: 'partials/phone-list.html',   controller: PhoneListCtrl});
   $route.when('/phones/:phoneId',
-              {template: 'partials/phone-detail.html', controller: PhoneDetailCtrl});
+      {template: 'partials/phone-detail.html', controller: PhoneDetailCtrl});
   $route.otherwise({redirectTo: '/phones'});
 
 
-  $route.onChange(function(){
+  $route.onChange(function() {
     self.params = $route.current.params;
   });
 
@@ -135,8 +120,8 @@ the route declaration — `'/phones/:phoneId'` — as a template that is matched
 URL. All variables defined with the `:` notation are extracted into the `$route.current.params` map.
 
 
-The `params` alias created in the {@link angular.service.$route `$route.onChange`} callback allows
-us to use the `phoneId` property of this map in the `phone-details.html` template.
+The `params` alias created in the {@link api/angular.service.$route `$route.onChange`} callback
+allows us to use the `phoneId` property of this map in the `phone-details.html` template.
 
 
 
@@ -144,9 +129,9 @@ us to use the `phoneId` property of this map in the `phone-details.html` templat
 ## Template
 
 
-The `$route` service is usually used in conjunction with the {@link angular.widget.ng:view ng:view}
-widget. The role of the `ng:view` widget is to include the view template for the current route into
-the layout template, which makes it a perfect fit for our `index.html` template.
+The `$route` service is usually used in conjunction with the {@link api/angular.widget.ng:view
+ng:view} widget. The role of the `ng:view` widget is to include the view template for the current
+route into the layout template, which makes it a perfect fit for our `index.html` template.
 
 
 __`app/index.html`:__
@@ -279,17 +264,7 @@ With the routing set up and the phone list view implemented, we're ready to go t
 implement the phone details view.
 
 
-<table id="tutorial_nav">
-<tr>
-<td id="previous_step">{@link tutorial.step_06 Previous}</td>
-<td id="step_result">{@link  http://angular.github.com/angular-phonecat/step-7/app Live Demo
-}</td>
-<td id="tut_home">{@link tutorial Tutorial Home}</td>
-<td id="code_diff">{@link https://github.com/angular/angular-phonecat/compare/step-6...step-7 Code
-Diff}</td>
-<td id="next_step">{@link tutorial.step_08 Next}</td>
-</tr>
-</table>
 
 
+<ul doc:tutorial-nav="7"></ul>
 
diff --git a/docs/content/tutorial/step_08.ngdoc b/docs/content/tutorial/step_08.ngdoc
index bec7bf6c..c0ba2831 100755
--- a/docs/content/tutorial/step_08.ngdoc
+++ b/docs/content/tutorial/step_08.ngdoc
@@ -1,43 +1,29 @@
 @ngdoc overview
-@name Tutorial: Step 8
+@name Tutorial: 8 - More Templating
 @description
-<table id="tutorial_nav">
-<tr>
-<td id="previous_step">{@link tutorial.step_07 Previous}</td>
-<td id="step_result">{@link  http://angular.github.com/angular-phonecat/step-8/app Live Demo
-}</td>
-<td id="tut_home">{@link tutorial Tutorial Home}</td>
-<td id="code_diff">{@link https://github.com/angular/angular-phonecat/compare/step-7...step-8 Code
-Diff}</td>
-<td id="next_step">{@link tutorial.step_09 Next}</td>
-</tr>
-</table>
 
 
-In this step, you will implement the phone details view, which is displayed when a user clicks on a
-phone in the phone list.
+<ul doc:tutorial-nav="8"></ul>
+
 
 
-1. Reset your workspace to Step 8 using:
 
+In this step, you will implement the phone details view, which is displayed when a user clicks on a
+phone in the phone list.
 
-         git checkout -f step-8
 
 
-  or
 
+<doc:tutorial-instructions step="8"></doc:tutorial-instructions>
 
-         ./goto_step.sh 8
 
 
-2. Refresh your browser or check the app out on {@link
-http://angular.github.com/angular-phonecat/step-8/app angular's server}.
 
-Now when you click on a
-phone on the list, the phone details page with phone-specific information is displayed.
+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 angular.service.$xhr $xhr} to fetch our
+To implement the phone details view we will use {@link api/angular.service.$xhr $xhr} to fetch our
 data, and we'll flesh out the `phone-details.html` view template.
 
 
@@ -56,8 +42,7 @@ phone:
 __`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)",
+  "additionalFeatures": "Contour Display, Near Field Communications (NFC),...",
   "android": {
       "os": "Android 2.3",
       "ui": "Android"
@@ -172,7 +157,7 @@ step 5.
 __`test/unit/controllerSpec.js`:__
 <pre>
 ...
-    it('should fetch phone detail', function(){
+    it('should fetch phone detail', function() {
       scope.params = {phoneId:'xyz'};
       $browser.xhr.expectGET('phones/xyz.json').respond({name:'phone xyz'});
       ctrl = scope.$new(PhoneDetailCtrl);
@@ -192,10 +177,10 @@ To run the unit tests, execute the `./scripts/test.sh` script and you should see
 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: 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)
 
 
 
@@ -251,17 +236,7 @@ Now that the phone details view is in place, proceed to step 9 to learn how to w
 custom display filter.
 
 
-<table id="tutorial_nav">
-<tr>
-<td id="previous_step">{@link tutorial.step_07 Previous}</td>
-<td id="step_result">{@link  http://angular.github.com/angular-phonecat/step-8/app Live Demo
-}</td>
-<td id="tut_home">{@link tutorial Tutorial Home}</td>
-<td id="code_diff">{@link https://github.com/angular/angular-phonecat/compare/step-7...step-8 Code
-Diff}</td>
-<td id="next_step">{@link tutorial.step_09 Next}</td>
-</tr>
-</table>
 
 
+<ul doc:tutorial-nav="8"></ul>
 
diff --git a/docs/content/tutorial/step_09.ngdoc b/docs/content/tutorial/step_09.ngdoc
index 8043af85..fc9ba360 100755
--- a/docs/content/tutorial/step_09.ngdoc
+++ b/docs/content/tutorial/step_09.ngdoc
@@ -1,36 +1,22 @@
 @ngdoc overview
-@name Tutorial: Step 9
+@name Tutorial: 9 - Filters
 @description
-<table id="tutorial_nav">
-<tr>
-<td id="previous_step">{@link tutorial.step_08 Previous}</td>
-<td id="step_result">{@link  http://angular.github.com/angular-phonecat/step-9/app Live Demo
-}</td>
-<td id="tut_home">{@link tutorial Tutorial Home}</td>
-<td id="code_diff">{@link https://github.com/angular/angular-phonecat/compare/step-8...step-9 Code
-Diff}</td>
-<td id="next_step">{@link tutorial.step_10 Next}</td>
-</tr>
-</table>
 
 
-In this step you will learn how to create your own custom display filter.
+<ul doc:tutorial-nav="9"></ul>
+
 
 
-1. Reset your workspace to Step 9 using:
 
+In this step you will learn how to create your own custom display filter.
 
-         git checkout -f step-9
 
 
-  or
 
+<doc:tutorial-instructions step="9"></doc:tutorial-instructions>
 
-         ./goto_step.sh 9
 
 
-2. Refresh your browser or check the app out on {@link
-http://angular.github.com/angular-phonecat/step-9/app angular's server}.
 
 Navigate to one of the detail pages.
 
@@ -51,7 +37,7 @@ GitHub}:
 
 
 In order to create a new filter, simply register your custom filter function with the {@link
-angular.filter `angular.filter`} API.
+api/angular.filter `angular.filter`} API.
 
 
 __`app/js/filters.js`:__
@@ -146,7 +132,7 @@ output.
 # Experiments
 
 
-* Let's experiment with some of the {@link angular.filter built-in angular filters} and add the
+* Let's experiment with some of the {@link api/angular.filter built-in angular filters} and add the
 following bindings to `index.html`:
   * `{{ "lower cap string" | uppercase }}`
   * `{{ {foo: "bar", baz: 23} | json }}`
@@ -170,14 +156,6 @@ Now that you have learned how to write and test a custom filter, go to step 10 t
 use angular to enhance the phone details page further.
 
 
-<table id="tutorial_nav">
-<tr>
-<td id="previous_step">{@link tutorial.step_08 Previous}</td>
-<td id="step_result">{@link  http://angular.github.com/angular-phonecat/step-9/app Live Demo
-}</td>
-<td id="tut_home">{@link tutorial Tutorial Home}</td>
-<td id="code_diff">{@link https://github.com/angular/angular-phonecat/compare/step-8...step-9 Code
-Diff}</td>
-<td id="next_step">{@link tutorial.step_10 Next}</td>
-</tr>
-</table>
+
+
+<ul doc:tutorial-nav="9"></ul>
diff --git a/docs/content/tutorial/step_10.ngdoc b/docs/content/tutorial/step_10.ngdoc
index 99a5dba8..3a8dbd38 100644
--- a/docs/content/tutorial/step_10.ngdoc
+++ b/docs/content/tutorial/step_10.ngdoc
@@ -1,36 +1,21 @@
 @ngdoc overview
-@name Tutorial: Step 10
+@name Tutorial: 10 - Event Handlers
 @description
-<table id="tutorial_nav">
-<tr>
-<td id="previous_step">{@link tutorial.step_09 Previous}</td>
-<td id="step_result">{@link  http://angular.github.com/angular-phonecat/step-10/app Live Demo
-}</td>
-<td id="tut_home">{@link tutorial Tutorial Home}</td>
-<td id="code_diff">{@link https://github.com/angular/angular-phonecat/compare/step-9...step-10 Code
-Diff}</td>
-<td id="next_step">{@link tutorial.step_11 Next}</td>
-</tr>
-</table>
 
 
-In this step, you will add a clickable phone image swapper to the phone details page.
+<ul doc:tutorial-nav="10"></ul>
 
 
-1. Reset your workspace to Step 10 using:
 
 
-         git checkout -f step-10
+In this step, you will add a clickable phone image swapper to the phone details page.
 
 
-  or
 
 
-         ./goto_step.sh 10
+<doc:tutorial-instructions step="10"></doc:tutorial-instructions>
 
 
-2. Refresh your browser or check the app out on {@link
-http://angular.github.com/angular-phonecat/step-10/app angular's server}.
 
 
 The phone details view displays one large image of the current phone and several smaller thumbnail
@@ -103,9 +88,10 @@ __`app/partials/phone-detail.html`:__
 We bound the `ng:src` attribute of the large image to the `mainImageUrl` property.
 
 
-We also registered an {@link angular.directive.ng:click `ng:click`} handler with thumbnail images.
-When a user clicks on one of the thumbnail images, the handler will use the `setImage` controller
-method to change the value of the `mainImageUrl` property to the url of the thumbnail image.
+We also registered an {@link api/angular.directive.ng:click `ng:click`} handler with thumbnail
+images. When a user clicks on one of the thumbnail images, the handler will use the `setImage`
+controller method to change the value of the `mainImageUrl` property to the url of the thumbnail
+image.
 
 
 <img src="img/tutorial/tutorial_10-11_final.png">
@@ -197,14 +183,6 @@ With the phone image swapper in place, we're ready for step 11 (the last step!)
 better way to fetch data.
 
 
-<table id="tutorial_nav">
-<tr>
-<td id="previous_step">{@link tutorial.step_09 Previous}</td>
-<td id="step_result">{@link  http://angular.github.com/angular-phonecat/step-10/app Live Demo
-}</td>
-<td id="tut_home">{@link tutorial Tutorial Home}</td>
-<td id="code_diff">{@link https://github.com/angular/angular-phonecat/compare/step-9...step-10 Code
-Diff}</td>
-<td id="next_step">{@link tutorial.step_11 Next}</td>
-</tr>
-</table>
+
+
+<ul doc:tutorial-nav="10"></ul>
diff --git a/docs/content/tutorial/step_11.ngdoc b/docs/content/tutorial/step_11.ngdoc
index 9b8b6ce4..7a176591 100644
--- a/docs/content/tutorial/step_11.ngdoc
+++ b/docs/content/tutorial/step_11.ngdoc
@@ -1,36 +1,19 @@
 @ngdoc overview
-@name Tutorial: Step 11
+@name Tutorial: 11 - REST and Custom Services
 @description
-<table id="tutorial_nav">
-<tr>
-<td id="previous_step">{@link tutorial.step_10 Previous}</td>
-<td id="step_result">{@link  http://angular.github.com/angular-phonecat/step-11/app Live Demo
-}</td>
-<td id="tut_home">{@link tutorial Tutorial Home}</td>
-<td id="code_diff">{@link https://github.com/angular/angular-phonecat/compare/step-10...step-11
-Code Diff}</td>
-<td id="next_step">Next</td>
-</tr>
-</table>
 
 
-In this step, you will improve the way our app fetches data.
-
-
-1. Reset your workspace to Step 11 using:
+<ul doc:tutorial-nav="11"></ul>
 
 
-         git checkout -f step-11
 
 
-  or
+In this step, you will improve the way our app fetches data.
 
 
-         ./goto_step.sh 11
 
 
-2. Refresh your browser or check the app out on {@link
-http://angular.github.com/angular-phonecat/step-11/app angular's server}.
+<doc:tutorial-instructions step="11"></doc:tutorial-instructions>
 
 
 
@@ -38,7 +21,7 @@ http://angular.github.com/angular-phonecat/step-11/app angular's server}.
 The last improvement we will make to our app is to define a custom service that represents a {@link
 http://en.wikipedia.org/wiki/Representational_State_Transfer RESTful} client. Using this client we
 can make xhr requests for data in an easier way, without having to deal with the lower-level {@link
-angular.service.$xhr $xhr} API, HTTP methods and URLs.
+api/angular.service.$xhr $xhr} API, HTTP methods and URLs.
 
 
 The most important changes are listed below. You can see the full diff on {@link
@@ -68,23 +51,24 @@ __`app/index.html`.__
 
 __`app/js/services.js`.__
 <pre>
- angular.service('Phone', function($resource){
+ angular.service('Phone', function($resource) {
   return $resource('phones/:phoneId.json', {}, {
-    query: {method:'GET', params:{phoneId:'phones'}, isArray:true}
+    query: {method: 'GET', params: {phoneId: 'phones'}, isArray: true}
   });
  });
 </pre>
 
 
-We used the {@link angular.service} API to register a custom service. We passed in the name of the
-service - 'Phone' - and a factory function. The factory function is similar to a controller's
+We used the {@link api/angular.service} API to register a custom service. We passed in the name of
+the service - 'Phone' - and a factory function. The factory function is similar to a controller's
 constructor in that both can declare dependencies via function arguments. The Phone service
 declared a dependency on the `$resource` service.
 
 
-The {@link angular.service.$resource `$resource`} service makes it easy to create a {@link
+The {@link api/angular.service.$resource `$resource`} service makes it easy to create a {@link
 http://en.wikipedia.org/wiki/Representational_State_Transfer RESTful} client with just a few lines
-of code. This client can then be used in our application, instead of the lower-level `$xhr` service.
+of code. This client can then be used in our application, instead of the lower-level {@link
+api/angular.service.$xhr $xhr} service.
 
 
 
@@ -93,10 +77,10 @@ of code. This client can then be used in our application, instead of the lower-l
 
 
 We simplified our sub-controllers (`PhoneListCtrl` and `PhoneDetailCtrl`) by factoring out the
-lower-level `$xhr` service, replacing it with a new service called `Phone`. Angular's {@link
-angular.service.$resource `$resource`} service is easier to use than `$xhr` for interacting with
-data sources exposed as RESTful resources. It is also easier now to understand what the code in our
-controllers is doing.
+lower-level {@link api/angular.service.$xhr $xhr} service, replacing it with a new service called
+`Phone`. Angular's {@link api/angular.service.$resource `$resource`} service is easier to use than
+{@link api/angular.service.$xhr $xhr} for interacting with data sources exposed as RESTful
+resources. It is also easier now to understand what the code in our controllers is doing.
 
 
 __`app/js/controllers.js`.__
@@ -168,12 +152,13 @@ processing them as expected. The tests also check that our controllers are inter
 service correctly.
 
 
-The `$resource` client augments the response object with methods for updating and deleting the
-resource. If we were to use the standard `toEqual` matcher, our tests would fail because the test
-values would not match the responses exactly. To solve the problem, we use a newly-defined
-`toEqualData` {@link http://pivotal.github.com/jasmine/jsdoc/symbols/jasmine.Matchers.html Jasmine
-matcher}. When the `toEqualData` matcher compares two objects, it takes only object properties into
-account and ignores methods.
+The {@link api/angular.service.$resource $resource} client augments the response object with
+methods for updating and deleting the resource. If we were to use the standard `toEqual` matcher,
+our tests would fail because the test values would not match the responses exactly. To solve the
+problem, we use a newly-defined `toEqualData` {@link
+http://pivotal.github.com/jasmine/jsdoc/symbols/jasmine.Matchers.html Jasmine matcher}. When the
+`toEqualData` matcher compares two objects, it takes only object properties into account and
+ignores methods.
 
 
 
@@ -192,7 +177,7 @@ describe('PhoneCat controllers', function() {
   });
 
 
-  describe('PhoneListCtrl', function(){
+  describe('PhoneListCtrl', function() {
     var scope, $browser, ctrl;
 
 
@@ -201,8 +186,8 @@ describe('PhoneCat controllers', function() {
       $browser = scope.$service('$browser');
 
 
-      $browser.xhr.expectGET('phones/phones.json').respond([{name: 'Nexus S'},
-                                                            {name: 'Motorola DROID'}]);
+      $browser.xhr.expectGET('phones/phones.json')
+          .respond([{name: 'Nexus S'}, {name: 'Motorola DROID'}]);
       ctrl = scope.$new(PhoneListCtrl);
     });
 
@@ -225,7 +210,7 @@ describe('PhoneCat controllers', function() {
 
 
 
-  describe('PhoneDetailCtrl', function(){
+  describe('PhoneDetailCtrl', function() {
     var scope, $browser, ctrl;
 
 
@@ -241,7 +226,7 @@ describe('PhoneCat controllers', function() {
     });
 
 
-    it('should fetch phone detail', function(){
+    it('should fetch phone detail', function() {
       scope.params = {phoneId:'xyz'};
       $browser.xhr.expectGET('phones/xyz.json').respond({name:'phone xyz'});
       ctrl = scope.$new(PhoneDetailCtrl);
@@ -262,10 +247,10 @@ To run the unit tests, execute the `./scripts/test.sh` script and you should see
 output.
 
 
-       Chrome: Runner reset.
-       ....
-       Total 4 tests (Passed: 4; Fails: 0; Errors: 0) (3.00 ms)
-         Chrome 11.0.696.57 Mac OS: Run 4 tests (Passed: 4; Fails: 0; Errors 0) (3.00 ms)
+    Chrome: Runner reset.
+    ....
+    Total 4 tests (Passed: 4; Fails: 0; Errors: 0) (3.00 ms)
+      Chrome 11.0.696.57 Mac OS: Run 4 tests (Passed: 4; Fails: 0; Errors 0) (3.00 ms)
 
 
 
@@ -278,17 +263,5 @@ There you have it!  We have created a web app in a relatively short amount of ti
 
 
 
-<table id="tutorial_nav">
-<tr>
-<td id="previous_step">{@link tutorial.step_10 Previous}</td>
-<td id="step_result">{@link  http://angular.github.com/angular-phonecat/step-11/app Live Demo
-}</td>
-<td id="tut_home">{@link tutorial Tutorial Home}</td>
-<td id="code_diff">{@link https://github.com/angular/angular-phonecat/compare/step-10...step-11
-Code Diff}</td>
-<td id="next_step">{@link tutorial/the_end Next}</td>
-</tr>
-</table>
-
-
+<ul doc:tutorial-nav="11"></ul>
 
diff --git a/docs/content/tutorial/the_end.ngdoc b/docs/content/tutorial/the_end.ngdoc
index 8e307998..fd96a920 100644
--- a/docs/content/tutorial/the_end.ngdoc
+++ b/docs/content/tutorial/the_end.ngdoc
@@ -2,20 +2,26 @@
 @name Tutorial: The End
 @description
 
+
 Our application is now complete. Feel free to experiment with the code further, and jump back to
 previous steps using the `git checkout` or `goto_step.sh` commands.
 
+
 For more details and examples of the angular concepts we touched on in this tutorial, see the
-{@link guide Developer Guide}.
+{@link guide/ Developer Guide}.
+
+
+For several more examples of code, see the {@link cookbook/ Cookbook}.
 
-For several more examples of code, see the {@link cookbook Cookbook}.
 
 When you are ready to start developing a project using angular, we recommend that you bootstrap
 your development with the {@link https://github.com/angular/angular-seed angular seed} project.
 
+
 We hope this tutorial was useful to you and that you learned enough about angular to make you want
 to learn more. We especially hope you are inspired to go out and develop angular web apps of your
-own, and that you might be interested in {@link intro.contribute contributing} to angular.
+own, and that you might be interested in {@link misc/contribute contributing} to angular.
+
 
 If you have questions or feedback or just want to say "hi", please post a message at {@link
 https://groups.google.com/forum/#!forum/angular}.